プランニング

ヒアリング

  • あくまでもなごやかに、おだやかに
  • 相手が話しやすいのは、ホームページのことではないと心得る
  • 相手に考えさせてはいけない
  • 仕事や環境のことを話しながら、ホームページへのヒントをこちらが見つけ出すこと
  • ホームページに盛り込むテーマは、相手に出させるのではなくこちらから提案する
  • すでに決まっている場合は、実現可能かどうか検討する
  • 背伸びをして、安請け合いをしない
  • 飛び込みで案件を作る場合には、無理をしない
目的とターゲット
  • 仕事の内容や話の中で、誰に見てもらいたいか、見てもらうと何が起こるかを想定する（技術的にはペルソナ法がありますが、この段階では想定しない）
  • 細かい考え方はありますが、初心者はほぼ実現することは難しいことが多いので、こちらができる範囲でお任せしてもらうことが現実的です
可能であれば・・・・

リサーチ・下調べ

  • クライアントに訪問する前に前提知識を得ておく
  • 競合他社の分析
  • 検索エンジンを使った下調べ

コンセプトシート

  • ヒアリングや打ち合わせを通してサイトの概要を把握したら「コンセプトシート」を作成します
コンセプトシートに盛り込む内容
  1. WHEN（いつ）：公開スケジュール
  2. WHERE（どこで）：サバースペース、ドメイン（ない場合には、取得したいドメインなどを記載します）
  3. WHO（だれが）：案件を進行していく上での担当者、公開後に運用をおこなう担当者と連絡先
  4. WHAT（何を）：コンテンツ、サイトの目的と狙いの達成のために必要なコンテンツ
  5. WHY（なぜ）：目的・ゴール・成果、期待する成果を記載
  6. HOW（どのように）：プロモーション・集客、サイトへの誘導、集客について記載
  7. WHOM（だれのために）：ターゲットユーザー、サイトを利用するユーザーを見込む

フローチャート（サイトマップ）

  • サイト構成
  • サイトトップ（index.html）からのフローチャート
  • カテゴライズとグルーピング、ラベリング（ファイル名と、カテゴリ名を決める）

シナリオ

ユーザーの行動に基づいてタスクとページ遷移を検討する。

  1. 商品を検索する（検索ページ）
  2. 商品情報を取得する（商品一覧）
  3. 商品詳細情報を確認
  4. ショッピングカートに入れる
  5. 決済手続き
  6. 完了
クリック数を減らす
  • ユーザーは目的のコンテンツが見つからない、見つかりにくいと感じた瞬間に離脱します
  • 運営サイトが推したいコンテンツは、トップページから直接リンクできるようにする
シナリオでサイト構成をブラッシュアップ
  • キーワード検索を想定した文書構造の構築

ユーザビリティ

  • ユーザー側の使い勝手・使いやすさという意味
  • ユーザーが不便を感じないようにするための配慮
Webユーザビリティ


学習しやすさ

  • システムは、ユーザーがそれを使ってすぐ作業を始められるように、簡単に学習できるようにしなければならない


効率性

  • システムは、一度ユーザーがそれについて学習すれば、後は高い生産性を上げらるよう、効率的な使用を可能にするべきである


記憶しやすさ

  • システムは、不定期利用のユーザーがしばらく使わなくても、再び使うときに


エラー

  • システムはエラー発生率を低くし、ユーザーがシステム使用中にエラーを起こしにくく、もしエラーが発生しても簡単に回復できるようにしなければならない
  • 致命的なエラーが起こってはいけない


主観的満足度

  • システムは、ユーザーが個人的に満足できるよう、また好きになるよう楽しくりようできるようにしなければならない
Webユーザビリティの具体的なポイント
  • ８秒ルール（目的のページを開く際、８秒以内に表示されないと離脱する）
  • ３クリックルール（目的のページにたどり着くのに、３クリック以内でナビゲーションする）
  • パンくずリスト（ページ数が多いサイトでは、パンくずリストを設けるとユーザーがサイトのどこにいるかを迷わずにすむ）

アクセシビリティ

  • 高齢者や障害者に配慮してサイトを構築することを「アクセシビリティ」と呼びます
  • W3Cにより、WCAG（Web Conents Accessibility Guidelines）としてまとめられています
  • 日本では「JIS X8341-3」
  • 解説サイト「Infoaxia」
アクセシビリティの基本
  • 読み上げブラウザ対応とマウス操作以外の代替え手段の提供


読み上げブラウザへの対応

  • 適切に読み上げられるように配慮する
  • 画像には必ず代替え文字をつける
  • 色の識別なしで意味が伝わるように配慮する
  • テーブルが正しい順番で読み上げされるように配慮する


マウス操作以外の代替え手段の提供

  • キーボードによるアクセス
  • その他のスイッチなどによるアクセス
アクセシビリティのチェック方法


WebInspector

  • WebInspector（ウェブインスペクター）は、ウェブサイトのアクセシビリティを診断するソフトウェアです
  • 主に高齢者や視覚に障害のある方にとって、重要な問題を指摘します



ColorSelector

  • ColorSelector（カラーセレクター）は、背景色と文字色の見やすさを判定するソフトウェアです



ColorDoctor

  • ColorDoctor（カラードクター）は、ディスプレイ上の表示内容を、グレースケールや各色覚特性に応じてシミュレート表示するソフトウェアです


ペルソナ

  • ペルソナ法
  • 標準的なユーザーから、モデルとなるユーザーを抽出し、その視点や価値観、スキルなどにフォーカスしてWebを制作していくことを「ペルソナ法」と呼びます
  • Webサイト制作の案件では、クライアントの価値観が重視されてしまいがちですが、本来重視するべきはターゲットユーザーの価値観です
  • ペルソナ法の目的は、制作の視点をターゲットユーザに向けることです


《ペルソナ法を用いて検討すべきポイント》

  1. コンテンツ（サイトを扱う内容）
  2. プロモーション（サイトの告知、集客）
  3. インタラクション（メニューやボタン、サイト内のナビゲーションの実装方法）
ペルソナのプロフィール作成
  • 写真
  • 名前
  • 性別、年齢
  • 性格
  • 仕事内容、職歴
  • 居住地、住居
  • 家族構成、ペット
  • 趣味
  • 平日や休日の過ごし方
  • 年収、小遣い
  • 最近の関心ごと
  • 達成したい目標
  • PCスキル
  • インターネット接続
  • オンラインショッピング利用の有無


ペルソナ作成の注意点

  • 現実の人物、知り合いの人物はペルソナに設定しません
  • あいえない設定は行わない