01 コンセプト
創業７０年を誇る豊橋市のソウルフード『ヨシノパン』が閉店してから３年後、そのヨシノパンの息子さんがコロナの影響でなくなってしまった街の活気を取り戻すために、新たに『ヨシノパーラー』というお店をオープンさせました。そんな地元愛に溢れた、あたたかいお店の雰囲気に似合うホームページを作らせていただきました。
02 要望
サイト内の色は緑、黄色を使用して欲しいです。ロゴに合うようないい感じの配色でお願いします。
レトロな柄を取り入れてどこかポップで懐かしさを感じるようなサイトにして欲しいです。レトロ可愛い感じ。お店の売りである『チーズパン』と『クレープ』の良さが伝わるようなページもあるといいかなと思います。
03 仕様
- サイト内の画像は公式Instagramに投稿されている写真を使っても良い（加工も自由）
- 公式のロゴがあるのでそれをそのまま使うこと
04 仕様ツール
Photoshop・HTML・CSS・JavaScript・JQuery・
VSCO (画像加工)
05 制作期間
3ヶ月
06 工夫した点
お店の方から『レトロ可愛い』サイトにしてほしい、という要望をいただいたので、配色、コンテンツの配置の仕方、柄の取り入れ方を特に工夫しました。私が一番気に入っているところはやはりトップページのデザインです。ファーストビュー内にあるストライプ柄、そしてSNS紹介部分の七宝つなぎ柄は見る人の目をグッと惹きつけ、小洒落たレトロ感を演出します。サイト内コンテンツ紹介の部分は控えめに水玉模様を入れる程度にし、あくまでも見やすさを優先させました。トップページだけでなくサイト全体的に、デザインにうまくメリハリをつけることができたのではないかと思います。
07 制作過程
トップページのボツ案のラフ画です。
変更点は、
- 無駄にクリック数を増やしたくないので、グローバルナビゲーションはスマホでのみハンバーガーメニューで表示する。
- 写真スライドの横に縦書きのキャッチコピーを置くことをやめ、スライドの下にキャッチコピーを配置した。ゴシック体と縦書きの組み合わせが圧倒的にミスマッチ。
- コンテンツ紹介の部分はイラストを入れようとしたが、店主の方から『イラストより写真を使って欲しい』とお願いされたので急遽写真に変更。
- ページ下部のスライドショーはメニューページへ移動。
です。
見応えがあるかな、と考えて最初はアニメーションも盛りだくさん入れる予定でしたが、そうするとどうしても少し見にくくなってしまいます。店主の方と話し合いをしていく中で、このサイトのターゲットを40代以上の男女に定めたので、やはりアニメーションを少なめにして、見やすさを最優先させたサイトにしていこう、ということで制作を進めました。
チーズパン（クレープ）特集ページのボツ案のラフ画です。
最初はファーストビューに大きくスライドショーを配置してその下によく雑誌にあるようなスマートなデザインのインタビュー記事を載せる予定だったのですが、いざPhotoshopで実装してみるとレトロ感というものが全く感じられませんでした。なので、改めて店主の方と相談をし、思い切って画像をなくして、LINEのようなチャット風のデザインのインタビュー記事を載せることに決定しました。
08 完成作品
作品URL https://momokaaa.parasite.jp/yoshino_parlor/
トップページは全体のスクリーンショットをすると、スライドショーの画像がどうしてもずれてしまうので、二つに分けさせていただきました。ご了承願います。
