mobile-app-ui-design

モバイルアプリのUI/UXデザインスキル

このスキルは、Airbnb、Duolingo、Spotify、Revolut、Phantomなどのトップクラスのアプリで採用されている実績あるデザイン原則に沿って、洗練されたプロフェッショナルなモバイルアプリのインターフェースを作成するためのガイドです。

基本理念

優れたモバイルUIは、派手さではなく、意図を持って設計されていることが重要です。あらゆるピクセル、間隔、色の選択がユーザーの役に立つべきです。目指すのは、単に機能するだけでなく、スムーズで、ユーザーに寄り添い、生き生きと感じられるインターフェースです。

デザインを始める前に、次の3点を理解してください。

1. ユーザーは何を達成しようとしているのか？（その目標までの障壁を減らす）
2. ユーザーにどのような気持ちになってほしいのか？（信頼、喜び、自信、落ち着き）
3. 最初に気づいてほしいことは何か？（視覚的な階層）

デザインプロセス

モバイル画面を設計する際は、次の手順に従ってください。

ステップ1：コンテキストを理解する

• どのような種類のアプリですか？（フィットネス、金融、ソーシャル、仕事効率化、健康、暗号資産など）
• ユーザーはどのような人ですか？（新規、再訪、ヘビーユーザー — 体験を調整します）
• この画面での主要なアクションは何ですか？
• この業界で採用されているデザインの慣習は何ですか？（references/industry-conventions.mdを参照）

ステップ2：まず構造を設計する（UXの観点）

• ユーザーフローを整理します。前後にはどの画面が続きますか？
• MVPに必要な要素を特定します — この画面に不可欠なものだけに絞ります
• 主なアクションは親指が届く範囲（画面下部の1/3）に配置します
• コンテンツのレイアウトにはFパターンの読み順を採用します
• タップしないと見えない状態にせず、コンテンツを直接表示して操作の負担を減らします
• 空の状態は、案内、イラスト、CTAを活用して機会に変えます
• 適切な入力方法を選びます。一度限りの設定にはスライダーやスクロールホイールを、繰り返し入力や正確な入力にはテキストフィールドを使います

ステップ3：ビジュアルデザインを適用する（UIの観点）

次のルールを順番に適用してください。

タイポグラフィ

• フォントファミリーは1種類（最大2種類とし、明確な階層上の目的を持たせます）にします
• フォントサイズは最大4種類、フォントウェイトは最大2種類にします
• 大きな数値（価格、統計値、指標）には等幅フォントを使います
• 読みやすさのため、テキストコンテナの幅は600px未満にします
• 太字だけに頼らず、サイズ、ウェイト、不透明度で階層を作ります

カラーシステム（60/30/10ルール）

• 60% — ニュートラルなベース（白、ライトグレー、またはダークな背景）
• 30% — 補色（黒いテキスト、暗い要素）
• 10% — ブランドカラー／アクセントカラー（CTA、重要なインジケーター、アイコン）
• テキストの階層には、ニュートラルカラーの不透明度を変化させて使います。見出しは100%、本文は80%、補助テキストは60～70%にします
• 二次ボタンやカードの控えめな強調には、アクセントカラーを不透明度5%で使います
• 影の色は背景に合わせます（色の付いた背景には色味のある影を使い、純粋なグレーや黒は使いません）
• 赤のような強い色は、意味のある場面に使います。使いすぎると視覚的な階層が崩れます

間隔（8ポイントグリッドシステム）

• すべての間隔は8または4で割り切れる値にします（8、12、16、24、32、48、64、80、96）
• 要素同士の関連性に基づいて間隔を設定します。関連する要素は近くに、関連しない要素は離して配置します
• 倍率のルール：関連するテキスト要素の間隔が16pxの場合、次のグループまでの間隔はその2倍（32px）にします
• セクションの上下パディングは最低80～96pxにします（大きな画面の主要セクションでは160px）
• カード内部の基本パディングは24～32pxにします
• テキストが大きいほど、より広い間隔が必要です

影

• 常に柔らかい影を使い、強くはっきりした影は避けます
• 色味のある色を加え、影の色を背景に合わせます
• ボタンには控えめな白い内側の影を加え、立体感を出します
• 重たい印象にならないよう、薄いドロップシャドウで奥行きを加えます

視覚的な手がかりと画像

• アイコン、絵文字、イラスト、画像を使い、情報を理解しやすくします
• 人物を表す場合は、ユーザーのアバターや写真を優先し、次にイニシャル、その次に一般的なアイコンを使います
• カテゴリーは、柔らかな単色の背景と、すっきり切り抜かれた画像で色分けします
• アプリ全体でビジュアルスタイルを統一し、無作為にストック写真を混在させないようにします
• 色のパレットを合わせた、AI生成または厳選したビジュアルを使います

ステップ 4：感情に訴えるデザイン（ピーク・エンドの法則）

ユーザーの記憶に残るのは、2つの瞬間です。最も印象的な「ピーク」と、最後の印象を決める「エンド」です。

• ピークとなる瞬間を特定する：主要なタスクの完了、節目の達成、求めているものの発見
• ピークをデザインする：マイクロアニメーション、お祝いのフィードバック、きらめき、バッジ、励ましの文言
• エンドをデザインする：サマリーカード、進捗を称えるメッセージ、また戻ってきてもらうためのさりげない促し
• 感情的なフィードバックループを加える：成功状態に達したときに、達成感を得られる演出（バウンス、発光、きらめき）を使います
• 小さな成功も祝いましょう。成功時の演出は大がかりである必要はありませんが、意図が伝わるものにします
• 特に金融、暗号資産、健康など、重要な判断が関わる分野では、動きやアニメーションを信頼感につなげます

ステップ 5：仕上げと細部の調整

• 重要な要素の背後に、さりげないグロー効果（ぼかし＋不透明度）を加えます
• 主要なボタンの内側に、小さな白いシャドウを加えます
• セカンダリー要素には、プライマリーカラーを不透明度 5% で使った枠線を加えます
• 状態の変化にマイクロアニメーションを使うことを検討します
• すべてのタップ領域が少なくとも 44×44pt あることを確認します
• アクセシビリティのため、コントラスト比を確認します
• エラー状態、空状態、読み込み状態、成功状態をデザインします

適用するスマートなパターン

ユーザーの段階に応じたパーソナライズ

• 新規ユーザー：シンプルなウェルカム、ガイド付きのセットアップ、最小限の選択肢
• リピーター：パーソナライズされたコンテンツ、習慣を重視した設計、進捗インジケーター
• パワーユーザー：高度な統計、最適化ツール、情報量の多い表示

よりスマートな検索

空の検索画面は表示しないでください。次の内容を含めます。

• 最近の検索
• 人気の項目や話題の項目
• パーソナライズされたおすすめ

注文・ステータスの追跡

• 安心感のあるステータスメッセージから始めます
• 写真、名前、クイックアクションボタンを使って、親しみやすさを加えます
• テキストによる日付一覧ではなく、視覚的なタイムラインを使います

カテゴリー画面

• 柔らかな背景と、すっきりと切り抜かれた画像を使った色分けカードを使用します
• すべてのカテゴリー項目で、視覚的な一貫性を保ちます
• レイアウトにリズムを持たせ、ひと目で把握できるようにします

手入力より選択式

• よく使われる選択肢（職種、好みなど）は、タップして選べるようにします
• 選択肢にアイコンや絵文字を添えて、個性を加えます
• 手入力による代替手段として「その他」の選択肢を用意します

避けるべきアンチパターン

• 派手なグラデーションやぼかし効果を使いすぎる（本当に使いこなせる場合を除く）
• フォントサイズを 4 種類、またはフォントの太さを 3 種類より多く使う
• 間隔の値を無作為に決める（8 ポイントグリッドを使いましょう！）
• バナーや余分なタップの先に重要なコンテンツを隠す
• CTA を親指の届く範囲の外に配置する
• 案内のないありきたりな空状態
• 頻繁に入力するデータや、正確な入力が必要なデータにスライダーを使う
• すべての情報を同じ視覚的な重みで表示する（階層をつけない）
• 値よりラベルを目立たせる（例：「591」より「売上」を大きく表示する）
• 色付きの背景に純粋なグレーや黒のシャドウを使う

実装に関する注意事項

これらのデザインを React アーティファクトまたは HTML として構築する場合：

• 余白、色、タイポグラフィには Tailwind CSS のユーティリティクラスを使います
• すっきりと一貫性のあるアイコンには Lucide React を読み込みます
• データの可視化には Recharts を使います
• マイクロインタラクションや状態の変化には CSS トランジションを適用します
• カラーシステムには CSS 変数を使います
• モバイルファーストで設計し、基準となる幅は 375px（iPhone SE）にします
• モダンなカードの見た目には rounded-2xl または rounded-3xl を使います
• 適切な箇所では backdrop-blur を適用して、グラスモーフィズム効果を加えます

業界固有の慣習や感情に訴えるデザインパターンについて詳しくは、references/industry-conventions.md をお読みください。