ＩＡのアプローチと押さえるべき11のチェック項目！【WebUX改善実践シリーズ】

読了時間3分

こんにちは！ソシャマノートのこのみです。今日の記事は川崎ちゃんが執筆。「UXデザイン７つの要素を意識してサイトを改善してみよう！」の続編です！

 

こんにちは、マイネット・ジャパンの川崎です。前回は「UXの７つの要素を切り口にサイトの改善を実践しよう」という内容でした。（詳細はこちら）本記事は「WebUXデザイン７つの要素実践シリーズ」と題し、勉強しながら実践・検証する過程をブログで記録する続きものになっています。今日はサイト改善の第一歩として「見つけやすさ」と「使いやすさ」について、まずは課題を抽出するまでのステップと、IAのチェック項目をまとめています。

「みつけやすさ」の改善にはIAが必要です。

IA＝インフォメーションアーキテクチャ
「情報をわかりやすく伝え」「受け手が情報を探しやすくする」ための表現技術。ナビゲーションなど、ユーザーが一目見て目的の情報を探せるようにする。（もしユーザーがブラウザの中で必要な情報を発見することができなければインフォメーションアーキテクチャは失敗ということになる。）情報をその基礎的な単位にし、互いの関連性を整理し意味づけをしてグルーピングし知識やデータを組織化する。

ＩＡが改善されれば「使いやすさも」少なからず向上するはずです。全体の構造を再設計した後、さらに「使いやすさ」をブラッシュアップします。

 

 

ＩＡ改善の課題を導き出すために行った３つのステップ

 

Step1：まずはヒアリングをして、悪いところを洗い出す。

まずは現状の把握。社内でのヒアリング調査で「わかりにくい」「苦痛を感じる時」をリストアップしました。

【今回のヒアリング調査で上がってきた声】
・何を専門としているサイトなのかパっとみてわからない / ・カテゴリーがわかりづらい / ・ファーストビューの情報量が少ない / ・次に読む記事が見つからない / ・領域がわかりづらい / ・h1～h4タグの強弱が弱い / ・左カラムがある事で本文の幅がせまくスクロールするのが面倒 / ・バナーのクリック率が低い / ・サイドバーにあるアクセスランキングなどの記事紹介の視認性が悪い（文字とサムネイルのバランス）　etc.

 

ソシャマノートの記事１つ１つの価値は高いのですが、全体のデザインには問題がいろいろとありそうです。

 

Step2：それぞれの項目が及ぼしている影響を考える。

リストアップしたものを眺めていると、１つ１つの問題が相互に関係し合って悪影響を及ぼしている事がわかります。
「何を専門としているサイトなのかパっとみてわからない」なんていうのはサイトとして大問題です。しかし焦ってそれだけに焦点をあてると、タイトル画像やキャッチフレーズを変えたり、紹介文をはさむなど安直な対応で終わってしまうかもしれません。実際この問題は1部を変えただけでは解決できません。なぜならこの問題はいくつかの要因がかけ合わさって生まれたものだからです。

 

【「何を専門としているサイトなのかパっとみてわからない」の要因】

・ファーストビューの情報が少ない / ・次に読む記事が見つからない / ・サイドバーの記事紹介の視認性が悪い（内容が簡単に把握できない） / ・カテゴリーがわかりづらい

 

何を専門としているかわからないサイトをＲＳＳ登録したり、求人募集のバナーをクリックしたりすることもないでしょう。これは早急に直さなくては！

 

Step3：問題絞って課題を設定する

浮かび上がった問題を解決するにはどうすればよいか。問題を１つに絞って課題を設定します。
今回の課題は「ソシャマノートが何を発信するブログサイトなのかを一目瞭然にする」です。誰にとってどう役立つ情報を発信するメディアなのか。これまで貯めてきた記事（実績）がユーザーに伝わるよう情報を再設計します。

 

 

課題解決へのアプローチ。ＩＡ改善におけるチェック項目

課題を設定したら、それを念頭に置き(1)全体構造の改善(2)基本ユーザー導線の改善(3)インターフェイス視認性の改善のと大きく分けて３つの大項目にわけてサイトをチェックしながら作業を進めていきます。下に進むにつれて粒度が細かくなり具体的・表面的になります。この項目をもとに上がってきた声を整理するのも良いと思います。

 

 

全体構造の改善ポイント

（１） 情報構造：サイトの情報構造の整理ができているか。
（２） グルーピング：情報群がユーザーにとってわかりすいようになっているか。
（３） ラベリング：サイト内で使われている言葉がターゲットユーザーにとって分かりやすいか

基本ユーザー導線の改善ポイント

（４） サイト内の経路：ユーザーの流れが著しく悪い個所はないか。導線に問題はないかをチェックする。ユーザーは主に次の３つで誘導することが出来る。
（５） グローバルナビゲーション：全ページ共通の第一ナビゲーション
（６） ローカルナビゲーション：各カテゴリ内で展開される第二ナビゲーション
（７） コンテキストナビゲーション：関連性を持つコンテンツへのナビゲーション

インターフェイス視認性の改善ポイント

（８） ゾーニング：画面上でのゾーン定義がユーザーにとってわかりやすいか。
（９） ルック＆フィール：トーン＆マナーが使い勝手に悪影響を及ぼしていないか。色彩の組み合わせがユーザーを混乱させるものではないか。
（１０） 画像：大きさや表現方法によってノイズになっていないか。
（１１） プレーンテキスト：1画面上に適切な比率で使用されているか。

 

 

あらかじめこうしたチェックポイントがあると、現状・制作過程・リリース後とクオリティのチェックと比較をしやすくなります。現在は導き出した課題を改善するべく、上記のチェックポイントに基づきサイトマップとワイヤーフレームを作成中です。次回はその過程を執筆できたらと思います。