参院選2019が行われるとタクシーが暇になる?

選挙期間中はタクシーがヒマになる…。

聞いたことありますか?

私は今日初めて知ったのですが。。。

  

訪問先へと急ぎながら、タクシー乗り場へダッシュしていたときのこと。

ここの乗り場は何度も利用しているけれど、

いるときは何台もいるし、

いないときは一台もいない。

  

…そんな乗り場でした。

  

運良く今日はタクシーの行列が!

さっそく、一番先頭に乗り込みました。

  

目的地に向かいながら運転手の方にきいてみました。

「一台もいないときもありますけど、今日は行列で助かりました!」

すると、

  

選挙のときはヒマな時期だからねぇ〜

  

…との返答。

  

何がどう影響するの!?

と思って更に聞いてみると、

公務員の方が、飲みに行ったり外出するのを控えるのだとか。。。

不祥事を起こさないよう、細心の注意を払うのだそうです。(あくまでタクシーの運転手さん一個人による感想です)

  

こういう法則、面白いですね〜

なにがどう、どこに影響するかわからないものです。

  

あ、

あと、

タクシーが少なくなるのにはもうひとつ法則が。

  

早番と遅番が交代の時間帯も、少なくなるそうですよ。

当たり前といえば当たり前。。

  

ちなみに、14:30〜16:00 らしいですよ(ローカル情報です)。

  

データ保持期間の設定、忘れてませんか?〜Google Analytics〜

喉元すぎればなんとやらで、2018年5月25日をピークとして大騒ぎしたGoogle Analyticsのデータ保持期間設定の件。

すっかり忘れていませんか?

あれから8ヶ月…。

…私はすっかり忘れていました。

ユーザーデータ(※1)を保持したいなら、新たに作成したGoogle Analyticsアカウントで、
『ユーザーデータとイベントデータの保持』を適宜設定変更せねばならないんです。

※1…ユーザーデータとは、ユーザー単位のデータのことです。

プルダウンメニューを『26ヶ月』から『自動的に期限切れにならない』に変更し、左下にある『保存』ボタンをクリックしましょう。

ユーザーエクスプローラをよく使う人は特にご注意を。

 

 

■参考サイト様
【緊急】Google Analyticsのデータが消える?「データ保持」期間の設定が追加に
https://digitalidentity.co.jp/blog/marketing/google-analytics/ga-data-disappears.html

  

デザインとコーディングでWebフォントの太さを一致させる(Noto Sans JP編)

デザインで指定した文字の太さが、コーディングでは微妙に違う状態で上がってくること、ありますよね。

PhotoshopやIllustratorとコーディングでの文字の太さの指定方法が違うため、せっかくWebフォントを使っても仕上がりが一致しないということがおこります。

コーディングの指示で、font-weightまで指定するつもりでの自分用メモ。
Photoshopから書き出した画像とデバイスフォントを比較するため併記します。パソコンで閲覧専用です。

Noto Sans JP Thin = 100

▼Photoshop

Photoshop → Noto Sans JP Thin/フォントサイズ 16pt/行送り 32pt

▼Coding

Coding → font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 100;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Light = 300

▼Photoshop

Noto Sans JP Light/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 300;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Regular = 400

▼Photoshop

Noto Sans JP Regular/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 400;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Medium = 500

▼Photoshop

Noto Sans JP Medium/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 500;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Noto Sans JP Bold = 700

▼Photoshop

Noto Sans JP Bold/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 700;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

Noto Sans JP Black = 900

▼Photoshop

Noto Sans JP Black/フォントサイズ 16pt/行送り 32pt

▼Coding

font-family: ‘Noto Sans JP’; font-size: 16px; line-height: 2em; font-weight: 900;

ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。Lorem ipsum dolor sit amet, MENU consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

 

指示用コピペテキスト

■ Noto Sans JP のfont-weight指定数値
 Thin = 100
 Light = 300
 Regular = 400
 Medium = 500
 Bold = 700
 Black = 900

 

 

Noto Sans JP に限って言えば、公式サイトの一覧状態でプルダウンをクリックしたときだけFont-weightとの対比が数値で確認できるのですが、ちょっとつかいづらいかな。クリックしてるときしか見られないからね…。

せっかくの美しいフォント、デザイナーさんの感覚、大切にするためにディレクターは文字の太さもしっかりあわせましょう!!

 

▼Google Fonts 「Noto Sans JP 」はこちらから!https://fonts.google.com/specimen/Noto+Sans+JP

 

インスタグラムのIDとアクセストークンを取得する

たとえば、Webサイトにインスタグラムの写真を自動で読み込みたいとき。Sandbox ModeでInstagramのAPIを使うのが手軽です。
しかし、そのAPIを使用するための手順は全然手軽ではありません…。
ひとつずつ手順をみていきましょう。

★Sandbox Modeとは
誰でも無料で使用できる開発者モードのようなものですが、制限があります。

  • 10ユーザー(client)まで
  • 各ユーザーにつき、最新20件の投稿画像が取得可能
  • APIの呼び出しに制限あり。説明文中のリンクが壊れており明確な記載はない。(が、どうやら1時間に200回までらしい。)

Sandbox ModeでInstagramのAPI、具体的には「Client ID」と「アクセストークン」の入手を自分用メモも兼ねてまとめます。

【 手順:1 】Instagramの開発者ページを開く

ブラウザでInstagramを開きます。
インスタグラムにログインした状態で、開発者ページ「Instagram Developer Documentation」にアクセスします。

▼Instagram開発者ページ

【手順:2】開発者登録をする

画面上部の「Manage Clients」をクリックすると、開発者の登録を求められます。
未登録の場合は登録をしていきます▼

「ウェブサイト」「PhoneNumber」「What do you want to build with the API?」 の項目を入力し、ガイドラインへの同意をチェックしたら、「Sign up」をクリックします。
電話番号を入力していますが、今のところ特に電話はかかってきていません。。

【手順:3】クライアントIDを取得

次に、「Manage Clients」で「Register a New Client」をクリックします▼

「Details」タブを選択した状態で、必須項目である「Application Name」「Description」「Website URL」「Valid redirect URIs」を入力していきます▼

「Valid redirect URIs」には少し注意が必要です。
入力後にEnterをクリックする必要があります。
Enterをクリックし、入力したURLがボタン状に変化したらOKです。
※「Valid redirect URIs」はあとで使うので覚えておきましょう
「Resister」はまだクリックしません!

続いて「Security」タブを選択した状態で、「Disable implicit OAuth」のチェックを外し、「Resister」をクリックします。▼

これで、Client ID が取得できました。▼
※ぼかしてますが、32桁の英数の文字列です。

【手順:4】アクセストークンを取得

【手順:3】で取得した Client ID を使って、今度はアクセストークンを取得します。

下記のauthenticationURLを使います。

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

「client_id」には「Client ID」、「redirect_uri」には「Valid redirect URIs」をいれてください。

つまりこういう感じです。。

https://api.instagram.com/oauth/authorize/?client_id=【ここに「Client ID」をいれる】&redirect_uri=【ここに「Valid redirect URIs」をいれる】&response_type=token

これをブラウザのURL欄に直接入れ、Enterで移動します。
いま作業しているインスタグラムの管理画面とは別に、新たなブラウザ画面(タブ)を開いて実行しましょう。

うまくいけば、下記のような画面になります。Authorize を clickしましょう。あと一歩でアクセストークンが入手できます。▼

画面が遷移し、「Valid redirect URIs」で指定したWebサイトが表示されたら、URL欄を確認します。「?token=」の後ろにある文字列が、アクセストークンですよ。▼

これで、PHPやjsなどを用いて、自分のInstagramの写真をWebサイトに自動連携したりなど、いろいろと活用ができますね!

WordPressで身に覚えのない新規ユーザーが登録されてしまう【スパム】

ある日、WordPressからメールが飛んできたのですが…。

 

件名:[(サイト名)] 新規ユーザー登録

本文:
サイト「(サイト名) 」の新規ユーザー登録:
ユーザー名: ●●●●●●●●●●●
メールアドレス: ●●●●●●●●●●●●@●●●●●●●●.com

 

まったく身に覚えがありません。
こんな時はすぐに管理画面を確認しましょう。

管理画面にはいったら、

設定 → 一般

へと進み、

メンバーシップ

という項目のチェックを確認しましょう。

 

だれでもユーザー登録ができるようにする

というチェックがONになっていませんか?

ここがチェックONになっていると、
WordPressのURLの末尾に続けてある文字列を打つことで、
誰でもユーザー登録ができてしまうのです。
(会員制サイトなど、使いみちはいろいろあるようです)

さて、ここをOFFにしたら、
登録されてしまったユーザーをチェックしましょう。

ユーザー → ユーザー一覧

へと進み、
不要なユーザーを削除しましょう。

すぐに削除できない事情や、確認に時間を要する場合は、
取り急ぎ「権限グループ」と「パスワード」を変更してしまいます。

権限グループ:このサイトでの権限なし、を選択
パスワード:変更してしまう

▼修正箇所

 

放置しておくと、身に覚えのないユーザーはどんどん増えていきます。
可能な限り速やかに対処しましょう。

 

▼参考サイト様:

WordPress スパムユーザーが購読者として自動で追加される場合の対処方法

CSSピクセルとデバイスピクセル(ディスプレイ解像度覚え書き)

レスポンシブサイトを作っていると、ブレイクポイントをどこにするかでものすごく悩みます。

スマホのディスプレイサイズに依存しないブレイクポイントにしよう、と思っても、やはりひととおり知っていないと始まらない、スマホのディスプレイサイズ。
ブレイクポイントを決めるための覚え書きです。

デバイス CSS
ピクセル
( points )
デバイス
ピクセル
デバイス
ピクセル比
ppi インチ
iPhone 3G 320 ✕ 480 320 ✕ 480 1 3.5
iPhone 3Gs 320 ✕ 480 320 ✕ 480 1 3.5
iPhone 4 320 ✕ 480 640 ✕ 960 2 3.5
iPhone 4s 320 ✕ 480 640 ✕ 960 2 3.5
iPhone 5/5s/SE 320 ✕ 568 640 ✕ 1136 2 4
iPhone 6/6s/7/8 375 ✕ 667 750 ✕ 1334 2 326 4.7
iPhone 8Plus 414 ✕ 736 1080 ✕ 1920 3 401  5.5
iPhone X  375 ✕ 812 1125 ✕ 2436 3 458 5.8

ちなみに、ブレイクポイントで指定する数値は、CSSピクセルを対象とするものですよ。

MacのExcel(エクセル)2011 文字入力が遅い。。

MacでExcel2011をいまだに使っていますが、有名なバグがあり、文字入力が異様に遅く、大変困っていました。
文字(日本語)を打つ時の「文字を打つ→変換→Enter」の一連の流れが、「文字を打つ」の段階でまず数秒待たされます。
たとえば「しゅんかしゅうとう」と打って「春夏秋冬」に変換したいとして…。
「しゅんかしゅうとう」とキーボードを打つと…、

しゅん

しゅんか

しゅんかし



画面にすべて表示されるまで数秒。スローモーションな画面の動きをじっと見守ります。
表示されたら、そこから変換…。
はっきり言って仕事になりません。

以前からこのバグはWeb上にも情報が多く、解消法とされるものを試してみたことはあるのですが私の場合そのときは解消されず、あきらめていました。

先日、久しぶりに試してみたらうまくいったので、現在は快適です。
大変ありがたかったので、やり方をここに記録しておこうと思います。

【手順】
1)Excelを終了
2)フォントの重複を解消
3)環境設定ファイルの削除
4)キャッシュファイルの削除
5)Macを再起動

1)Excelを終了

Excelを(使っていた場合は)終了させます。

2)フォントの重複を解消

フォントの重複を解消するため、アプリケーション「Font Book」を立ち上げます。

「Font Book」が立ち上がりました。

立ち上がったら左側の列にある「全てのフォント」をクリックし、真ん中列が全て選択された状態にします。

この状態でマウスを右クリックし、「フォントを検証」を選択します。

フォントの検証が終わるのを待ちます。
終わったら、「フォントを検証」ウィンドウ左上のプルダウンメニューから「警告およびエラー」を選択。

「警告およびエラー」の内容を確認します。この時点でフォントの重複は解消されているので、「フォントを検証」ウィンドウの左上のバツボタンをクリックして閉じます。

このように、重複しているものがあれば「切」となっています。
フォントの重複はこれで解消されました。

3)環境設定ファイルの削除

Finderの状態(デスクトップのどこかをクリックすればOK)で「⌘ + Shift + G」でウィンドウが出たら「~/Library/Preferences/」と入力・移動します。

移動したら、次の2つのファイルを探し、削除します。

com.microsoft.Excel.plist
com.microsoft.office.plist

※ファイルが壊れている場合 ~.plistの後ろに英語8文字ついた0byteのファイルがあるのでそちらも削除
例) com.microsoft.Excel.plistEGB987SF

参考サイト様より

これで環境設定ファイルの削除は完了です。

4)キャッシュファイルの削除

3)と同じ要領で、Finderの状態(デスクトップのどこかをクリックすればOK)で「⌘ + Shift + G」でウィンドウが出たら「~/Library/Caches/」と入力・移動します。

Microsoftフォルダを削除します。

これでキャッシュファイルの削除は完了です。

5)Macを再起動

Macを再起動して全ての作業完了です。
Macが立ち上がったら、Excelを立ち上げてさっそく文字を打ってみましょう!

 

▼参考サイト様「Excel2011で日本語入力のスピードが極端に遅い | 公式 Apple サポートコミュニティ」
https://discussionsjapan.apple.com/thread/10153975?start=0&tstart=0

 

IE対応はどこまでするべき?

IE(Internet Explorer)は、2017年現在、どこまでブラウザ対応しておけば良いのでしょう?

正解は、IE11のみ

です。

実際には2016年1月の段階で「IE11のみ」でOKではあったのですが、
IE9・10を本当に切ってよいものか、判断に迷う場面もちらほらありました。
クライアントによってはIE9・10の比率が高かったり、社内で特定のIEブラウザを使っている例もあり、「IE11のみ」にはなかなか出来なかった印象です。

今では「IE11のみ」で制作進行することも多く、Google Analyticsでブラウザを解析すると、IEの約95%がIE11。※自分調べ
過去は確かに去ったのだと安堵の思いです。

アウトプットする機会もなかったので、勉強のため、お客様への説明のためにまとめておきたいと思います。

なぜ、古いブラウザを使ってはいけないか

Windows PC のデフォルトブラウザであるIEは、Microsoftのサポート終了とともに無償セキュリティパッチが提供されなくなるため、上位ブラウザへのアップデートが必要(Windows PC 自体を買い換える必要がある場合も)だからです。

Microsoft の発表では、

2016 年 1 月 12 日以降、

サポートされるオペレーティング システムで利用できる最新バージョンの Internet Explorer のみがテクニカル サポートとセキュリティ更新プログラムを提供されるようになります。

…ということですから、常に最新に保っておかないと危ないんですね。

 

パソコン、ブラウザにもライフサイクルがある

ここ数年の概念ではないでしょうか。
パソコンは高価だから、買ったらずっと大切に使い続ける…というわけにはいかなくなってしまったのですね。
安全に使い続けるために、常に最新のサポートが受けられる製品を追い続けなければなりません。

■参考サイト

▼サポート ライフサイクル ポリシーに関する FAQ – Internet Explorer
https://support.microsoft.com/ja-jp/help/17454/lifecycle-faq-internet-explorer

▼IE10に関する ライフサイクル ポリシー
https://support.microsoft.com/ja-jp/lifecycle/search?alpha=Windows%20Internet%20Explorer%2010

 

永遠に居座るかと思われたIE6がいつのまにか消え(会社的にIE6対応をやめることになったあの日は今でも忘れられません)、IE7、IE8も消え…。(一部には生存し続けていますが)
IE9以降は新しいブラウザ…のような意識でいたけれど、気づけばそれすらもレガシーブラウザに。

常にアップデートしていかなければならないのですね。

 

■参考サイト

▼WebブラウザシェアランキングTOP10(日本国内・世界)
https://webrage.jp/techblog/pc_browser_share/

▼[@IT様]一目で分かる、各Windows OSでのInternet Explorerのサポート終了時期
http://www.atmarkit.co.jp/ait/articles/1503/11/news134.html

 

Google Analyticsで時間帯別・曜日別のデータを見るには?

Googleアナリティクスで時間帯別のデータを見たい。
デフォルトでも用意されているものの複数日の合算ができないため、あまり実用的ではありません。
そのため、カスタムレポートの活用がおすすめです。

時間帯別のデータを見るためのカスタマイズ

①サイドバーの「カスタムレポート」をクリック。
②「新しいカスタムレポート」をクリックして次へ進みます。

③④そのままにしても良いですが、任意の名前にすることができます。

⑤解析したい指標グループを決めます。

何にしたらよいか迷ったら、とりあえずユーザー概要と同じ項目にしておきましょう。あとから変えられるので。

▼ユーザー概要の指標

  • セッション
  • ユーザー
  • ページビュー数
  • ページ/セッション
  • 平均セッション時間
  • 直帰率
  • 新規セッション率

▼設定後はこんな感じです

⑥ディメンションを決めます。今回は「時」を選びます。
⑦保存をクリックして設定完了です。

横軸が「時」の折れ線グラフが表示されました。点線で囲んでいる項目は先程設定したもので、それぞれこの位置に反映されます。
もう一度編集したいときは⑧から、先程の設定画面に戻ることが出来ます。

ちなみにこの折れ線グラフは、当サイトのデータです。
午前中は11時、午後は16〜17時が多いですね。

…しかしこのデータは日曜日から土曜日まで、すべての曜日が混ざっています。
ビジネス関連のブログだと、平日と休日では閲覧データが違うはずです。

それでは曜日別に見てみましょう。

 

曜日別の時間帯別データを見たいときは

たとえば、月曜日だけを抽出して時間帯別データを見たいとき。
先程の設定画面で、ディメンションの下にある「フィルタ」を設定すればOKです。

「曜日の名前」を「一致」で、「Monday」を「完全一致」で、それぞれ入れてみましょう。
設定が終わったら、先程と同様に「保存」をクリックします。

結果がでました。
月曜日だけを抽出して合算したものです。

全曜日のグラフよりも山形がはっきりしました。
皆さん、あまり昼休みに休んでないですね。決まった時間に昼休みをとる必要がない職場が多いのかもしれませんね。
17時をピークにお仕事を終えているのかな?という状況が伺えますが、
17時以降セッションは減るものの、夜間帯も一定数のアクセスが続いており、夜中にも調べ物をしている状況が伺えます。お疲れ様でございます。。

 

アクセシビリティに配慮したWebサイトをつくるために〜JIS X 8341-3〜

障がい者の方、高齢者の方にも、Webサイトをより良い状態で閲覧してもらうために…。
WebサイトにもJIS規格があるのをご存知でしょうか?

 

JIS規格「JIS X 8341-3」

「JIS X 8341-3(高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ)」
…というJIS規格が存在します。

一体いつから!?

2004年6月に初めて制定され、最新版は2016年3月に改正されています。

  • 2004年06月 → JIS X 8341-3:2004
  • 2010年08月 → JIS X 8341-3:2010
  • 2016年03月 → JIS X 8341-3:2016

※誤って2004年を2014年と記載していました…大変失礼いたしました(2017年3月7日記)

JIS X 8341-3 とは、どんな規格?

「高齢者・障害者等配慮設計指針」とうたわれているとおり、高齢者や障がい者の方でも不便なくWebサイトを閲覧し、情報を得られるようアクセシビリティに配慮するための指針です。

日本工業標準調査会:データベース-JIS詳細表示「JIS X 8341-3(閲覧のみ)」
閲覧できる環境が限られているようです

具体的にどういった項目を障がいとして定めているかについては、
「全盲、弱視、色覚障害、聴覚障害、肢体不自由、高齢者」
がそれにあたります。

どんなサイトで準拠されているの?

国及び地方公共団体等の公的機関のホームページ等が、高齢者や障害者を含む誰もが利用しやすいものとなるよう、

総務省が音頭を取り、JIS X 8341-3への準拠を進めています。

準拠されたWebサイト例

札幌市:札幌市公式ホームページのウェブアクセシビリティ方針
旭川市:ウェブアクセシビリティ方針について
稚内市:アクセシビリティの方針について

アクセシビリティとは?

例えば、パソコンでWebサイトを閲覧するとき。
多くの人は、マウスでカーソルを操作しながら画面を見る…といったスタンスを想像されるのではないでしょうか。
しかし、

  • マウスの操作が困難で、操作はキーボードのみ、という人がいます。
  • 色覚障害があり、多くの人が読める文字が読みづらい人がいます。
  • 視覚ではなく、聴覚で文字を「聴きながら」Webサイトを利用している人がいます。

…こういった状況で閲覧をされている方がいることは、身近な方や知り合いにでもいない限り、なかなか想像しづらいのではないでしょうか。
そして、もし前述の方が閲覧しようとしているWebサイトが、

  • キーボードだけで操作できる配慮がされていないWebサイトだったら
  • 文字の色が薄すぎたり、背景色と混同するような文字色が使われていたら
  • 文字が画像化されて読み上げ可能な文字自体が使われていなかったら

情報にアクセスする事自体が困難となってしまいます。
しかし、

  • tabボタンで適切に進めるよう配慮されていれば
  • 文字色と背景色に適切なコントラストが保たれていれば
  • Web上の文法にのっとった文章で、画像にもaltを適切に設定していれば

情報にアクセスすることが可能になります。
こういった情報へのアクセスのしやすさの事を「アクセシビリティ」と呼ばれます。

配慮される具体的な内容は?

例えば、色覚障害の方や高齢者(白内障など)への配慮として、背景色と文字色のコントラストに基準が設けられています。最低限レベルのコントラスト比として、次のように定められています。

1.4.3 コントラスト(最低限レベル)の達成基準

テキスト及び文字画像の視覚的提示には,少なくとも4.5:1 のコントラスト比がある。

4.5:1 …と数字で聞いても、まったくイメージがわきません。それに、コントラスト比は、どうやって調べれば良いのでしょうか?

コントラスト比を調べるツールがあります。

▼カラーコントラストアナライザー
Colour Contrast Analyser

Windows、Mac、ともに対応されており使いやすくおすすめです。
このツールを使ってしらべてみると…。

例えば文字色が白(#ffffff)の場合で、背景色をグレー(#333333)から段々と薄くしていくとすると…。

背景色#333、文字色#fff、コントラスト比 12.6:1

↑コントラスト比が12.6:1と十分ですね。

 

背景色#666、文字色#fff、コントラスト比 5.7:1

↑背景がぐっと薄くなりましたが、まだまだ可読性は高いです。コントラスト比 は、5.7:1。

 

背景色#777、文字色#fff、コントラスト比 4.5:1

↑ ストップ!!ここでコントラスト比4.5:1です。

大きな文字でない場合はここが限度ということです。ちなみに、大きな文字とはどの程度なのでしょう?

a) 大きな文字 サイズの大きなテキスト及びサイズの大きな文字画像には,少なくとも3:1 のコントラスト比がある。

「JIS X 8341-3:2016」の注釈によると大きな文字サイズとは、

少なくとも18 ポイント,又は14 ポイントの太字の(テキスト)。全角文字のフォントは,それと同等の文字サイズ。

と定義されています。

背景色#969696、文字色#fff、コントラスト比【3.0:1】
18 ポイントの文字
16ポイントの文字
14 ポイントの文字(太字)

こんな感じですね。
上記のサンプルでは16ポイントだとアウト、18ポイントと、14ポイントの太字はセーフとなります。

文字と背景色ひとつとっても、このように細かく基準が設けられているのです。

ますます重要となるアクセシビリティと障害者差別解消法

平成28年4月1日から施行された「障害を理由とする差別の解消の推進に関する法律」をご存知でしょうか。

障害者差別解消法ポスター▶︎内閣府:障害者差別解消法

国連の「障害者の権利に関する条約」の締結に向けた国内法制度の整備の一環として、全ての国民が、障害の有無によって分け隔てられることなく、相互に人格と個性を尊重し合いながら共生する社会の実現に向け、障害を理由とする差別の解消を推進することを目的として制定されたものです。

つまり、障がいによりWebサイトにアクセスできず困っている方がいて指摘があれば、対応する必要がでてくる場合があるということになります。

まとめ

もはや、インフラのひとつと化したWeb。日常生活に無くてはならないものとなりました。公的機関のWebサイトでなくとも、こういった規格などは適宜取り入れていきたいですね。
障がい者、高齢者にとってアクセシビリティが高いということは、みんなにとっても読みやすいサイトであるということ。アクセシビリティの高いWebサイト制作ができるよう、意識を高めていきたいです。