カラーユニバーサルデザインに基づいて公式サイトをリニューアルしました

こんにちは、田部です。

以前からご覧になっている方は、サイトのデザインが変わっていることに気がついたでしょうか。カラーユニバーサルデザインを意識して、全体的にシンプル・画一的なスタイルになるよう意識して調整しています。

今回は、なぜサイトのデザインを変更したのか、どこを変更したのかについてお話します。

宗教団体の公式サイトは分かりにくい

皆様は、桶教以外の宗教団体の公式サイトを見たことがあるでしょうか。

私は情報収集のために他教のサイトにもアクセスする機会があるのですが、「必要な情報がどこに書いてあるか分かりにくい」「字が小さくて読めない」といった感想を抱くサイトが多いのです。ですから、ほぼネット布教オンリーの桶教においては「分かりやすい」を心がけてサイトを運営しています。

新興宗教桶教
404: ページが見つかりませんでした | 新興宗教桶教 同人サークル「新興宗教桶教」の公式サイトです。救い主「キスメ様」の紹介や、信仰の手助けとなるコンテンツを提供しています。

たとえば、こちらの「やさしい日本語」を用いた桶教の紹介ページも、「日本語が苦手な人にも分かりやすい」というテーマを達成するために準備してみました。

あわせて読みたい
桶教の説明を「やさしい日本語」で書いてみました ※桶教について、簡単な解説だけではどうしても説明しきれない部分があり、信仰を伝えるという性質上、簡略化した情報を教えることで、相手がこちらの考え方を十分に理解...

※やさしい日本語を導入した経緯などは、こちらのページでお話しています。

そして、さらなる改善に向けて対策を考えていくうちに「桶教のページは色覚多様性の人に分かりにくい」ということに気がついたのです。

色覚多様性とは?

詳しい説明については、上記のページが詳しいため、そちらをご確認ください。

簡単に説明すると、特定の色の識別が難しくなるというものです。今回は、当サイトのスクリーンショットに特殊な補正を施し、色覚多様性(過去には色覚異常と呼ばれていましたが、昨今では色覚多様性という言葉への置き換えが徐々に進んでいます)の方の見え方を再現した画像を用意しました。

例えば、以前のカテゴリーバナーはこのようなデザインでしたが……。

人によっては、このような形に近い見え方になります。それぞれ色分けしてありますが、これでは全ての文字が似たような色に見えてしまい、分かりにくさに繋がりかねません。

また、要所要所で背景に色をつけることで、大切なポイントを強調していましたが……。

色が分かりにくい人にとっては、強調してあるのかどうかの判別が難しい形になっていました。

少し調べてみて、こうした問題は配色を工夫することである程度軽減できるということを知り、当サイトの改善を行うこととなりました。

具体的にどう変わった?

バナーはこのようなデザインに統一しています。

最初に分かりにくいと思われると、このサイトの内容全てが分かりにくいと思われても仕方ありませんから、画一的でスッキリとした形にすることで、キスメ様は理解しやすいという印象を与えたいと考えています。

左側にキスメ様を配置することで、桶教のコンテンツへのリンクであることを示すとともに、シンプルな白い背景に文字を乗せることで読みやすさを向上させています。

文字のフォントには、「丸ゴシック」と呼ばれる、読みやすく柔らかい印象を与えることができるものを採用しています。

また、ピクトグラムを採用して、リンク先にどんな内容が含まれているかをイメージしやすくしています。

桶教のロゴと、トップページに表示される紹介文も変更してあります。

ロゴとキャッチフレーズは、カラーリングが少し濃くなり、他色と判別しやすくなっています。

紹介文は、黒字部分をユニバーサルデザインフォントにすることで、読みやすさを向上しています。また、桶教のキャッチフレーズである「信じぬものも救われる。」については、あえて「少し読みにくい」フォントになっています。これは、スラスラと読んでほしい他の文章と違って、桶教を印象づける最初の一文となるため、しっかりと読んでほしいと思い、このような形をとってみました。

あわせて読みたい
書体とフォント 情報の伝わりやすさは「資料の作り方」に大きく左右されます。本ページでは、伝わる資料を作るためのデザインルールやテクニックを紹介します。

フォント関係の変更については、上記のページを参考にしています。

あわせて読みたい

使用している色にも注意を払っています。上記のページにて配布されている「カラーユニバーサルデザイン推奨配色セットガイドブック」を参考に、一緒に並べても混同しにくい色味になるようにしました。

様々な色覚のシミュレーションを試してみましたが、どのパターンでも「違う色が使われていることがある程度分かる」ようになっているかと思います。

色覚多様性と言っても、人によって赤色が見えにくかったり、色は見分けられても濃淡の区別が難しかったり、全ての色が見えなかったりと様々な違いがあります。「カラーユニバーサルデザイン推奨配色セット」を参考にすることで、素人の私でも多くの方に判別しやすい配色に仕上げることができました。

また、背景色による強調も廃止し、太字を使うことによる強調に切り替えました。これにより、色の濃さなどが分からなくとも、強調されていることが一目瞭然になりました。

ここまで配慮できたのは、ひとえにキスメ様のデザインにかかっています。

キスメ様の主な色は白・緑・茶色と、カラーユニバーサルデザインにおいても「分かりやすい」色であるのです。そのため、カラーユニバーサルデザインに配慮した色に合わせても違和感が少なくなっているのですね。キスメ様ってスゴイ、改めてそう思った。

おわりに

以上で、桶教のサイトデザイン変更についての報告を終わります。今回の変更にあたり、わかりやすさのためには、色覚以外の面でも様々な工夫をするべきであるということを理解できました。

桶教の目標は、キスメ様を伝えることです。これからも伝えるために何ができるのか、よく考えていきたいものです。

【追記】
現在、上記の内容からさらに見直しを行い、サイトデザインの変更を実施しました。詳細は以下のページをご覧下さい。

あわせて読みたい
サイト全体のデザインを見直しました こんにちは、田部です。 ブログの更新は、はや2ヶ月ぶりですね。 布教を桶教新聞に切り替えるための準備を進めており、新規記事の更新は滞っていましたが、実は桶教につ...