化粧品・健康食品・ダイエットなどの商品をスマートフォンから注文できるDHCオンラインショップアプリのリニューアルプロジェクト
2024.9.18〜2026.2.1
2026.3.14 リリース
アプリ制作チーム 16名
企画 3、デザイン 3（デザインチームリーダー、イラスト制作者、本人）、開発 11
デザインコンセプト企画、UI制作、イラスト企画とレビュー、プロトタイプ・アニメーション制作、スタイルガイド・デザイン仕様書作成、デザインチェック
プロジェクト概要
DHCオンラインショップアプリは、化粧品・健康食品・ダイエットなどの商品を、スマートフォンから注文できるDHC公式アプリです。
2030年までに現在の売上を1.3倍に伸ばすことを目指し、既存アプリを全面的に再構築するプロジェクトを立ち上げました。
担当したPh1ではメインターゲットを既存顧客に設定し、アプリを認知させて、ダウンロードを拡大させることを目指しました。
目標に向かって、デザインにおけるDHCが捉えている課題とPh1の要件を整理したうえ、アプリのコンセプトの具体化と一貫したブランド体験の提供を軸にリニューアルを進めました。
プロジェクト目的
売上向上とウェルビーイングな生活の実現のためのアプリの再構築
Ph1の要件
アプリの認知とダウンロードの拡大
デザインゴール
アプリのコンセプトの具体化と一貫したブランド体験の提供
課題定義
DHCが捉えている「不明瞭なアプリのコンセプト」についてデザインの観点で課題を具体化しました。
ブランドコンセプトである「健やかで美しい自分」が伝わらないUI
既存のECサイトとアプリでは、DHCのブランドカラーである明度の低いブルーを全体的に使用しており、重く暗い印象を与えていた。
また、ブランドコンセプトである「健やかで美しい自分」から連想される明るさや生き生きとした視覚的要素がなく、世界観が伝わらない状態だった。
往来が多いアプリとECサイトの統一されていないUI
アプリとECサイト（WebView）間の往来が頻繁であるにも関わらず、両者のデザインが統一されていなかった。
そのため、一貫した使いやすさと世界観を提供しにくい状態だった。
ECサイト-ホーム画面
アプリ-ホーム画面
解決策
DHCが目指す「健やかで美しい自分」の世界観にとどまらず、DHCブランド全体が追求するウェルビーイングブランドとしての新たな価値創造につながるよう、
「輝ける私」をアプリ全体のコンセプトとして設定しました。このコンセプトをもとに、一貫した使いやすさと世界観を提供するUIを制作しました。
ECサイトのスタイルガイドを基準にしたWeb・アプリのスタイル統一
先行して設計されたECサイトのスタイルガイドを基準にアプリ用スタイルガイドを策定し、WebとアプリのコンポーネントやカラーのUI表現を統一した。
これにより、アプリとWebViewの往来が多い構造の中でも、ユーザーが違和感なく一貫したサービス体験ができるようにした。
「光」をキーワードにしたアニメーション・UI制作
「輝ける私」を表現するため、「光」をキーワードに設定し、グラデーション・シャドー・フレア効果を用いてUI内に光を表現した。
グラデーション
光が揺らぐアニメーションをスプラッシュ・チュートリアル・ログイン画面の背景に適用し、アプリに入った瞬間からDHCの世界観が伝わるよう演出した。
シャドー
UIの大部分を占めるカードコンポーネントに薄く広がるシャドーを用い、光を浴びているような後光を表現した。
フレア効果（ポートフォリオ用のデザイン）
メンバーシップカードに反射効果を採用し、特別感と輝ける自分をイメージできるよう演出した。
「輝ける私」を具体化するイラストコンセプトの企画・制作
「輝ける私」をイラストで表現することで、アプリの世界観をより具体化した。
イラストのコンセプトと具体的な表現仕様を企画し、納品物に対するレビューを通して完成度を高めた。
これにより、アプリを利用するユーザーがイラストの人物を自分自身と重ね合わせ、ショッピングへの没入感を高められるようにした。
化粧品・健康食品・ダイエットなどの商品をスマートフォンから注文できる
DHCオンラインショップアプリのリニューアルプロジェクト
2024.9.18∼2026.2.1
2026.3.14 リリース
アプリ制作チーム 16名
企画 3、デザイン 3（デザインチームリーダー、イラスト制作者、本人）、開発 11
デザインコンセプト企画、UI制作、イラスト企画とレビュー、
プロトタイプ・アニメーション制作、スタイルガイド・デザイン仕様書作成、デザインチェック