記事内容
Introduction.
当サイトのデザインはDrupalのデザインテーマであるBootstrap5の基本構成で構築しています。Bootstrapが用意するデザインパーツを配置することでWebサイトのデザインが出来上がるのでクォリティを維持したデザインが簡単に構築出来ます。
私自身のデザインセンスがあまり良くないので、先鋭的であったり、洒落たデザインにはなっていませんが、記事の読みやすさや、レスポンシブの差があまりないことはBootstrapを使用してデザインを構築しているおかげです。
今回、デザインと名目した記事を書いていますが、先鋭的なデザイン構築の方法やCSS、JavaScriptのコードといった内容でなく、当サイトの配色などを含めたデザインに何故したかという話になります。
結論を先に言ってしまうと、目に優しいデザインにしたら自身が日常的に使用する商品のパッケージに近い配色になり、昔からある商品のデザインは良く考えられている事を改めて感じた事を記事にしています。
Bootstrap5.
BootstrapはTwitterが開発し管理する、デザインフレームワークで、開発当初よりモバイルファーストをテーマに上げ、スマートフォンのデザインを先導してきた歴史があります。スマートフォンのデザインだけでなく、PCとスマートフォンでそれぞれ適したWebデザインに変換するするレスポンシブデザインの先駆けでもあります。
Bootstrap5
デザインテーマであるBootstrap5のテーマの初期設定を少しだけいじってサイトデザインを構築しています。このような簡易なカスタマイズを比較的簡単に行えるのがDrupalの利点です。ブロックレイアウトとソースコードのエディタを使いブロックに直接Bootstrap5が用意するデザインパーツのソースコードを記述するだけでデザインを組んでいけます。
老眼.
Webデザインの王道中の王道は、背景が白、文字色が黒、リンクテキストが青というのがインターネットのページデザインのスタンダードです。インターネット普及初期から用いられるデザインであり、このデザインで構成される代表的なWebサイトがYahooになります。
この背景白、文字色黒、リンクテキスト青の王道デザインの文字色黒をグレー系、リンクテキスト青を薄めにしたりトーンを変えたりとすることで、モダンなデザインを実現しているWebデザインも多数見かけます。
私も、背景色白の王道デザインは大好きで、当サイトも開設当初は背景色白、文字色濃いグレー、リンクテキスト濃く、彩度を落とした青で構成していました。
Webサイトを自身で構築しブログ記事を書いていると、ブラウザ画面を閲覧している時間が長くなります。記事を書きながらレイアウトや文章の配置、長さ、校正などを確認しているので目の疲れが進み、ひどい時はモニターの文字に目の焦点が合わなくなってしまうこともあります。これは、私自身の加齢によるもので、極度の老眼が進行している弊害と考えています。
話は横道に逸れてしまいますが、私は裸眼の視力は両目とも1.5で視力は非常に良好です。ただ遠視になるので、スマートフォンやPCの画面を見るような環境では全く、目の焦点が合わず、まともに見えません。これは典型的な老眼であり遠視である分症状はかなり良くありません。このことで、スマホやPCを見る時は必ず老眼鏡をしています。
輝度と彩度とコントラスト.
PCやスマホを長時間みると目が疲れる理由に、デジタル機器のモニターがバックライトで画像を構成していることがあります。明るさを輝度と表現し色などの鮮やかさを表現するのに彩度という言葉があり、明暗差を表現するのにコントラストという言葉があります。
Webサイトの背景色で一番用いられる背景白は、HTMLでいうFFFにあたり、輝度で考えると最も明るい色であり最もバックライトの光が強い色となります。文字色黒はHTMLでいう000となり白の逆で輝度で考えると最も暗い色であり最もバックライトの光が弱い色となります。
この最も明るく光の強い背景に、最も暗く光が弱い文字データが記載されているコントラストの強い画面を長時間見続ける事が目が疲れ負担をかける原因ではないかと考えます。
スマホ老眼.
スマホ老眼という言葉がありますが、今回記事にしている、バックライトの問題も原因の一つであります。ただ一番大きな原因は恐らくですが、2010年以降に登場した高詳細ディスプレーの影響の方が大きいのではないかと私は考えています。
高詳細ディスプレーの構造は簡単に言えば、1つのドットを9つに割るなどしてより細かく画像を表現しています。人の目はかなり高機能ですので、細かく分かれたドットを目が追いかけてしまいます。この事でより細かなものを目が追いかけてしまい、目の疲れが起きやすくそれを日常的に行うことで視力の低下が起きているのではないかと考えています。
暖色系のデザイン.
PCやスマホなどのデジタル系の画像のバックライトが白画面では目が疲れやすいと考え、サイトデザインをもう少し目の疲れない配色として行く事を考えていきます。目が疲れない配色とは言っても、文書がメインのWebサイトなので、文字が読みやすくなくてはいけません。
デジタルコンテンツ以外の文書を読むのは本や雑誌、新聞など紙の媒体が一般的で、白い紙に黒い文字というのが一般的です。
紙に書かれた文字を読むと、スマホなどのデジタル媒体より目が疲れません。この理由に、デジタルの白と紙の白は輝度が異なることに気がつきます。デジタルで紙の媒体のように目が疲れないようにするにはどうするかと考えます。
白は白でも暖色系のクリーム色を使う事を考えます。暖色系の色の代表はRGBで考えるとRの赤が起点になります。赤と緑を足すと黄色になります。このあたりの色味をベースにサイトの配色を考えていきます。
サイトのカラー.
- ベースカラーはクリーム色
- 文字色は濃いめのグレー
- コンテナで強調するブロックはくすんだ黄色
- コンテナで強調するブロックのヘッダーはくすんだオレンジ色
- ナビゲーションバーはえんじ色、えんじ色の背景に表示する文字色は白
- リンクテキストは下線を入れたえんじ色、ホバー色はくすんだ青
上記の色の組み合わせで構成したのが当サイトのデザインになります。
配色は、bootstrap5の利点であるカスタムCSSに記述していきます。
※カラーチャートやカスタムCSSの記述方法、CSSのコードは割愛します。Bootstrapの公式ページに詳しい解説がありますのでそちらを参考にチャレンジしてみてください。
昔からよく見るデザインカラー.
クリーム色の背景にえんじ色や黄色、オレンジ、白といった暖色系の組み合わせをしたデザインですがどこかで見た事がある色の組み合わせである事に気がつきます。
ムスタングオイルとオロナインH軟膏.
この色の組み合わせは、ムスタングオイルという、ホースハイドの革ジャン（A2などのミリタリー）の手入れをするオイルのパッケージになります。私がミリタリーが好きで、A2を所有しており、A2だけでなくBucoのライダースジャケットも所有しています。両レザージャケットはホースハイドという馬革で出来ており、革を柔らかくしたり、革のすれなどの手入れをするのに使用しています。
昔から革製品好きには馴染みのある商品で、古き良きアメリカ的なパッケージデザインとなっています。この配色は、ムスタングオイルのパッケージだけでなく、昔のアメリカ製品の広告のポスターなどにも良く使用されていて、この配色を見ると昔ながらのアメリカを連想するような配色であります。
日本にもこの配色を取り入れたロングセラー商品があります。以外かもしれませんが、オロナインH軟膏を良く見るとこの配色になっています。オロナインH軟膏は冬乾燥で指先がひび割れたり、踵がアカギレのようになった時に塗ると治る優れもので家には必ず常備しています。
Webサイトのデザインと全く関係のないデザインパッケージで、私自身もムスタングオイルやオロナインH軟膏のパッケージから配色を選んだわけではありません。
純白に黒だと目が疲れやすいので、暖色系の配色にして、全体を赤を基準に暖色系で纏めたら結果的にムスタングオイルに代表される古き良きアメリカを感じさせる配色や、日本古来から家庭に常備される塗り薬であるオロナインH軟膏のパッケージデザインと似た配色になっていました。
Example Photos.
厳密に同じ配色ではありませんが色の組み合わせがどことなく似ています。
Conclude.
今回、サイトデザインの配色について纏めてみました。たわいもない話で恐縮ですが、Webサイトを構築し記事を書いていると長時間パソコンの画面を見続ける機会が多く、どうしても目が疲れてしまい、作業が捗らなくなってしまいます。
なんか良い解決策はないかと考えたのが配色を目が疲れにくい配色とすれば良いのではないかという事で、寒色系のクールなものより暖色系の方が目が疲れにくいという経験上から現在の配色になっています。完成してみたら昔から良く見る配色のデザインとなっていた事で温厚知新ではないですが昔からあり今でも使用されるもののデザインて凄いなと感じ今回の記事を書いています。
暖色系の方が目が疲れないという経験は、ターミナルとして使用しているiTermやIDEであるVsCord、テキストエディターとして使用しているBearも全て純白ではなく黄色味かかったクリーム色の設定で使用しており、どれも長時間使用しても目の疲れを軽減しています。
極めて個人的な観点からの記事となりましたが、Webデザインの配色の目的は様々なものがあり、今回の私の記事では長時間閲覧しても目が疲れにくいデザインという観点での配色という内容であり優れたデザインというものではありません。
私自身の知識がWebデザインを希望通りに構築するほどのものではなく、必要に応じて学習するような状況ではありますがBootstrap5には便利で優れたコンポーネントが用意されていますので、引き続き必要に応じて使用してみようと考えています。
今回、Webサイトの配色についての記事を纏めてみましたが、当サイトは機能性に関わるナビゲーションやサイドメニューなどBootstrap5のテーマが用意するデフォルトにコンポーネントを追加するなど少し変更しています。これもサイトデザインという観点からの変更であり記事を書きたいと考えていますが、どの程度の内容を書くか悩んでいます。
なるべく簡潔でわかりやすい記事を書こうと考えていますが、ログを見ると、見ていただいた方の閲覧時間が長く、文章が読みにくかったり、不必要な内容が多く、見ていただいた方にうまく伝わらないのかなと考えています。
閲覧時間も長短の正解については一概には言えず、極度に短いものや、長いもの、おそらく想定する時間に近いものなど様々なケースがあります。正解はないのですが、記事内容について考える一つのガイドでもあるので参考にしながら記事を書いていきたいと考えています。
投稿日
2025-02-16
投稿者
S.Takeda
