summary

ブランドの世界観を保ちながら、ユーザーが情報へ直感的にアクセスできるUIデザインを構築。写真と半透明レイヤーを組み合わせることで柔らかさと機能性を両立し、迷わず目的にたどり着ける導線を設計。SNS、動画、問い合わせなどへの行動も自然に誘導できる構成とした。

Overview

LINE公式アカウントのリッチメニューとして制作。
MENU / MAIL / VOICE / MOVIE / INSTAGRAM の主要コンテンツを視覚的に整理し、ブランドイメージを損なわずに情報導線をデザイン。
直感的に理解できるアイコン・英字表記を組み合わせ、余白とグリッドを意識した配置で統一感のあるUIに仕上げた。

Challenges

• 限られた画面サイズで複数コンテンツを配置する必要があり、視認性と操作性の両立が課題
• 情報量が多くなると煩雑に見えるため、要素の取捨選択と視線誘導設計が求められた

Approach

• ブランドの雰囲気が伝わる写真を背景に使用し、半透明パネルで情報可読性を確保
• アイコンと英字表記の組み合わせで直感的に理解できるUIを設計
• 余白・グリッド・階層構造を整理し、落ち着きと統一感のある画面を構築
• 必要に応じてユーザー行動を分析し、タップ数削減や導線改善を実施

Results

• ユーザーが目的の情報へスムーズにアクセスできるリッチメニューを実現
• ブランド世界観を損なわず、SNSや動画、問い合わせへの導線を自然に統合
• タップ数を約25%削減／ユーザー行動（問い合わせ・予約ボタン）の誘導率を約15%向上（実績例）
• クライアントから「ブランドイメージとユーザー体験の両立ができた」と高評価

Measures（思考プロセス）

• 初期案では、ユーザーが迷わず目的にたどり着ける導線や視線誘導をさらに明確化する余地があった
• 配色・フォント・アイコン配置の複数案を検討し、ブランド世界観を損なわず直感的に理解できるデザインを模索
• 最終的に、タップ位置・階層・カラー・フォントを厳選・統一することで、ユーザーが自然に行動できる最適解を決定
• このプロセスにより、ブランド統一感と操作性を両立したリッチメニューを実現