kokeblog

古民家カフェのWebサイトデザインを終えて

  • 2019年12月04日
  • いつの間にか12月になり、一気に寒くなってきましたね。みなさん体調等、大丈夫でしょうか?こんにちは、小林健人です。

    今回、学校の課題で古民家カフェ虎威殿のWebサイトデザインをしました。古民家カフェということで、「和風っぽさ」ということを意識してデザインしていきました。自分の中での整理という意味も兼ねて、詳しくまとめていきます。下の画像が今回のサイトのデザインです。

    デザインのポイント

    全体的に意識したところ

    まずは全体的に意識したところをまとめていきます。

    完全予約制のディナーがあるということで、他の古民家カフェよりも敷居が高めだったので高級感ということを中心に考えました。ただ、高級感の中にも和風っぽさやカフェらしさがあるように心がけました。あとは、サイトとして情報がきちんとまとまっていて、どこに何があるのかわかりやすいように空白を開けたり、文字の大きさなどを意識し、考えながらデザインしました。

     

    カラーについて

    カラーについてまとめていきます。

       
    メインカラー #8a6a21
    アクセントカラー #937a37
    背景色 #1a1a1a
    文字色 #f3f3f3

     

    使った色を表にまとめました。

    メインカラーとアクセントカラーはトーンオントーン配色にしました。メインカラーは予約のボタンなど目立たせる部分や各セクションのタイトルのボーダーなどに使いました。アクセントカラーはお知らせの下にあるバナー風のところを少し目立たせたかったので、文字の背景に使いました。

    高級感と和風っぽさを意識した時、背景が黒にメインカラーを金にするのが一番、高級感と和風っぽさが表現できると考えました。ただ、背景を#000にすると少しチカチカして見にくいので少しグレーっぽい色の#1a1a1aしました。

    文字色も、背景色と同様に#fffだと見にくいので真っ白ではない#f3f3f3にしました。

     

    フォントについて

    今回、使用したフォントは游明朝です。

    和風ということでフォントは明朝体がいいとまず考えました。いろいろと明朝体のフォントを比べてみましたが游明朝は他の明朝体と比べても綺麗に表示でき、WindowsでもmacOSでも游明朝のまま表示できるのでフォントは游明朝にしました。

    今回の反省点

    今回の反省点をまとめていきます。

    全体的には高級感を意識しすぎて、カフェらしさが弱くなってしまったのがよくなかったなと見返していて思いました。細かい部分としては、マップの作り込みが甘く、わかりにくく、サイトの雰囲気にマッチしていない感じになってしまいました。フッターの部分も要素を詰め過ぎてしまっているので、もう少し余白をあったが見やすいし、見栄えも良かったかなと思います。

    あとはデザインの部分ではないのですが、作業効率が悪く、期限を少し過ぎてしまったのもよくなかったです。作業が遅くなってしまって、最後の方の要素のマップやフッターの作り込みが甘くなることにも繋がったかなと思います。

    まとめ

    今回、学校の課題ということで古民家カフェ虎威殿のWebサイトのデザインをしましたが、今までよりもサイト内の要素が多く、その分時間がかかったりデザインに悩むことも多くなりました。結構な時間をかけてしまっていたので、もう少し作業の効率を上げていければなあ…もっとガンガン制作して行くしかないですね!

    Pocket

    関連記事

    自分用の名刺デザインしました!

    ポートフォリオサイトを制作しました!

    オープンキャンパスのバナーデザイン

    矯正歯科、こども歯科の名刺デザイン

    カテゴリー