マテリアルデザイン×Webアクセシビリティ｜誰もが快適に使えるデザインを目指して
こんにちは。企画設計室 ソフトIT担当です。
何度かこのブログでも言及しておりますが、現在私はこのアメディアサイトの更新を担当しております。
今回は、私がWebサイトや社内システムを設計する際に意識している「マテリアルデザイン」と「Webアクセシビリティ」についてご紹介します。
マテリアルデザインとは？
「マテリアルデザイン」とは、Googleが提唱したデザインシステムのことです。
公式のガイドラインは以下のサイトで公開されています。
“マテリアル”とは「物質的な」という意味の言葉です。
Googleのデザイナーや開発者は、スマートフォンやタブレットを通して多くの人がWebやアプリに触れる現代において、
デジタル上の体験を現実の“物理的感覚”に近づけることを目的に、このデザイン思想を生み出しました。
例えば、以下のような特徴があります。
マテリアルデザインの例
- 影の落ち方や重なり方に現実と同じ法則性を持たせ、立体的な印象を与える
- アニメーションに“慣性”や“質量”を感じさせる自然な動きを付ける
- ボタンやカードの押し込み・浮き上がりに本物のボタンを押したときのような感触を想起させる
こうした工夫により、ユーザーが直感的に操作できるUI（ユーザーインターフェース）を実現しようとする取り組みがマテリアルデザインです。
アメディアでの取り組み：立体的なデザイン
最近更新を行ったアメディア事業案内ページでも、一部この考え方を使用しています。
上記画像のように、クリック可能な部分には他の場所より濃い影を落とすことで、現実のボタンに近い感覚を持ってもらうことを想定したデザインとなっています。
Webアクセシビリティとは？
「Webアクセシビリティ」とは、すべての人が年齢・環境・身体的特性に関係なく、Webサイトを快適に利用できるようにする考え方です。
日本国内でも、デジタル庁やWAIC（Webアクセシビリティ基盤委員会）によりガイドラインが整備されています。
特に上記チェックリストは、一覧で対応すべき項目をチェックすることができるので、サイトを運営しているすべての方にとってとても便利です。
最低限守るべき3つの基本ポイント
- 動画や音声を自動再生しない スライダーや動画など、動くコンテンツには「一時停止」や「非表示」ボタンを設ける。
- キーボード操作だけで全ての操作が可能であること マウスを使用できない方にも配慮し、Tabキーなどでフォーカス移動ができる設計にする。
- 激しい点滅や明滅を避ける 光過敏性発作を引き起こす可能性がある表現を使用しない。
特に以下の３つに関しては、『達成しないと利用者に重大な悪影響を及ぼすもの』として定義されており、まず真っ先に確認すべきコンテンツであるといえます。
アメディアでの取り組み：画像の代替テキスト
当サイトで行っているWebアクセシビリティへの取り組みとして、最近の記事の画像には必ず代替テキスト（alt属性）を設定しています。
代替テキストは、視覚障がいのある方がスクリーンリーダーで内容を理解できるだけでなく、
通信状況などで画像が読み込まれなかった場合にも「何の画像か」を伝える大切な情報です。
「画像を言葉で説明する」という作業は地味に見えますが、
すべてのユーザーに配慮したサイト運営を行う上で欠かせない要素です。
下記動画は私が担当したブログ記事ではありませんが、掲載担当の私が相談の上代替テキストやキャプションをつけさせていただきました。
該当記事：3Dプリンターで製作してみました⑥
現在改修中のため、過去の記事に使われていた画像などには設定できていない部分もありますが、順次対応を進めていきます。
「見た目」だけがデザインではない
「デザイン」という言葉から、おしゃれで美しい見た目作ることを想像する方も多いかもしれません。
しかし私は、様々な特性を持ったすべての人がひっかかりなく快適に使えることこそが本当のデザインだと考えています。
「評価されるデザイン」よりも、「誰も不快にしないデザイン」を。
現時点でもアメディアのWebサイトにはたくさんの改善の余地がありますが、
アクセシビリティやUI設計の観点から、少しずつ改良を重ねています。
今後も、さらにユーザーに寄り添ったサイトへと更新していきたいと考えております。是非マテリアルデザインやWebアクセシビリティといった観点からも、今後のアメディアサイトの更新を楽しみにしていてください！
付録：最近更新したページ
詳細はこちら
あいちUIJターン支援センター様でもご紹介いただいています。