■すべての人に文字を読みやすくするために考えておきたいこと

みなさん、こんにちは。ユーザビリティ・デザイン担当の坂本です。

台風が連続して発生して被害も多く出ているようですが、みなさまのところは大丈夫でしょうか。
地球温暖化のせいなのかはわかりませんが、年々今までの夏とは違うような気がしていて、心配になったりしています。気候はともかく、体の疲れ具合は体力の衰えのせいなんだろうなぁと思いつつ、暑さに負けて特に何もしていないわけなので、ご飯が美味しい秋が待ち遠しいところです。

それでは今回の課題に行ってみましょう。

世界保健機構(WHO)などの定義では、65歳以上の高齢者が7%を超えた社会を「高齢化社会」、14%を超えた社会を「高齢社会」、21%を超えた社会を「超高齢社会」とされています。日本では2007年に21.5%を超えており、超高齢社会に突入して10年が経とうとしています。また人口の減少も問題になっており、今後もこの傾向が変わることはないと考えられます。

そのような中で2016年3月22日には、JIS規格「高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ(JIS X 8341-3:2016)」が公示され、4月1日には「障害を理由とする差別の解消の推進に関する法律」(障害者差別解消法)が施行され、より多くの人が見られるwebサイトの制作が強く求められています。

今回は「視覚」で情報を取得するための、文章と文字の色について考えてみましょう。
下の画像のA,Bをご覧ください。

http://webtan-tsushin.com/wp-content/uploads/2016/08/67b8aceed3c4f5d8a409bb2b9a9815bc.png

Q1.　白(#FFFFFF)と黒(#000000)を使ったAの2つの文章のうち、読みやすいと感じるのはどちらでしょうか?　その理由も教えてください。

Q2.　白(#FFFFFF)とグレー(#777777)を使ったBの2つの文章のうち、読みやすいと感じるのはどちらでしょうか?　その理由も教えてください。

「どちらとも読みやすい」「どちらとも読みにくい」のような回答でも構いませんが、その場合にはどちらの方が好みであるかをお答えください。

■文章の中の強調について

ウェブページにおける最も重要な要素は「文章」です。

もちろん写真の訴求力は強いのですが、検索結果や知人がSNSでシェアした先のページがどのようなものであるのかを判断するのもテキストの内容ですし、ページに到達されてから、商品やサービスが必要であるかどうかを判断するのは文章にしかできないことなのです。

文章表現を行う場合、わかりやすい日本語を書くのはもちろんなのですが、重要な部分をより見せるための工夫も重要です。

そこで今回の課題は文章内の強調をどのようにするかを考えるのが今回の課題となります。


強調にはどのような色を使うのが望ましいでしょうか?
強調に使われている色と、その色が選ばれた理由を教えてください(自分が管理するページで構いません)。

もしとりあげるサイトが浮かばない場合には、「ウェブ担当者通信のメルマガ登録ページ(http://webtan-tsushin.com/eletter)の強調色を変える」という想定で考えてみましょう。

回答例)
サイト:「運営中の自社サイト」あるいは「ウェブ担当者通信のメルマガ登録ページ」

前提となる画面の色
本文部分の背景色:白(#FFFFFF)
文字色:黒(#333333)
リンク色:青(#0000DD)

強調の色
強調1:○○色()　理由:～～～～
強調2:△△△色()　理由:～～～～
強調3:△△△色()　理由:～～～～
・
・
・

■効果的なアニメーションテクニックとは?

Flashの衰退以降、アニメーションがあまり使われなくなっていましたが、去年から今年にかけて、CSS3を利用するなどして、動きが多彩なサイトが多く見られるようになっています。比較的簡単に導入できるものとしては、animate.cssや古典的なGIFアニメーションなどが挙げられるでしょう。

　animate.css
　https://daneden.github.io/animate.css/

またよく見かけるところでは、スマートフォンなどでボタンを押すとメニューがスライドして横から出てきたり、スクロールするとサイドバーが追従してくるなど、メインビジュアルのスライド以外に、細かいパーツの表現が豊かになってきたことを感じます。

文章を上から読んでいくだけであれば、動かなくても困ることはないのですが、動くことによって視線が引きつけることができたりもします。変化の乏しいページや縦に長いページであれば、少し動かすだけでも文章を読む行動にメリハリが生まれてきます。

そこで今回は動かないページにアニメーションを付けてみましょう。課題となるページはWeb担当者通信のこちらのページです。
　
　http://webtan-tsushin.com/kouza/jquery_basic.html

---
Q1. 課題ページの中で1ヶ所だけアニメーションを使えるとするならば、どの場所にどんなアニメーションを使いますか?　その場所と理由をお答えください。

例)ロゴを動かしてサイト名を覚えてもらいたい、SNSボタンを動かしてシェアを促したい　など

Q2. そのアニメーションはどのタイミングで動かすのが効果的でしょうか?

例)ページの読み込みが終わったとき、スクロールで見出しが出現した瞬間　など

■エントリーフォームの改善

申し込みフォームやお問い合わせフォームには使い勝手が重要です。フォームにたどり付くまでの流れがよくても、フォームが使いにくい、申し込みにくいことで、多くの人が最後まで進めずに離脱することも多いのです。
そこで今回はフォームの改善について考えてみることにしましょう。

下の図は同じ内容のフォームをパソコンやタブレットの大きな画面で見た場合とスマートフォンで見た場合の両方を並べています。

http://webtan-tsushin.com/wp-content/uploads/2015/07/diagram.fw_.png

このフォームをより使いやすくするために、必要なことを思いつくままにご回答ください。入力しやすいこと、何を入れればいいかわかりやすいこと、誤操作を防ぐこと、入力を減らすことなど、様々な課題が潜んでいます。

質問1　両方のフォームに共通する改善ポイントはどこでしょうか?

質問2　スマートフォンのフォームで特に気を付けるべきことは何でしょうか?

■スマートフォン対応で見た目に気をつけるべき点は?

Googleから、2015年4月21日よりモバイルフレンドリー(携帯端末・スマートフォン対応)であるかどうかを検索結果に反映させるという公式の発表がありました。対応を急がれている方も多いのではないでしょうか。

　検索結果をもっとモバイル フレンドリーに
　http://googlewebmastercentral-ja.blogspot.jp/2015/02/finding-more-mobile-friendly-search.html

個人的にはよほどスマートフォンからの流入に依存していなければ、4月21日に間に合わずとも、きちんと時間を取って、じっくり取り組めばよいと思いますが、私のようなウェブ制作者のサイトへのアクセスでもスマートフォンからのアクセスが増えていたりする現状を考えると、いずれ対応しなければならないことは間違いありません。

そこで今回は『スマートフォン対応』をする際に、文字や画像・ナビゲーションなどの見た目のデザインで、気を付けるべき点を優先順位を付けていただきます。以下の条件でお答えください。

　・現在のページはスマートフォンに対応しておらず、1から作り直しをする時間はない
　・時間の猶予がないため、2点のみ変更・修正できる

問題

1. まず最初に直したい部分はどれですか? またその理由を教えてください。
2. 2番目に直したい部分はどれですか? またその理由を教えてください。

例　1.文字のサイズを修正する　理由・・・
　　2.バナーを作り直す　　　　理由・・・

■ナビゲーションドロワーを押すと画面はどう動くのか?

最近スマートフォンやタブレット用のウェブサイトで ≡ のような3本線のナビゲーションが多く見られるのにお気づきでしょうか? このボタンはハンバーガーやナビゲーションドロワーなどと呼ばれています。

さて、いろいろな場面で見られるこのナビゲーションドロワーを操作するとどのような動きになるか、皆さんは想像できていますでしょうか?

このナビゲーションは様々な場面でまったく異なる挙動をすることも多く、予想外の動きにとまどってしまうこともたびたびです。

そこで皆さんに今月の問題です。

1. このナビゲーションを操作すると、どのように動くのが理想でしょうか? 以下の3つから選んで、その理由もお書きください。

　A. 画面自体がスライドし、縦並びのメニューが表示される
　B. 画面はスライドせず、ボタンの一覧がナビゲーションドロワーの下に表示される
　C. その他(具体的にお書きください)

2.ナビゲーションドロワーを使うメリットとデメリットは何でしょうか?

■押してもらえるボタンとは?

ほとんどのウェブサイトには何らかのボタンが配置されています。キャンペーンなどのバナーもそうですし、単純なナビゲーション、お問い合わせや資料請求ページのリンクなど多用なボタンが存在します。

今回はこのボタンを押してもらいやすくするための考え方・工夫に注目してみましょう。どうすれば押してもらえるのか、何をすればコンバージョンに影響が出るのか。皆さんの工夫を教えてください。

Q1.ボタンの装飾(画像でもCSSでも)にあたって、どのようなことに気をつけていますか?
Q2.ボタン以外の部分について(周囲に「詳細はこちら」などのテキストを配置するなど)、何か気をつけていることはありますか?
Q3.アクセス解析等でボタンが押されないということがわかった場合、どのように改善しますか?

■トップページによく採用されているスライドショー、役に立ってる?

様々なWebサイトのトップページで見かけるスライドショー。比較的簡単に導入できますし、「動くことがかっこいい」という感じで、なんとなく取り入れているサイトも非常に多そうです。

さて、このスライドショーですが、本当に役立っているのでしょうか?　もしかしたら役立っていないどころか、邪魔になる場合もあるのではないでしょうか?　今回はスライドショーによって実現できることや、デメリットについて考えてみましょう。

Q1.スライドショーの良さは何だと思いますか?
Q2.スライドショーを付けることでできることは何だと思いますか?
Q3.スライドショーによるデメリットは何でしょうか?

■ランディングページのデザインのイメージはどう伝えればいい?

サイトの訪問者増を図るため、ランディングページを作成することになりました。今回は自分で作るのではなく、他の作業者あるいは制作会社に外注を行わなければなりません。できるだけ早く公開したいため、デザインのやり直しを極力避けたいという場合、希望のデザインに仕上げてもらうために、どのようなことを制作者に伝えなければならないでしょうか。

コーポレートカラーは存在しますが、サービスのイメージに合わないため、異なるイメージのページにしたいという前提で、以下の2問にお答えください。

Q1. 希望のイメージや色を制作者にどのようにして伝えますか?
Q2. イメージや色以外に伝えておかなければならないことは何ですか?

■押してほしいバナーを目立たせるにはどうすればいい?

現在のサイトのトップページには、押してほしい画像やナビゲーションバナーなどが多く、少しごちゃごちゃしています。
アクセス解析をすると、どうも押されたいものが押されていないようです。

今回、トップページのコンテンツエリアにある情報を整理することが決まりました。
その前提で以下2問にお答えください。

Q1.たくさんある情報の中から3つを選びたい。どうやって選びますか?
Q2.目立たせたいものが決まったとして、本当に目立つかどうか不安です。デザイン面でどうチェックし、どのように配慮しますか?