プロジェクト概要
商品の世界観が伝わるコーポレートサイトを目指して制作いたしました。
futureshopで構築した、化粧品ブランド UN CALLINER ZEEP（アンカリナ様）のコーポレートサイトです。「地球・未来・スタイルへの答え」をコンセプトに、ナノダイヤモンドに着目したスキンケア製品を展開するブランドの世界観を、岩肌や川辺の写真とともに伝える構成にしました。ABOUT・JOURNAL・PRODUCT・NEWS/EVENTの4項目で、コンセプト文、ミストローションやマルラオイルなどの商品と価格、ジャーナル記事、お知らせを掲載し、そのままカートから購入できる構成です。
ナノダイヤモンドという耳慣れない成分を主役にした新しいブランドのため、技術の説明に寄りすぎず、自然を感じる世界観と製品への信頼を両立して伝えたい。コーポレートサイトとして思想を語りながら、商品を見てそのまま購入できる導線も一体にする必要がありました。
シダや苔に覆われた岩肌の写真を全面に敷き、ブランド名を白い大文字で3行に組んでオレンジの短い線を添え、自然と洗練を重ねた世界観を最初の画面に凝縮しました。ABOUTは白い背景にコンセプト文を中央揃えで置き、装飾を省いて言葉を際立たせています。PRODUCTは商品写真と英語の商品名、価格で並べ、カートをfutureshopで組むことで、ブランドサイトとECの導線を一つにまとめました。
制作のポイント
岩肌の写真にブランド名を重ねる
最初の画面は、シダや苔に覆われた暗い岩肌の写真を全面に使い、中央に「UN CALLINER ZEEP」を白い大文字で3行に組み、下にオレンジの短い線を添えています。ヘッダーにはABOUT・JOURNAL・PRODUCT・NEWS/EVENTのナビを置き、スマホでは川辺の石にオイルのボトルを置いた写真に切り替わります。
ABOUTのコンセプト文を中央揃えで置く
「地球・未来・スタイルへの答え」の見出しのあと、ナノダイヤモンドに着目した製品であることを説明する本文を白い背景に中央揃えで置き、注釈とVIEW MOREの枠線ボタンを続けています。文字は黒一色で、この部分に写真はなく、装飾はロゴ下のオレンジの線だけです。
商品を大きな写真と価格で並べる
PRODUCTでは、ミストローション3,960円、ハンドクリーム2,200円、フェイスマスク1,980円、マルラオイル4,950円を、グレーの背景で撮った商品写真と英語の商品名、価格の組み合わせで並べています。スマホでは写真を左右に少しずらして縦に並べています。カートの仕組みはfutureshopで構築しています。
デザイン
