架空のサラダ店のランディングページのデザインカンプを作成しました。
デザインカンプの画像が縦に長く掲載しきれないため、Figmaへのリンクを下記に貼りました。
架空サラダ店LPのデザインカンプはこちら（Figmaのアカウントがなくても閲覧可能です）
概要
独学でWEBデザインの勉強をしていたときに制作したものです。LPのデザインコンテストに参加した作品で、その際のお題が架空サラダ店のLPでした。
職業訓練で身につけたHTML /CSSの技術を使ってコーディングをしてみました。
＜制作期間＞
デザインカンプ：4日間
コーディング：2日間
＜使用ツール＞
Figma：デザインカンプ作成
Photoshop：画像の切り抜き作業
Visual Studio Code：コーディング作業
＜設定＞
サラダの専門店をオープンするので商品のこだわりであったり、他のショップとの違いをアピールできるショップのサイトが欲しい
サイトは一枚でまとめる
ターゲットは、
表参道勤務の20~40代の女性（健康志向、所得は高め、Instagramで食事をアップする）
筋トレが習慣の20~40代男性（タンパク質をとりたい、所得多め、こだわり強め）
デザインするにあたって考えたこと
◆CV：多くの人にお店に来店してもらう。できれば、ここのサラダを食べに来ることを習慣化してもらいたい。
◆ターゲット：美意識（心身ともに）の高い男女。雑誌で例えるなら「Pen」や「FIGARO」「ELLE」あたり、海外のトレンドが載っているようなジャンルのものを読む層に響くイメージ。
◆いつ来店してもらうか：美容に気を遣い始めた時、筋トレやランニングの効果をもっと高めたいと思った時。ベジタリアンやヴィーガンなどに共感を抱き始めた時。
◆なぜ来店するか：健康に良く、安心安全な食材をお腹いっぱい食べたい。心身ともにキレイになれる気がするから。ベジタリアン、ヴィーガンメニューを提供しているお店を探して。
◆どこで・どのようにHPを見るか：家やカフェなど空き時間に。Instagramや検索から。
【競合サイトなどからの分析】
◆健康志向、こだわり強め：どのような食材が使われているか、チェックしている。
→メニューにカロリー、塩分表示をする。ヴィーガン向けメニューにマークをつける。
→メニューセクションに具体的な食材名を記載する。
→素材の写真も使う。
→注文方法を記載して、自分で選べる楽しみを伝える。
◆飲食店：提供メニューの写真が魅力的で、たくさん載っている。
→写真をたくさん使う。大きめに配置する。
悩んだところ
ターゲットとしている「表参道勤務の20〜40代男女」をイメージしづらかったことがありました。どのような思考でどのような生活をしているかを考えたかったので、それを解決する方法として、読んでいる「雑誌」をとっかかりとして考えていくことにしました。
デザインについて
サラダや使用している食材の鮮やかさを強調させるためと、ターゲットが読んでいそうな雑誌のイメージから、サイトのベースの色をモノトーンにすることにしました。過度な装飾も排除し、写真の良さが際立たせるようにしました。
また、ロゴも自作しました。
フォントは、サイトの雰囲気を印象付ける役割を英字の「Montserrat」に担わせました。男女ともに訴求したかったのでゴシック体でスタイリッシュな印象を持たせたかったからです。また、少し上下が潰れていて丸みもあり少し可愛らしい部分もあるので、サラダを日常生活に取り入れてもらいたい目的から、親しみも感じる「Montserrat」を選択しました。
日本語の「游ゴシック」は、英字の「Montserrat」に合わせて相性が良いと考えたので選択しました。