和菓子屋「花芽」Webサイト！

こんにちは、お疲れです。AIMAIは。というわけで今回は、クライアントをつけ、ここ４ヶ月ほどをかけて制作したWebサイトについて紹介していきます！入学してから一年の集大成です。ぜひみていってください！！！

実際のサイトはこちらから！

制作への経緯

『進級展』という、トライデント専門学校Webデザイン学科一年生の集大成をお見せするイベントがあり、それに向けて一つ本腰を入れた制作物を作ることになっています。そこで、自分が昔バイト先でお世話になって、最近お店をオープンした方にお願いして、そのお店＿花芽のWebサイトをつくらせてもらうことになりました。サイト制作に向けて動き出したのが去年の10月で、そこからヒアリングを重ね、デザインを決め、コーディングをして、発表の準備をし…と一人でやってきました。

企画固め〜ヒアリング

ヒアリング前に構想を固めるために手書きで思考しています。こういうアイデアを羅列する時は手書きで自由配置で書く方が捗る気がするんですよね…ボールペンよりシャーペン派です。

ここでまとめたアイデアをもとにヒアリングに臨みました。最初の対面ヒアリングでは花芽が大事にしていること、全体の雰囲気をどうしていきたいかを聞き、親しみやすさを軸に、女性らしく柔らかい雰囲気でまとめていくことが決まりました。また、それまで使用していたロゴと、「今日が花めく和のお菓子」というキャッチフレーズをサイトで使って欲しいとの依頼もありました。ヒアリングのあとはメールで逐一デザインを確認しながら細かい調整をしていきました。

デザイン

デザインはFigmaを使用して行いました。このデザインを通じてオートレイアウトを割と使いこなせるようになった気がします。そしてオートレイアウトがないとダメな体にもなりました。便利！！！

デザインでのこだわりをいくつか紹介しようと思います。
まずは配色についてです。オーナー様から黄色を主として優しく懐かしさのある色を使用して欲しいと要望がありました。そこで、花芽で以前から使用されていたポスターの配色を参考にして、コントラスト比も考慮した色を使用しています。無彩色を入れないことで優しい印象にしています。

和の要素を出すために、表題などに縦書きのデザインを取り入れています。パソコン版だと固定ヘッダーが左側に縦に配置してあるのはなかなか珍しくていいデザインじゃないかなと思います。堅苦しくなりすぎないように、縦書きを採用するのは一部のみにしました。

ハンバーガーメニューのボタンは、花芽にちなんで蕾が花開くようなデザインにしました。5枚の画像を作成しぱらぱら漫画のように再生しています。脳筋……

使用する画像は、花の形に切り取られるようにコーディングしています。ブラウザのウインドウ幅を変えても切り取りの形がそれに合わせて変わるようにするのが大変でした。きちっとした真っ直ぐの線になっていないのも、手作り感を出すためのこだわりです。

コーディング

https://github.com/aimai2529/haname_code
↑ここからコードを公開しています。

授業で習ったばかりであったBEMの形式で、SCSSを使ってコードを書いています。SCSS、便利〜〜〜！VSコードからGitHubにあげる時のメッセージが適当なのには目を瞑ってください…

コーディングの時に大変だったのはmicroCMSとInstagramAPIの組み込みでした。
microCMSは、サイトの”営業日カレンダー””本日の品揃え””季節の商品”のところが更新できるようになっています。

発表

プレゼンで実際に使ったスライド

プレゼンは私の得意分野です。私の花芽へのありふれる愛をなるべく伝えられるように、スライドの前に出て熱弁させていただきました。聞きに来てくださった企業様に「新鮮な気持ちで聴くことができた」「印象に残るプレゼンだった」とお褒めの言葉をいただきました。

一通り終えての感想

一言で言えば、大変でした、、、。ですが、大好きなお店を広められるお手伝いを、公認でできると言うことで、やりがいを感じることができました。デザインをお店の方に見せるたびにすごい！と言っていただけるのが本当に本当に嬉しかったです。

いまは夏頃に公開できるように細かい調整を進めています。

ひとくち日記

本当に最高に美味しい和菓子を花芽では作っているので、ぜひいちど食べに行ってください。和菓子はいいぞ！！