【自主制作】オーガニックカフェ ホームページデザイン〜実装

OVERVIEW

オーガニックカフェをテーマにホームページのデザインカンプを作成、STUDIOにて実装まで行いました。 制作時間:5日程度

YEAR 2023

■ 要件定義

【 ターゲット 】

・20代〜40代の女性

・普段から健康食品や健康、内面からの美しさに興味がある人

・体に優しいオーガニック食材を使って家で料理をしたいけど、作るのにはハードルが高い人

・健康にこだわりはあるが味気のないものよりもきちんと美味しいものを食べたい人

・都会にいながらも緑がある空間でリラックスした時間を過ごしたい人

・食事の時に原材料や成分をついつい気にしてしまう人

・体型維持や美容のため美味しいヘルシーな料理を食べたいと思っている人

【 制作目的 】

・新規オープン向けてホームページの作成

【 方向性イメージ 】

・爽やか、ナチュラルテイストで緑色、茶色をメインに

・緑に囲まれたオーガニックカフェであることを視覚的に伝える(植物の画像やあしらいを入れる)

・線は細めでスタイリッシュ、綺麗め系に

・余白は多めに取り、ゆったりとした印象を

【 指定条件 】

・ホームページサイト制作(PC)


◾️制作サイト

サイトURL:https://thegardencafe.studio.site




■ 制作のポイント

・体に良い食材を使っている料理を提供しているレストランであることを強く印象付けるようなファーストビューの写真を選びました。

・立体感をつけるために写真に影をつけたり、動きをつけるために植物の写真を配置しました。

・配置した写真の色味や明るさを一枚一枚調整し、全体の雰囲気を合わせるようにしました。

・RESERVEのセクションが一番際立つように、観る人がクリックしてもらいやすいレイアウトや、ボタンを他のセクションとは違う雰囲気で作成しました。



■ 制作物

ワイヤーフレーム

デザインカンプ<修正前>


修正ポイント

・固定のセクション幅を設定
・2カラムになっているコンテンツは、上揃えに(上下中央揃えになってした)
「MENU」セクションの行間の大きさを統一、「MENU」と「NEWS」セクションの行間の統一


デザインカンプ<修正後>