CIO – EBUT Laboratory https://ebutlab.com Emotional, Burning, Unlimited Tuned Laboratory Sat, 17 May 2025 13:33:43 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://ebutlab.com/wp-content/uploads/2016/01/cropped-logo-2x-100x100.png CIO – EBUT Laboratory https://ebutlab.com 32 32 179778457 GO! Pixel5! in Aug -Sep, 2021 https://ebutlab.com/blog/2021/09/01/pixel5-go-in-aug-sep-2021/ Tue, 31 Aug 2021 22:00:00 +0000 https://ebutlab.com/?p=19637
]]> 19637 What kind of bird is that? Snap a picture and the Merlin Bird Photo ID app tells you https://ebutlab.com/blog/2018/09/03/what-kind-of-bird-is-that-snap-a-picture-and-the-merlin-bird-photo-id-app-tells-you/ Mon, 03 Sep 2018 13:36:12 +0000 https://plus.google.com/+CozyKojimaHiroyuki/posts/Lbg8nNcpf71 Is that a bufflehead? A coot? Maybe a loon? Get close enough to take a picture and the Merlin bird identification app will tell you in seconds — sort of like a Shazam for would-be ornithologists.

The photo ID capability has actually been a part of the greater Merlin ecosystem for more than a year, but the Cornell birders behind it just recently added the ability to do it from the mobile app. Take a picture, zoom in and let the database do the work.

Of course, getting close enough to get a decent picture of a warbler with your wide-angle smartphone camera might be something of a challenge. But if you get the shot, the creators claim the app is 90 percent accurate. If you’re not sure, answer a few questions — what did its call sound like, did it have a bar on its throat, etc. — and that should put it right. You don’t even need to be online, though you will need to download a couple hundred megabytes of data first.

“This app is the culmination of seven years of our students’ hard work and is propelled by the tremendous progress that computer vision and machine learning scientists are making around the world,” said Pietro Perona, who co-founded Visipedia, the company Cornell collaborates with to make the app.

“Ultimately we want to create an open platform that any community can use to make a visual classification tool for butterflies, frogs, plants or whatever they need,” said Cornell professor Serge Belongie, the other co-founder.

The app is free on Android and iOS — just make sure you’ve got half a gig of free space before you commit to downloading it…

]]> 12411 高齢者のためのウェブデザイン8つのポイント https://ebutlab.com/blog/2018/05/24/%e9%ab%98%e9%bd%a2%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b38%e3%81%a4%e3%81%ae%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88-tips-boel-inc/ Wed, 23 May 2018 23:40:14 +0000 https://plus.google.com/+CozyKojimaHiroyuki/posts/hkgj3aBfWbr 最近は、シニア層でもパソコンやスマートフォンでインターネット（※）を利用する人が増えていますね。
2016年の総務省の統計では、60歳以上の方の約60％、60～64歳の方に限定すると80％以上がインターネットを利用しています。
パソコン、スマートフォン、タブレット型端末、携帯電話・PHS（スマートフォンを除く）、インターネット対応型家庭用ゲーム機、インターネット対応型テレビ受信機の合計

私たちは全てのユーザーが完璧な視力と運動能力、そして記憶する能力を持ち、ウェブ操作や知見について知っていることが当たり前という前提に立ってしまいがちです。

これからさらに増える高齢の利用者の方にも、快適にウェブサイトを見ていただきたいですね。
そこで、高齢者にとって利用しやすいウェブサイトデザインのポイントをまとめました。

そこで、高齢者にとって利用しやすいウェブサイトデザインのポイントをまとめました。

アルファベット・片仮名は使わない

表記は「ログイン」→「会員の方はこちら」、「Access」→「交通案内」など、漢字や平仮名にしましょう。
アルファベットや片仮名表記で示される外来語に馴染みがない方にも言葉の意味が伝わりやすいよう、配慮が必要です。

フォントは大きく

一般的に、高齢の方が読みやすいフォントサイズは16px以上とされています。文字の読みやすさは書かれている情報の理解度に直結するため、対象となるユーザーに応じた適切な設定が必要です。

行間は広めに

フォントサイズと同様気をつけたいのが、行間です。
line-heightが160～180%が読みやすいです。
行間が狭すぎると、行を移るときに次に読む行を見失いますし、反対に広すぎると、視線の移動距離が大きくなり疲れてしまいます。
フォントサイズはブラウザの表示設定などで変更できますが、行間はユーザー側での調整ができません。作る側がしっかり配慮しましょう。

色のコントラストに注意

テキストと背景は、しっかり色のコントラストをつけましょう。
日本工業規格「JIS X 8341-3:2010」では、テキストと背景のコントラスト比を4.5対1以上とするよう推奨しています。
白内障などにより視界がかすみ黄色味を帯びてくると、パステルカラーなどのペールトーンや彩度の低いカラーが識別しにくくなります。
特に黄色と白は識別しづらいので注意が必要です。

また、表示する色合いを変えられる機能を入れると更に利用しやすくなります。

参照：東京都 http://www.metro.tokyo.jp/moji.html 

東京都

無料のコントラスト確認ツールもあるので活用しましょう。

miChecker Ver.2.0
http://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html 

ColorTester
https://alfasado.net/apps/colortester-ja.html 

ボタンは大きく、立体感を

ボタンやテキストリンクは大きくしましょう。主要なボタンは、幅が32px以上あるとよいです。
入力フォームなどにあるチェックボックスやプルダウンも、適切な大きさに設定する必要があります。
カーソルを数ミリ動かしたり、小さなボタンをタップしたりするなどの細かい動作が必要ないよう、手先が不自由な方の利用も前提とした設計が必要です。

また、フラットデザインのボタンは、単に背景が塗りつぶされたテキストに見えてしまいます。
薄い影を入れるなどして立体感を出し、心理的に「押したくなる」ボタンにしましょう。

参照：資生堂　プリオール https://www.shiseido.co.jp/pr/question/ 

資生堂　プリオール

アイコンにはテキストを添える

アイコンがなにを意味するか、テキストで補足を入れましょう。
アイコンは文字分のスペースを節約でき便利ですが、普段からWebサイトを利用していない場合、アイコンの意味がわかりにくく感じられる方や、アイコンをクリックすると詳細な情報が表示されることが理解しにくい方もいます。

参照：近畿日本ツーリスト http://www.knt.co.jp/ 

近畿日本ツーリストホームページ

「表」で比較しやすく

ウェブサイト上で数種類の商品やサービスを比較したいとき、主要な情報をまとめた一覧表があると便利です。
ページの行き来が多いと、今いるページや元のページへの戻り方がわかりにくくなるため、同じページで複数の情報を比較できると親切です。

「LIFULL介護」のページでは、違いのわかりにくい老人ホーム・介護施設が一目で比較できる表が掲載されています。

参照：LIFULL介護 https://kaigo.homes.co.jp/manual/facilities_comment/list/ 

LIFULL介護

問い合わせ電話番号はファーストビューに

問い合わせ対応用の電話番号がある場合、ファーストビューの範囲内に設置しましょう。
高齢の方にとって「困った時にすぐ電話で直接相談ができる」ことは心強いものです。メールや問い合わせフォームの利用に不慣れな方にとっても、電話番号はすぐ見える場所に入れると親切です。

まとめ

いかがでしたでしょうか。
ウェブサイトを作る時、自分では見やすいと思っても、様々な方に見ていただくことを十分考慮してデザインしたいですね。
先に挙げたような小さな工夫をすることで、幅広い年代の方にとってわかりやすい、快適なウェブサイトを増やしていきましょう。

参考サイト

総務省「平成29年版　情報通信白書」
http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc262120.html

Web担当者Forum

「シニアフレンドリー最適化＝SFO」の背景と重要性を認識しよう（全6回の1）」
http://web-tan.forum.impressrd.jp/e/2015/10/02/20679 

「ネットはまだアヤしい場所？ シニアの心理的ハードルを下げ安心してもらう6つの方法（全6回の2）」
http://web-tan.forum.impressrd.jp/e/2015/11/06/20680 

「シニアの認知能力でも快適にサイトを使えるようにする7つの“技”（全6回の3）」
　http://web-tan.forum.impressrd.jp/e/2015/12/01/20681 

「文字サイズだけでは不十分！ 老いた眼や手でも使いやすいサイト作り7つのポイント（全6回の4）」
http://web-tan.forum.impressrd.jp/e/2016/01/21/21867 

hi-posi Front-End blog「50代以降をターゲットにしたWebサイトのUI事例」
http://hi-posi.co.jp/tech/?p=330 

WebA11y.jp「各チェックツール」
https://weba11y.jp/tools/testing_index/ 

LIG「デザイン上達の秘訣は「文字の扱い方」！テキストを読みやすくする5つのポイント」
https://liginc.co.jp/225369 

長野県建築士会諏訪支部青年委員会「高齢者にやさしい色彩計画」（PDF）
http://www.arcsuwa.com/committee/seinen/koureisyaniyasasii.pdf 

]]> 11683