素材を活かすサラダを提供する企業のコンセプトから、 メニューの写真が映えるように余白をとりシンプルなデザインを心掛けた。
カラーにはルールを設けて必要最小限の使用に留めた。（見出し、小見出しの下線や数字に使用）また、写真の大きさや形も情報ごとに使い分け統一感を持たせるよう意識した。コーディング面ではjQueryのAjax機能をニュース部分で使用し、メモ帳に入力するだけで更新できるよう実装した。お問い合わせフォームの作成ではPHPを使用し、取得した値をGoogle formと連携させ、入力された値がGoogleスプレッドシートに送信されるように実装。ロゴはSVGで書き出し、使用した画像は容量が大きいため圧縮させ、表示速度の改善に努めた。作業を進める中で、全体のデザインに一貫性があるか確認しながら制作した。
要件定義 
都内に2店舗を構えるサラダボウル専門店。素材にこだわった、主食になるサラダがコンセプト。生産者と消費者の健康を繋ぐ存在であり、心も身体も満足できるサラダを提供する。健康を意識している、特にミレニアル世代(2022年に27歳から42歳を迎える世代)をターゲットにしている。それらの世代に刺さるようなサイトを制作する。
サイトのメニューページの情報量が多い為、全体的に見づらい印象。商品情報が分かりやすいページにしたい。
余白をとり、必要な情報が伝わりやすいページを作る。
#シンプル #写真メイン #硬すぎない
野菜を連想させる緑をメインカラーにした。サブカラーにはポジティブで明るい印象の黄色を設定し、商品を食べること＝健康的でプラスのイメージを印象付けるようにした。
Google Fontsを使用。日本語には明朝体を使い、シンプルで洗練された印象を表現することで商品に使用している食材へのこだわり、品質の良さを伝える。
bxSlider、simpleパララックス、AOS.js
カンプ時点でのデザインは、コーディング作業を踏まえてシンプルな骨組みにした。あらかたのコーディングを終えたのち、よりお店らしさが伝わるように要素を付け加えた。写真の角がシャープな印象になりすぎるため、一部丸みにある形に変更。flex boxを用いて、視線誘導を意識した配置に直した。
