Webサイト・アプリのUI作りの流れとソフト・ツール（SaaS）

要約

UI（ユーザインターフェイス）は、利用者とWebサイト・アプリの間に入り、利用者の「課題」が円滑に解決できるように設計・デザインします
まず最初にワイヤーフレームを作成し、それを元に具体的なUIビジュアルを作成。必要に応じてプロトタイプで動作検証します
ワイヤーフレーム、ロゴ・キービジュアル、UIビジュアル、全体の動作・表現を作り込むには、それぞれに適したソフト・ツールを利用します

※この記事は、スマホ（やPC）のディスプレイ（モニター）を通して提供されるWebサイト・アプリのUIに限定して解説します

UIは、利用者とWebサイト・アプリの間に入り、利用者の「課題」が円滑に解決されるよう設計・デザインします

Webサイト・アプリは、ユーザが文字や音声で何か入力し、スワイプやタップで画面を操作(入力する)ことで、画面やスピーカーから何らかのフィードバック（出力）が発生します。この入力・出力を中継・管理するのがUIの役割です。

Webサイトやアプリは、利用者の「課題」を解決するために存在します。ECサイトは利用者の「欲しい」「手に入れたい」「贈りたい」といった課題を解決するし、NetflixやAmazonPrimeビデオは「感動したい」「時間をつぶしたい」「友達と共通の話題がほしい」といった課題を解決する存在です。

スムーズに課題解決するには、優れたUIをデザインすることが求められます。

UI作りのながれ・プロセス

1. 要求事項を確認・決定する「ワイヤーフレーム」

具体的なWebサイト・アプリのUIビジュアルをつくる前に、UIが実現する必要のある要求事項（課題を解決するのに必要な事）をスタッフ、ユーザ、クライアントの間で確認・決定します。図では左上の領域です。

このプロセスでは、無彩色な線画でUIを表現し、確認するのが良いとされています。無彩色な線画であれば、色味や写真のキャッチーさに目や関心が奪われること無く、「要求事項」に関係者が注目しやすくなるためです。
また、無彩色な線がであれば描き直し（作り直し）も容易です。打ち合わせの最中にその場で変更して確認・決定するといったスピーディーな進行が可能です。

この無彩色な描画を「ワイヤーフレーム」と呼びます。かつて「ラフ」「ラフスケッチ」と呼ばれていたこともありますが、現在ではワイヤーフレームと呼ぶのが一般的です。

ワイヤーフレームの作成には「Prott（プロット）」、「InVision（インビジョン）」といったソフト・ツールを使用するのが便利です。Prottには「ワイヤーフレーム機能」、Invisionには「フリーハンド機能」があり、ワイヤーフレームの作成・確認・決定のプロセスを強力にアシストしてくれます。

2. ビジュアルコンセプト表現を確認・決定する「ロゴ・キービジュアル」

ロゴやキービジュアルの、形状・色・フォント等によってビジュアルコンセプトを表現します。図では右上の領域です。

スマートフォンでWebサイト・アプリと接する利用者が圧倒的に多い現在では、正方形のアイコンや、縦長の画面領域を前提に、ビジュアルコンセプトを表現するのが通常です。

ビジュアルコンセプト表現の確認には、「Photoshop（フォトショップ）」でキービジュアルを作成し、「Illustrator（イラストレイター）」でロゴやアイコンを作成するのが定石です。PhotoshopやIllustratorは高機能な汎用グラフィックソフト・ツールなので、後述するUIビジュアルデザインの領域でも普通に利用されます。しかし、スマートフォンでの利用が多いという前提でUIビジュアルを作成する場合は、それに特化（強化）した機能が豊富なソフト・ツールをを使う方が効率が良いでしょう。

3. ビジュアル構成を確認・決定する「UIデザイン」

具体的なUIのビジュアルを作成するには、「Sketch（スケッチ）」「Figma（フィグマ）」「Framer（フレイマー）」といったソフト・ツールを使うのが便利です。図右下です。

これらのソフト・ツールに共通しているのは、UIに繰り返し利用される要素・パーツをシンボル（クラス）として保管し、配置場所に合わせてサイズや色等を変更して再配置する機能を持っており、そのテンプレートが充実している点です。テンプレートは、ベンダー提供のものだけでなく、オンライン上で配布されているものも多いので、テンプレートをそのまま利用したり、改変して利用することで、高品質のUIビジュアルをスピーディーに作成することが可能です。

4. 全体動作・表現を確認する「プロトタイプ」

プロトタイプを作成し、本格的な開発に入る前にUIを体験し、評価する事は、ユーザビリティの向上に役立ちます。また、開発に入った後のスタッフ間の齟齬を減らす効果も見込めます。

プロトタイプソフト・ツールに求められるのは、予め準備されたUIビジュアルを集合として管理し、それぞれのUIビジュアル間でリンク移動できるようにしたり、各UIビジュアル内の動作（ボタンを押した時の反応や動画再生等）・表現を実現し、関係者間で確認（フィードバック）する機能です。

「XD（エックスディー）」「inVision（インビジョン）」「Prott（プロット）」といったソフト・ツールには、プロトタイプソフト・ツールに求められる機能が提供されています。

かつてのプロトタイプツールは、予め他のソフト・ツール（SketchやPhotoshop）で作成したUIビジュアル素材をインポートして使用していましたが、最近はプロトタイプソフト・ツール自体でUIビジュアルを作成する機能が充実してきています。そして同時に、UIビジュアルソフト・ツールである「Sketch」「Figma」「Framer」側にも、高機能なプロトタイプ機能が充実してきています。今後UIビジュアルの作成とプロトタイプは同じソフト・ツールを使用するのが普通になってくるかもしれません。昨年新しく登場した「Drama（ドラマ）」は、最初からUIビジュアルもプロトタイプの機能も、両方とも高機能で提供されています。特に「動き」のある動作・表現が重要なWebサイト・アプリでは、Dramaを使うと効率的です。

今後、プロトタイプソフト・ツールは、実際のWebサイト・アプリの開発で再利用可能なソースコードをエクスポートしたり、インポートする機能が強化されていくことが予想されます。既にFramerは、JavaScriptのUIライブラリ「React（リアクト）」のソースコードを生成したり、逆にReactのコードをインポートすることも可能となっています。

次回の記事からは、UI作りのプロセスで使用するソフト・ツール（SaaS）を、具体的に比較しながら考察します。