アプリをデザインするための準備事項

アプリをつくる上で考えていくとても大切な要素としてユーザーエクスペリエンス（User Experience 以下 UX）があげられます。サービスを通じてユーザーが体験することが、全てUXとなります。似たような言葉に、UI（ユーザーインターフェイス、User Interface）がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。UX体験を向上させるためには、UIの使いやすさは不可欠です。

STEP 1 : どんな目的のサービスなのかを考える

まずはじめに、どんな目的のためにつくられるサービス( アプリ)なのかを明確にする

  • そのサービス(例：アプリ)は、誰のため？
  • そのサービス(例：アプリ)は、何のために？

STEP2 : その目的を達成するために誰に使ってもらいたいか？

  • ユーザーは、誰ですか？
  • 一番使って欲しい人は、誰ですか？
  • サービスを利用する可能性がある人 は、誰ですか？

STEP3 : ユーザーにとって、どのようなアプリにするかを考える

提供するサービス(アプリ)は、どのような特徴を持っているか

  • いろんな人に見てもらいたい（例：色々な情報を網羅している）
  • とにかく使いやすいアプリ (例：操作性やシンプルな画面を重視)
  • 情報が検索しやすいアプリ (例：すぐに必要な情報を入手することができる)

STEP4 : 目的に合わせて、デザインを考えていく

どんな目的で、誰のために、デザインを考える上での大切な判断基準となります。

  • 一番見てもらいたい人をターゲットにしたデザインとは？
  • デザイントーン&マナー
  • 色 
  • フォント

コンテンツ (何を載せるのか)を考えるための準備事項


STEP5 : コンテンツになる可能性があるものを洗い出す

コンセプトに合わせて素材を集める

どのような機能があると、想定している状況や価値を提供できますか？

例1：位置情報がわかる
例2 : グラフなどの図表にして、見える化してくれる
例3 : イイネ機能がある  
等

STEP6 : コンセプトに照らし合わせて情報の優先度を考える

  • 情報設計
  • コンセプトに照らし合わせて情報の精査
  • いらないものは削除 / 足りないものは何か？
  • 情報の量と質を把握する

UIについて 1 : ワイヤーフレーム (どのように使ってもらうのか)

ユーザーが直面している状況や課題に対して、提供するサービス(アプリ)を使うことで、どのように解決していくのかを具体的にアプリ画面を想定しながら考えていく。

STEP7 : 画面をいよいよ考えていきます

アプリに照らし合わせ 、まずは紙に画面レイアウトを考えていく（Paper prototype）
  1. シングルページ or 階層を持つかを考える / 両方考えてたくさん描く
  2. TOPページから考える
  3. コンセプトに常に立ち返って判断する 
  4. ワイヤーフレームの構成要素
  • TOP / コンテンツページ 
  • 画面の中の構成要素とは
  • ヘッダー / フッター / メニューなど 画面遷移 
  • 共通要素の連動編集

STEP8 : アプリのプロトタイプを作ってみる

直感的にアプリをデザインできるツールとして Adobe XDを使用し、つくりながら学んでいきます。

ADOBE XD

事前にダウンロードと動作確認をお願いします

STEP9 : ワイヤーフレームの演習

STEP7での演習で作成したワイヤーフレームを使って、AdobeXD上でのワイヤーフレームに置き換えてみる
シングルページ / 画面遷移

UIについて 2 : ビジュアルデザイン (色 / フォント)

アプリのプロトタイプを作りながら、 具体的にビジュアルデザインを考えていきます

STEP10 : デザイントーンとマナーの確認

コンセプトに照らし合わせて確認していく

STEP11 : カラーパレットの確認

アプリを構成する要素の色を決める メインカラー  : 背景・ヘッダー・フッター
サブカラー : ヘッダー・フッター
アクセントカラー : クロポチなど
ボタン : 動的なボタンだった場合色が変わるのであれば、2パターンなど
フォント : 文字 windows / mac / mobile 標準OSを指定しておき、自分好みのフォントをWEBフォントで指定する WEBフォントの弊害は、重くなること

STEP12 : レスポンシブデザインを考える

ディバイスの互換性を考慮して、アプリを設計する必要がある
理由
  • レイアウト崩れを防ぎたい 
  • 見せたい情報が見れない
  • 触れない 例：ボタンが押せない 

考慮するべき項目
  • ディバイス >> iOS or Android
  • ブラウザ >> 古い
  • フォント >> 入ってない

STEP13 : アクセシビリティを考える

アクセシビリティとは？
あらゆる人が情報にアクセスすることができ、利用できることを意味します

情報にアクセスすることが難しい方へ向けた対策
 読むこと・見ることの困難への配慮
  • 読み上げ機能使用の検討（テキストなら可能、動画に音があれば別だが、基本的に動画 / 写真は読み上げできない)
  • アプリを使用する上での検討 (操作性 / 状態を表示など、 例：ON : 赤 / OFF : 青)
色のアクセシビリティチェッカー
カラーチェッカー機能使用の検討（色による区別をどう配慮するか）
検証：アドビ Photoshop (カラーチェッカーでの確認など)

UIについて 3 : ユーザーテスト



STEP14 : ユーザーテストを行なってみる

目的
  • つくったアプリが、そもそも使いやすいか？
  • 意図した設計通りに使ってくれるか、 感じてくれるかの確認
  • 意外な発見があるか
>> 新しい発見が有効である場合
デザインに取り込んで再設計するとより良いUXデザインになります

STEP 15 : ユーザーヒアリングを行なってみる

ユーザーアンケート
ABテスト >> A or B のデザインで迷った時に反応を検証

STEP16 : ユーザーテストの結果を踏まえて、改善をしていく