活動報告

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

こんにちは、田部です。

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

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

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

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

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

わたしたちは「新興宗教桶教(しんこうしゅうきょうおけきょう)」です。 上うえの 矢印やじるしを おすと、 下したの 文章ぶんしょうを、 日本語にほんごで 聞きくことが できます。 ...

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

桶教の説明を「やさしい日本語」で書いてみましたこんにちは、田部です。 先日、「桶教について」に記載されている内容を、「やさしい日本語」と呼ばれる書き方でリメイクしたものを公開し...

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

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

色覚異常とは?

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

簡単に説明すると、特定の色の識別が難しくなるというものです。今回は、当サイトのスクリーンショットに特殊な補正を施し、色覚異常の方の見え方を再現した画像を用意しました。

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

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

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

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

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

具体的にどう変わった?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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