今日の教材：「デザインの考え方」の教科書⑧.pdf

サイト納品後の運用について（未来の話）
サイト作成による効果を見る！！予測と対応力

ブログ…wordpressでやる

「ユーザビリティ」と「アクセシビリティー」


ユーザビリティの概要

ユーザビリティとは、そのWebサイトにおけるターゲットユーザーにとっての使い勝手の良さを表す指標です。ユーザビリティの第一人者であるヤコブ・
ニールセンによれば、ユーザビリティの大きな要素は以下の５つです。

①効率性 (Efficiency)
一度ユーザーがそのシステムを習得すれば、２度目以降は素早く使用できる操作設計がなされているか、という点です。つまりユーザーの効率的なサイ
ト活用を補助する観点です。

②学習のしやすさ(Learnability)
初めてのユーザーでも一通りの操作ができるか、という点です。誰でも簡単に操作方法が理解できるような仕組み作りがこれにあたります。

③記憶しやすさ(Memorability)
しばらく使っていなくても、またすぐに使用できるか、という点です。たとえば閲覧履歴や、閲覧済みのリンクが異なる色で表示されることがこれに当たります

④エラー発生率(Errors)
システムのエラー発生率を低くすることです。エラーを起こしにくくするほか、もしエラーが発生しても簡単に回復できるように、という点です。また、致命的なエラーが起こらないようにすることもこれにあたります

⑤満足度 (Satisfaction)
ユーザーがシステムを快適に利用できるようにする、という点です。操作に問題なく、楽しく利用できるようにする、という観点もこれに当たります。
そのサイトにおける「ターゲットユーザー」がある状況や目的において使いやすいか、というのがユーザビリティです。そして結果的にそのユーザーに「嫌な思いをしない」「また使いたい」と思わせ、リピーターになってもらうのがユーザビリティの目的です。

ユーザビリティの具体例

ユーザビリティにおいて気を付けるべきは以下の４つのポイントです。
ファーストビュー
ファーストビューとは、Webサイトなどにおいてスクロールする前の段階で最初に見える範囲のことを指します。企業サイトにおいては、サイトを運営してい
る「企業ロゴ」、サイトの雰囲気を伝える「メインビジュアル」、サイトの主要リンクにつながる「グローバルナビゲーション」の３つがユーザビリティ的に含むべき３点です。
他にも、予約サービスを提供しているのであれば、予約フォーム、イベントをおこなっているのであればイベントページへのリンクボタンなど、主要なサービスにおけるシステムもファーストビューに組み込むことがあります。しかし、ファーストビューのスペースは限られているので入れる要素は精査しなければなりません。

メタファー（世界観）とアイコン
ユーザビリティにおけるメタファーとアイコンとは、操作や操作した結果を一目でわかるような絵や図で表すことを指します。デザインにおいて、現実の世の中に存在するものにたとえることもこれに当たります。
たとえば、検索において虫眼鏡のアイコンを用いたり、ホームに戻るために家のアイコンを用いたりすることがこれに当たります。何ができる機能なのか、理解しやすくするための工夫です。

アフォーダンス
アフォーダンスとは、説明がなくても、デザインや画面設計によって、特にガイドがなくても使い方がわかるようにすることです。たとえば、ヘッダーの企業ロゴをクリックすればトップページに戻る、青文字で下線が引かれているテキストはリンクに飛ぶことができる、などといった機能がユーザビリティにおけるアフォーダンスです。

デフォルメ
デフォルメとは、実際のものを簡略化したり、色や形をかえて特徴づけることであり、主にイラストによって表現されます。Webにおける例としては、マップを写真ではなく、イラストで表したりするのもデフォルメの一種です。

アクセシビリティの概要

アクセシビリティとは、年齢や身体的な制約の有無や利用環境などに関係なく、誰でも必要とする情報に簡単にたどり着けて、利用できることを指します。
特にWebでは、視覚障害を持つ方や色覚特性がある方、また、高齢者などに配慮が求められます。

アクセシビリティの具体例

スクリーンリーダー（音声案内）とalt属性
スクリーンリーダーはPC上のテキストを音声で読み上げてくれる機能で、主に目の不自由な方に用いられます。サイト上において重要な情報は、画像に
依存せず、文字による説明を併記することで、音声案内を使用する方にも理解しやすいサイトとなります。画像にalt属性でキャプションを入れるのもこの一例です。

音声読み上げ機能使ってみよう！
Edge：デフォルトであり
Chrome：プラグイン入れる必要あり


文字サイズの変更を可能にする
文字サイズを変更できるボタンの設置もアクセシビリティの一つです。主に高齢者を対象とした仕組みです。また、動く文字や点滅する文字もアクセシビリティの観点からは不親切といえるかもしれません。

コントラスト比を付ける
コントラストとは、画面表示における明暗の差のことを言います。また、コントラスト比は、画面上の最も明るい白表示と最も暗い黒表示の明るさの比率のことを指します。この比率が高いと明暗の差がはっきりし、シャープで鮮やかな表現になります。
テキストと背景色のコントラスト比が低いと読みづらくなるため、コントラスト比はWeb制作を行う上では必ず確認しましょう。

色に頼ったデザインを避ける
「色覚異常」をご存じですか？「色覚異常」とは、普通の見え方に比べ、色の識別がしにくい障害です。日本では男性の5%、女性の0.2%の割合で色覚
異常だといわれています。色覚異常と一口に言っても様々な見え方がありますが、ほとんどの場合が赤、もしくは緑の識別が困難だと言われています。
このため、Web制作においては、「色によって重要性を判断する、操作をする」といったような設計は避けましょう。特にフォームや重要事項の確認画面などは気を付けたいところです。

赤や緑を使用するなら、必ず文字とセットにする！
ユニバーサルカラー

Webコンテンツのプラスとして

「JavaScript」と「jQuery」

：動的なWebページを作成する事のできるプログラミング言語
HTMLやCSSでできないことをやるものなので、HTMLやCSSができるようになってから！！
jQueryはJavaScriptの簡易版

Google Analytics（グーグルアナリティクス）

とは、GoogleのWebサイト解析ツール。
ユーザーがWebサイトに訪れた後にどのような行動をしたか。ページ滞在時間や直帰率・離脱率等
↕
Google Search Console（グーグルサーチコンソール）：
「Webサイトに訪れる前」を分析するツール。どのブラウザから来たかなど。

他、SNSやWordpress（ブログ）などもWebコンテンツのプラス。