架空和風カフェ「虎威伝」のデザインについて

はじめに

みなさん、こんにちは!!
最近、急に寒くなってきて体調管理が難しくなってきましたね💦
みなさんも体調に気をつけながら残りわずかな2024年を健康に過ごしていきましょう!!
さて、おしゃべりはこの辺にして本題に入っていきましょう。長期間にわたって制作した和風サイトのデザインがとうとう完成しました!!そこでデザインのこだわりポイントについたお話私ていこうと思います。ぜひ最後まで見ていってください!

配色について

まず配色についてお話していきたいと思います。サイトの配色で和風らしさを出そうとしたとき、私が真っ先に思いついた色は日本の国旗の色である赤と白でした。でも、それだと要望である移り変わる都会の街並みを表現するのが難しいと思いました。そこで私は、都会らしい色で品があり、和風らしい色を考えた結果、都会の街並みの夜空をイメージした暗い青色と、都会の街並みの光をイメージした黄色に決めました。ただ原色に近いと元気ぽっさが強まってしまうと思ったので、少し明度を低くして品のある色になるように工夫しました。

フォントについて

次はフォントについてお話ししていきたいと思います。和風らしいフォントといえば明朝体のような筆で書いたような「はね」や「はらい」がはっきりした書体の印象が強かったので、さらにそこに加えて読みやすさ・見やすさにも重視して教科書に載っているお手本のような書体である「游教科書体」を使い、ナビゲーションには「ヒラギノ明朝」を使いました。

工夫したことについて

次に工夫したことについて２つお話していきたいと思います。
1つ目はファーストビューについてです。ファーストビューはサイトを見る際にぱっと見ただけでどんな雰囲気のサイトなのかを伝えることが大切だと思ったので、カフェの売りである夜ディナーの時間帯の建物の写真を使ってその中にキャッチコピーやナビゲーションを入れることで写真を大きく使ったファーストビューにすることができました。さらにど真ん中に虎威殿のロゴであるマークを半透明にして配置することで家紋のようなイメージを再現しました。ナビゲーションも縦書きにするなど和風らしさを取り入れました。

2つ目はお品書きの部分についてです。お品書きは夜ディナーだけはこのカフェの特に推しているところなので他の「お食事」「お飲み物」「甘味」とは雰囲気を変えることを意識しました。なので、夜ディナー以外の項目は優しく、温かな雰囲気を感じられるように黄色と白を基準にデザインしました。あとは視線誘導を意識して背景のキラキラの飾りを配置しました。

そして肝心の夜ディナーはいかに高級感が出せるかを意識してデザインしました。配色は黒色を取り入れることで高級感や落ち着きを表現しました。ただ黒だけだと怪しさや不安さも感じられると思ったのでアクセントとして白と金色を使うことで華やかさや上品な感じを演出することができました。
背景のひし形は高級和食屋が食事を並べるときに使う机にひく和紙のようなものをイメージしてデザインしました。

おわりに

今回は和風サイトのデザインについてお話ししました。配色やイラストだけでしか雰囲気を表現できないと思っていたけど、フォントの種類やサイズ、行間などでも高級感や上品さ、和風らしさを表現できるということを学ぶことができました。これを機会にいろんな雰囲気のサイトを見て、今後のサイト制作に活かしていきたいと思います。