始め方
モバイルアプリ設計の良い出発点は、各プラットフォームのガイドラインを学ぶことです。iOS と Android にはそれぞれ、見た目や動作の細部を定めるデザインパターンがあります。
ガイドラインは、ユーザーと同じ視覚言語で話す助けになります。アプリをネイティブに感じさせ、なじみのある体験を実現します。
どこまで従うかはあなた次第です。Airbnb や Uber のような大きなアプリは、独自のビジュアルスタイルを持ちながらもネイティブに見えます。ただ、まだアプリを設計したことがないなら、できるだけ忠実に従うのがおすすめです。各プラットフォームの感覚をつかみやすくなります。
iOS ガイドライン
iOS のガイドラインは、Apple のより広いデザイン指針である Human Interface Guidelines（HIG）の一部です。Apple エコシステム向けに、直感的で見た目も魅力的なインターフェースを設計するための青写真です。HIG は、シンプルさ、ナビゲーションのしやすさ、文字の読みやすさ、UI 要素の直感的な使い方、そしてコンテンツ重視を推奨しています。
まずは、この6分の WWDC動画 を見て、サイトをひと通り読んでみるのがおすすめです。もう一つの良い方法は、iOS の UI キットを深く触って、さまざまなコンポーネントの組み合わせを試すことです。
Android ガイドライン
Apple と同様に、Google にも Material Design と呼ばれる独自のデザイン言語とパターンがあります。大胆な色、グラフィック要素、モーションを使って、情報とアクションの階層を作ることを促します。
Material は奥行きで要素の重要度を伝え、elevation と影を使います。この考え方は、触ると反応する視覚的な手がかりで、現実世界をまねた、より直感的なアプリ作りを目指しています。
Google は専用の サイト を用意しており、ガイドラインの確認やコンポーネントの学習ができます。
デザインツール
画家に筆とキャンバスが必要なように、アプリデザイナーにも適切なツールが必要です。 Figma と Sketch は、今や定番の編集ツールになりました。学習曲線はやや高めですが、習得すれば強力です。
どちらもベクターベースで、アイコンから複雑なマルチスクリーン UI まで何でも作れます。プラグインのエコシステムも充実しています。Figma はブラウザベースで Mac と PC の両方で使え、Sketch は Mac 専用のネイティブアプリです。
次にぜひ試してほしいのが Banani です。簡単なテキストプロンプトからモバイルアプリの UI を生成する AI です。編集ソフトを何時間も学ばなくても、数分でさまざまなアイデアを試せます。
アプリを設計するときは、きっとアイコンが必要になります。Apple は SF Symbols という専用アプリを公開しています。これを使えば、必要なアイコンをほぼ何でも見つけられます。
UX の基本
どんなインターフェース設計でも、良いモバイルデザインはユーザーの問題を最適に解決することです。アプリ全体で一貫した見た目と使い心地を保ち、シンプルで直接的な言葉を使い、ユーザーの操作にすぐフィードバックを返すべきです。
Nngroup は、デザインパターン、情報設計、インタラクションデザインなど、UX に関する多くのトピックを学べる素晴らしいリソースです。
Growth.design には、インタラクティブなコミック形式の優れたケーススタディがそろっています。私たちが日々使うアプリを、より詳しく掘り下げています。ベテランデザイナーの私でも、心理学の原則を復習したくなってよく見返します。
覚えておいてください。画面上のあらゆるデザイン要素には役割があります。色選びからタイポグラフィまで。要素は連携してユーザーをアプリ内で導き、複雑さをシンプルに見せるべきです。
インスピレーション
参考を見つけ、刺激を保つことは、どんなデザイン作業でも大切です。最適なパターンを見つけやすくなり、アイデアの流れも保てます。
デザイナーは Dribbble や Read.cv に作品を投稿しています。参考集としてだけでなく、デザインコミュニティへの入り口としても優秀です。Pinterest はインターフェースデザインに特化していませんが、あらゆるビジュアルのインスピレーション探しに最適です。
新しく作るより、定着したパターンを再利用したほうがいいことはよくあります。その用途には Banani がおすすめです。10万以上の他アプリの画面が収録されていて、参考や出発点として使えます。
まとめ
デザインの魅力は、アイデアが現実になる瞬間を見られることです。この記事が、モバイルアプリ設計を始めるための全体像の参考になればうれしいです :)
UX をさらに深掘りしたい方のために、主要な UXデザインの法則 と原則の概要も作成しました。
