スタッフ厳選おすすめ情報

ホームページ改善

おすすめ情報

2017年1月4日

Webデザイナーがこだわるべき情報設計とは

information-design-webdesigner-should-consider

Webデザインを制作するとき、
みなさんはどんなことに気をつけているでしょうか?
もちろんデザイン性や
クライアントの要望に沿うことも
大事なことと言えますが、
それ以前に
まずはWebデザイナーなら知っておいて欲しい
過程が、「情報設計」です。
「情報設計」と聞くと、
デザインとはかけ離れて聞こえるかもしれませんが、
情報設計にこだわることで
ユーザーにとって使いやすく、
わかりやすいサイトができあがってきます。
この情報設計の過程は、
Webサイト制作をしていく中で
ワイヤーフレームやサイトマップの作成以前に
取りかかるべき工程です。
そしてしっかりと情報設計を行った上で
ページ構成・サイト構成といった
ワイヤーフレームやサイトマップを
作成していくのが良い手順だといえます。
今回は
その情報設計について詳しく紹介していきたいと思います。

情報設計とは何か?

Webデザインを制作したとき、
「なぜこういうデザインにしたのか?」
と聞かれて、あなたは即答できるでしょうか?
情報設計とは、簡単に言ってしまえば
利用者にとってわかりやすく、使い勝手がよい
設計をしていくことを指します。
情報設計をしていくことで、
デザインができあがったとき、
ボタンひとつにしても、
「なぜここにこのデザインで
ボタンを置いたのか?」
という質問にも答えられるようになるでしょう。
制作する上で必要な情報をまとめ、
ユーザにとってわかりやすく、
使い勝手がいいように設計をしていくこと、
更にはユーザーをゴールまで
きちんと誘導できるような設計を
していくことが、
情報設計といえます。

情報設計の流れ

実際に情報設計する際に、
まずはクライアントのヒアリングで
詳しく色々な情報を聞き出していきましょう。
その中でも最低限こちらは
考慮していくべきというポイントを
挙げていきたいと思います。

なぜWebサイトを作るorリニューアルするのか?

Webサイトを制作するにあたり、
まずはなぜサイトを作りたい、
もしくはリニューアルをしたいと思い、依頼したのか?
その点は必ずヒアリングしていただきたい項目です。
なぜなら、
その「きっかけ」が
今回制作するサイトの課題であり、
改善するポイントであるからです。
例えば、
・訪問数が少ない
・必要な情報が載せきれていないためユーザーが不満に思っている
・ECサイトの売り上げを伸ばしたい
・企業の認知度をあげたい
などなど、
Webサイトを制作する上で期待している効果が
どういったものなのか?
何を問題と感じているのか?
そういった点を明確にしていきましょう。
企業サイトの場合などには、
とりあえず案内できるホームページが欲しい、という
クライアントも多くいるかと思います。
そういった方にも、
せっかく作るのであれば、
ホームページを通してどういうことを
伝えていきたいか?
を必ず聞くべきだと思います。
例えば、採用情報をサイトにしっかりと載せていき
サイトからの応募も受け付けたいなども
出てくるかもしません。
特にサイトを作る目的がなく、
案内できるものでいいのであれば、
最近はテンプレートなどもあり、
専門知識がなくてもWebサイトが作れてしまうので、
自社で簡単に作ってしまった方が
コストもかからず良いとは思いませんか?
それでも費用をかけて制作会社にお願いをする、
ということは少なからず制作をすることで何かを
求めているということは理解しなければいけません。
それが何なのか、
それに応えるためにはどうしていけばいいのか
クライアントと一緒に考えていくことが
大事だと思います。

原因を分析しよう

こちらはサイトのリニューアルの際に
特に重要となってきます。
現行サイトで、問題と感じているものが
なぜ発生しているのか?
どこで発生しているのか?
問題点の分析をしていきましょう。
この分析においては、
制作会社によっては他部署がしてくれたり、
また何かツールを使ったりと
様々な方法があります。

戦略をたてよう

現状の問題点やその原因の分析、
把握ができたところで
どうしていくべきなのか戦略をたてていきましょう。
その中で、競合他社との比較、
差別化、
または対象となるユーザー(ペルソナ)の設定など
を考えていく必要があります。
そして、ゴールの設定、
そこまでの誘導など様々なことを
この段階で整理していきます。
ゴールに向けての施策を練っていき、
しっかりとした目的・目標をもった
Webサイトを制作していきましょう。

Webサイトの設計をしよう

施策とゴール、
今回制作するWebサイトの目的・目標を
明確にしたところで、
ようやくWebサイトの中身を考えていきます。
設計前の情報整理がないと、
設計をする際にそもそもの目的がブレてしまったり、
クライアントの意向にばかり沿った設計に
なってきてしまいがちなので、
まずはここまでの過程(情報整理)を
必ずしっかりと行い、
クライアントにもそれを共有していきましょう。

必要なコンテンツを洗い出そう

まずは現行サイトを参考にコンテンツを洗い出し、
その中でも必要なコンテンツ、
必要でないコンテンツ、
または載せていきたいコンテンツなどを
整理していきましょう。
ゴールを明確にしていることで、
そのコンテンツがゴールに向けて
必要なのかどうか検討しやすくなると思います。
また、この時に重要なのが、
必ずしも全ての情報を
Webサイトに載せるべきではない、
ということです。
コンテンツが多くなれば多くなるほど、
ユーザーに何を伝えたいのか?が
わかりにくくなり、
結局のところ何のためのWebサイトなのかが
わからなくなってしまうことが
多々あります。
ユーザーにとって本当に必要なのかどうか
Webサイトに載せるべき情報なのかどうかを
この工程でじっくりと考えていきましょう。

コンテンツを見せる流れを考えよう

コンテンツを見せていく中でも、
その流れによって
伝わりやすさが格段に違ってきます。
どんな流れで見せていけば
ユーザーがわかりやすく、
納得してくれるのかを考えましょう。

サイト構成・ページ構成を作成しよう

必要なコンテンツと流れ(重要なコンテンツ)を整理したところで、
ようやくサイト構成とページ構成を作成していきます。
この工程がいわゆる
サイトマップ・ワイヤーフレームの作成となります。

ここまでの一連の流れが
「情報設計」となります。
これ、全部Webデザイナーがやる仕事なの!?と
思われる方も多いかもしれません。
制作会社によって異なってくるとは思いますが、
制作側との認識の違いを
減らしていくためにも、
制作側もこの流れを必ず知っていなくてはいけません。
その中で、
ヒアリング・情報整理までは他部署で行い
その情報を制作側に落とし込むという
制作会社も多いのではないでしょうか?
情報設計に全て携われないとしても
最低でも情報の落とし込みをして、
実際の制作担当が
しっかりとそのWebサイトを制作する
目的やゴールがわかっていないと
結局中身がブレたサイトができあがってしまいます。

Webデザイナーとして、
デザイン・構築をすることが全てではありません。
指示通りにデザインをおこして
構築するだけなら知識さえあれば
誰でもできることです。
言ってしまえば、
ここまでは学生の範囲です。
お仕事としてこなしていくのであれば、
それ以上が求められるのは
当然のことですよね。
自分が満足するだけのデザインでは
もちろんお仕事とはいえませんし、
もちろんクライアントのことだけを
考えたデザインでもいけません。
Webデザイナーとして大事なのは
その先にユーザーがいることを
踏まえた上で、
そのWebサイトの目的を達成できるような
デザイン・設計をしていくことです。
その一歩として、
まずは情報設計を自分の中でしていってみるのも
良い方法なのではないかと思います。
ぜひ実践してみてください。

おすすめ情報

2016年12月29日

もう迷わない!id・class名、画像ファイル名の付け方まとめ

もう迷わない!id・class名、画像ファイル名の付け方まとめ

「自分で考えたこのclass名って問題ないのか…」
「この画像にはなんて名前をつけるのが適切なのか…」

id・class名、画像ファイル名の付け方で悩んでいる
新人コーダーは、私を含め少なくないと思います。

今回は、そんな悩みを解決するべく
画像ファイル名とclass・id名の付け方について
まとめたいと思います。

画像ファイル名、id・class名の共通ルール

1半角英数字のみ使用する。

class・id名は「日本語」、「全角英数字・記号」、
「半角カタカナ」を使用することが出来ません。

また、画像フォルダに「日本語」、「全角英数字・記号」、
「半角カタカナ」を使用すると、
画像が表示されない場合があるので、
半角英数字のみ使用するようにしましょう。

2「-」(ハイフン)、「_」(アンダースコア)、
「.」(ドット※画像ファイル名のみ)以外の記号は使用しない。

エラーを引き起こす原因となるので、使用してはいけません。

3機種依存文字は使用しない。

機種依存文字とは、その名の通り、
各機種(MacやUNIXなど)に依存し、
特定の環境でしか正常に表示されない文字のことです。
仮に、他の環境で表示させた場合、
文字化けを起こして読めなくなります。

記号と同様、エラーを引き起こす原因となるので、
使用してはいけません。
文字を変換するときに、文字の右側に<機種依存文字>と
表示されるので、そこで判断できます。

4スペース(Space)は使用しない。

id・class名にスペースを含んでしまうと、その要素に付けられた
二つ目のid・classとして認識されてしまいます。

また、画像ファイル名にスペースを使用すると
ファイルを正常に処理出来なくなる可能性があるので
使用すべきではありません。

5数字や記号から開始しない

数字から開始しているid・class名は、認識されません。
画像ファイル名に使用した場合もファイルを正常に
処理出来なくなる可能があるので使用すべきではありません。

id・class名の形式

まずはid・class名の形式を決めておきましょう。

例)ヘッダーの背景画像の場合

・header-bg.jpg
単語と単語の間に「-」(ハイフン)を挟む。

・header_bg.jpg
単語と単語の間に「_」(アンダースコア)を挟む。
この書き方のことを「スネークケース」といいます。

・headerBg.png
後に続く単語の頭文字を大文字にする。
この書き方のことを「キャメルケース」といいます。

上記の3通りの中から、自分が使いやすいと思う
書き方に統一しましょう。

画像ファイル名の形式

画像ファイル名のフォーマットは、
id・class名の形式と統一するのが個人的には好ましいと思います。
もちろん、最後に拡張子は付け足して下さいね。

画像ファイル名の基本ルール

「ページ名」_「位置」_「種類(要素)」_
<1>      <2>    <3>
「詳細」「番号(連番)」_「状態」.「拡張子」
<4>    <5>     <6>

上記が基本的な画像ファイル名の付け方です。

このルールを守る利点として

・ファイル名を見ただけでどんな種類の画像で
どこで使われているのか推測出来る
・後々画像が変更になった場合でも
画像の名前を変えずに更新することが出来る

この2点があげられます。

1.ページ名

どのページで使っているかを判断するために付けます。
ですが、ページごとに画像フォルダを分けている場合は不要です。

例)
画像フォルダがページごとに分かれていない場合(/img/)
index_news_bnr01.png

画像フォルダがページごとに分かれている場合(/img/index/)
news_bnr01.png

2.位置

どの部分で使用しているかを判断するために付けます。

例)
ヘッダーで使用している背景の場合
header_bg01.png

サイドバーで使用している画像の場合
side_img01.png

よく使う部位一覧

ページ全体 container
ヘッダー header
サイドバー side
フッター footer
メインコンテンツ main
サブコンテンツ sub
検索ボックス search
ニュース news
お知らせ info
お問い合わせ contact
次へ next
前へ prev
リスト list
注釈 notes
レイアウトのためのボックス unit,box,col,area

 

※もっと詳しく知りたい方はコチラをご覧ください。

3.種類(要素)

な種類の画像なのかを判断するために付けます。

例)
写真画像
img01.jpg

ヘッダーで使用しているロゴ画像の場合
header_logo.png

よく使う種類一覧

画像、図、写真 img,photo
サムネイル thumb
バナー bnr
ボタン btn
ロゴ logo
ナビ nav
見出し ttl
テキスト txt
アイコン icon
背景 bg
矢印 arrow
line
ページトップ pagetop

4詳細

3の「要素」に対して詳細な説明が必要な場合のみ付けます。
基本的にはbtnやiconのように汎用的な画像にしかつけません。

例)
リセットするボタンの場合
btn_reset.png

丸いアイコンの場合
icon_circle.png

5番号

同じ用途の画像が複数あった場合に、
連番で番号を付けて分けます。
連番は2桁でつけるようにします。

例)
サイドバーで使用するバナーAの場合
side_bnr01.jpg

サイドバーで使用するバナーBの場合
side_bnr02.jpg

6「状態」

ロールオーバー(マウスカーソルが要素の上に乗った時)や
カレント(現在地表示)などの、状態を表す必要が
ある際に付けます。

ロールオーバー:○○_over.png、〇〇_hover.png
選択状態 :○○_selected.png
現在地  :○○_current.png、〇〇_here.png

例)
・現在地がAboutページであることを示す
グローバルナビ画像の場合
nav_about_over.png

・レスポンシブウェブデザインの際、
スマートフォンでのみ使用する場合
img_index_sp.png

class・id名の基本ルール

基本的には、画像ファイル名をつけるときのルールと同じです。
(ページ名と拡張子は省きますが。)

ただ、id・class名は意味が分かる範囲で、
可能な限り短くしたほうがいいので、
省いても意味が通じるものは省きましょう。

id・class名の付け方コツ

1.画像ファイル名とid・class名をなるべく統一する

統一出来る部分は統一することで名前を考える手間も省け、
変更箇所の特定がしやすくなります。

例)
・id名
#top-side-nav

・画像ファイル名
top-side-nav-home.png
top-side-nav-access.png

2.デザイン(「見た目」や「位置」)ではなく、
内容(「何処で」「何を表現」するのか)から名前をつける。

見た目や位置に関するid、class名をつけてしまうと、
サイトの仕様が変更された場合に矛盾が生じてしまいます。

例)
・left、right_box …
left や right などの位置を表す名前は、
後で左右を入れ替えた場合などに矛盾が生じてしまいます。

・red、green …
red や green などの色を表す名前は、
後で色を変更した場合などに矛盾が生じてしまいます。

・w500px、size18 …
サイズを表すような名前は、
後でサイズを変更した場合などに矛盾が生じてしまいます。

まとめ

命名規則を守る一番の理由は、作業の効率化につながるからです。
会社などで命名規則が決まっている場合は
その内容に沿って名前を付けるようにすることで、
自分以外の人が書いたソースを見て混乱することが減りますし、
その逆もまた然りです。

今回ご紹介した命名規則は、あくまで一例です。
複数人でコーディングしていく場合以外を除き、
自分が作業しやすいように自分ルールを
つくっていくのもいいかもしれません。

この記事を通して、読者の方が今後、
画像ファイル名、id・class名の付け方で
悩む時間が少しでも削減できれば幸いです。

おすすめ情報

2016年12月21日

顧客を逃がさないためのランディングページ最適化

161221%e3%81%8a%e3%81%99%e3%81%99%e3%82%81%e8%a8%98%e4%ba%8b%e3%82%a2%e3%82%a4%e3%82%ad%e3%83%a3%e3%83%83%e3%83%81

ランディングページという言葉。
Webマーケティングに関わる方なら誰だって
聞いたことがあるのではないでしょうか。
Webを通じての商品購入や資料請求などの問い合わせ、
将又売り上げの向上など様々な目標達成のために
必要なものなのですが、みなさんは効果的に
ランディングページを作成しているでしょうか。

こんなにランディングページにアクセスがあるのに
なかなかコンバージョンが獲得できない。
コンバージョンは獲得できているが
費用対効果が見合っていない。
リスティング広告やアフィリエイト広告などを
運用されている方はこのような経験をしたことが
一度はあると思います。

もちろん、広告出稿の段階でできることも
たくさんありますが、それには限界もあります。

そもそも順序的にリンク先(Webサイトやランディングページ)
が存在した状態でないと広告を出す事は不可能なので、
ランディングページを考えて作成する、
最適化を意識して作成することで
コンバージョンレートや売り上げが変動するといっても
過言ではありません。

ランディングページについて

ランディングページを最適化するに当たり、
定義を理解していないと何もできませんので、
まずはランディングページとは何なのかを
おさらいしていきましょう。

ランディングページとは、言葉のまま直訳すれば
“着地ページ”という意味です。
英語表記だと”landing page”となり、
一般的に頭文字を取りlpと略されているのですが、
定義まで理解できているでしょうか。

ランディングページと聞くと縦に長く一枚の
ページをみなさんは思い浮かべると思います。
もちろん間違いではないのですが、
着地ページという直訳があるので
実は、ユーザーが着地したページ全てが
ランディングページなのです。

今では狭義の意である縦長が一般的に使われているので、
大勢の方はlpと聞くとほとんどの方が縦長のページを
思い浮かべることでしょう。

今回は一般的な縦長のランディングページについて
述べますが、一応二種類のページの特徴を簡単に
まとめてみます。

縦長ランディングページ

縦長ランディングページの強みは、
ユーザーに直接訴求する専用のページとなります。
欲しい情報を検索している、購買意欲が高いユーザーに対して
用意するページなので訴求力は抜群です。

また、ページを制作・修正するスピードが一般的なサイト
よりも早いので、時間がそこまでかからないのが良いところです。

サイト型ランディングページ

縦長と比較してサイトを制作するのに時間がかかりますが、
中長期のスパンでみて広告費の削減が見込めます。

扱う商品が多い場合や、一つの商品に対して説明が長くなる
ものに対して向いている形です。

なぜランディングページの最適化が必要なのか

ランディングページの重要性は冒頭で簡単に説明したのですが、
具体的な数値を基に例を挙げてみると、
如何に重要かが理解できると思います。

あなたがアパレルショップの店員だとして、
一着1万円のジャケットを売っています。
このジャケットは売価が1万円に対して原価が4000円なので
一着売れる度に6000円の利益が入ります。
月間で見た時のサイトへの流入数は1000人で
その内10人がジャケットを購入しました。

ここで数値をまとめますと
サイト流入数:1000人
購入率(CVR):1%
売上額:10万円
利益:6万円
広告費用:5万円
純利益:1万円

上記のようになるのですがここで、
同額の広告費用でランディングページを最適化し、
購入率(CVR)を2倍にするとどうなるか、

サイト流入数:1000人
購入率(CVR):2%
売上額:20万円
利益:12万円
広告費用:5万円
純利益:7万円

使用した広告費は変わらないのに、純利益は7倍になりましたね。
購入率が2倍になったのに、純利益は7倍。
一瞬狐に包まれたような気がしますが、
ロジックが理解できると、あぁそうかとなります。

このように具体的な数字で確認するとランディングページ最適化の
重要性がご理解できると思います。

では、実際にどのようにランディングページの作成に着手し、
効果的に作っていくかを項目別に見ていきます。

ページ作成前での準備・調査

先ほども述べましたが、縦長のランディングページは
欲しい情報を探しているユーザーに対して
ダイレクトに訴求をかけるページなので、
狙うべきターゲットを明確にすることが重要です。

成約まで持っていきたいユーザーの年齢層や性別、
悩んでいるであろう内容やその解決方法など
考えることは千差万別ですが、
その中でも必要な項目のみを優先的に取り入れていきましょう。

購入まで結びつくであろうユーザーのペルソナ像を具現化して
その人物は何時に起きて何時に寝るのか、趣味や特技は何なのか、
家族構成はどのようになっているのか、車は所持しているのか、
など一見無意味な人物像を練りだしていると思われがちですが、
以外な部分からヒントが得られたリ、仮説が的中したりするので、
より具体的に且つ現実的に想像しましょう。

また集客元をリスティング広告とするのであれば、
その市場ボリュームや流入が多いであろうキーワードを
調査しておくのも重要な施策の一つで、
検索ユーザー特有であるニーズの核を深く熟知する
ことは言うまでもありません。

ランディングページの一般的なフレームワーク

ランディングページの作成は実際の作り手や考える人によって
異なるものなので一概にこれで結果が出るという型は
ありませんが、最も一般的な法則を今回はご紹介致します。

ファーストビュー部分

一番最初に視認される重要な部分で、
言うまでもなくページの離脱に直結する部分でもあります。
ユーザーが自分にとって必要である情報なのかを
見極めるのにかかる時間は3秒以内だと良く言われますが、
その通りだと思います。

その3秒間に確認する場所がこのファーストビュー部分です。
この部分で如何に興味・感心を抱いてもらいスクロールさせるかが
成約に結びつく最初の道となります。
キャッチコピー、キャッチ画像、権威付けなど
いろんな要素がありますが、特にキャッチコピーは重要です。

キャッチコピーでは端的にユーザーにとっても
メリットを伝えてあげましょう。
例えば脱毛のランディングページならば、
「脱毛で女性の好感度UP!!」や
「毎朝髭を剃る10分を睡眠時間に!!」などが挙げられます。

ユーザーは単純に脱毛がしたいわけではありません。
前者の場合は清潔感を出して女性にモテたい、
後者の場合は朝の睡眠時間をもっと確保したい。
脱毛したいユーザーでも求める将来像が異なるので、
ユーザーがどうなりたいのかを考えて
キャッチコピーを作るのが良いでしょう。
これにもペルソナ像が活用できます。

根拠を述べる

メリットを伝えただけでは、
本当なのかと疑っている状態に過ぎません。
その疑いを根拠を提示することにより
解消してあげる必要があります。上記の脱毛の例でいうなら、
「あの有名芸能人も通っている」などの文言を入れることによって
ユーザーの疑いは解消されるのではないでしょうか。

またよく使われる例の一つとしてモンドセレクション等の
受賞歴が挙げられます。
この文言一つでなんだか凄そうだと思わせることができるからです。

競合との差別化を示す

このサービス良いかも、この商品興味深いと
ここまで来たユーザーなら感じているかもしれません。

そこで感じるのが、他も同じなのではないか、
別のサイトでもいいのではないか、
ここでなくでも良いのではないか、
このような心理が働くのです。

そこで登場するのが競合と比較した際の
アドバンテージ、つまり優位性や差別化です。

他と比較して金額が安い、量が多い、
安心できるような特許を持っている、
など、差別化の対象は扱うプロダクトによって異なりますが、
ページ作成前の調査で他と比較しての自社だけの特徴や
勝っている部分で勝負をしましょう。
他と比較していて勝っていれば、一度は比較にために
離脱されても再度訪問して成約まで結びつく可能性は
十分にあるからです。

フィーチャーによる最後の一押し

ここまで来たユーザーは、購買意欲が多少なりともあるはずです。
しかし、また今度でいいや、焦って購入することないし、
などと思ってしまうやもしれません。

そこで「残り○○個で販売終了」、「期間限定で○○%off」
などの今購入した方が得だという事を伝えて
背中を押してあげましょう。

ページは作って終わりではない

今回は最も一般的にランディングページを最適にする方法を
お伝えしましたが、他にもやるべきことは山ほど存在しますし、
作って終わりではありません。

いくつものペルソナ像から仮説・検証の繰り返しとなります。
細かく言うと、文字の大きさや、テキストの色などで
成果が変わる時もありますし、
どの地点でユーザーの離脱が激しいのかを
ヒートマップのようなツールでの解析も必要となってきます。

ただ、何も考えずにただキレイなページを目指す、
自分が作りたいだけのページを作る、
クライアントの要望だけを受け入れるだけでは、
結果の出るランディングページができるとは言い難いです。

せっかく広告費をかけて集客しても、
リンク先ページが水も救えないようなザルでは
非常にもったいないです。
市場・競合調査、ランディングページ作成、広告出稿と
一貫性を持って行うことが成果向上に繫がります。

おすすめ情報

2016年12月20日

webデザイナーが気をつけるべきアクセシビリティ

accessibility-that-web-designers-should-be-aware-of

アクセシビリティとは?

アクセシビリティとは、
そのまま訳せば『どれだけアクセスしやすいか』という意味です。
webサイトに関するアクセシビリティとは、
障害者や高齢者、または使用するブラウザやOSなどの
どんな利用環境でも問題なく利用できるかということです。

またそのようなWebサイトを
“アクセシブルなWeb”といったりします。

SEOでの利点

アクセシビリティという言葉はSEOというよりは
IT全般の言葉として使われますが、
あらゆる環境やユーザーに配慮されたサイトであることは
検索エンジンも評価の対象として使用します。
例えば、画像などにalt属性を設定し
代替えテキストを設置すると、
音声ブラウザでの読み上げによってページの内容が
理解できるようにようにするなどのユーザーに対する
アクセシビリティですが、検索エンジンに対しても
正確な情報を伝えることになります。
ユーザーに対するアクセシビリティですが結果として
検索エンジンの評価にもつながりSEOの向上にもつながります。

視覚障害者に対するアクセシビリティとは?

音声ブラウザを使用すると
『/』は分数で読み上げられてしまいます。
そのため日付などの『2016/12/20』などの日付は
『年』『月』『日』の漢字を使用し、
『2016年12月20日』と記述すると良いです。
また期間などを『12月20日-12月22日』と表記すると
『-』の部分を『から』と呼んでくれないこともあるので
『12月20日〜12月22日』のように『〜』を
使用した方が良いです。

英単語は全角で書くと
アルファベットを1つ1つよみあげられてしまう
可能性があります。
また1km、1g、などは単位ではなくアルファベットとして
認識して読み上げられる可能性があるので
1キロメートル、1グラムのようにカタカナでの
表記が良いと思います。
見出しタグはとても大切です。音声ブラウザでは、
読み飛ばし機能のための目印になるので
SEOの基本ルールを守って利用するようにしましょう。
音声ブラウザは、ページの全体を読み上げますが、
見出しタグがあると、最初に見出しだけを読んで、
ユーザーにページの構成を伝えたりする機能があります。

また、見出しタグを適切に使用することは
検索エンジンにとっても
ページの構造を把握するために必要なことです。
単語の中にスペースが入ると音声ブラウザが
読み間違えることがあり性格な情報が
伝わらない可能性があるので単語ないに
スペースが入らないよう気をつけましょう。
機種依存文字を使用すると文字化けを起こして、
音声ブラウザに理解されず呼んでもらえないことがあります。
アスタリスク『*』や米印『※』などは
音声ブラウザが認識できないことがあるので『注』で
記述すると良い。
画像やリンクにある『戻る』という言葉だけでは
どこに戻るのかがわかりずらいので、
『前のページに戻る』『トップページに戻る』など
戻る場所がが明確になるようにすると良い。
同様に『詳しくみる』なども『〇〇について詳しくみる』などの
表記をするとわかりやすい。
タイトルが未記入だと音声ブラウザのユーザーには
URLが表示されてしまい内容が把握できないので、
タイトルは本文の内容がわかりやすいものを使用する。

Webで表示するイメージ画像は、
その画像の内容を説明する代理のテキストをつけるべきです。
音声ブラウザはalt属性を読み上げるので、
代替えテキストがないと音声ブラウザが
読み上げることができず読み飛ばしてしまい
視覚障害者に内容が伝わりません。
altテキストをつけることによって、音声ブラウザが
読み上げてくれるようになるので画像のaltには
画像の内容を記述することが必要です。

文字色と背景のコントラストの差を
大きくすると良いと思います。
視力の弱い人や高齢者は、
明度差が小さいほど読みにくくなります。フ
ォントサイズはブラウザの設定で文字を大きく表示されるように
設定できるが、CSSでフォントサイズを絶対指定すると
文字サイズの変更が効かなくなるので
弱視者や高齢者が文字を読み上げれない。

視覚障害者は右クリックを禁止されていることを
把握しにくいので右クリックを禁止しない。
色覚障害者は色の区別が苦手・困難です。
色をはっきり区別するために柄をつけたり
色の名前をつけて区別しやすいようにすることが必要です。

聴覚・身体障害者に対してのアクセシビリティ

手が不自由だったりするとスクロールが困難になります。
スクロールが長くなりすぎないようにコンテンツの内容を
改善したり、「上矢印」「下矢印」キーによる
画面スクロール操作できるようにするなども必要です。
小さいクリックボタンなども不便なので
押しやすいボタンにするためクリック範囲を広げる
必要があります。

フォームの入力は、障害者だけではなく初心者、
高齢者には困難なものです。そのため、入力時間などを
制限したりするのはやめたほうが良いでしょう。
入力エラーなどがでたときに前画面に
戻れるようにしておくことも大切です。

入力済みの内容が消去されてまた一から入力するのは大変です。
障害者の多くはフォームの入力が困難な場合が多いです。

また入力についての指定ですが半角・全角などの指定は
しない方がいいかなと思います。初心者・高齢者・障害者は
入力種をまちがうことがあるので自由入力が親切です。

初心者・外国人・認知症などの人にわかりにくいコンテンツを
作成する場合、イラストや図・動画や音声などを使い
直感的に内容を理解できるようにすると良い。
言葉がわからなくてもイラストや動画などでなんとなく
伝わることもあると思います。

先ほど視覚障害者に対するアクセシビリティでは
画像にalt属性で代替えテキストを入れ音声ブラウザで
認識してもらうというものがありましたが、
聴覚障害者の方はその音が認識できないため、
音声情報にはテキストをつけるなどが必要になってきます。

その他

・対応している言語
日本の人だけがwebサイトを見ているわけではないので、
文章がなくても内容がわかるように気を配りたいですね。
イラストや写真などを使用し、
言葉がわからなくても伝わるようにすることも必要だと思います。

・リンクを別タブで開かない
リンクを別タブで開くとキーボードで
『前のページに戻る』動作ができません。
別ウィンドウで開くものはある程度サイト内で
ルール化する方が良いでしょう。
(広告やPDFのみ別ウィンドウで開くなど)

・通信速度
高速回線が普及していますが
すべての人が利用しているわけではありません。
通信速度が遅い環境ではサイトの読み込み自体が
困難になったりするので、画像やファイルなどの
容量をできるだけ軽く必要があります。

アクセシビリティ適合をチェックする

アクセシビリティの適合度合いをチェックできるツールがいろいろあります。
チェックしたいページのURLを入力するだけで
改善した方が良いテキストやHTMLの行数なのを教えてくれて、
altが設定されていない場合やフォントの大きさなども
適切かどうか調べられます。
興味があれば一度チェックしてみてはどうでしょうか?

まとめ

今回調べながらこの記事を書いていましたが
自分ができていない部分もたくさんあるし、
初心者や高齢者、障害によっても必要なことが
違うということがわかりました。
すべてのことに配慮することはむずかしいですが、
できるかぎり配慮する必要があると思います。
webアクセシビリティの改善を行うことにより検
索エンジンによっての評価も高くなるため、
少しでも対応できたら良いなと思いました。

おすすめ情報

2016年12月8日

物事の進め方~PDCAサイクルを回そう~

pdca,サイクル

「PDCA」という言葉をこれまでに聞いたことはありますか?
これは、

Plan:計画

Do:実行

Check:評価

Action:改善

それぞれの頭文字をとったものであり、
もともとは事業において生産や品質などの
管理業務を進めるための手法として、
提唱された考え方です。

PからD。そしてC、Aと進み、またPに戻ってくる。
ひとつひとつの関連性だけでなく、
仕事の取り組み方にも関わってくるものです。

『PDCA』の例

まずは簡単な例として。

私たちの生活の中から
『ダイエット』をテーマとして
PDCAをイメージしていきましょう。

ダイエットの目標として、
来年までに10キロ減量を設定します。

Plan(計画):毎日10分の運動など、具体的な数字での計画。
Do(実行):計画に沿って実行。
Check(評価):体重を量る。体重が減ってないのであれば原因を考える
Action(改善):効果の見込めそうな新しいメニューを考える。

Actionの後、段階を踏んで得た結果をもとに新たな計画を立て、
設定した目標にどんどん近づけていきます。

PDCAが目的ではない

あくまで、『目的』があってのPDCAです。

上ではダイエットを例としていますが、
『何となくでダイエットする人』は少ないでしょう。

とりあえずで初めてしまうと、目標がないため、
途中でやめたり、諦めてしまうケースが
多くなるはずです。

このPDCAが仕事に当てはまると言われているのは、
自分もしくは上司からの目標を設定できるからです。

目先の仕事に集中して、
先が見えにくくなってしまいがちですが、
『目標、ゴールはどこなのか?』を考えて、
はじめて取り組む仕事としての意味が生まれていきます。

広告運用のPDCA

弊社が広告運用をする中でも、
やはりPDCAサイクルを回すことはかかせません。

ビジネスモデルによって変化することはもちろん。
集客が目的なのか、認知が目的なのか。

広告を配信する中での目標を設定し、
そのために何が必要となっていくのか
仮説を立てていきます。

特に広告に対するユーザーの反応を、
広告の管理画面やサイト解析ツールなどで、
「数字」として確認することができます。

マスメディアにはない、結果をチェックし、
ターゲットであったり広告の内容を変更する
といった改善が行えるという点で、
PDCAを実行しやすい分野にあると言えます。

PDCAサイクルを回すためには?

PDCAサイクルを回すことを意識していても、
なかなか上手く回せていけない原因がいくつかあります。

成果を求めすぎてしまう

Doをしても、Checkに十分な時間が取れず、
Planがしっかり立てられない。

いろんな変更、施策を実行しすぎるため、
しっかりとしたPDCAのサイクルを回すことが
できなくなってしまうパターンです。

得られた結果から、何が良かったのか。
何が悪かったのか。

仮に良い結果を得られていたとしても、
ノウハウになりにくいという悪い点も生まれてしまいます。

計画だけで行動に移せない

結果分析と計画に時間を費やしすぎてしまい、
実行に移すことなく終わってしまうというパターンです。

Planだけが繰り返され、本当に正しいものを
突き止めるまでに時間がかかりすぎて、
その間に市場やトレンドが変化してしまう
ということが考えられます。

正しいと確信した上で実行に移したとしても、
間違っている可能性も十分にあります。

少し難しいところではありますが、
『行動しなければ結果が生まれない』
ということを意識して動いていきましょう。

マンネリ化にならないよう意識すること

PDCAサイクルを回すため、
運用者は定期的に状況をチェックする
タイミングを作り、進捗状況を確認。

そして確認するだけではなく、
そこで次の改善案を出すように心がけることで、
マンネリ化をふせぐこともできるでしょう。

効率的な運用にたどりつくまでには、
試行錯誤を繰り返すこともあるかと思います。

その時には自分一人ではなく、
周りの意見を参考にすることも重要です。
自分では気づけなかった視点や
アイディアがうまれ次のステップにも繋がっていきます。

または、レポートとしてまとめることで
変化があった点が見え、
具体的な要因分析を行うことができます。

また前回の改善策を実行した後、
どのように施策に影響がでたのかが
分かるような項目などを必要に応じて
レポートにまとめることをおすすめします。

広告の話ばかりで申し訳ないため、
最後に身近な内容に戻します。

上記でダイエットを挙げていますが、
本当に身近なことから始めていくことができます。

普段何気なくしていることから振り返ってみて、
一つ上のステップを踏み出せるよう頑張っていきましょう。

1 2 3 4 5 6 7 11