またブログを再開しようと意気込んでいるところなのですが、そうおもって久々にサイトを振り返っていると一つおもうところがありました。

それが、サイトの文字が読みにくいということ！
今までは、ブログの背景には布生地のような画像をしていてファブリックな印象を意図していたんですが。
文章の内容が主体であるこのサイトにおいて、文章をスムーズに読めるようなユーザインターフェイスになっていないということは致命的です。
やっぱちょっと不便さとか、見にくさがあると少しずつ億劫な気持ちになっていってしまいます。
ブログの内容を一生懸命考えることも大切だけれど、仕事をしやすい環境作りが先だなーと思って今回はサイトの背景変更と配色を調整してみました。

以前のサイトイメージとその目的

こんな感じです。

もともとのこのサイトのテーマは、「手作りで実り多い」サイトです。

興味の持ったことは自分の手で一度トライしてみることと、そしてそこから楽しいとか嬉しいとか驚きとか得るものが多くあれという目的でやっておりました。
この理念を表現した結果。
例えば、背景は布生地をイメージしておりこれによって手芸・手作り感を出す。タイトルの点線は糸を通している感じ。サイドバーのタイトルはパッチワークをモチーフにしています。
また、サイト全体の配色は茶色やオレンジ系でまとめていますが、これは、実りの秋というような、紅葉の秋色をテーマとしているためです。

また基本的に文章主体のサイトの方針であったため、読んでいて疲れにくいということも意識して、背景は真っ白や真っ黒といったハイコントラストな色は避けています。

この理念自体は今も変わっていないんですが、サイトの見やすさという点では改善すべき点が沢山あります…。

一つ目は、背景画像が目にちらつくこと。
我慢できなくはないですが、背景画像の画質が少し粗かったり、あとは文字を読もうと思ったときすこし読みにくさを与えてしまっています。これはサイトを見るストレスになってしまうので今回変更しました。
もう一つはリンクの色です。
オレンジがちょっとまぶしかったり、あとは明るい色ということもあり文字として認識しづらいところがあります。

1. 背景の変更
2. 文字色の変更

今回はこの2つを大きく変更いたしました。

配色を決めよう

以前のサイトを見直してみて、サイトイメージの目的と、改善すべき点は明確にできました。
背景の画像は消してしまうとして、次に考えないといけないのは、背景色、リンクの色、本文の色の配色です。
僕に色彩感覚があればいいのですが・・・美術的感覚はからっきしなので他のサイトを参考にしました。

目に優しいUIデザイン
https://dev.classmethod.jp/articles/17125/

1. 眼球の動きを少なくする
2. 情報の認識率、ピント合わせをする
3. 光量を調整する(標準反射率18％くらいが理想)

こういったことが、目に優しいサイト作りには大切ということみたいですね。

今回は、配色を考えているため、この光量を適切に調節した、ローコントラストな配色を意識しました。
具体的にどういう配色がおすすめなのかというと、グレーとか和色です。

和色大辞典(https://www.colordic.org/w)で沢山の和色が確認できます。

日本文化はやはり落ち着きますね…。

というわけで、配色はこちらのサイトの色をベースとして、あとは自分で微調整するという感じにしました。

配色を変更しよう

ということで実際に配色を変更いたしました！

僕はwordpressで自分でテーマを自作しているんですが、文字色の変更とかはテーマカスタマイザの設定をすると色の試しが楽にできそうです。
参照：WordPressテーマカスタマイザーの色設定項目の追加方法。(https://fantastech.net/theme-customizer-color)
へぇこういうの設定できるんだ便利だなー！と感心しつつも今回はそこまでしなくてもいいかなと思ったんでスルーです(笑)

変更前と変更後の色コードは次の感じです。

○変更前のカラーデザイン

• 背景：画像
• リンク：#f05000
• テキスト：#000000
• サイドメニュー：背景(#6b4a2b),テキスト(#ff8c00)

○変更後のカラーパターン

• 背景色：#e8d3c7
• リンク：#ba6607
• テキスト：#4c4c4c
• 見出し：#2b2b2b
• サイドメニュー：背景(#6b4a2b),テキスト(#ff8c00)

背景色は和色の中から灰梅をチョイス。リンクの色は派手でちょっと目にちらついてしまうオレンジから、落ち着いた茶色に変更しました。
テキストは前は真っ黒だったんですが、文字が少しパキパキとした印象を与えている感じがしたので、濃い目のグレーに変更しました。
見出しに関しては、すこし印象を強くするため和色の黒に設定して、本文とちょっと差をつけてみました。
黒って真っ黒とは違うというのも発見でした。

サイドメニューの色についてはそこまで問題ないかなと思ったので今回はノータッチです。

フォントの変更

ついでにアルファベット・数字のフォントも変えました。環境によってはフォントが使えないかもですが…。

font-family:Merriweather, Georgia, serif,“游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “メイリオ”, Meiryo;

フォントファミリーの先頭に、merriweatherとGeorgiaを追加しました。

この数字がおしゃれ！

反省

ネットサーフィンをしている間に見つけた記事ですが、低コントラストのウェブデザインがユーザビリティが低いと批判されております(^_^;)ﾋｨ

低コントラストのテキストは解決策にならない
https://u-site.jp/alertbox/low-contrast

僕のサイトはそこまで低コントラストすぎてはいないと思いますが。

おしゃれさやデザインを優先した結果、見にくくならないように気を付けて行こうかなと思います。

ここで言及されているように、ユーザーに与える情報量が多くなりすぎないようにデザインすることや、アフォーダンスを適切に用いることは意識していきたいですね。

シンプルならば読みやすいとは限らないということですね。どの情報を特に読者に伝えるかという取捨選択や優先順位をつけて文章構成することは、webデザインだけでは補えないところですね。