【初級〜中級者】書籍「プロセス・オブ・UI/UX［UIデザイン編］」より「実践で役立つ重要項目5選」

2025年10月22日 2025年10月29日

プロセス・オブ・UI/UX［UIデザイン編］

書籍「プロセス・オブ・UI/UX［UIデザイン編］実践形式で学ぶワイヤーフレームからビジュアルデザイン・開発連携まで」の中から、実践で役立つ考え方と設計方法など5つの項目について厳選してまとめます。

はじめに

現代において、UI/UXデザインは製品やサービスの成功に必要不可欠な要素となっています。
しかし、書籍やインターネットで知識を得ても、それをプロジェクトで実践し活用する際に苦労するケースが多く見られます。

本書『プロセス・オブ・UI/UX［UIデザイン編］』は、株式会社エクストーン代表の桂信氏が、20年にわたる現場経験から執筆した、UI/UXデザインの理論とノウハウを実践形式で学べる書籍です。
本書は「UXデザイン編」と「UIデザイン編」の全2巻構成であり、UIデザイン編では、UXデザイン編で定義された要件をもとに、ワイヤーフレーム作成からビジュアルデザイン、開発連携に至る具体的なUI化の作業を解説しています。
本書を通じて架空のプロジェクト（ニュースアプリ）を擬似体験することで、現場で直接活用できる実践的な知識とスキルを身につけることを目指します。

本記事では、この書籍の内容を要約し、その中でも特に重要なポイントについて詳しく解説します。

今回は以下のとおりに、UIデザインの実務において最も重要なポイントをピックアップします。

実務の最終段階： 開発連携における課題と解決策。
UI設計の根幹： 常にストーリーで考える原則と優先順位の設計。
画面設計の実践： 1画面1目的原則とモバイルアプリ特有の起動フローの工夫。

こんな人におすすめ

こんな方におすすめです。

制作会社の若手のディレクター・デザイナー
UI/UXデザイナーを目指す学生
事業会社のWeb担当者、マーケティング・PR担当

1章 UI設計の根幹

常にストーリーで考える原則と優先順位の設計

UI設計の検討プロセスにおいて、ワイヤーフレーム（設計）とビジュアルデザイン（意匠）の2つのプロセスを通じてデザインを進めます。
このプロセスの中で最も重要なステップが、画面内の情報や機能の優先順位の整理であり、これを正しく行うために、UI設計の原則として「常にストーリーで考える」ことが意識されています。

概要と特徴

UIを設計する際、ユーザーがそのアプリをどう利用するのかという全体的なストーリーと、各画面を使う際の直前後の流れ、ユーザーが何を考えているのかという細部のストーリーを常に意識します。このストーリーを通じて、ユーザーがどのタイミングでどう情報に触れるのかをイメージしながら設計を進めます。

ストーリーを明確にすることで、検討対象とする画面の「目的」と「ゴール」が明らかになり、画面上の構成要素の表示順や機能を最適に設計できます。

【本書にある正確で具体的な例：ショッピングアプリの商品詳細画面のストーリー】

詳細画面に訪れる前：
ユーザーは、商品一覧から気になった商品を見つけてタップしたはず。タップ前に商品画像・タイトル・金額を見ており、これらの情報はまだ記憶された状態にあると推測される。
詳細画面を開いた時：
ユーザーは記憶をもとにさらに詳しく知りたいと思い、行動を開始する。
初期のユーザー行動：
ユーザーはまず前の画面で見た商品画像をさらに詳しく見たいと思っているため、すぐに商品画像を確認できるようにし、他の写真も含めてその場ですぐに切り替えられるようにすべきである。
情報の優先順位：
商品名よりも商品画像の方がユーザーはパッと認識しやすいため、商品名を目立たせる必要はない。
金額の配置：
商品説明は長くなる可能性があるため、商品説明の下に金額を配置すると金額がだいぶ下に表示されてしまう。よって、金額は商品説明の上にあったほうが、詳細を知りたいユーザーと金額を確認したいユーザーの両方に対応できる。
最終ゴールへの誘導：
この画面の最終ゴールは、商品をカートに入れてもらうことであるため、画面のどこにいても操作できるように、「カートに入れる」ボタンはフローティングにして常に押せるようにする。

このストーリーに基づき、画面の要素の優先順位を整理します。商品詳細画面の例では、「表示上の最優先の要素」を商品写真とし、「画面上で最も目立たせたい要素（メイン）」を「カートに入れる」ボタンと定義し、これをフローティング表示にするなどの工夫で強調します。

そのためにどんなアクションをするとよいか

UI設計においては、「常にストーリーで考える」と「1画面1目的／1画面1機能」の2つの原則を実施しながら優先順位を決めていくことで、それぞれの画面の最適なUIを導き出しやすくなります。画面上で最も目立たせたいメインの要素は、フローティングにしたり、画面内で最も色が目立つようにしたりするなど、さまざまな工夫をしてユーザーを誘導する必要があります。

また、プラットフォームの違いも意識するべきでしょう。
モバイルアプリの設計においては、アプリのプラットフォームは、iOS（Apple）とAndroid（Google）があるということです。アプリはOSを介してカメラやGPSなどのセンサーを利用してさまざまな機能をユーザーに提供します。また、アプリ本体とは別に、ユーザーとの接触手段としてPUSH通知とウィジェットの2つの要素を持ちます。

iOSとAndroidは、OSの設計思想も異なります。アプリ提供者が各OSの設計思想に沿ってアプリを作ることで、ユーザーはアプリごとに操作ルールや手順を学習する必要がなくなり、スマホ上のさまざまなアプリを同じ操作感でストレスなく利用できるようになります。

この設計思想の違いにより、同じアプリでもOSによってUIが異なります。例えば、要素のサイズや余白などが各OSに合わせて細かく調整されていることがわかります。

2章基本設計

1画面1目的原則と起動フローの工夫

モバイルアプリのUI設計において、小さな画面でユーザーが迷わずに素早く目的を達成するためには、情報や機能の詰め込みを避けることが重要です。

概要と特徴

UI設計の原則の一つに「1画面1目的／1画面1機能」があります。
スマホの画面は手のひらほどのサイズで小さいため、この小さな画面に多くの情報や機能を詰め込むよりも、1画面内の要素を絞り込んだほうが、ユーザーにとって負荷がかからず、目的を達成しやすくなります。

大きな目的を一気に達成させるのではなく、目的を細かく分解し、画面を複数に分けて最終的に大きな目的を達成させる方が、ユーザーにとって使いやすくわかりやすい画面になります。

Webサイトの設計に慣れていると、ステップ数を減らすことを優先しすぎる傾向がありますが、アプリの場合は必ずしもそうではありません。画面ごとの役割を明確に定義することで、ユーザーは迷わずに素早く目的を達成でき、自分の目的に集中できる構成にすることが大切です。

【具体例1：設定画面の設計】

初めてアプリのUIを設計する人は、名前、住所、電話番号などの設定項目をすべて1画面でまとめて設定できるように設計しがちです。しかし、ユーザーは特定のピンポイントの設定だけを変更したいと思っており、その項目を素早く見つけて更新できれば満足します。

正しい設計としては、まず設定項目の一覧を画面に表示し、ユーザーが変更したい項目を素早く見つけられるようにします。次に、ユーザーが項目をタップしたら、その項目専用の画面を表示して、すぐに情報を更新できるようにします。

【具体例2：アプリの起動フローの工夫】

アプリの初回起動フローは非常に重要であり、ユーザーは早く使いたい気持ちでいるため、とにかく早くトップ画面を表示することがポイントです。

ウォークスルー（チュートリアル）の検討：
アプリの使い方を伝えるウォークスルーは、離脱の原因となるケースもあるため、その必要性の有無を分析して考えるべきです。
PUSH通知の許諾：
OSが表示する許可ダイアログは、デザイン変更ができず、「一度しか表示できない」という大きな制約があります。ユーザーがここで「許可しない」を選択すると、端末の設定画面で変更しない限り通知が送れなくなります。
そのためいきなりOSの許諾ダイアログを出すのではなく、アプリが用意したポップアップ画面を表示し、通知を受け取るメリットを表示した上で、このポップアップで「通知を受け取る」ボタンをタップしたユーザーに対してのみ、OSの許諾ダイアログを表示する、という2段階の許諾プロセスをとるべきです。

そのためにどんなアクションをするとよいか

機能や情報を整理する際には、「情報整理論」「行動軸」「機能軸」「ビジネス軸」の4つの観点から検討を行い、アプリの骨格となるメニュー構成（下タブの構成）を最初に検討するとスムーズです。
また、下タブごとにUIレイアウトを変えることで、ユーザーに「わくわく感」を提供し、自分が今どこのタブにいるのかをわかりやすくする工夫も有効です

基本設計の決定

基本設計のプロセスにおいては、アプリ全体の構造を決めるメニュー構成（下タブの構成）を最初に検討し、アプリの骨格を決定するとスムーズに進められるとされています。
メニュー構成の検討にあたっては、「情報整理論」「行動軸」「機能軸」「ビジネス軸」の4つの観点から検討を行うことが紹介されています。

具体的には取り扱った事例では以下の気づきがあり、これを元に最終案を作るというプロセスを取っています。

下タブを見ただけで、利用シーンが思う浮かぶようにする。
時事とメディアはタブで分けたい。並び順は種類順がよい。メディアの名称を変えたい
ランキングタブややめて、「ホーム」の上タブの「トップ」の右隣に置きたい
ブックマークは頻度が低いためタブ化せず、ドロワーに入れたい（※保存したブックマークがドロワーにあることをユーザーに学習してもらいたい）
検索は下タブには不要
クーポン・ショッピングは下タブに配置して、マイチャンネルへ誘導したい（※タブを開いてもらう工夫が必要）

最終決定

タブは【ホーム・ニュース動画・ランキング・ブックマーク・マイチャンネル】から、タブごとの個性を意識し【ホーム・ニュース動画・興味・クーポン・ショッピング】に変更。

ブックマークは保存場所の周知のため以下の２案を採用。

ブックマーク時にポップアップで保存先を知らせる（次回は表示しないチェック付き）
ドロワーにバッジを付けて知らせる（ブックマークした記事・動画の項目に赤いドットを付ける）

クーポンやショッピングへの誘導はタブにバッジや吹き出しを付けるように対応。

こうして、一つの視点に偏らすぎず、案ごとにディスカッションを行い、課題や気付きを整理して、最終的に１つの案にまとめることができました。
タブに関しては、タブを切り替えたときのワクワク感を演出しつつ、今自分がどこにいるのかをわかりやすくすることを重視しています。

4章ビジュアルデザイン

デザインの方向性

「4-2. 方向性の模索」（デザインの方向性）は、すべての画面のワイヤーフレームが定義された後、UIのビジュアルデザインを進めていく過程について説明されています。

ビジュアルデザインの方向性を決めるために、本書では主に以下の手法を用いることが示唆されています。

ポジショニングマップによる競合分析
競合他社がどのようなポジションにいるのかを客観的に把握し、自分たちが目指すべき位置を確認します。
2軸のマトリクスを作成し、競合他社をプロットすることで市場を俯瞰的に確認します。
軸の例として、「機能軸」（多機能 or ニュースのみ）と「デザインの観点」（モダン/クラシック、シンプル/装飾豊か、暖色/寒色など）が挙げられています。

カラーの方向性の検討
UIのカラーをアプリの内容やデザイン要件から着想を得て検討します。
色彩心理学（例：青は信頼、赤は情熱や注意）や、イメージスケールを活用するアプローチがあります。
カラーは、背景などに使われる「ベースカラー」（70%）、アプリのイメージを印象づける「メインカラー」（25%）、メインカラーを引き立てる「アクセントカラー」（5%）を意識して選定されます。

ムードボードの作成
デザインに着手する前に、言葉だけでは伝わりにくい視覚的なイメージをプロジェクトチーム内で共有するためにムードボードを作成します。
ムードボードには、イメージしているトーンを表現する既存のUIや写真、イラストなどを集めてまとめます。

これらにより、言葉だけでは伝わりづらい目指している方向性が視覚的にわかりやすくなり、事前にプロジェクトチーム内の共通認識を得られるようになります。

6章開発とUI/UX

ツールを活用したUIチェック

この章では、デザインが完了した後、それが開発で正確に実装されるように、デザイナーと開発者との連携（ハンドオフ）に関する課題や解決策が扱われています。

デザインと開発は、異なる会社だったり、同じ会社でも部署が違ったりすることが多くあります。
この「デザインと開発の完全分離」が起きるため、想定された設計・デザインどおりに実装されないということも往々にしてあります。

例えば以下のような例です。

タブやボタンが角丸でない
アイコンがの大きさが異なる
文字間隔が異なる
フォントが異なる
ボーダーの太さが異なる
アイコンとテキストの間隔が異なる

上記は細かい部分で簡単に直せそうに見えますが、場合によっては、レイアウトそのものを変えなければならなかったり、思いがけなく工数が増加する恐れがあります。

これらは「UIとしてのバグ」と言われ、一般のバグを含めた割合で見ると、80:20の割合でUIのバグの方が多いといいます。

対策としては、UIレビューをプロセスに組み込むことが重要です。
人の手だけではなく、UIチェックツールの活用も有効です。

まとめると、UIチェックや開発連携におけるツールの活用に関する以下の点が挙げられます。

目視によるUIチェック：
実装された画面とデザインデータを見比べて、間違ったところを探します。
デザインチェックは個人の能力に依存することがデメリット。
UIコードレビュー：
開発者が事前にコードレビューの中でUIにサイズなどの数値を設定している部分のレビューまで行う。コードレビューのボリュームが増えることはなるべく避けたいところだと思うので、サイズに関するコーディングルールを設定しておくとスムーズになるでしょう。
UIチェックツールの活用：
本書では「UI SCAN」というツールが紹介されています。
デザインツールのFigmaのデザインデータを取り込んで、開発中の画面のスクリーンショットをアップロードすることで自動的に検証してくれるということです。
デザインツールのプラグインを活用：
開発後ではなく、デザインを実装に取り入れるときに、Figmaには開発言語に合わせたコードを出力してくれるプラグインがあります。
この出力をそのまま適用できるのであれば十分に活用できるでしょう。

プロトタイプを活用した密な開発連携

そもそもデザインと開発がもう少し密に連携できていれば、UIバグの発生を減らすことができるでしょう。

デザインと開発の連携がうまくいかないと、デザインの意図がずれてしまったり、プロダクト開発のサイクルの中で認識の行き違いが発生したりします。
デザイナーの仕事は、開発者への引き継ぎ（ハンドオフ）が完了したところで終わりではなく、設計・開発すべての段階を通して、両者がコミュニケーションをとることが必要不可欠です。

従来のワークフローでは、デザイナーがピクセルパーフェクトなモックアップを作成した後、それを開発者に丸投げする「ハンドオフ」のプロセスが問題を引き起こすことが指摘されています。

デザインと開発が一体となって進めることで、デザインの意図が正確に反映され、手戻りやデバッグのコストを抑え、結果的にユーザーにとって価値ある快適な体験が実現されます。

そのためにどんなアクションをするとよいか

本書や関連情報では、開発連携に関する具体的な解決策が提示されています。

デザインシステムの構築
デザインシステムは、ボタン、ナビゲーション、フォント、配色など、あらゆるUIコンポーネントの基準を定めたプロジェクト全体の「ガイドライン」です。
これを構築することで、デザインの意図を正確に保ちながら、どのメンバーが担当してもデザインにブレが生じることがなく、チーム全体の効率が高まります。
開発者を早期参画させる
ハンドオフを成功させるためのベストプラクティスは、開発者をプロジェクトの早い段階から参画させることです。
プロジェクトのリード開発者やUI開発者を、最初のアイデア出しの議論や画面デザインの会議に含めるべきです。
これにより、コーディングフェーズでの潜在的な問題を初期のデザインアイデア段階から共有し、回避しやすくなります。
プロトタイプを活用した緊密な連携
プロトタイプを用いてデザインの動作やインタラクションを確認することで、開発チームはデザインがどのように機能し、ユーザーがどのように操作するかをリアルに理解できます。
本番環境への移行では、実装前の早い段階でデザインの意図や動作のニュアンスについて詳細に確認し合い、開発が進む中でもこまめにフィードバックを得るプロセスを組み込むことが重要です。

特記事項

その他実践的なノウハウ

本書では、UI設計の具体的なTIPSが豊富に紹介されており、現場で役立つ実践的なノウハウが凝縮されています。

ローディング時の工夫（スケルトンスクリーン）
画面読み込み中に何も表示しないと、真っ白な画面が表示され待ち時間を長く感じさせてしまうため、ローディングアニメーションを表示します。
最近では、スケルトンスクリーン（画面の骨格を抽象的に表現し、グラデーションのカラーアニメーションを行う）での表現が増えており、読み込み中であることを効果的に表現できます。
ユーザーの利用促進（バッジや吹き出しでの誘導）
アプリの多くのタブにおいて、最初に開かれるタブ以外は極端にアクセス率が下がることが多いため、バッジやラベル、吹き出しなどを活用して、アプリ内の回遊を効果的に促進します。
ライティング（文言）の工夫
ボタンのテキストは動詞にするのが望ましいとされています。
例として、「ブックマーク」ではなく「ブックマークする」、「保存」ではなく「保存する」など、ユーザーのアクションを動詞で表現することで、ボタンを押した後の結果を想像しやすくなります。
ユーザーに何か質問をする際は、「〜ですか。」ではなく、あえて「〜ですか？」と疑問符を使ったほうが、感覚として理解しやすくなります。
ユーザー情報更新の心理的テクニック
家族構成の変化や住所変更など、ユーザーのパーソナルな変化に合わせて情報を最新に保つためのダイアログを出す際、「現在の設定値」を必ず表示します。
これにより、人は自分の間違った情報が目の前に表示されていたら「更新しなきゃ」という心理が働き、更新率が高まる、という具体例が紹介されています。

まとめ

本書を通して一貫して強調されているのは、「UI設計はワイヤーフレームやビジュアルデザインの前に、目的・構造・行動導線の文脈をいかに捉えるか」が極めて重要であり、それを起点に検討を進めていくという点です。

UIとUXは、視覚的な美しさ（UI）と体験全体（UX）を意味し、この二つが掛け合わさることでユーザーの心に響く「体験」が生まれます。
UIデザインの成功は、単なるビジュアルの調整ではなく、ユーザーがアプリをどう利用するかという「ストーリー」に基づき、画面の目的とゴールを明確にし、構成要素の「優先順位」を正しく整理するという、上流工程の設計プロセスにかかっていると言えます。
この本質を捉えたプロセスこそが、ユーザーに価値ある体験を届けるための確かなステップとなります。

本書は、制作会社の若手ディレクター・デザイナー、UI/UXデザイナーを目指す学生、事業会社のWeb担当者など、幅広い関係者に推奨されています。
本書で紹介される具体的なTIPSやプロセスは、現在プロジェクトの進行に悩んでいる方や、初めて担当する方が、より安心して業務を進めるための確かな「引き出し」となるでしょう。

他にもたくさんピックアップしたい項目はたくさんあり、画像付きでビジュアルで見た方がわかりやすいと思いますので、本書を手にとって見ていただければと思います。

【内容情報】
UI/UXプロジェクトをどうやって進めたらいいのか、どういうプロセスを経て、アプリやWebサイトの設計に落とし込んでいけばいいのか、現場に出る前は、具体的なイメージを持てずにいる方が多いはずです。
本書は、全2巻でUI/UXの具体的なプロセスを学べるガイドブックの「UIデザイン編」です。
架空のプロジェクトを題材として、プロジェクトの組み立て方、進行、その時の作業イメージなどを具体的に解説します。筆者が実際に普段のプロジェクトで行っていることがほぼそのまま書かれているので、実践的な知識やスキルが身につきます。
擬似的に一つのプロジェクトを体験することができるため、実際にUI/UXプロジェクトを実施するときも、具体的な進行のイメージが思い描けるはずです。
さらに、プロジェクトの進行中に迷ったときも、本書に立ち戻って、参照いただける内容になっています。
プロセス・オブ・UI/UX［UIデザイン編］実践形式で学ぶワイヤーフレームからビジュアルデザイン・開発連携まで内容紹介より