AKASHIKI
BACK TO WORKS一覧へ戻る
WORKS/SUIGEN 水源
FeaturedCORPORATELP

SUIGEN 水源

化粧品・スキンケア / ブランドサイト+LP(複合)

微量ミネラルの化粧水ブランド「SUIGEN 水源」のブランドサイト。英字セリフ×インクネイビーのミニマルなエディトリアルデザインで、水源の思想と製品を全18ページで伝える。

このプレビューは実サイトを埋め込み表示しています。レイアウトは実際の閲覧環境と異なる場合があります。

「水そのものを、科学で引き出す」をコンセプトに、地色アイボリー×インクネイビー×英字セリフ(Cormorant Garamond)で組んだ化粧水ブランドサイト。超縦長トップ(オープニング演出→FVスライダー→Topics→Ranking→About→製品ギャラリー→Science→Voice→Journal→Laboratory→オファー→購入導線→FAQ)に、製品個別5点・読み物4本・About・研究所・取扱店舗・特商法/プライバシー/運営会社/問い合わせ/404を加えた全18ページで構成。Lenisの慣性スクロール上に、移動を伴わない静かなフェード(opacity 1.3s)・大型パララックス帯・罫線グリッドの製品ギャラリー・canvasの水紋オープニングを実装した。

背景・課題

既存の高品質ブランドサイトを実測(evaluate_scriptで配色・タイポ・余白・モーションを抽出)し、印象でなく実データを基準に“本物品質”へ寄せた。装飾色を持たず写真とタイポで見せる設計とし、モール誘引(楽天/Amazon/Yahoo!)は商標を使わず自作の線画アイコン+低彩度の識別色で表現してブランドの上質さと販促の両立を図った。iOS安全(blur/backdrop/mix-blend/100vh前提を排し100svh二段)とレスポンシブ3段で全デバイスの安定表示を担保。

ジャンル
化粧品・スキンケア
サイト種別
ブランドサイト+LP(複合)
制作年
2026年
想定予算帯
¥450,000(税抜)
制作期間帯
要件に応じて調整
規模感
18ページ
担当範囲
企画・設計・デザイン・コーディング・実装・公開(すべて一人)
デザイン傾向
ミニマル / エディトリアル・ラグジュアリー
主な機能
オープニング演出スムーススクロールパララックス罫線グリッドギャラリーモール誘引導線FAQフォームレスポンシブ
使用技術
HTMLCSSJavaScriptLenis
CMSなし
フォームあり
アニメーションあり