画面設計は、ウェブサイトやアプリケーションなどのユーザーインターフェイスの設計を行うことで、ユーザーが快適に操作できるような最適なユーザーエクスペリエンスを提供することが目的です。
画面設計のプロセスは、以下のような流れで行われます。
- 要件定義:クライアントからの要望やビジネス上の目的、ユーザーのニーズなどを把握し、設計の目的や方向性を定義する。
- ユーザー調査:ユーザーのプロフィールや利用シーン、行動パターンなどを把握し、設計に反映させる。
- 情報設計:画面に表示する情報や要素を整理し、階層的な情報構造を設計する。
- ワイヤーフレーム作成:情報設計に基づき、画面の配置や機能、操作フローなどを仮想的に表現したワイヤーフレームを作成する。
- プロトタイピング:ワイヤーフレームをもとに、実際に操作できるプロトタイプを作成する。
- ユーザーテスト:プロトタイプを実際にユーザーに試用してもらい、フィードバックを得ることで改善点を洗い出す。
画面設計には、以下のような専門用語があります。
- ユーザーエクスペリエンス(UX):ユーザーがWebサイトやアプリケーションを利用する上での全体的な体験を指す用語。
- ユーザーインターフェイス(UI):ユーザーが直接触れることができるWebサイトやアプリケーションのインターフェイスを指す用語。
- ヒアリング:クライアントからの要望を把握するために、インタビューなどで詳細なヒアリングを行うこと。
- ストーリーボード:画面設計を視覚的に表現する手法の一つで、フレームごとにイメージ画像や説明文をまとめたものを指す。
- タスクフロー:画面遷移や操作フローを表現した図で、ユーザーの利用シーンを想定して設計する。
タイトル | 特徴 | リンク |
---|---|---|
ユーザーエクスペリエンスとは | UXの基本と定義を紹介している | https://blog.tokyo-design.jp/what-is-ux/ |
ユーザーインターフェイスとは | UIの基本と定義を紹介している | https://blog.tokyo-design.jp/what-is-ui/ |
ヒアリングの重要性 | デザイン制作におけるヒアリングの重要性を説明している | https://www.concent.co.jp/blog/archives/155 |
ストーリーボードの使い方 | ストーリーボードの作り方や使い方を具体的に紹介している | https://www.atmarkit.co.jp/ait/articles/1712/19/news019.html |
タスクフローの作り方 | タスクフローの作り方や設計手法を紹介している | https://www.uxmilk.jp/58822 |
プロトタイピングに関する参考になるサイトをリンク付きの表にしてまとめました。
タイトル | 特徴 | リンク |
---|---|---|
Figma | クラウド上で動作するプロトタイピングツール。コラボレーションやデザインの共有がしやすい。 | https://www.figma.com/ |
InVision | UI/UX設計やプロトタイピングを行うためのツール。多様な機能があり、コラボレーションもしやすい。 | https://www.invisionapp.com/ |
Marvel | 無料で使えるプロトタイピングツール。UI/UXデザインの改善やユーザーテストに活用される。 | https://marvelapp.com/ |
Adobe XD | デザインやプロトタイピング、共同作業などを行うためのツール。Adobe製品との親和性が高く、スムーズなデザインワークフローが可能。 | https://www.adobe.com/jp/products/xd.html |
Sketch | macOS向けのデザインツール。プロトタイピングやユーザーテストにも対応しており、豊富なプラグインが利用できる。 | https://www.sketch.com/ |
プロトタイピングは、実際のアプリケーションやWebサイトの動作を想定した模擬画面を作成することで、設計の改善や問題点の発見を行うことができる手法です。クラウド上で動作するツールや、豊富な機能を持つツールが多数存在し、デザインの共有やコラボレーションもしやすくなっています。
画面設計に関連する重要な用語とその解説を表にまとめてみました。
専門用語 | 解説 |
---|---|
ユーザーインターフェイス | コンピューターなどの情報処理システムと人とのインターフェース。画面デザインや操作方法、データ入力などの設計を含む。 |
UIデザイン | ユーザーインターフェイスのデザインを担当する設計分野。視覚的なデザインやユーザー体験を考慮して画面のレイアウトや色彩などを決定する。 |
ワイヤーフレーム | ウェブサイトやアプリの画面デザインの初期段階で作成される、構成要素の配置を示した簡単な図。画面の大まかなデザインを検討する際に使用される。 |
プロトタイピング | 実際に動くモックアップを作成して、機能の確認や問題点の洗い出しを行う手法。ユーザーのフィードバックを取り入れながら改善を重ねることができる。 |
ユーザーテスト | 実際のユーザーにシステムを試用してもらい、使い勝手や問題点を評価すること。ユーザーの視点からシステムの改善点を見つけることができる。 |