docomo.jp Reborn｜リスペクトから生まれる再設計
NTTドコモ公式サイトのトップページを対象にした、個人による独自リデザイン提案です。 既存ブランドを大きく変えるのではなく、「Refinement over Replacement」という考え方を軸に、長年積み重ねられた信頼感を尊重しながら、情報構造・視覚表現・主要導線を現代的に磨き上げました。 通信、金融、電気、光回線、娯楽、ヘルスケアという複数サービスを整理し、ユーザーが目的の情報へ自然にたどり着ける体験を目指しています。
Overview
docomo.jp Reborn は、NTTドコモ公式サイトのトップページを対象にした、個人によるリデザイン提案です。 本プロジェクトでは、既存ブランドの印象を大きく変えるのではなく、ドコモが持つ信頼感や公共性を保ちながら、視覚表現・情報整理・レイアウト・導線設計を中心に改善しました。 特に、従来の企業サイトに見られる情報量の多さ、視線誘導の弱さ、サービス分類の分かりにくさに着目し、ユーザーが必要な情報へより早く、迷わず到達できるWeb体験を目指しました。
Role / Tools / Timeline
Role: UI / Visual Redesign Designer
Tools: Figma, Codex, Claude Code
Timeline: 2026年4月下旬 〜 2026年5月上旬
本プロジェクトでは、主にUIの視覚改善、レイアウト設計、情報構造の整理、インタラクション表現を担当しました。
Codex と Claude Code は、主に実装面でのサポートツールとして活用しました。AIにデザイン判断を任せるのではなく、コーディング上の技術的な課題を補助してもらうことで、私はより多くの時間をレイアウト、構図、視線誘導、配色、全体の美的完成度に集中できるようにしました。
Problem
多くの歴史ある企業サイトでは、長年追加されてきた情報やサービスが一つの画面に集まりすぎてしまい、ユーザーが本来の目的を見失いやすくなる課題があります。
docomo.jp も、通信、スマートフォン、料金プラン、サポート、金融、電気、光回線、エンタメなど多くのサービスを持っているため、情報量が多く、初めて訪れたユーザーにとって「どこを見ればよいのか」「何を選べばよいのか」が分かりにくくなりやすいと感じました。
Target User
本プロジェクトの想定ユーザーは、主に2種類です。
1つ目は、docomo.jp を利用する一般ユーザーです。料金確認、機種変更、サポート、新規申し込みなど、明確な目的を持ってサイトを訪れるユーザーが、必要な情報へ素早く到達できることを重視しました。
2つ目は、古くなった企業サイトや複雑になったサービスサイトを整理したい企業担当者・事業責任者です。既存ブランドの基調を壊さずに、現代的で使いやすいWeb体験へ改善できることを示すための提案として設計しました。
Design Goal
デザイン上の目標は、大きく2つあります。
1つ目は、既存ブランドの信頼感を保ちながら、ユーザーがより使いやすい画面へ整理することです。ロゴやブランドカラーを残しつつ、情報の優先順位、余白、文字サイズ、CTAの配置を調整し、ユーザーが迷わず行動できる構成を目指しました。
2つ目は、ユーザーの視線の流れに合わせて情報を分類し、自然に次の行動へ進める導線を作ることです。料金確認、機種変更、サポート、新規申し込みなど、訪問目的の高いアクションを前面に配置し、ユーザーが短時間で目的を達成できるUIを設計しました。
Key Decisions
最も大きな設計判断は、docomo が持つ多様なサービスを、モジュール化されたレイアウトで再整理したことです。
通信、料金、サポート、金融、電気、光回線、エンタメなどの情報を同じ重要度で並べるのではなく、ユーザーの利用頻度や目的に応じて階層化しました。これにより、ユーザーはまず主要な行動を選び、その後に詳しいサービスへ進める構造になります。
また、ブランドカラーである赤は完全に削除せず、使用面積を大きく抑えました。赤は強い注意喚起やエネルギーを持つ色ですが、画面全体に広がりすぎると、ユーザーに焦りや圧迫感を与える可能性があります。そのため、赤はCTAや重要なアクセントに限定し、背景や大きな面積には白・グレー・黒を中心に使用しました。
余白を広く取り、情報同士の距離を明確にすることで、画面全体の安心感と読みやすさを高めています。さらに、スクロールやホバー時の小さなインタラクションを加えることで、情報をただ並べるだけではなく、ユーザーが自然に次の要素へ視線を移せる体験を意識しました。
UI / Interaction
UIでは、公共性と信頼感を感じられるように、白とグレーを中心とした落ち着いたベースカラーを採用しました。その上で、docomo Red を重要なボタンや強調要素に限定して使用し、ブランドらしさと視認性の両立を図りました。
レイアウトは、ユーザーの目的別に情報を分けるモジュール構成にしています。料金確認、機種変更、サポート、新規申し込みなどの主要アクションを分かりやすく配置し、その下にサービス群やプラン情報を整理しました。
インタラクション面では、スクロールに合わせた自然な表示、ホバー時の反応、ダークモード切り替えなどを取り入れました。これにより、静的な企業サイトではなく、ユーザーが操作している感覚を持てる、現代的で滑らかなWeb体験を目指しました。
Result
最終的に、情報量の多い企業サイトを、より整理されたUIとして再構成する初稿を制作しました。
従来のように多くの情報が一度に押し寄せる画面ではなく、ユーザーが目的に応じて段階的に情報を理解できる構成にしたことで、視覚的な負担を軽減し、安心感・専門性・信頼感のあるWeb体験を目指しました。
また、色彩心理や視線誘導を意識したレイアウトにより、ユーザーがページ内に留まりながら、自然に次の行動へ進める流れを設計しました。インタラクションやアニメーションも加えることで、操作時の気持ちよさと情報理解のしやすさを両立させています。
Reflection
このプロジェクトを通して、UIデザインは単に画面を美しくする作業ではなく、情報量、ブランド印象、ユーザー心理、視線の流れ、操作感など、複数の要素を同時に整理する作業だと学びました。
特に、大きな企業サイトをリデザインする場合、既存ブランドを壊すのではなく、長年積み重ねられてきた信頼やユーザーの学習を尊重しながら改善することが重要だと感じました。
今後は、実際のユーザーテストやヒアリングを取り入れ、視覚的な改善だけでなく、ユーザー行動の変化や使いやすさの向上をより具体的に検証できるデザイン提案へ発展させたいです。
