ユニバーサル社会で役立つデザインや技術の研究
一世代前のRaspberry Pi 3で、いまさらLチカです。ブラウザからGPIOを操作できる「WebIOPi」というフレームワークがあります。開発が止まっていて、使うかどうかは検討が必要かもしれません。
WebIOPiのページを見ると、ラズパイ２と３しか対応していないようです。
2015年から開発が止まっています。（2020年12月現在）
ラズパイ３しか持っていない私には特に問題ないですが、このフレームワークありきの知識は、今後使えなくなる懸念があります。
とりあえずダウンロードして試して見ます。
サンプルで簡単に、Lチカができました。
ブラウザでHTMLやJavaScriptを使えると、Webのフロントエンジニアやデザイナーは、開発難易度を下げられます。
簡単な試作には、良いと思います。
Raspberry Pi 3を放置して3年。Wi-Fiにうまく接続できずに挫折し、長い間封印していました。そして最近、再挑戦してようやくWi-Fiに接続できるようになりました。
なぜか私のラズパイは、Wi-Fiにつながりません。
OSを何度も再インストールしたり、いくつか設定ファイルを書き換えたりしたのですが、Wi-Fiにつなぐことができず、一度諦めました。
しかし最近、ラズパイを使いたい気持ちが強くなり、再チャレンジすることにしました。
3年前より、知識は増えています。
Wi-Fiがつながらない原因は、IPのバッティングが怪しかったので、固定IPを割り当てることにしました。
IPの固定は、hiramine.com様の情報を参考にしています。
やはりIPが原因だったようで、以後問題なくWi-Fi接続が可能になりました。
ラズパイに必要な周辺機器・・・ディスプレイ、キーボード、マウスをつなぐのは、ひと手間かかります。
せっかくIPを固定したので、リモートデスクトップを導入しましょう。
IPが固定されていれば、簡単にVNCViewerでラズパイに接続して操作できました。
ラズパイにディスプレイ、キーボード、マウスの接続が不要です。
しかも慣れたPC環境で作業できるため、作業効率が高いです。
久しぶりのラズパイ。まずはLチカから復習です。
iPhoneにケースとフィンガーホルダーを装着しても、Qi充電ができました。組み合わせにもよりますが、意外と隙間があっても充電できるようです。
6.1インチサイズのiPhone（12 Pro）を使うようになり1か月以上たちました。
片手持ちの私には、この大きさはストレスになっていました。
指が届かない・・・。
そこで、フィンガーホルダーをケースの後ろに取り付け、浅く持つことで、指の届く範囲を広げることにしました。
フィンガーホルダーは３つセットで660円。Amazonで購入。
iPhoneの端につけました。
ひとつ不安がありました。Qi充電できるのか？
ケースとフィンガーホルダーの厚みで、Qi充電機とiPhoneに隙間ができます。
試して見ると、問題なく充電できました。
少し充電位置がシビアになった気がしますが許容範囲です。
なお、使っているQi充電機はこちらです。
スマホケースの厚みと、Qi充電機の有効距離が影響するのでご注意ください。
子供通うプール教室のロビーに、コワーキングスペースがあります。待ち時間に仕事ができて非常に助かります。
子供４人、プールに通っています。
クラス分けされており、子供たちの泳ぐ時間帯が違うため、車で送り迎えを何往復もしていました。
子供たちの通うプール教室がリニューアルして、コワーキングスペースができました。
AC電源も、USB電源も完備。長時間ノートPCで仕事ができます。
一度車で帰らず、プールが終わるまで仕事をして待っていられます。
すばらしい環境です！
いや、休日の隙間時間にさえ仕事ができる環境が用意されていることに、若干の違和感もありますが・・・。
Windowsのコマンドプロントの黒い画面。よく見ると真っ黒ではなく、黒に近いグレー。文字の色も真っ白ではなく、白に近いグレーです。コントラスト比を抑えており、目にやさしいです。
Windowsのコマンドプロンプトの文字色、背景色のカラーコードを見てみます。
文字色・・・#CCCCCC
背景色・・・#0C0C0C
真っ白（#FFFFFF）と真っ黒（#000000）は使われていません。
コントラスト比が高すぎると、目の疲労が高まるため、明度差を少し小さくしています。
無機質に見えたコマンドプロンプトでしたが、よく見ると配色にやさしさを感じます。
グラフィックソフトPhotoshopのUI配色にもやさしさを感じます。
文字色・・・#F0F0F0
背景色・・・#535353
背景がかなりグレーです。
グラフィックソフトの場合、注視するのはカンバスで、UIが邪魔しないようにコントラスト比を下げています。
また、グラフィックを制作、加工するうえで、明度対比を避けなければなりません。
明度対比は、黒い背景に囲まれた色は明るく、白い背景に囲まれた色は黒く感じる現象です。
仮に、PhotoshopのUIが真っ黒、真っ白だったら・・・
カンバスの明度の印象が変わってしまいます。
そのため、明度対比の小さい、グレーをPhotoshopのUIに用いているのだと考えられます。
ソフトの配色を気にして見てみると、デザイナーの配色の意図に気づけるかもしれません。
Webサイトでリンクのリストをコーディングする際、文字だけではなく、リスト（liタグ）全体にリンクを設定したほうが、操作しやすくなります。
amazonのリストメニューが参考になります。
リストメニューのリンクが、文字だけでなく、メニューの幅いっぱいまでクリックできるようになっています。
文字だけがリンクだと、クリックできる範囲が小さくて、カーソルを合わせるために、少しだけ集中力を消耗します。
細かいところですが、操作ストレスが溜まると、離脱につながります。
実装にあたり、必要なCSSは1行。
|
1 |
a {display: block;} |
実際は、aタグすべてがdisplay:blockにならないよう、任意のクラスをあわせて設定します。（.linkList a のように）
導入コストが引くく、コストパフォーマンスの高いユーザビリティ改善のため、忘れずに導入できればと思います。
チェックボックスを押しやすくするには、まずlabelタグを使ってクリック（タップ）範囲を広げることが基本です。しかしシステム都合でHTMLを編集できない場合、CSSだけで無理やりクリック範囲を広げる方法もあります。
HTMLのチェックボックスは、選択肢の文字を並べて使うことが多いと思います。
通常は文字もクリックできるように、labelタグで下記のように包括します。
|
1 |
<label><input type="checkbox">チェックボックス</label> |
しかし、ごくまれに、システム側でHTMLを書き出していて、CSSしか変更できない状況があります。
チェックボックスがあるのに、ラベルが設定されていない。
そんな時は、CSSだけで文字をクリックできるようにします。
CSSの::afterを使い、チェックボックスの後に透明の疑似要素を作れば、当たり判定を広げることができます。
サンプルページをアップしました。
書き出されているHTML次第で、CSSの当て方が変わります。
そのため一例となりますが、参考コードを掲載します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>チェックボックスの当たり判定を大きく</title> <style> ul { list-style: none; } .checkboxList li { position: relative; width: 10em; } .checkboxList [type="checkbox"]::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2em; cursor: pointer; } /* 当たり判定確認用 */ .checkboxList li:last-child [type="checkbox"]::after { background-color: rgba(255, 0, 0, 0.5); } </style> </head> <body> <ul class="checkboxList"> <li><input type="checkbox" name="b" value="1">チェックボックス</li> <li><input type="checkbox" name="b" value="2">チェックボックス</li> <li><input type="checkbox" name="b" value="3">チェックボックス</li> </ul> </body> </html> |
苦肉の策です。
labelを設定してもえるよう、促しましょう。
よくWebサイトの右下に見かける、ページトップへ戻るボタン。押すと、スムーススクロールで上に戻ることが多いです。しかし、0秒で戻ってしまっていいのではないでしょうか？
Webサイトにページ内リンクを設置した場合、ページ内移動が０秒だと、ページ遷移かページ内移動か瞬時に判断できない問題がありました。
その解決でスムーススクロールを採用するサイトが増えたと思います。
（クライアント受けが良いから実装したとか、そんな理由もあるでしょう。）
ページトップへ戻るボタンも、スムーススクロールを採用することで、直感的にスクロールしたことが分かります。
しかし現在、スムーススクロールは不要と考えるようになりました。少なくともページトップへ戻るに関しては。
ページトップへ戻るボタンは、メジャーサイトにも設置されていて、もはや押した時、ページトップへ移動する挙動にユーザーは慣れたと考えます。
もうページ上まで0.5秒も待たせないで、瞬時に戻ってよさそうです。
Amazonの「ページトップへ戻る」をクリックして、0秒で上に戻ったとき、そう感じました。
Webページでチェックボックスを掲載する場合、ブラウザデフォルトのデザインでは、小さくて押しにくい場合があります。そのためCSSで押しやすく調整します。
チェックボックスの比較ページをアップしました。
ブラウザデフォルトの場合、チェックボックスが小さい場合が多いです。
また、HTMLでlabelを設定していないと、選択項目の文字を選んだ時に、チェックがつきません。
サンプルページのコードです。（デフォルトのチェックボックス部分は省略）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>チェックボックスを大きく</title> <style> ul { list-style: none; } .checkboxList label { display: inline-block; padding: 0.1em 0.5em 0.1em 0.5em ; border-radius: 0.3em; font-size: 1.5em; cursor: pointer; } .checkboxList label:hover { background-color: #EEE; } .checkboxList [type="checkbox"] { transform: scale(1.5); transform-origin: right bottom; margin-right: 0.5em; } </style> </head> <body> <header> <h1>チェックボックスを大きく</h1> <p>CSSでチェックボックスを大きくしたサンプルです。</p> </header> <main> <ul class="checkboxList"> <li><label><input type="checkbox" name="b" value="1">チェックボックス</label></li> <li><label><input type="checkbox" name="b" value="2">チェックボックス</label></li> <li><label><input type="checkbox" name="b" value="3">チェックボックス</label></li> </ul> </main> </body> </html> |
いくつか重要そうなところをピックアップします。
マウスオーバー時に、カーソルが指の形になります。クリックできる感が増します。
マウスオーバー時に、見た目を変えます。ここでは背景色を付けました。クリックできる範囲を知覚できます。・・・ただ、強いマウスオーバー効果でチカチカ変わると疲れるので、やりすぎは注意です。
チェックボックスにマウスカーソルを合わせるユーザーもいるため、チェックボックスを1.5倍にしました。縦横1.5倍なので、面積としては2.25倍です。
見慣れたデフォルトのチェックボックスをそのまま使いつつ、サイズのみ大きくしました。
チェックボックスの拡大起点です。右を起点に拡大すると、テキストに重なる可能性がほぼなくなります。
また、bottomで下を起点にすると、テキストと揃って見えました。（Chrome87、IE11調べ）
Webアクセシビリティのガイドラインで、「色だけが情報を伝える唯一の手段になってはいけない」という記述があります。対策として、背景パターンを併用して情報を伝える方法があります。
WCAGの色の使用から引用します。
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。
例えば、赤と緑の色で情報を分類していたら、色覚障害のユーザーには、見分けにくいことがあります。
日本の成人男性の５％が色覚障害というデータがあり、色だけに頼った情報は避けます。
グラフなどで用いられる方法で、背景パターンで識別できるようにします。
ドットやストライプを使い、さらにパターンの大きさや角度を変えることで、識別できるバリエーションを増やせます。
実際にコーディングしたサンプルを、アップしました。
パターンはCSSのみで付けられます。主要部分を抜粋します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.color { /*文字の枠 可読性を上げる*/ text-shadow: 2px 2px 0px #FFF, 2px -2px 0px #FFF, -2px 2px 0px #FFF, -2px -2px 0px #FFF; font-weight: bold; } .color li { border: #CCC solid 2px; } .color .red { /*赤ドット*/ border-color: #E57373; background-color: #FFF; background-image: radial-gradient(#FFCDD2 20%, transparent 30%), radial-gradient(#FFCDD2 20%, transparent 30%); background-position: 4px 4px, 12px 12px; background-size: 16px 16px; } .color .yellow { /*黄色横ストライプ*/ background-image:repeating-linear-gradient(0deg, #FFF, #FFF 4px, #FFECB3 4px, #FFECB3 6px); border-color: #FFD54F; -webkit-background-size: 6px; background-position: 0 2px; } .color .green { /*緑斜めストライプ*/ background-color: #FFCC80; background-image:repeating-linear-gradient(45deg, #FFF, #FFF 8px, #C8E6C9 8px, #C8E6C9 10px); border-color: #A5D6A7; } |
つづいて、このCSSを適用しているHTMLです。
|
1 2 3 4 5 |
<ul class="color"> <li class="red">赤・・・体を作る</li> <li class="yellow">黄・・・エネルギーになる</li> <li class="green">緑・・・体の調子を整える</li> </ul> |
総務省のアクセシビリティチェックツール「miChecker」でも、ロービジョンシミュレーションの機能があります。
サンプルサイトを用いて色だけで伝えようとした場合、やはり赤、緑の識別が難しいです。
色とパターンの組み合わせに変えることで、識別できるユーザーが増えます。
色のみに頼らないユニバーサルデザインの参考になればと思います。