Kotohako
  works

Web site

架空カフェサイトの写真

架空キッズカフェ
Cat's Cradleのサイト作成
(スクール修了課題)

こちらからページに移動します。

使用ソフト

Adobe Photoshop Illustrator Dreamweaver XD

制作期間 

約2ヶ月

ターゲット

小さなお子さんのお世話で毎日が大変なパパとママ。

時々はカフェに行ってゆっくりしたいけれど
家の中でも外に出かけても
飲み物をこぼしちゃったり
ごはんも上手く食べられなくて

ゆっくりできそうにないと
カフェに行くのをあきらめていました。

そんなパパとママたちにもほっと一息つけるような
お子さんと楽しみながらゆっくりできる
カフェのご案内をするサイトを作成しました。

サイト構成

パパママがゆっくり過ごしたり
楽しめる工夫のあるカフェの
様子を伝えられるように
やさしい雰囲気のサイトを作成しました。

PCサイト

MENUページの写真_PC版

Mobileサイト

MENUページの写真_Mobile版

工夫した点
MENUページ

ランチメニュー画面では
あれも、これも食べたいなあと思っていただけるように
美味しい食べ物の写真を
たくさん載せたいと考えました。

一度添削をお願いしましたたところ、
講師の先生から、モバイル版では、
写真を並べるとスクロールの回数が多くなり
閲覧しづらくなってしまうため

MENU画面のMobile版にSliderを用いて
写真が順番に切り替わるようにすることを
ご提案いただき、実装を行いました。

PCサイト

お問合せページの写真_PC版

Mobileサイト

お問合せページの写真_Mobile版

工夫した点
お問合せページ

お問合せ画面では
お店のお席予約システムを設置しました。

お子様の急な体調不良などで
予約がキャンセルすることになっても

前日までにご連絡いただければ
キャンセル料はいただきませんので
安心して利用できるシステムとなっております。

お客様にお席の不安などなく
安心してご利用いただける
予約システムの実装を行いました。

サイト作成を行ってみて

このサイト作成では、
お客様のペルソナを作成するところから始まり

お客様にどうしたら喜んでもらえるか
情報をわかりやすく伝えるためのページレイアウトを考え、
ワイヤーフレームを作成していきました。

サイト作成に入る前に考えないといけないことが
たくさんあるのだなということがとても勉強になりました。

今回は架空のサイトなので
クライアント様にヒアリングすることができなかったのですが

実際の案件では、クライアント様の要望を
しっかりヒアリングし、時々チェックを行いながら

クライアント様の要望をサイト作りに確実に
反映させていく事が重要だとわかりました。

また、ワイヤーフレームからコーディングを行うことは
動画を観ながらだと理解できましたが

実際に自分で行っていくと、コーディングが上手くいかず
思っていた以上に時間がかかってしまい、
提出日ギリギリまで修正を行っていました。

サイトデザインに時間をかけたかったのですが
コーディングに時間がかかってしまったので
最低限ワイヤーフレームに描いた通りに
正しく表示されるようにコーディングすることを目標にしました。

これからデザインをするときには
もっとみなさんに喜んでいただけるようなデザインが出来るように
色々なサイトをみて勉強して作り続けていきたいと思っています。

^