オーガニックサイト
オーガニックサイト-1

オーガニックサイト

【デザインの説明】 1.Webサイトの目的 ブランドの世界観や商品の魅力を伝え、問い合わせや購入につなげたい 2.ターゲット像 主に30代〜40代の女性・男性。 特に都会に住むキャリアウーマン(サラリーマン)で美容ブランドに関して比較的感性も高め。 その中でヘアケアや肌ケアに課題を抱えており、特に商品成分には気を遣っている。 「かわいい」「かっこいい」というよりは「モダン」で「大人っぽく」「デザイン性は高めで落ち着いたもの」を好む 3.キーワード オーガニック ナチュラル モダン シンプル 上品 大人 高級感 スキンケア 透明感 4.デザインコンセプト 美容ブランドに関心があり、特に商品成分に気を遣っている人に向けてオーガニックを使用したスキンケアを提案する。さらに30〜40代向けの商品のため上品かつ高級感のあるものとする。 5.ファーストビューのポイント ターゲットが「モダン」で「大人っぽく」「デザイン性は高めで落ち着いたもの」を好む。であるため、写真は影が入ってお洒落かつシンプルで大人っぽいデザインのものを選んだ。クライアントからもファーストビューはブランドPRになるような
印象的なデザインにして欲しい。ということであり、ターゲットの好みそうなデザインとした。また、文字を写真と重ねた。重ねないで配置すると写真も文字も小さくなってしまい印象に残らなくなってしまうと考えられるため、写真と文字を重ねて見やすく読みやすく一目で印象に残るようなデザインとした。 6.フォントの意図 和文フォントは「Noto Serif JP」→上品かつ高級感のあるデザインにするため明朝体であるNoto Serif JPを使用した。font-weightも7種類あることから1つのフォントでも様々なデザインが作れる。 欧文フォントは「Libre Baskerville」→和文と同じで上品かつ高級感を演出する為にセリフ体を使用。セリフ体の中でも細すぎることなく読みやすい。さらに硬すぎる印象がないため、Noto Serif JPと並べても相性が良い。 7. 配色の意図 白、黒、グレー、茶を使用。洗練された印象をつけるためカラーを入れず、透明感あふれる配色とした。グレーや茶色は写真で使われているため浮くことがないと判断し使用した。モノクロの配色だけでは面白味がなくのっぺりとした印象になるため、各セクションの英字の頭文字に茶色を使用し、アクセントとした。フッターは他のセクションに比べて目立たせる必要がないのでフォントカラーをグレーとした。 8.その他工夫した点 コンセプトのテキストはしっかり読ませたいとの意向があったためletter-spacingを広く取り、じっくりと読めるようにした。featureセクションでは見せたい項目であるため、他の部分で色味を抑え、色味のある成分の写真を並べ視線が向くようにした。line upセクションでは余白が多く、近接を使用してもグループ化が曖昧になっていたためグレーの背景を使用してグループ化が一目で分かるようにした。1st viewとボトムセクションで似た写真を使用して統一感のあるデザインにした。フォントサイズも1st viewとボトムセクションで同じように配置。ターゲットの好みのデザインから強いカラーを使用しないこと、さらにあしらいを追加しすぎないよう気を付けた。各セクションのタイトルに同じあしらいを追加(反復)あしらいを追加するときはカラーを使用しすぎないようにした。オンラインストアへのリンクボタンは視認性に優れるよう、黒をメインに使用し、色、形を統一した。
Favorite
Credit
Web制作
デザイナー
Share
Do you like the work?
Get in touch with
高野
or create your own now!