概要

架空の陶器セレクトショップを想定し、EC機能を備えた公式サイトの新規制作を行いました。（トップページのみ）

目的

陶器の質感や温もりを視覚的に伝え、ブランド理解から購入までをスムーズにつなげること。

ターゲット

暮らしや食の時間を大切にし、丁寧な生活に憧れながら器選びにもこだわりたい30代〜50代の女性。

情報設計

「陶器を通じて、暮らしをもっと豊かにする」というコンセプトを軸に、世界観が直感的に伝わる構成としました。コンセプトを紹介するセクションでは、縦書きの文字表現や写真を多く配置することで視覚的なインパクトを持たせ、ブランドの想いや世界観を強調しています。EC機能を想定し、トップページ内でブランド理解から商品への関心、購入検討へと自然につながる流れを意識しました。おすすめ商品はモーダルウィンドウで詳細を表示し、特集記事はスライダーで展開することで、ユーザーが画面を行き来しながら複数の商品やコンテンツに触れられる設計としました。また、オンラインショップへのCTAボタンをFVに配置し、サイト下部まで追従させることで、商品が気になったタイミングでスムーズにオンラインショップへ遷移できるよう配慮しています。

デザイン

淡いニュートラルカラーを基調とし、暮らしに溶け込む豊かな日常を想起させながら、陶器本来の色味や質感が引き立つデザインとしました。余白を活かした静かでやさしいレイアウトを意識し、写真の配置やサイズに変化をつけることで、シンプルながらも単調にならない画面構成としています。

使用フォント

しっぽり明朝 / Adobe Caslon Pro / Alike Angular / Heebo
本文には「しっぽり明朝」を使用し、落ち着きと可読性を両立。見出しには「Adobe Caslon Pro」を採用し、上品さとコントラストを演出しました。ロゴには「Alike Angular」を使用し、一見ベーシックでありながら、細部にデザイン性を感じさせる書体でさりげない個性を加えています。補足情報などの小さな文字には「Heebo」を用い、全体の視認性を高めました。

配色

#E4E9E7

#F2F2F2

#412923

#3F6E4D

グリーン・ブラウン・ベージュを基調に、自然で落ち着いた印象の配色としました。背景はベージュとペールグリーンをおよそ半々で使用し、やわらかな雰囲気を演出。アクセントとしてグリーンを取り入れ、ブラウンで全体を引き締めることで統一感を持たせています。

使用ツール

Figma / Photoshop / Visual Studio Code / jQuery

制作期間

企画・WF：約6時間
デザイン：約12時間
コーディング：約22時間