calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

  • 作成：2014/02/17
  • 更新：2014/11/01
  • ディレクション
UX_design

コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IAの違いが漠然としているときに。

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

IA（情報アーキテクチャ）

UX（体験）

UI（表現）

アクセシビリティ

スタートアップで成功する

IA（情報アーキテクチャ）

１．基礎知識

ia_knowledge_UXUIIA

情報アーキテクチャとはWebサイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。

２．サイトストラクチャ

site_structure_UXUIIA

サイト全体の情報を構造化した文章をサイトストラクチャ、もしくはサイトマップと呼びます。Webサイト全体像を目に見えるようにすることが目的。

ナビゲーションをデザインする時やファイル配置などの構造を設計する際にサイトストラクチャが必要になります。

navigation_UXUIIA

IAのお仕事であるナビ設計。ユーザーの負担にならないために、目的の情報へスムーズに辿り着けるようナビゲーションを設計します。ナビの目的は、ゴールと、ゴールまでの手順を示すことです。

４．画面設計

screendesign_UXUIIA

画面設計が中途半端になるとデザイナーに引き継がれたとき修正や見直しが発生してしまいます。IAのタスクは、どの位置にどういった情報を配置するのか、画面遷移、画面内の機能の決定になります。

デザインカンプになる前のワイヤーフレームは情報アーキテクチャの成果物ともいえます。一般的にはフォントや配色を盛り込むことは少なく、書体やサイズまで考慮された試作品のようなものをプロトタイピングと呼びます。

５．IAツール

reference_UXUIIA

情報設計する際に便利なツールをまとめました。

UX（体験）

６．基礎知識

basic_knowledge_UXUIIA

情報アーキテクチャはUXの一部です。UX（ユーザーエクスペリエンス）とはユーザーが製品やサービスに触れたときの「心地よさや楽しさ」などの感情を引き起こすなどの、一連の操作から得られる体験を意味します。

７．ペルソナ（人物像）

persona_UXUIIA

ペルソナとは設計を支援するために定義する「仮想のユーザ像」のことです。プロトペルソナでは、製品を使うのは誰か？その理由は何か？などターゲットがどうすれば喜ぶのか考えて設計します。ペルソナは、ユーザー エクスペリエンス (UX) 設計のための基本的なツールの 1 つです。

ペルソナ作成後はペルソナの行動をシナリオとして書き出します。ユーザーのニーズを整理し、行動の流れを可視化します。

８．仮説作成

hypothesis_UXUIIA

アイデアとペルソナを見ながら、「誰のために、どんな機能を、どんな成果を実現するのか」仮説表を作ります。ある程度決まったら、アイデアの優先順位と捨てる部分を決定します。仮説表をつめたらデザインです。

９．スタイルガイド

style_guide_UXUIIA

デザイナーと非デザイナー共同で創造的な活動を行う場合、面白いアイデアが生まれることがあります。デザインに関してチームを同じ方向へ導くために、スタイルガイドを作成します。

アプリやサービスの場合は、この後テストを行い、フィードバックとリサーチします。

UI（表現）

１０．UIとUXの違い

ux_ui_UXUIIA

最も簡潔に言えばUI（表現）とUX（体験）。UIとは人間と物の接点、人間の目の前に表示される操作体系のことを指します。ユーザーがUIを通して体験することがUXです。ユーザビリティとは「使いやすさ・理解しやすさ」を表したもの。

１１．インタラクティブ（リッチコンテンツ）

interactive_UXUIIA

インタラクションとはJavaScriptなどを使って、ユーザーの入力に応じて適切な応答や画面遷移を伴うインターフェイス設計。画面遷移を伴わずに画面状態を変更したり、音楽や映像を使ってリッチな表現をしたり。「相互作用」と訳されます。

アクセシビリティ

１２．基礎知識

accessibility_knowledge_UXUIIA

アクセシビリティとは情報への「アクセスのしやすさ」の度合い。身体的なハンデや高齢者だけじゃなくて、健常者を含めた多くの環境に対しても使い勝手や情報のアクセスがしやすくなるよう考慮。すべての人が問題なくコンテンツや機能を利用できることです。

１３．ガイドライン

guideline_UXUIIA

WCAG2.0の理解や実装に関する情報。日本ではWebサイトのアクセシビリティはJIS(日本工業規格)によってJIS X 8341-3が定められています。

１４．ファインダビリティ

findability_UXUIIA

ユーザビリティが使いやすさを示す概念、ファインダビリティは「発見されやすさ」を示します。コンテンツはアクセシブルな状態が必要で、その次にファインダビリティが問われます。

スタートアップで成功する

１５．リーンスタートアップ

lean_startup_UXUIIA

無駄を省きスタートアップを成功に導くための考え方。こちらのサイトによるとサービスから作るのではなくて、顧客を見つけ、サービスを聞き、最後にアイデアをサービスにするという考え方。ビジネスモデルで成功するには、優れたアイデアをもとに優れたビジネスモデルを開発すること。

１６．リーン・アナリティクス

Lean_Analytics_UXUIIA

書籍。以下のサイトによると「スタートアップのための実践的なデータ分析において、どう見るか、どう改善につなげるか」を解説してある本の名称。効率的に良い品質を提供する考え、またスタートアップのための書籍だということですが、スライドがあったのでチェック。

１７．Pivot（ピボット）

pivot_UXUIIA

Pivotとは事業の見直し。成功するまで方向性を修正していきます。フィードバックループといったところでしょうか。以下サイトによると事業や製品の方向性を起業時から徐々に旋回し、市場のニーズと一致するプロダクトを見い出す行為に使用されるとのことです。

スポンサード リンク

この記事を書いた人
投稿者：commte

株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL：西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。