プロジェクト概要
自然派化粧品ブランド「草花木果（株式会社キナリ）」の販促用ランディングページ（LP）制作案件です。ディレクターから提供されたワイヤーフレーム（WF）をもとに、「美白日中用美容液」および「もしもの時のスキンケア備え」という2つのテーマのビジュアルデザイン、ならびにHTML/CSSコーディングを担当しました。ブランドの世界観を表現しつつ、モバイルユーザーの閲覧に最適化したページへと仕上げています。
基本情報
プロジェクト: 草花木香 美白日中美容液ランディングページ
クライアント: 株式会社キナリ
URL:
ページ全体のスクリーンショット1
ページ全体のスクリーンショット2
（※現在はリニューアルによりページが変更されています）
担当領域
Webデザイナー / フロントエンドエンジニア
（提供WFを基にしたビジュアルデザイン / HTML・CSSコーディング）
プロジェクトの目的と課題
- 設計図（WF）の視覚化: 提供されたワイヤーフレームの意図や情報の優先順位を正確に読み取り、ターゲット層（大人の女性）に響くトーン＆マナーでデザインすること。ワイヤーフレームはこちら
- テーマに合わせたデザインの展開: 「日焼け止め・美容液」と「防災用のスキンケア備蓄」という異なる企画テーマに対し、それぞれの目的に合わせたビジュアルアプローチを行うこと。
- スマートフォン閲覧への最適化: スマートフォンからのアクセスを主軸とし、縦長の画面でもユーザーが飽きずに読み進められ、迷わずボタンを押せるUIを構築すること。
施策とこだわったポイント
1. ブランドイメージを体現するナチュラルなビジュアル表現
自然由来の成分や肌への優しさが伝わるよう、淡いグリーンや水色を基調とした清潔感のある配色を採用しました。手書き風のあしらいやイラスト、成分の写真をバランス良く配置し、ブランドが持つ優しく親しみやすい雰囲気を画面全体で表現しています。
2. 企画意図に沿ったデザインの作り分け
「美白日中用美容液」のLPでは、光のグラデーションを用いて透明感やみずみずしさを強調しました。一方、「もしもの時のスキンケア備え」のLPでは、ストライプ柄の背景やポップなアイコンを用いて、堅苦しくなりがちな防災テーマを日常に取り入れやすく見せる工夫を施しています。
3. モバイルファーストなレイアウトと正確なコーディング
作成したデザインをもとに、スマートフォンでの閲覧に最適化したHTML/CSSコーディングを行いました。長めのテキストでも読みやすい行間や文字サイズ、タップしやすいコンバージョンボタンの配置など、ユーザーの操作性を担保する丁寧な実装を行っています。
成果・評価
要件を的確にビジュアルへ昇華させるデザイン・実装力
提供されたワイヤーフレームから「何を伝えたいか」を的確に汲み取り、ブランドの世界観を損なうことなく、ターゲットに響く魅力的なデザインへと落とし込みました。デザイン作成からコーディングまでをシームレスに対応し、実務においてディレクターの意図を正確に形にできる制作能力を示す実績です。
