# IAシンキング
###### tags: `デザインの勉強`

## Chap1: IAというスキル
IAの価値についての説明
- IA: Information Architecture 情報アーキテクチャ
- UXデザインの一部
- 責任あやふやになりがちでタスクも積まれにくい・価値が見えにくい
- 情報アーキテクチャのタスクを積むことが大事
- プロセスとしては「ワイヤーフレーム」に入るが、手を動かす時間の前に情報設計の時間を見積もる

## Chap2: 情報分類とメニューの最適化

何に関する章か: サイトに起こす前段階：情報の分類と構造化

- 情報アーキテクチャの流れ（大枠）
- 1. 情報の組織化: 集めて分類
- 情報収集 → 情報理解 → 情報整理 → 情報分類
- 2. 情報の構造化: 設計して構築
- 情報分類 → 情報設計 → 情報再整理 → 情報構築
- 情報設計とは「素材」の情報を組織化して「コンテンツ」をつくること
- 情報設計の観点は2つあり、これらが一致するのが望ましい
- 観点
- サイトマップ（目に見える部分、ビジュアル）
- ファイルリスト（ソースコード）
- ただサイトマップにはなくてもファイルが必要な場合がほとんど（エラーページ、リダイレクトページなど）　ビジュアル情報設計に対応しないファイルであることが分かったほうが良い
- 情報分類
- 気を付けること
- LATCHの観点で分類
- Location位置・Alphabet五十音順・Time・Category・Hierarchy階層
- ユーザビリティを担保するために標準化する（既存サービス・体験と似た情報設計だと学習コストが低くて使いやすい）
- よく使われているサイトを見て、情報構造を真似する
- "Webサイト価値ランキング"みたいなキーワードで調べると出てくる
- 分類・構造化のtips
- 見出しやタイトルは「誰に」出す情報かはっきりさせる
- 料理の場合は「誰が」「誰に」つくるのか
- シーンを想定してラベル付けする
- 分類する目的を明確にして、目的に必要な情報を追加する

## Chap3: サイトストラクチャの理解

何に関する章か: ページ同士のつながり方

- サイトストラクチャの目的：Webサイトの全体像を目に見えるようにすること
- デザイナーがナビゲーション検討のため
- 顧客がWebサイトの構造を理解するため
- 企画担当者がユーザーの動きを企画するため
- エンジニアがファイル生成場所を確定するため ... など

- 大きく5タイプある
- 階層型分類構造（ツリー構造）
- コンテンツが多すぎない、ユーザーの目的が明確なサイトに向いている
- 例：企業ページ
- 同じ階層のサイトをどうやって行き来するかを考慮する必要がある
- OCCプロダクトはこれだと思う

- ファセット型構造 
- 特定の情報に、さまざまな検索経路でたどり着ける場合に使う
- 例：ECサイト
- 1つの構造を「価格」や「人気」「カテゴリ」など色々な経路に紐づける
- 明確な親子構造がない場合にも使える

- Web型構造 
- 無数の方法で、どのページにも行ける場合
- 例：Wikipedia

- ハブ&スポーク型構造 
- 1つのメインページから他の情報が広がる
- 例：会員マイページ
- コンテンツ間を移動するときはメインページに戻ってから移動
- 色々な機能がある場合、「とりあえずこのページに行けばどの機能も使える」というメインページがあると、ユーザーにとって分かりやすい

- 直線型構造 
- 手続きなど、特定の目的を達成するときに使う
- 例：お問い合わせフォーム、購入手続き
- 他へのナビゲーション（バナー含め）は極力なくす

- 画像元: https://mag.ibis.gs/creative/product/structure_190228/

- 情報アーキテクチャ
- 目的によるが、一般的にフロー図で書く
- ラベルシステムを決めることでもある
- フロー図で扱うのはキーワード → それを「ページタイトル」や「ファイルパス」に紐づけるルールが "ラベルシステム"
- 情報アーキテクチャは論理構造を示すもの
- × ファイル構造を示すもの
- × ページごとの遷移可否を示すもの
- × 情報を全部網羅するもの（目的に必要な情報だけに絞る）

## Chap4. ナビゲーションパターンと用法

何に関する章か: ページ同士の繋ぎ部分

- ナビゲーション: 他のページへのアクセスを可能にしたり、ユーザーに道案内したりする要素
- パターン
- 階層型ナビゲーション: サイトストラクチャに沿って遷移するためのナビゲーション
- 利用者目線: ある程度情報がどこにあるか分かるが、はっきりとしないとき
- 設計者目線: 特定の情報体系で整理・選択してほしいとき

- 機能ナビゲーション: 階層構造と独立のナビゲーション（ヘッダにある検索窓など）
- 利用者目線: 目的の情報をすぐに使ってもらいたいとき
- 設計者目線: いつでも使ってもらいたいとき

- 関連ナビゲーション!: Webページのコンテンツに関連した情報のナビゲーション[](https://i.imgur.com/eoTbnij.png)
- 利用者目線: 目的の文脈に沿った展開を期待するとき
- 設計者目線: 効果的なレコメンドをしたいとき

- ダイレクトナビゲーション: 特定のWebページへ直接リンクを用意するナビゲーション
- 利用者目線: 目的はないがお得な情報を期待するとき
- 設計者目線: 一番強調して訴求したいとき

- パンくずナビゲーション: サイト内での位置を表示
- 利用者目線: 目的まで絞り込んだ工程をさかのぼり確認したいとき
- 設計者目線: 位置情報を示すとき

- ステップナビゲーション: 一連の内容のページ遷移。複数ステップあるフォームのステップ表示・ページネーション　など
- 利用者目線: 目的の手続きの流れやボリュームを把握するとき
- 設計者目線: 必要な流れや手続きを示すとき、同じ種類の情報が多い時

- ダイナミックナビゲーション: 検索など動的に生成するナビゲーション。Vue公式の検索はこれ
- 利用者目線: 目的の情報があるかないかあいまいなとき
- 設計者目線: キーワードが分かっていれば候補から選択したいとき

- 階層型ナビゲーションについて
- ユーザーが迷ったときにたどり着きやすいナビゲーション
- 情報を深掘りする機能を持つ。情報収集や調査に適している
- カテゴリをまたぐとそれまでの深掘りはリセットされる

- 機能ナビゲーションについて
- サイトの目的というより、目的達成に向けたサポートとしてのナビゲーション

## Chap5. ユーザー行動と画面設計

何に関する章か: ページの中にどう情報を配置するか

- 画面設計における3つのポイント
- 画面内のエリア定義（レイアウト）
- 画面前後のフロー（ナビゲーション）の決定
- 画面内の機能の決定（使ったときの挙動）
- エリア案の1つ
- コンテンツエリア
- リレイテッドエリア：コンテンツに関連する内容
- コンテクストエリア：位置情報（階層型ナビ・パンくずなど）
- 流入経路が複数ある場合、流入前～流入後のユーザー体験に注意する
- OCCの場合は不要
- 検索エンジンから流入する場合: 流入してもらうための工夫（SEO/検索エンジン上の見え方）
- 他サイトから直接商品詳細に飛ぶ場合: その画面がファーストコンタクトでもわかりやすい情報設計
- ... など
- エリアを決めるときに、ページどうしをつなぐリンクをどこに置くかが重要
- 画面左側に置くと: 認識しやすい（読みやすい）が、使いにくい（カーソル移動に時間がかかる）
- 画面右側に置くと: 認識しにくいが使いやすい
- フローを考える場合の概要
- どういう状況でユーザーが使いに来るのか、ニーズをパターン出し
- 遷移前画面にあったのと重複した情報だと離脱されるので、被らないように
- 検索で流入する場合、どのようなキーワード・コンテンツを載せるのか選定

## Chap6. ワイヤーフレームの設計

何に関する章か: WFについて

- コンテンツを追うとき、目線はF字パターンで動く
- 参考: https://u-site.jp/alertbox/f-shaped-pattern-reading-web-content
- ページの最も重要なポイントは冒頭の2段落に入れよう。
- 見出しや小見出しを活用しよう。また、そうした要素は、ユーザーがすぐ識別できるように、通常のテキストよりも重要に見えるようにし、目につきやすくしよう。
- 見出しや小見出しは最も重要な情報を伝える語で始めよう。すなわち、ユーザーは最初の2語しか見なくても、その後のセクションの要点を理解できるべきである。
- 関連のあるコンテンツ同士は少量ずつ、たとえば、枠線で囲んだり、背景の色を変えたりして、グループに見えるようにしよう。
- 重要な語句は太字にしよう。
- リンクの書式・文言を工夫
- 行頭文字や数字を利用して、リストやプロセス内のアイテムにユーザーの注意が向くようにしよう。
- 必要のないコンテンツはカットしよう。