pickles

pickles

制作内容

■ 学校課題 架空サイト制作 / 2024年7月
デザインカンプ / コーディング
■ 制作時間 学校6時間+その他3日間
■ 使用ツール Photoshop / Dreamweaver
■ 対応機種

レスポンシブ対応

■ 制作依頼書
  • タイトル・ナビを含むテキストは指定文章(NEWSコンテンツ除く)
  • ロゴ・アイコン・イラスト等は自作すること
  • 色やサイズは自由
  • 写真素材等は配布されたものか、商用利用可能な無料素材を使用

デザインについて

■ ターゲット

  • 食に関心の高い健康志向の30~60代男女
  • 生活水準高め
  • シンプルでゆとりのある丁寧な暮らしを好む、目指している方
  • ECサイトでの購入やお取り寄せをする

■ 目的

ピクルスの認知度UP
今回は「ピクルス推進委員会」という業界の中で公平な立場のクライアント様であるため、店舗や商品の紹介等の広告はなく、健康促進や野菜の魅力を感じ、ピクルスを世に広め興味を持っていただくという目的で制作しています。

■ 課題・解決策

  • ピクルス=きゅうりのイメージが強い
    色とりどりの野菜の画像を使用し、たくさん種類があり、食卓を彩ることができることを伝える。
  • 習慣的にピクルスを食べる人が少ない
    野菜だけではなくお酢にも健康促進効果が高いことを伝え、健康維持目的に常備菜として継続的に摂取する人を増やす。
    また、自宅でも簡単に作ることができることを伝えることで、より常備菜というポジションに近づく。

■ サイトカラー

ベース:ホワイト

#fff

メイン:グレー

#f4f4f4

アクセント:グリーン

#cae358

フレッシュな野菜の色が映えるように、ベースカラーとメインカラーは無彩色、アクセントカラーにライトトーンの黄緑色を使用し、野菜のフレッシュさと健康を表現しました。野菜の写真は明るくカラフルなため、写真まわりはアクセントカラーの使用を控えました。

■ フォント

ターゲットの年齢層からも視認性を優先し、「Noto Sans JP」を使用。メインビューのみ、上質感を出すため「しっぽり明朝」のセリフ体を使用しました。

■ ポイント

  • 余白を多めにとることで、ゆったりとした雰囲気を演出しています。
  • メインビジュアルは、鏡面反射などの効果で野菜のフレッシュさが伝わるよう工夫しました。また、たくさん種類があることをアピールするため、メインビジュアルは色鮮やかなピクルスの写真を使用しました。
    シンプルなデザインで単調にならないよう、フレッシュな野菜のアニメーションを設置しました。

フルスクリーンショット

PCサイト

pickles PC webサイト

SPサイト

pickles SP webサイト