簡単に分かった!UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ

コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IAの違いが漠然としているときに。
エンジニア速報は Twitter の@commteで配信しています。
もくじ
IA(情報アーキテクチャ)
UX(体験)
UI(表現)
アクセシビリティ
スタートアップで成功する
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のタスクは、どの位置にどういった情報を配置するのか、画面遷移、画面内の機能の決定になります。
デザインカンプになる前のワイヤーフレームは情報アーキテクチャの成果物ともいえます。一般的にはフォントや配色を盛り込むことは少なく、書体やサイズまで考慮された試作品のようなものをプロトタイピングと呼びます。
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とは事業の見直し。成功するまで方向性を修正していきます。フィードバックループといったところでしょうか。以下サイトによると事業や製品の方向性を起業時から徐々に旋回し、市場のニーズと一致するプロダクトを見い出す行為に使用されるとのことです。
- ケーススタディ3「成功するスタートアップの事業方向転換手段 “Pivot” YouTube, PayPal,そしてFacebookでは」 | "Lean Startup Japan"
- リーンスタートアップで小さく始めよう | Social Change!
スポンサード リンク
関連記事
- プログラミング初心者やWeb制作に役立つ例文・資料・規約・早見表などのまとめ
- 納品前に助かった!今Web制作している人必見の品質・納品チェックシート
- 意外となかった!Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート
- すごく助かった!Webサイト制作「受注前」に知っておきたい知識
- 知っておいて良かった!サイト制作後も助かる保守方法まとめ
- すごい役立った!Web制作に特化した「提案書」に入れておきたいこと、知識
- フリーも社内も助かった!Web制作フローが「完璧」にわかる資料や流れのまとめ
- 意外と簡単!GoogleDriveで「解析、社内ツールや保守レポート、勤怠管理」などを作成できる総まとめ
- これだったら分かる!Webに関係する統計、資料、情報まとめ
Leave a Comment