フッターの話をしたときに、ちらっとこのページにテンプレートが存在しているという話をしたと思います。今回はその話です。

文字の密度を下げた

今回変更したのが、文字の密度に関することです。

これまで問題だと感じていたのが、スマートフォンでの文字の密度です。このサイトのデバッグというか確認はすべてPCで行っています。スマホはそれほど重視しているわけではありませんでした。結果として、スマホ向けの画面でも「読めない」という事態は避けられたものの、次に「読みにくい」という問題がありました。

主な原因は3点。1点目は行間が狭いこと。2点目は文章だらけであること。3点目は左右の余白が大きいこと。これらは総じて、文章の密度を高めてしまうという大きな問題に通じています。

そこでこれらを解消するために以下の変更点を行いました。

文章が多すぎるという問題については、デザインでどうにかすべき問題というよりかはエントリの書き方のほうが重要なので、今はとりあえず無視することにします。

では、この変更点を適用する前と後で比較してみようと思います。

別の問題点

今回の変更で左右の余白を小さくしたという話をしましたが、別の問題点が発生しました。それは右端が統一されていないということです。

正直、ここまで気にする必要もないので、今回は修正する予定もないのですが、気になる点であるというところだけお話しておきます。

もう少し詳しく問題を説明することにします。ブラウザなどの環境にもよりますが、単語の句切れなどが原因で文章が右端に到達しないまま折り返されるという事態が発生し、結果として左端の開始位置は統一されているものの、右端は統一されていないという問題があります。

だからといって、行の末端を無理やり左にくっつけるということもしたくないので、放置というわけです。

もう一点。今回はホームページ全体に対する変更を加えています。それが、ハイパーリンクの下線です。

ハイパーリンクを文字色（青系）のみで示すのは、アクセシビリティ上では良くなく、例えば色の判断が難しい環境に置いては、どこがリンクなのかわかりにくいという問題があります。

しかし、下線は消したいという思いもあり、そのバランスをとって、マウスホバー時に下線が復活するようにしました（main-content内のみ）。

エセアクセシビリティだと言われればそうですが、これでなんらかが改善されていればいいですね。ほなまた。

西田（総合情報学部情報学科 2021年入学）

通信研究会OB。当ホームページの保守運用を支援しています。組み込み系のソフトウェアエンジニア。応用情報技術者・修習技術者。