CSS Nite in Okayama, vol.9「現場の視点で工夫するウェブ制作」

ウェブ制作に活かすユニバーサルデザインの視点

写真:間嶋 沙知
講師 間嶋 沙知
音声 MP3ファイルをダウンロード
スライド PDFファイルをダウンロード

動画

講師メッセージ

「ウェブ制作に活かすユニバーサルデザインの視点」でお話しました間嶋です。
セッションを聴いていただき、ありがとうございました。アンケートでも感想やコメントをたくさんいただき、嬉しくて何度も読み返しています。

今回、色弱模擬フィルタ「バリアントール」を使って、いつもと違う色の見え方を体験していただきました。自分の想像を超えていろんな人にコンテンツを届けることができるのは、他のメディアにはないウェブの大きな魅力です。自分の関わっているサイトに色覚シミュレーションをかけてみたり、大事な情報のコントラストをチェックしてみるところからでも始めてみてください。0か100かではなく、できるところから改善していくことで、工夫した分だけ情報が伝わる人を増やすことができます。ユニバーサルデザインの視点が、皆さんのコンテンツをより多くの人に届ける武器のひとつになれば嬉しいです。

質問と回答

デザインに制約ができてしまいそうな不安があります。デザインの多様性も活かしつつ、ユニバーサルデザインも考慮するにはどうしたら良いでしょうか。

今回はデザインの機能的な面にフォーカスしてお話しましたが、見る人に素敵だなと感じてもらうこともデザインの大切な役割です。まずはこれまで通りデザインして、「情報を伝えている要素」についてはコントラストを確保する等の調整を加えると、機能とイメージが両立しやすいと思います。

主に楽天やYahoo!ショッピングの商品ページをデザインしていますが、最近の傾向としてサムネのクリック画像に商品説明をすべて入れるように奨められます。結果、文字がすべて画像になるのでユニバーサルデザインと逆行しているように思えます。ECサイトのショップは「売りたい」が先行しすぎてユニバーサルデザインを捨てざるを得ないことが多くあります。

リンク画像内に文字がある場合は、その内容を画像の代替テキスト(alt)に設定しましょう。画像と一緒にリンク内にテキストが含められる場合は、テキストで情報を提供しても良いです。この場合、代替テキストが重複しないように alt= “”(空)にしておきます。画像リンクの代替テキストについては、次のページが参考になります。
代替テキスト:画像リンク|実践ノウハウ[WebA11y.jp]

ネットショップは、実店舗に買い物に行けない人でも商品を買うことができるユニバーサル性を備えています。インターネットを利用している障害者は多いですし(視覚障害者のインターネット利用率は91.7%…障害者によるインターネットの利用率|NICT)、今後は高齢者の利用率も増えていくでしょう。サイトを使える人やいろんな人の使いやすさを高めるユニバーサルデザインの考え方は、「売りたい」に相反するものではないと思います。ショップの仕様上難しい面もあるかもしれませんが、工夫できる部分を探してみてください。

ユニバーサルデザインに興味を持った理由が知りたいです。

印刷物からウェブへとデザインする媒体を広げた過程で、ウェブの可能性=アクセシビリティに関心を持つようになりました。ウェブアクセシビリティの勉強をする中で、技術系の話題は充実しているけれど、デザイン面でできることがもっとないかなと感じていました。そこでユニバーサルデザインに興味を持つようになりました。

Japan Accessibility Conference vol.2 で、色弱当事者の伊賀公一さんのお話を聴いたこともインパクトがありました。

おすすめのデザインの勉強法をおしえてください。

気軽に続けられる方法としては、SNSをインプットに活用すること。憧れのデザイナーさんや勉強したい分野の情報発信をしている人をフォローすると、その人たちがどんなことを考えてお仕事をしているか、どんな記事や本を読んでいるか、業界の最新動向やTipsを日常的にキャッチできます。そして、読んだ記事や気になるデザインの良かったところ、ポイントなど一言添えてシェアする意識をしてみると、抽象化や言語化の練習にもなりますよ。

また、ぜひ挑戦していただきたいのは登壇することです。登壇準備は正直大変ですが、人に分かりやすく伝わる方法を考えることで、内容への深い理解を得ることができます。岡山は年中たくさんの勉強会が開催されていますし、セミナーで学んだことを社内で発表することからでもチャレンジしてみてください。

セッション内で紹介したツールと補足

色覚シミュレータ

コントラストチェックツール

おすすめリンク集

さいごに

私もユニバーサルデザインについては、まだまだ勉強をはじめたばかりです。皆さんのウェブサイトの中で、何か良い工夫を取り入れられたらぜひ教えてください。またお会いできる日を楽しみにしています!

下記からお気軽にご連絡・フォローください。

フォローアップページ

特別協力

CSS Nite

岡山情報ビジネス学院

岡山WEBクリエイターズ

イベント一覧

vol.1 明日から使える! Webディレクション術

vol.2 今日から使えるHTML5&CSS3

vol.3 Webクリエイターのための、制作効率アップ術

vol.4 デザイナーじゃなくても知っておきたい、成果の上がるWebデザイン

vol.5 マルチデバイス対応の最新事情

vol.6 ワンランク上のWeb制作

vol.7 UI/UXから考えるWeb制作

vol.8 ウェブ制作の改善手法

vol.9 現場の視点で工夫するウェブ制作