TL;DR
コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。
IA(情報アーキテクチャ)
1.基礎知識
情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にIA(インフォメーションアーキテクト)が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。
- [スライド] 社内の IA(情報アーキテクチャ)研修の講師をしてみた。:そのフォローアップ | future-proof.jp
- IA Basic Learning Kit を公開しました - kamihira_log
2.サイトストラクチャ
サイト全体の情報を構造化した文章をサイトストラクチャ、もしくはサイトマップと呼びます。Web サイト全体像を目に見えるようにすることが目的。
ナビゲーションをデザインする時やファイル配置などの構造を設計する際にサイトストラクチャが必要になります。
- 5 つのサイトストラクチャ(Web サイト情報構造)を実際のサイトと照らしあわせて考える - YAT の BLOG
- サイトをつくる前の情報分類の手法について書いてみる | web ディレクターアシスタントが色々書いてくブログ アソビスイッチ
3.ナビゲーション設計
IA のお仕事であるナビ設計。ユーザーの負担にならないために、目的の情報へスムーズに辿り着けるようナビゲーションを設計します。ナビの目的は、ゴールと、ゴールまでの手順を示すことです。
4.画面設計
画面設計が中途半端になるとデザイナーに引き継がれたとき修正や見直しが発生してしまいます。IA のタスクは、どの位置にどういった情報を配置するのか、画面遷移、画面内の機能の決定になります。
デザインカンプになる前のワイヤーフレームは情報アーキテクチャの成果物ともいえます。一般的にはフォントや配色を盛り込むことは少なく、書体やサイズまで考慮された試作品のようなものをプロトタイピングと呼びます。
- Web サイト設計図 – ワイヤーフレームの作り方 | Web クリエイターボックス
- WEB ディレクターなら参考にしたい手書きの画面設計書| designaholic -Creative Column-
5.IA ツール
情報設計する際に便利なツールをまとめました。
- WEB ディレクションで使うIAツール
- IA 関連のツール/リソース類
- keynote でプロトタイプをつくるためのテンプレ集
- ワイヤーフレームを抽出してくれるブックマークレット
- Yahoo!で使われている要素のデザインパターン
UX(体験)
6.基礎知識
情報アーキテクチャは UX の一部です。UX(ユーザーエクスペリエンス)とはユーザーが製品やサービスに触れたときの「心地よさや楽しさ」などの感情を引き起こすなどの、一連の操作から得られる体験を意味します。
- [スライド] UX をみっちり基礎から教わることができた「モバイル UI/UX のキホン」って勉強会のレポート! - 酒と泪と Ruby と Rails と
- [スライド] UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
- [スライド] UX のための UI デザイン
7.ペルソナ(人物像)
ペルソナとは設計を支援するために定義する「仮想のユーザ像」のことです。プロトペルソナでは、製品を使うのは誰か?その理由は何か?などターゲットがどうすれば喜ぶのか考えて設計します。ペルソナは、ユーザー エクスペリエンス (UX) 設計のための基本的なツールの 1 つです。
ペルソナ作成後はペルソナの行動をシナリオとして書き出します。ユーザーのニーズを整理し、行動の流れを可視化します。
8.仮説作成
アイデアとペルソナを見ながら、「誰のために、どんな機能を、どんな成果を実現するのか」仮説表を作ります。ある程度決まったら、アイデアの優先順位と捨てる部分を決定します。仮説表をつめたらデザインです。
- IMJ | ラピッド UX 手法 第 3 回 ~ UX 指向アンケートでカスタマーエクスペリエンスを可視化するデータをサクッと集めよう~ - IMJ Report
- 優れた UX デザイナーが持つ資質・マインドセットとは?【インタビュー】ホワイトハウスも注目の UX デザイナー Janice Fraser 氏(後編) | freshtrax | btrax スタッフブログ
9.スタイルガイド
デザイナーと非デザイナー共同で創造的な活動を行う場合、面白いアイデアが生まれることがあります。デザインに関してチームを同じ方向へ導くために、スタイルガイドを作成します。
アプリやサービスの場合は、この後テストを行い、フィードバックとリサーチします。
UI(表現)
10.UI と UX の違い
最も簡潔に言えば UI(表現)と UX(体験)。UI とは人間と物の接点、人間の目の前に表示される操作体系のことを指します。ユーザーが UI を通して体験することが UX です。ユーザビリティとは「使いやすさ・理解しやすさ」を表したもの。
11.インタラクティブ(リッチコンテンツ)
インタラクションとは JavaScript などを使って、ユーザーの入力に応じて適切な応答や画面遷移を伴うインターフェイス設計。画面遷移を伴わずに画面状態を変更したり、音楽や映像を使ってリッチな表現をしたり。「相互作用」と訳されます。
- “リッチ”で変える - 第 9 回 UI デザインの基礎知識:操作の流れに気を配ったインタラクション:ITpro
- 【海外事例に学ぶ】インタラクティブな UI でコンテンツを見せる際の注意点 (ユーザビリティ実践メモ)
アクセシビリティ
12.基礎知識
アクセシビリティとは情報への「アクセスのしやすさ」の度合い。身体的なハンデや高齢者だけじゃなくて、健常者を含めた多くの環境に対しても使い勝手や情報のアクセスがしやすくなるよう考慮。すべての人が問題なくコンテンツや機能を利用できることです。
13.ガイドライン
WCAG2.0 の理解や実装に関する情報。日本では Web サイトのアクセシビリティは JIS(日本工業規格)によってJIS X 8341-3が定められています。
- [解説書] WCAG 2.0(W3C 勧告)日本語訳 [原題:Web Content Accessibility Guidelines (WCAG) 2.0]
- [実装方法集] WCAG 2.0 実装方法集(Techniques for WCAG 2.0 日本語訳)| WCAG 2.0 実装方法集
14.ファインダビリティ
ユーザビリティが使いやすさを示す概念、ファインダビリティは「発見されやすさ」を示します。コンテンツはアクセシブルな状態が必要で、その次にファインダビリティが問われます。
スタートアップで成功する
15.リーンスタートアップ
無駄を省きスタートアップを成功に導くための考え方。こちらのサイトによるとサービスから作るのではなくて、顧客を見つけ、サービスを聞き、最後にアイデアをサービスにするという考え方。ビジネスモデルで成功するには、優れたアイデアをもとに優れたビジネスモデルを開発すること。
16.リーン・アナリティクス
書籍。以下のサイトによると「スタートアップのための実践的なデータ分析において、どう見るか、どう改善につなげるか」を解説してある本の名称。効率的に良い品質を提供する考え、またスタートアップのための書籍だということですが、スライドがあったのでチェック。
- [スライド] 10 分でわかったつもりになる Lean Analytics_10min lean analytics
- 「Lean Analytics」は全てのスタートアップ関係者が読むべき良書 - SELECT * FROM life;
- Lean Analytics: KPI にしてはいけない 8 つの指標 - Hive Color
17.Pivot(ピボット)
Pivot とは事業の見直し。成功するまで方向性を修正していきます。フィードバックループといったところでしょうか。以下サイトによると事業や製品の方向性を起業時から徐々に旋回し、市場のニーズと一致するプロダクトを見い出す行為に使用されるとのことです。