○テーマ
取材を行い、
“実際のお仕事と似た工程”をテーマに、完成まで仕上げる。
取材の申し込みから始まり、取材をし、店主さんからお店のカラーやターゲットとなるお客様、お店がお客様に伝えたいことをお聞きした上で1度ラフデザインを描き出し、店主さんと確認。その後、XDによるプロトタイプ作成、コーディングという流れで行いました。
○内容
-
使用言語
HTML、Sass、JavaScript、PHP
-
ターゲット
23~29歳の、少し遠出をしてでも美味しいラーメン屋さんを探す男性
-
デザインコンセプト
店内のカフェっぽい雰囲気をメインビジュアルで伝えることで若者に来てもらいやすくし、“鶏にひたすら拘った味は間違いのないラーメン屋さん”を力強い雰囲気とライティングで伝える。
-
追加ポイント
定期的に更新が必要なTopics部分について、普段PCを扱わない店主さんが容易に更新できるようPHPを用い、.txtファイルを読み込み反映させる形式にしている。
-
良かったこと
制作を通じて得たこと最大の成果は実際に使用したいと言っていただけたこと。
それまでの制作とは違った経験ができた。 -
苦労したこと
制作を通しての反省点“自分の好きなように表現する”ではなく、“想いや考えを汲み取り表現する”というのが難しく、イメージ通りの表現ができているか、いざ確認していただく際に勇気が必要だった。
○ストーリー
-
● 一目で雰囲気や世界観
ラーメン屋さんのサイトを見に来る人がまず知りたいのは“どんなラーメンなのか”、“入店しやすい雰囲気なのか”の2択だと考える。最初にラーメンの画像をドンッ！と見せることも考慮したが、“ラーメン屋さんっぽくないカフェの様な雰囲気”が店主の拘りであるため、メインビジュアルには店内の全景画像を選択。
-
● 次に知りたいことは？
店内の雰囲気が分かれば、次に知りたいことは“どんなラーメンなのか”、成り立ちや想い等の“歴史”だと考える。物語のように伝えるため、誘導文を使用。また、注文に迷うことを想定し、“まずはコレ！”という意味を込め、店舗紹介ページで敢えて特定のラーメンを紹介。また、“味は間違いのないラーメン”＝“歴史を感じる、拘りのあるラーメン”だと考え、トップに唐絵を添える。
-
● 次に知りたいことは？
お店の歴史と看板ラーメンを知ることができたのなら、残るは“メニューの種類と詳細”。多様なメニューがあるため、グランドメニュー、サイドメニューを切り替え表示。
-
● 他に紹介することは？
本店の情報はほぼ伝えることができた。であれば、近年OPENした2号店について。1ページのみでの展開であるため、slickを使用し、店舗の雰囲気を一気に感じてもらう。本店の“こってり鶏白湯”に対し、“あっさり鶏清湯”が唯一の特徴であるため、キャッチコピーに鶏清湯の画像を使用。
-
● アクセス情報
