読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

プランニング

リサーチ・下調べ

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

コンセプトシート

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

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

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

シナリオ

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

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

ユーザビリティ

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


学習しやすさ

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


効率性

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


記憶しやすさ

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


エラー

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


主観的満足度

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

アクセシビリティ

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


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

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


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

  • キーボードによるアクセス
  • その他のスイッチなどによるアクセス

ペルソナ

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


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

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


ペルソナ作成の注意点

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