てまりのユニバーサルデザイン

よくWebサイトの右下に見かける、ページトップへ戻るボタン。押すと、スムーススクロールで上に戻ることが多いです。しかし、0秒で戻ってしまっていいのではないでしょうか？

昔はスクロールを伝える必要があった

Webサイトにページ内リンクを設置した場合、ページ内移動が０秒だと、ページ遷移かページ内移動か瞬時に判断できない問題がありました。

その解決でスムーススクロールを採用するサイトが増えたと思います。

（クライアント受けが良いから実装したとか、そんな理由もあるでしょう。）

ページトップへ戻るボタンも、スムーススクロールを採用することで、直感的にスクロールしたことが分かります。

0秒スクロールでもういい

しかし現在、スムーススクロールは不要と考えるようになりました。少なくともページトップへ戻るに関しては。

ページトップへ戻るボタンは、メジャーサイトにも設置されていて、もはや押した時、ページトップへ移動する挙動にユーザーは慣れたと考えます。

もうページ上まで0.5秒も待たせないで、瞬時に戻ってよさそうです。

Amazonの「ページトップへ戻る」をクリックして、0秒で上に戻ったとき、そう感じました。

Webページでチェックボックスを掲載する場合、ブラウザデフォルトのデザインでは、小さくて押しにくい場合があります。そのためCSSで押しやすく調整します。

サンプルページ

チェックボックスの比較ページをアップしました。

ブラウザデフォルトの場合、チェックボックスが小さい場合が多いです。

また、HTMLでlabelを設定していないと、選択項目の文字を選んだ時に、チェックがつきません。

labelとCSS適用

サンプルページのコードです。（デフォルトのチェックボックス部分は省略）

いくつか重要そうなところをピックアップします。

17行目　cursor: pointer;

マウスオーバー時に、カーソルが指の形になります。クリックできる感が増します。

19行目　label:hover

マウスオーバー時に、見た目を変えます。ここでは背景色を付けました。クリックできる範囲を知覚できます。・・・ただ、強いマウスオーバー効果でチカチカ変わると疲れるので、やりすぎは注意です。

23行目　transform: scale(1.5);

チェックボックスにマウスカーソルを合わせるユーザーもいるため、チェックボックスを1.5倍にしました。縦横1.5倍なので、面積としては2.25倍です。

見慣れたデフォルトのチェックボックスをそのまま使いつつ、サイズのみ大きくしました。

24行目　transform-origin: right bottom;

チェックボックスの拡大起点です。右を起点に拡大すると、テキストに重なる可能性がほぼなくなります。

また、bottomで下を起点にすると、テキストと揃って見えました。（Chrome87、IE11調べ）

 

 

Webアクセシビリティのガイドラインで、「色だけが情報を伝える唯一の手段になってはいけない」という記述があります。対策として、背景パターンを併用して情報を伝える方法があります。

WCAG 2.0 達成基準 1.4.1「色の使用 」

WCAGの色の使用から引用します。

色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。

例えば、赤と緑の色で情報を分類していたら、色覚障害のユーザーには、見分けにくいことがあります。

日本の成人男性の５％が色覚障害というデータがあり、色だけに頼った情報は避けます。

背景パターンで識別する

グラフなどで用いられる方法で、背景パターンで識別できるようにします。

ドットやストライプを使い、さらにパターンの大きさや角度を変えることで、識別できるバリエーションを増やせます。

サンプルサイトとコード

実際にコーディングしたサンプルを、アップしました。

パターンはCSSのみで付けられます。主要部分を抜粋します。

つづいて、このCSSを適用しているHTMLです。

miCheckerのプレビュー

総務省のアクセシビリティチェックツール「miChecker」でも、ロービジョンシミュレーションの機能があります。

サンプルサイトを用いて色だけで伝えようとした場合、やはり赤、緑の識別が難しいです。

色とパターンの組み合わせに変えることで、識別できるユーザーが増えます。

 

色のみに頼らないユニバーサルデザインの参考になればと思います。

カラーボックスに取り付けた自作のカーテン用フックが、何度も壊れます。原因は子供（次男）がカーテンの棒を掴むからです。今度は破壊されないように炭素フィラメントで３Dプリントしました。

カラーボックス用カーテンフック

フックのモデリングデータ（stl形式）は、ご自由にお使いください。

最初はABSフィラメントを使ってプリントしましたが、子供がカーテンの棒にぶら下がるように体重をかけ、支えられず割れてしまいました。

次にPLAでプリントしましたが、やはり子供が体重をかけ、割れました。

根本的に「カーテンレールを掴むんじゃない！」という話かもしれません。

しかし、強度検証の知見が手に入るので、よしとしましょう・・・。

PLA炭素繊維プラスで３Dプリント

３度目の正直。強度の高い「PLA炭素繊維プラス」でカーテンフックをプリントします。

強度を上げるため、インフィル（密度）100%に設定することが重要です。

カラーボックスにフック取り付け

プリントしたフックをM2ネジでカラーボックスに取り付けました。

そこに、カーテンを通した突っ張り棒をかけます。

修復完了です。

これで割れることがないか、しばらく見守ります。

リビングにあるカラーボックスに、カーテンレールを設置しました。３Dプリンターで専用のフックを作り、突っ張り棒をのせています。

リビングの棚が汚い

リビングに子供たちの学校で使う教材を入れるカラーボックスがあります。

ここがなかなか汚くて、リビングの景観が悪くなります。

そこで、カーテンを設置して、隠すことにしました。

フックを３Dプリント

目立たない白のABSフィラメントで、フックを３Dプリントします。

「J」の字の単純なモデリングです。

フックができたら、カラーボックスにネジ止めします。

ネジのサイズはM2を使いました。

カラーボックス上部に隙間

フックを取り付け、カーテンをかけました。

すると・・・設計ミスで、上部に隙間が空いてしまいます。

カラーボックスの天板が出っ張っていて、思うようにフックが取り付けられませんでした。

形状を合わせて作り直そう

天板の出っ張りに合わせた形状で、なおかつフックのU字部分を上部に配置するように調整しました。

フックのモデリングデータ（stl形式）はアップしています。ご自由にお使いください。

これを３Dプリントしてみると、ぴったり取り付けできました。

カーテンの棒を支えるため、もう一つプリントします。

カーテン取り付け

フックに突っ張り棒を掛け、カーテンを通し、散らかっている棚が隠れました。

カーテンも、突っ張り棒も100円ショップで購入。

リビングの散らかりが隠れて満足です。

追記

半年で２回、フックが破損しました。

炭素フィラメントでプリントし直しています。

ホームセンターで「コアラのマーチ おかしのいえ 手作りキット」を見つけて購入。子供たちの工作（調理？）意欲を掻き立てます。意外と手間がかかり、調理の勉強になりました。

おかしのいえ 手作りキット

ロッテから「コアラのマーチ おかしのいえ 手作りキット」という商品が販売されています。Amazonでも取り扱っており、価格が1,600円くらいです。

おかしのいえのパーツが梱包されているわけではなく、ただのロッテのおかしと説明書が入っているだけです。（土台のタルトは別購入）

自分で加工して、おかしのいえを組み立てます。

長男が活躍

子供たちのおかしのいえ作りが始まりました。

制作に関しては、長男が指揮をとります。

説明書を理解して、組み立てていくのは、長男の得意分野です。

チョコレートを溶かすところから

おかしのいえのパーツ接着には、湯せんしたチョコレートを使うようです。

ここまで手間がかかるものとは思いませんでした。

予想外におかし作りの勉強になります。

ウエハースを切る

いえの壁に使うウエハースも、包丁で切ってサイズを合わせます。

ここで問題発生。

正確に切りたい長男と、自分が切りたい四男の意見が対立。

長男が機転を利かせ・・・

先に長男がウエハースに切れ目を入れて、そこに四男の包丁を誘導する方法を取りました。

よく考えます。

三男、次男が踊りだす

よくあることで、三男が踊りだしました。

続いて次男も踊りだします。

ここでまた問題が発生。

湯せんしているチョコのボールを動かして、水を入れてしまいました。

湯せんしたチョコに水が入ると固まらなくなる

溶けたチョコに水を入れてしまうと、もう固まらなくなるらしいです。

ドライヤーで水分を飛ばすことを試みましたが、ダメでした。

チョコを固める油成分を、水が分離させてしまい、固まらなくなるらしいです。

幸いにもチョコレートの余りがあったため、再度湯せんして使いました。

おかしのいえ完成

チョコタルトの上にのせ、おかしのいえが完成です。

トラブルもあったため、1時間半くらいかかりました。そのトラブルで、新たな知識を得ることもできました。

そして、おかしのいえが、食べて消えるのは一瞬でした。

防犯カメラ「Litmor Battery Cam 2」をソーラーパネルで運用します。この防犯カメラは有線で給電した時、耐水性がありません。そのため３Dプリンターで傘を作ることにしました。

ソーラーパネルで放置したい

トラブル予防にもなるので防犯カメラをベランダに設置しています。

しばらくバッテリーで運用していましたが、１週間ごとに充電する手間が面倒で、ソーラーパネルを取り付けることにしました。

給電USBケーブルをType-Cに変換

防犯カメラの給電口はType-Cでした。

ソーラーパネルの給電ケーブルはマイクロUSBのため、変換アダプタを使います。

アダプタは、スリムな形状でなければ、ふたが閉まらなくなるので注意です。

防犯カメラ本体に隙間

給電するには防水キャップをとる必要があり、カメラ本体に水が入り込む隙間ができてしまいます。

この隙間に差し込める傘を作れば、耐水になるかもしれません。

傘を３Dプリント

傘というより、笠になりました。笠地蔵の頭にのせるような形状です。

雨を通さないように、分厚く作っています。

笠のふちにコードを通す穴も用意しましたが、これは必要ありませんでした。

ゴムのようなTPU素材でプリントします。

これを防犯カメラの給電口に差し込むと、そう簡単に落ちなくなります。

とりあえず耐水

笠が少し小さかったようですが、とりあえず耐水となっています。

２日間の雨に耐えました。

ソーラーパネルからの給電もうまくいっており、晴れの日に100％までバッテリーが回復します。

カメラを取り外して充電する手間が無くなり、楽に運用できるようになりました。

追記：半年問題なく稼働しています。充電なしで放置できて楽です。

３Dプリンター「QIDI X-pro」でネジを印刷しました。直径8mmのネジであれば、使えるレベルのものが生成できました。ただし、２つの失敗をしたので書き留めます。

PLA炭素繊維プラスでネジをプリント

強度が高そうな「PLA炭素繊維プラス」というフィラメントを使って、試しにネジを作ってみます。

ネジの３Dデータは、Thingiverseの8mmのNut,Boltをダウンロードしました。

プリントしてみると、設定で２つの失敗をしたことに気づきました。

失敗１：サポートを付けてしまう

ネジのギザギザを支えるように、サポートを付けてプリントしました。

しかしサポートがきれいに取れず、精度が必要なネジでは邪魔になります。

8mmのネジの場合は、サポートなしでも問題なくプリントできます。

失敗２：ネジの中に空洞を作ってしまう

サポート付きで使えないネジを、試しに手で折ってみることにしました。

炭素フィラメントの強度実験です。

すると・・・ポキッと折れました。折れるんですね。

インフィル（密度）を20%に設定したのが原因です。

100%に設定して空洞を作らないことが重要です。

設定を変更してプリント成功

サポートなし、インフィル100%でプリントしました。

さすがに今度は折れる様子はないです。

ネジとしても、スムーズに使えました。

10万円弱の家庭用（？）プリンターで、ネジをプリントできる精度があることに驚きました。

一方、PLA炭素繊維の強度は期待しすぎない方がよさそうです。

積層に沿って折れやすく、空洞があると手でも折れるくらいなので、注意が必要です。

既存のPCアプリケーションを空中操作（タッチレス化）できる「aeroTAP」というインターフェースがあります。ロボットアームの操作画面で試しましたが、細かい操作は難しいです。

空中操作をしてみよう

マウスカーソルの位置座標でロボットアームを操縦するWebアプリに、「aeroTAP」を導入してみました。

非接触でロボットアームを動かしてみます。

しかし、数ピクセル単位の操作を想定した画面では、空中操作をすることが困難でした。

細かい操作の必要ないUIであれば、使えないことはない印象です。

電圧が足りなくなる

手の認識が定まらないため、カーソルがピクピク動き、ロボットアームも過剰に動きます。

しばらく操縦していると、電圧不足の警告がでました。

そして、アームは停止しました。

アームのサーボモーターを別電源にすれば解決しますが、ひと手間かかります。

手の認識は「Leap Motion」の精度の方が高い

「aeroTAP」と比較して、「Leap Motion」の方が圧倒的に、手の認識精度は高いです。

ロボットアームを遠隔で操作したいという要望は、「Leap Motion」の方が向いているでしょう。

「aeroTAP」は既存のアプリをそのまま空中操作できるのが強みで、開発技術に自信がない人が、簡単なWebアプリなどを作って操作するときに適しています。

気軽に空中操作が実現できます。

ちなみに、私は仕事で「Leap Motion」を使いこなせなかったときの保険で、「aeroTAP」を購入しました。

非接触時代には良いかも

コロナ以前、日常生活で非接触操作を使う場面が皆無で、「aeroTAP」も活躍の場がなかったです。

しかし、withコロナ時代は、非接触の時代。

活躍の機会があるかもしれません。

ロボットアームを足で操縦しています。操作するUIを工夫すれば、意外と簡単にに扱えました。手を使えない人が替わりに足で、ロボットの手を動かします。

ロボットアームでお菓子を掴む

寝ながら足でアームを操作して、マシュマロを掴んでみました。

足の指操作は、初めてでも意外とできます。

ロボットアームの操作画面UIは、スマホを見ないで操作できるものを作っており、テーブルの下の死角で操作しても問題ありませんでした。

指の摩擦が痛い

力加減が慣れてないせいか、スマホ画面を足の指で操作していると、摩擦で痛くなります。

スマホ指サックのゴムを伸ばして、足の指にはめて使った方が楽でした。

次回は、ロボットアームのジェスチャー操作をやってみます。