UIデザインのプロセスと実務

 

 スマートフォンの普及により「UX(User Experience)の向上」「使いやすいUI(User Interface)の提供」がアプリに求められています。
「使いやすいUI」を実現していくためには、設計段階で使いやすさに配慮するとともに、設計・デザインした結果を的確に開発プロセスに反映させることが大切です。
そのためにはプロセスを明確化し、ステップ・バイ・ステップで確実にデザインを進めていく必要があります。
今回は、私たちが標準化しているデザインプロセスの一部をサンプル文書とともに紹介します。
サンプルとしてAndroidスマホ向けアプリを取り上げていますが、各種組込機器、PCアプリでも同様なプロセスでデザインを進めることができます。

弊社で一般化しているUIデザインのプロセスは以下のとおりです。  

 

STEP 1 : 外部仕様設計(ワイヤーフレーム設計)

STEP 2 : ビジュアルデザインの検討

STEP 3 : 各画面の操作性を検討し画面デザインを完成
3-1 画面図の作成
3-2 プロトタイピング
3-3 ワーディング検討

STEP 4 : デザイン指定資料作成

STEP 5 : 画像パーツと管理表作成

STEP 6 : α版アプリのデザインチェック

 

 

上記プロセスのいくつかについて、弊社が標準的に作成している文書のサンプルをご紹介します。
 

STEP 2 : ビジュアルデザインの検討

 

文書サムネイル 画面の見た目は販売推進目的だけでなく、使いやすくするために大切です。
個々の画面設計検討はできるだけ最終的な見た目の上で進めることが望ましいため、設計初期段階で基本的なビジュアルデザインを確定させておくことが必要です。
この段階では全ての画面について詳細に至るまでデザインを検討しておく必要はなく、トップ画面とメイン操作画面、リストのように代表的画面を対象としてデザインの確定を進めます。

Pdf file

ビジュアルデザイン検討資料
最終段階でデザインを決定するために作成した資料サンプルです。(PDF 900KB)

STEP 3-1 : 画面図(画面一覧資料)の作成

 

文書サムネイル 外部仕様設計に基づいて検討確認が必要な全ての画面図を作成します。画面図は、方針確定したビジュアルデザインを適用して作成します。
画面図を正確に作成することで、外部仕様設計段階の該略図では露見しなかった使いにくさや分かりにくさが発見できます。
図は画面番号ごとに一覧できる文書(画面一覧資料)化を行い、確定/検討継続中画面を明確にしつつ、最終的に全画面が確定するまで更新を続けます。
この工程に時間をかけることで、操作性の良い画面設計を完成させることができます。

Pdf file

画面一覧資料
アプリの全画面図を作成・検討し、設計・デザイン確定を行うための資料サンプルです。(PDF 1.2MB)

STEP 4 : デザイン指定資料作成

 

文書サムネイル アプリの開発の際、設計・デザインの意図どおりに画面開発を行ってもらうためにデザイン指定資料を作成します。
Androidアプリの場合、いろいろな画面サイズの端末上で破綻なく表示されることが必要になるため、可変領域と可変方法の対応をきちんと盛込んだ指定を行う必要があります。
デザイン指定資料をきちんと作成して開発者に提供しておかないと、配置やサイズが微妙におかしかったり、アイコンなどの画像パーツが適切に使用されない場合があります。
見た目の高い品質感を維持するためにはデザイン指定資料をきちんと作成することが必須になります。

Pdf file

画面レイアウト資料
開発者にデザインを再現してもらうための資料サンプルです。(PDF 1MB)

このページのトップへ