←BACK TO WORKS一覧へ戻る
CORPORATELP
AOKICOSMETIC
美容・コスメ / ブランドサイト
サロン専売コスメブランド「AOKICOSMETIC」のブランドサイト。モノクローム基調にライン識別色を差す全15ページで、製品の世界観とB2Bのフェアな取引条件を両立して伝える。
このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。
CONCEPT
「BEAUTY BEHIND BEAUTY.」を掲げるサロン専売コスメのブランドサイト。白地×モノクロームの製品ビジュアルに、スキンケア＝アクア／メイク＝ローズ／ヘアケア＝オリーブのライン識別色だけを差す設計。トップはFVスライドショー（フェード切替・ゆっくり寄る画像・時間差テキスト）に mix-blend-mode: difference の巨大「AOKI」反転ロゴを重ね、巨大英字見出し＋製品カルーセル＋非対称エディトリアルグリッドで構成。コレクション3ライン（全21製品）・製品詳細・About・サロン導入案内・導入プラン・News/導入実績・FAQ・Contactの全15ページ。製品レンダーからサロン内観まで59点のビジュアルをAIで統一トーン生成した。
背景・課題
実在の高品質ブランドサイトを実測（配色・タイポスケール・余白・モーションの実値抽出）し、その設計言語へ忠実に寄せながらB2B要素を統合した。購入UIは「お見積り・サンプル請求」に置換し、卸価格の矢印表記とコスト内訳グラフで「取引条件の透明性」をデザインとして表現。mix-blend-mode はフォールバック付きで実装し、Playwright WebKit全ページスキャン＋WCAG AA（コントラスト・フォーカスリング・自動再生の一時停止）まで検証した。
DESIGN PERSPECTIVE
TECHNOLOGIES & FEATURES
主な機能
FVスライドショー反転ロゴ演出料金プランコスト内訳グラフFAQフォームレスポンシブ
使用技術
HTMLCSSJavaScript
CMSなし
フォームあり
アニメーションあり