こんにちは、たびとです。
これまでブログのデザインをコツコツと変更してきましたが、やっと落ち着いてきました。 前回まで記述していた内容も変更しているため、改めて現在の状況を記録しておきたいと思います。
前回までのデザインに関する記事はこちらです。
これが最初の記事です。
これが2番目の記事です。
この記事の対象者
- はてなブログのカスタマイズに興味のある方
- 読み易いフォントにするには、何を注意すればいいのか
フォント
以前、 Noto Sans JP を使うように CSS を設定したと説明しましたが、 長文になると少し文字が濃くて読み辛さを感じたのと、 英数字とのバランスが気になるってことです。 ちなみに、Noto Sans の英語フォントを試してみても同じでした。
これは、デザインの書籍でも指摘されていることで、 漢字よりも英数字が小さいため、英数字を大きくしたり、 少し上に移動させるとか、バランスを調整するように記載されていますが、 文字単位で調整することは、ブログ上では現実的ではありません。
これを解決する糸口がユニバーサルデザインでした。
ユニバーサルデザイン
ユニバーサルデザインを レイアウト・デザインの教科書 から引用します。
ユニバーサルデザインという言葉が使われるようになったのは、 1980年代頃からと言われています。ユニバーサルデザインとは、 「すべての人のためのデザイン」という意味で、利用する人が子供から 高齢者まで、さらには外国人や障害を持った方でも誰に対しても使いやすい 親切なデザインを推奨することを指しています。
そして、フォントにもユニバーサルデザインが存在するようです。
各フォントメーカーより「UD」という名称がつくフォントが販売されています。 これはオリジナルのフォントがUD（ユニバーサルデザイン）に対応しているフォントの形式です。
ユニバーサルデザインには、UDのキーワードが付くことが多いようで、 Windows 10/11 にも BIZ UDPゴシック として提供されています。
Google Fonts にも BIZ UDPGothic として登録されています。 等幅フォントは、UDP から P(プロポーショナル)がとれて UD のみとなっています。
Google Fonts から引用します。
モリサワのBIZ UDゴシックは、教育やビジネス文書作成などに活用できるよう、より多くの方にとって読みやすく使いやすいように設計されたユニバーサルデザインフォントです。読みやすさとデザインバランスに優れた、すっきりとしたUDゴシック書体で、漢字の省略できるハネやゲタを取ることで、文字をクリアに見せています。大きめな字面でも文字としてのかたちのバランスを損ねないよう、フトコロなどの空間を細かく調整しています。かなは漢字に比べてやや小ぶりに作られており、細いウエイトで長文を組むとほどよい抑揚が生まれます。
実際にブログに使ってみると、長文でも読みやすくて、英数字とのバランスが良い感じなので、 Noto Sans JP で感じていた小さな不満が解決しました。 ブログ以外にも、ビジネスの資料作成にも使えるので、非常にお勧めなので、 後半で書籍の紹介と共に説明します。
画面デザイン
前回は、1,200px としましたが、少し縮めて 1,142px に変更しました。 メインは 700px から 680px 、サイドバーは 350px から 340px 、余白を 48px から 40px に変更しました。 理由は、1,200px 未満のサイズになることが多く、サイドバーが折れて最下行に移動するからです。 意図的なら、それも良いのですが、なるだけ全体像を見せたいと思って、ギリギリまで詰めてみました。
プロファイルのアイコン
やはり IT 色を出したかったので、背景を RaspberryPI の基盤に設定しました。 あと、文字が金色に見えるように調整しました。 この基盤の色が緑なので、プライマリーカラーを緑にしました。
アイコン
メインのカレンダー、タグ、サイドバーのプロファイル、リンクなど、 文字の前にアイコンを使うことで、パッと見で意図が伝わるため、 見やすさと読みやすさが向上すると思います。 アイコンは、Font Awesome 6 Free を使ってみました。
テーブル
縦線は引かずに、細めの横線だけです。 ヘッダをプライマリカラーでワンポイントとして配色しています。
| 果物 | 値段 |
|---|---|
| りんご | 200円 |
| バナナ | 150円 |
| みかん | 100円 |
引用
引用は、プライマリカラーをワンポイントで使って、統一感がでるような配色にしました。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、 うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
ソースコード
ソースコードも全体的に調和するように配色を見直して、 フォントもユニバーサルデザインの等幅フォント BIZ UDGothic を使うようにしました。
#include <stdio.h> main() { printf("Hello World\n"); }
ボタン
ハッシュタグのボタン、アマゾン紹介記事のボタンにプライマリカラーを使うようにしました。 ボタンの文字もプロファイルのアイコンと同じ色を使って統一感が出るようにしました。
おまけ
これまで、デザインを学んでみて、どれぐらい変わったのか、 また、ブログ以外に仕事に活用できないかを補足します。
デザインを学んでみて
以前の投稿を振り返ってみると、やはり残念なデザイン力しかありませんでした。 それで、学んだことを活かして修正してみました。
デザインを学んだ後は、フォントを小さくして余白を重要視していて、 配色も背景を濃い色に変更し、文字は白で統一しているため、統一感があると思います。 また、重要な箱は2倍の大きさになっていて、文字サイズも重要な方がフォントを大きくしてあり、 パッと見でも何が大切なのかが伝わるのではないかと思います。
デザインの本を読んだだけで、これぐらいの変化があるので、 以前の私と同じような残念なデザイン力しかないと思っている人も、 「自分はセンスない」と思い込まず、デザインを学ぶことをお勧めします。
資料作りのデザイン
また、 一生使える見やすい資料のデザイン入門 というデザインの書籍を読みました。 これは PowerPoint に特化した書籍で、ビジネスでプレゼン資料を作る人にはお勧めです。
簡単なことを気を付けるだけで、格段に資料が読みやすくなるため、 資料のデザインを何とかしたい人には読んでみることをお勧めします。 Kindle Unlimited に加入している人は、現在無料なので、お早めに。
この書籍は 2016 年に初版が発行されているため、メイリオ推奨となってますが、 2018 年以降にユニバーサルデザインのフォントの方が登場しているため、 以下のユニバーサルフォントを選択肢に入れても良いと思います。
| プロポーショナルフォント | 等幅フォント |
|---|---|
| BIZ UDPゴシック | BIZ UDゴシック |
| BIZ UDP明朝 Medium | BIZ UD明朝 Medium |
| UD デジタル 教科書体 NP-R | UD デジタル 教科書体 N-R |
PowerPoint だけでなく、Word や Excel に使ってみても見やすくなるので、 必要に応じて使ってみることをお勧めします。
ただし、他のフォントと違って漢字と英数字のバランスが良いため、 IT 系だと横文字が多くなるので、その分1行が長くなります。 このため、既存のフォントから変更する場合は、そこを注意する必要があります。
まとめ
これで、ブログのデザインは当分大きく変更することがはないと思います。 後は、ナビゲーションを付けるかどうかぐらいですが、 ナビの項目に入れるものが余りないため、ぼちぼち作ると思います。
また、 レイアウト・デザインの教科書 を読んで、 ユニバーサルデザインのフォントが存在することを知れたのは収穫でした。
仕事の資料でも使えるし、Windows 10/11 に標準でインストールされているため、 顧客に送る資料にも使えるのが良いですね。これから、どんどん使っていこうと思います。
では、皆さん、よい旅を。
