読みやすいブログデザインを追求してみた
ブログのデザインは、利用者の満足度に少なからず影響を与えます。読みやすいデザインや、疲れにくいデザインを追い求めることは、ブログ運営者にとって不可欠な要素です。
はてなブログでは、ブログのデザインを決定づける「CSS」を編集することができます。CSSは、HTMLの見栄えを司るスタイルシートです。
編集方法については、私のQiita記事に譲るとして、この記事では「ブログデザインの決め方」について、私なりの考え方を紹介します。
本ブログは、なるべく多くの方に閲覧していただくために、「誰でも」「読みやすい」デザインを目指しています。記事の内容的には読者を若干選ぶような記事を投稿するかもしれませんが、少なくともデザインで足切りされないようにはしたいです。
この記事では、本ブログでCSSをどのように設定したのかを紹介します。
目線の動きを意識したレイアウト
はてなブログには、公式が作成したデザインがいくつか用意されています。私はデザインのプロではないため、これらのデザインから一つを選択し、基本的にはそのデザインに準拠するつもりです。
しかし、デザインに関するノウハウを色々勉強していくうちに、既存のデザインでは満足できない点がいくつか見つかりました。そこで、3つの観点からデザインCSSを改変しました。ここからは、どのようにデザインを変更したのかを紹介していきます。
ここでは、ブログのレイアウトについて説明します。本ブログでは、記事本文を左側に、プロフィールなどのサブメニューを右側に配置する2段組レイアウトを採用しました。
センタリングは、行のスタート位置がバラバラになり、段落や文章を認識しづらくします。ですので、まずは基本の左揃えをお勧めします。
文字組み - 伝わるデザイン
最初に、記事を左側に配置した理由について説明します。人は横方向の文章を見たとき、左上から読み始める習性があります。したがって、ブログが表示されたとき、人が真っ先に読むのはページの左上部分ということになります。
しかし、既存デザインの中には、右側に記事を配置するものがあります。その場合、記事の読み始めは左端ではなく真ん中付近となってしまいます。それでは、人間の習性に合わせたデザインではありません。
幸いにも、デザインCSSを編集すれば、どの既存デザインでも記事を左側に移動させることができます。私の場合は、下記のCSS文を追加しました。
#content-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media (min-width: 768px) {
#content-inner {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
}
このCSS文を追加することで、記事ボックスが左側に移動します。そうすることで、全ての文章が左端から開始することになるため、目線の移動量を最小限に抑えることができます。
文字サイズやレイアウトを工夫して、一行文字数を減らすと、ずっと読みやすくなります。
文字組み - 伝わるデザイン
次に、1段組ではなく2段組にした理由について説明します。1段組レイアウトでも読み始めを左端にできるはずですが、なぜ1段組にしなかったのか。それは、2段組にすることで一行の文字数を減らせるからです。
1段組にした場合、文章が左端から右端まで続くことになります。スマホやタブレットのように画面サイズが比較的小さいならそれでも良いですが、PCモニターのように画面サイズが大きい場合は、全ての文章が一目で確認できないため非常に見づらくなります。
2段組レイアウトにすることで、プロフィールやカテゴリー一覧など有用な機能を常設しつつ、一行に係る文字数を削減できます。ですので、画面サイズが大きいときは2段組レイアウトが機能するように設定しました。
以上が、記事を見やすくするために採用した改善策の一つ目です。
色覚多様性に配慮した配色
配色について配慮した資料を作成することは、より多くの人にとって心地よい資料を作ることに他なりません。
赤色での強調、必要以上に色を見分けさせる資料、目がチカチカするような配色とはおさらばしましょう。
配色のバリアフリー - 伝わるデザイン
次に、見出しや強調について改変を行いました。ここで留意すべき点は、「誰にとっても」見やすい配色です。例えば、赤い背景色にオレンジの文字色にすると、目が疲れる上に非常に見づらくなります。このような配色だと閲覧者が減る恐れがあります。
また、このような明らかに見づらい配色以外にも、避けるべき配色があります。それは、「色覚多様性に配慮していない配色」です。現在、色覚には個人差があることが解明されてきており、人によっては赤色が見づらいなど多様性があることが分かっています。
したがって、閲覧数を増やすにはどのような色覚を有する人にとっても見やすいデザインにする必要があります。そこで問題に挙がってくるのは、見出しや強調文をどのように表現するかです。
例えば、強調文を赤色に変化させるだけにした場合、赤色が識別できない人にとってはどこが強調されているのか判別できないかもしれません。なので、太字と組み合わせるなど、工夫が必要となります。
当ブログでの強調方法は既にご覧になっていると思いますが、見出しは文字サイズを大きくして背景色を青色にし、強調は太字で黄色いマーカーを付けることで見やすくしています。これらは下記のCSS文で実装されています。
h3 {
color: #333;
padding: .5em 1em;
margin-top: 40px;
border-left: 8px solid #009bc6;
background-color: #e6f0f0
}
strong {
font-weight: bold;
background: linear-gradient(transparent 60%, #ff6 60%);
}
もし、自分のデザインが色覚多様性に配慮できているかどうかを確認したいときは、Chrome拡張機能のSpectrumで調べることができます。
以上が、「誰でも」記事が見られるようにするための、改善策の二つ目です。
説得力を持たせるための文献引用法
「引用」とは、自分の文章の中に他者の文章や事例を取り込むことです。
論文引用の仕方で絶対に抑えておくべきポイント
最後に紹介するのは、CSSデザインというよりは、記事の書き方に関する方針です。ここでは、「引用」のしかたについて説明します。
学術論文では、必ず参考文献のリストを掲載します。これは、研究が一人で完結することが無く、誰かが提唱した理論や考察を転用することになるからです。研究分野によるかもしれませんが、基本的には既存の研究を改善する方針で研究は進められていくので、論文を引用することは避けられません。
さて、実は引用には2種類存在します。「直接引用」と「間接引用」です。この言葉自体は聞いたことがない人もいるかもしれませんが、どちらもどこかで見たことがある引用方法だと思います。
直接引用
直接引用とは、一言一句そのまま他人の文章を写すことです。
論文引用の仕方で絶対に抑えておくべきポイント
例えば、鍵カッコなどで文章をそのまま引用したようなものは、直接引用に当たります。この場合、文章は一言一句たがわずに引用しなければならないそうです。
間接引用
間接引用とは、他者の考えを自分の言葉に置き換えて書くことです。この場合でも、他者の考えから着想した以上は、参考文献の掲示が必要です。
論文引用の仕方で絶対に抑えておくべきポイント
間接引用では、引用元の文章をそのまま記述せず、自分の言葉で置き換えたりして表現します。ただし、こちらでも引用元の主張を借りることになるため、参考文献リストなどで引用元を掲載します。
では、どちらを使うべきか
私が経験した限りでは、学術論文における引用は「間接引用」であることがほとんどだと思われます。少なくとも、私は他の論文を「直接引用」している論文を見たことがありません。
確かに、学術論文のようにページ数の縛りが厳しい文書においては、直接引用の使用は難しいかもしれません。直接引用だと引用元の文言を「そのまま」書き写さなければならないため、自分が書いた文章内に組み込むのが非常に面倒です。その結果、どうしても文章量が増えてしまうことに繋がりかねません。
間接引用の場合、自著した文章内に参考文献リストの文献番号を付与するだけで、文章と引用文献の対応付けを行うことができます。こちらが間接引用が多用される理由かどうかはわかりませんが、確かに直接引用が使われないことに妥当性がありそうです。
しかし、当ブログでは「直接引用」を多用します。これは、「間接引用」では引用元のどの部分を引用したのかが分かりづらいからです。
全ての参考文献がそうとは限りませんが、私が大学院時代に読んだ論文では、なぜこの参考文献が引用されているのか分からないものがいくつかありました。もし、「参考文献の方法を踏襲した」という記述が本文中にあって、このような参考文献に当たってしまうと悲惨なことになります（なりました）。これが、私が「間接引用」を忌み嫌う理由です。
一方で、直接引用なら少なくとも引用された参考文献の文章がヒントとして与えられているので、参考文献のどこを読むべきかが分かります。これは賛否両論あるかもしれませんが、以上の理由から私のブログでは直接引用を採用することに決めました。
このような引用文は、従来の学術論文と同じように、できる限りたくさん使用していきます。現状、私は名もなきアマチュア研究者ですが、私以外の誰かの意見も取り入れることで、私の主張に客観性と信頼性を持たせたいと考えています。
また、客観的な意見を取り入れることでより論理的な文章となるため、閲覧者にとっても分かりやすい記事になると見込んでいます。論理が破綻した文章だとツッコミが追い付かず読んでて疲れてしまうかもしれませんので、そのような離脱を防ぐためにも引用文を掲載するのは大事だと思われます。
以上が、記事の「読みやすさ」を向上させるための、3つ目の改善策です。
まとめ
この記事では、ブログの記事を「誰でも」「読みやすく」するために、下記の3つの改善策を紹介しました。
- 2段組レイアウトを採用して目線の動きを最小限にした。
- 色覚多様性に配慮した見出しと強調方法を設計した。
- 引用文を多用することで文章に説得力を持たせた。
これらを採用したことで、少なくともデザインの悪さが原因で閲覧者が離脱するのを極力少なくすることができると考えています。
また、今後もデザイン変更の必要性を感じたら、その都度より良いデザインを目指してCSSを修正していくつもりです。
