ブログデザインについて

このブログは、ふじやん氏が作成されたBlogger外部テーマ「F-light」を使用しています。

最近、ブログテンプレートの色の設定やデザインなどをちょこちょこ変更したので、それについて少しだけ。

はじめに、今回のカスタマイズで最終的にたどり着いたことをお伝えすると、「ライトモードメイン、しっかり読み込むときの目の負担軽減のためにダークモードを実装している」みたいなコンセプトになりました。

F-lightについて

私がF-lightと出会ったときのことについては過去の記事で書いていました。

多機能なのにデザイン性が高くて、しかも動作が軽いので、ありがたく使用させていただいています。

実はF-lightを標準状態のまま使っていたわけではなく、少しずつカスタマイズしていたんですよね。特にブログのカラーについては色々と（色だけにね）考えて決めていました。私自身PCもスマホもダークモードユーザーなので、ブログもダークモードで綺麗に見えるような配色にしていました。

アクセシビリティ

私は、ダークモードで見る前提でブログの配色を決定していました。なので、知り合いが本ブログのライトテーマ時のスクショをSNSに投稿しているのを見たときに「読みにくいなぁ」なんて思っていました（おそらく自己流カスタム前の標準カラーはそのあたりも考慮されているので、テーマ自体は全く悪くなく、単純に自分のせいである）。まぁでもこのブログを読んでいる人は少ないし、自己満足でやっているので自分が良ければそれでいいかな、なんて思っていました。

ただ、時間が経って、やはり自己満足ブログと言えども、読みやすさにはこだわりたいよなと思うようになりました。曲がりなりにも「ベグレリ入門記事」なるものを作成し、この記事だけはそれなりの数の人に読んでもらっているので…

よし、ブログを読みやすく大改革（当社比）しよう！と思い立ったのがつい先日。

短期間に、素人ながら色々調べて、ブログのテーマを色々と弄ってみることにしたのです。

参考にしたもの

ブログを読みやすくしよう！と思ったはいいものの、自分は所詮素人。イチから何かを生み出すことは難しいと思ったので、何かを参考にしようと思いました。

参考にしたのは、日本の政府機関であるデジタル庁です。

デジタル庁のサイトはこちらです。所謂行政機関サイトっぽいガチャガチャした見にくさが一切なく、スマートで直感的に分かりやすいサイトですよね。

実はデジタル庁、こんなものを公開しています。デザインシステムを無料公開しているようです。

もちろん、これはブログデザインのためのものではなく、どちらかというと行政機関のHPやポータルサイトなどのデザインの参考に作成されたものです。が、ブログにも応用できそうだなと思ったので、今回はデジタル庁のデザインシステムを全面的に頼ってみました。

上記ページ内にリンクがありますが、Figma Communityで無料で公開されているデザインデータには、配色、文字のフォントやサイズ、サイトのつくりなど、参考になりそうな記述がいっぱいです（Figmaにログインすることで閲覧できます）。

F-lightを作成されたふじやんさんのように、自分でブログテンプレートを作成するのは厳しいけれど、今あるテンプレートをそれっぽくカスタマイズすることなら（素人の自分にも）できそう！と思い、デジタル庁のデザインシステムをF-lightに適用してみることにしました。

具体的にやったこと

具体的に元のブログテンプレートにどのような変更を加えてみたのかまとめてみましょう（手当たり次第に色々やったので、おぼろげな記憶を遡りながら）。

まずとりかかったのは、フォントの変更です。デジタル庁は Noto Sans というフォントを採用していました。実はこのフォント、私のとても好きなフォントなんです。近隣けん玉練習会の日程を一括確認できるサイトを作るっていうプロジェクトで、問答無用でNoto Sansを採用したくらいには好きです。このブログにもNoto Sansを採用してみました。

そして、フォント変更と同時にフォントサイズや見出しデザインも変更。見出しのフォントサイズなどについてはデジタル庁のデザインシステムの指定をほぼそのまま使いました。見出しデザインについては、デザインシステムでは装飾などが一切なく、見出しと本文の区別がつきにくいのではないかと（素人ながら）考え、細い線の入ったデザインにしてみました。

続いて、ブログのカラーを色々と（色だけに）変更してみました。こちらも当該デザインシステムを参考に。はじめは普通にブランドカラー（ナビバーとか色がついているところに使用する色）をデザインシステム指定の青色に変更してみたのですが、F-lightはブランドカラーを使用している箇所が多いので、ホーム画面があまりにも鮮やかな色でガチャガチャしてしまって…

色々考えて、ナビバーなどは違う色（濃い背景色ってやつ）を指定し、マウスホバーやアクセントにだけブランドカラーの青色を使用してみました。（その過程で色々と苦戦したのですが…）（後述するテーマ作成者様の神対応に助けられました）

また、ブログカードなどの影のつき方やホバー時の挙動を変更したりと、地味～な変更を加えてみました。誰でも直感的に分かりやすい挙動になるよう心掛けてみました。

ーーーーー
技術的なことをメモ代わりに書き残しておくと、、、濃いブランド色・薄いブランド色ともにデジタル庁デザインシステム指定の青色に設定。背景色関係や文字色関係の色もデザインシステムに従った。そして、ナビバーや最新記事ラベルなど、ブログホーム画面で目につくところにあるブロックの色は全て「濃い背景色」を指定。また、ブログカード内部も「濃い背景色」を指定した。そして各ブロックホバー時にブランド色になるよう設定。また、今回使用したブランド色の青色は濃い色のため、ホバー時のブロック内の文字はライトモード・ダークモードどちらも白文字になるように指定。月別アーカイブガジェットの「月別アーカイブ」の文字は太文字＆中央寄せにした。ブログカードや関連記事、ホームの記事一覧のカードの影のつき方を変更。デフォルトではカードの右下に影が出るのを、カード全体から影が出るようにして、カードの境目が分かりやすくなるよう心掛けてみた。ついでにカードホバー時にはブランドカラー（青）で周囲が縁取られるようにし、マウスがどこにフォーカスしているかが分かりやすくなるように。それから、（これは以前からそうしていたが）目次をデフォルトで開く設定にしている（なぜなら自分の文章はまとまりがなく長いから…）
ーーーーー

個人的コンセプト

今回のカスタマイズは、一応「ライトテーマメイン、記事を読む際に目の負担軽減のためにダークモードを実装しているから使いたい人は使ってね」というコンセプトで行いました。パット見のとっつきやすさはライトテーマの方が高いのではないかと思います。一方、しっかり読むなら~~（しっかり読むだけの記事を書いているとは言っていない）~~ダークテーマのほうが目に優しい気がする。。。そこはユーザーが使い分けてね的な感じです。（皆さんお気づきであろうことを前提にお話しちゃっていますが、ブログ画面右上の太陽/月マークをクリックorタップすることでブログテーマが切り替わる仕様になっています）

また、デジタル庁のデザインシステムを見ていて「直感的に操作できるって、すごく大事だな」と思いました。そのため、マウスホバー時に各パーツがブランドカラーである青に変わるようにして、「今マウスがどこにフォーカスしているか」が直感的に分かりやすいようにしてみました。

感想とか

個人的にはいい感じになったんじゃないかなと思っています。

全くの素人ながら、デジタル庁のウェブアクセシビリティやWebデザインについての資料を読んでみると、よく分からないところもありつつも、興味深く面白かったりしました。全然知らない世界に首を突っ込んでみるのも楽しいですね。

ただ、こういうカスタマイズをするたびに思うことがあります。

これです。よく分からないのですが、世の中の皆さんはスマホやPC、ライトモード・ダークモード、どちらのユーザーが多いんですかね？　私は絶対ダーク派なのですが…　このブログは読者の端末のテーマに合わせてライトorダークの初期設定が変わるようになっているようなので、一般ユーザーのライト・ダーク比率が気になる…

今回のカスタマイズ、自分ではどうしても分からないことがあり、テーマ作成者のふじやんさんに直接お聞きして教えていただきました。とても親切に、そして迅速に対応いただきました。ありがとうございました。ふじやんさんの神対応はこちらからご覧いただけます。

今回はこんなところで。