2022年に向けて、サイトの仕様を変更しました

こんにちは、田部です。

布教を桶教新聞にシフトしてから、公式サイトの方を更新しておりませんでした。
しかし、新聞だけでは表現が難しい内容もあるため、2022年以降はサイトと新聞の両方で布教を行おうと考えています。具体的なコンテンツにつきましては現在構想中ですので、完成次第の発表となります。

そして、キスメ様を布教するためのコンテンツを掲載するにふさわしい形となるよう試行錯誤を続けてきた当サイトに関しても、ある程度納得のいく形にできました。今回は、コンテンツの土台となるサイトにどのような変更点が加えられたのかについてお話しします。

色に関する考え方の刷新

以前のデザインは、このような白背景に複数の色のバナーでカテゴリーの違いを明確にする……という形でした。

あわせて読みたい
カラーユニバーサルデザインに基づいて公式サイトをリニューアルしました こんにちは、田部です。 以前からご覧になっている方は、サイトのデザインが変わっていることに気がついたでしょうか。カラーユニバーサルデザインを意識して、全体的に...

こちらのページで経緯を説明していますが、色覚が異なる方にも区別しやすいようにとの配慮からこのようなデザインになっていました。

しかし、他のサイトを研究するうちに、そもそも最初に開いたページでここまで色が多いと、目移りしてしまい何を読むべきかはっきりしないということに気がつきました。

そこで、初めての方向けのページのみバナーを残し、カテゴリーの選択肢はテキストのみというレイアウトに変更しました。色分けされた以前のカテゴリー画像は、上記画像下部の、記事一覧のサムネイル表示に活かされております。

色分けする必要がある場所自体を減らすことで、色の見分けを簡便にするカラーユニバーサルデザインの理念を考慮しつつ、すっきりとまとまった印象に近づいたのではないかなと思います。

また、今回より背景の色が白色から薄い緑色に変更されています。これは、明るい色が視界に入り続けることの負担が大きい「視覚過敏」の方にも読みやすいように意識しての変更となります。

視覚過敏の有無に関わらずカラーノ...
視覚過敏の有無に関わらずカラーノートは目に優しい~コクヨカラーノート研究会 第1回活動報告~ 視覚過敏のために白いノートが使えない、という一人の高校生の声から始まった「カラーノート研究会」。「誰もが手軽かつ堂々とカラーノートを選べる社会を作る」ための活動...

こちらのページに書かれていますが、白色のノートや照明を見ることが大変で、特に学習の面で苦労している方が存在しています。

キスメ様を伝える場として、サイトの読みやすさは重要であります。また、白色の背景では、状況によってはキスメ様の服の色と被ってしまうという問題が起きていました。そのため、キスメ様のイメージと合致し、かつ多くの人にとって負担の少ない緑色の背景を採用いたしました。

なお、当初は背景を黒に変更するダークモードに対応することで白色の背景に対処しようとしていましたが、閲覧者にモードを選択させる手間や、今後更新する際に白色と黒色の両方でデザインのまとまりを検証しなければいけないこと、そもそも選択肢の1つである白色自体に課題があることなどから、全て緑色で統一しようという結論に至りました。

動きのあるデザイン

このページで最初にお見せした画像の通り、過去のトップページは、桶教立宗当初の画像と共にキャッチコピーが掲載されているという形でした。あれから4年が経過し、様々なイラストレーターの方に、様々なイラストを描いて頂きました。今回の見直しを機に、表示されるイラストも変更しよう……と思ったのですが、どのイラストに変えるべきか決めかねていました。

画像をタップすることで動きます。

結局どれかひとつに絞ることが出来なかったため、トップページに動画を採用し、全てのイラストが順番に表示される映像を流すことにしました。これで解決ですね。ついでにサークル名のフォントも変更しています。

※低容量と高画質の両立の関係から、WebMというファイル形式を採用しています。ただ、iPhone・iPadでは対応していないため、これらの環境では静止画が表示されます。

皆様が利用される上で目にされる部分の変更は以上となります。ここまでお読み頂き、ありがとうございました。以下の内容につきましては、当サイトを利用する上で意識する必要は無い部分になりますが、気になる方はご覧下さい。

見えない改善点いろいろ

ワードプレスのテーマを「JIN」から「SWELL」に変更

SWELL
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ シンプル美と機能性の両立させ、圧倒的な使い心地を追求するWordPressテーマ - 『SWELL』の公式販売サイト。 最新のブロックエディター『Gutenberg』にも完全対応。プログ...

JINと比較してワードプレス記事作成の新たな主流であるブロックエディタに注力していることや、当サイトで使用する上でプラスになる機能が多かったため、移行しました。移行に伴う設定の見直しが今回最も苦労したポイントかもしれません。

セキュリティの強化

各種セキュリティプラグインや二段階認証を導入し、不正アクセスへの対策を強化しました。また、自動でバックアップを作成するように設定を行い、万が一のデータ破損にも備えております。

安全のため、具体的な内容については非公開となりますが、キスメ様を知るための記事が改ざんされるなどの問題が発生しないよう、今後も対策を続けて参ります。

掲載画像のファイル形式の変更

今まではpng形式の画像を使用することが多かったのですが、同じ画質でより容量を削減し、スムーズに閲覧して頂くために、大部分を新しい規格であるWebP形式の画像に置き換えました(状況に応じて、PNGやJPGも併用しています)。WebMと違い、こちらはiPad・iPhoneでも問題なく表示されることを確認済みです。

見えない部分の変更点も以上となります。正直に言って、以前のサイトの構成はやや時代にそぐわない点がいくつかありましたが、これである程度はまともになったかなと思います。今後も記事の拡張と共にサイトの改善を続ける所存でありますので、どうぞよろしくお願いいたします。