僕はブラウザのブックマークバーをほとんどアイコンだけにしているのですが、たまに見辛く感じます。そこで仕切りを作って見やすくしようということです。

ブックマークバー

何も設定しないとブックマークバーにはファビコンとタイトルが表示されます。

ただ、ブックマークの登録の際にタイトルを削除するとファビコンだけを表示することができます。一例として普段僕が使用しているブックマークバーの一部がこちらです。

ただ、これだとサービスのアイコンがだらだらと並んで、少し見辛いです。そこで区切って見やすくしてみましょう。

仕切り用サイト

仕切りのアイコンを表示するだけのページを用意しました。見本はこちらです。

このような感じで、例えばサービスの種類ごとにまとめて置くことができます。

リンク一覧です。

• 黒の線

• グレーの線

• 白の線

• 黒のスラッシュ

• グレーのスラッシュ

• 白のスラッシュ

• 黒の四角

• グレーの四角

• 白の四角

登録方法は、サイトにアクセスし、ブックマークバーに登録します。その際にタイトルは空欄にしておきましょう。あとは場所を移動させるだけです。

おわりに

ブックマークバーをアイコンだけにしてる人には便利だと思うので、是非使ってください。他のマーク / 色がよかったら言ってくれれば追加します。

今までフォントサイズとか行間を感覚で決めていたんですが、数学的（？）にきっちり決めることで、綺麗になったので、考え方を共有します。

完成品

描画結果

左が普通の表示で、右はわかりやすく、背景に縦方向のグリッドを表示したものです。

CSS

変数を使用して以下のようにしています。

:root {
  --base-font-size: 16px;
  --vert-grid-size: calc(var(--base-font-size) * 2);
}

h1 {
  font-size: calc(var(--base-font-size) * 3.000);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h2 {
  font-size: calc(var(--base-font-size) * 2.498);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h3 {
  font-size: calc(var(--base-font-size) * 2.080);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h4 {
  font-size: calc(var(--base-font-size) * 1.732);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h5 {
  font-size: calc(var(--base-font-size) * 1.442);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

h6 {
  font-size: calc(var(--base-font-size) * 1.201);
  font-weight: 700;
  line-height: calc(var(--vert-grid-size) * 2);
}

p {
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: var(--vert-grid-size);
}

なんで作ったの

Web 作るときのテンプレートを作りたいなっていうだけです。

ただ、せっかく作るなら綺麗で汎用性の高いものを作ろうとした結果です。

フォントサイズは等比数列にしているのですが、これは等差数列に比べ、自然にサイズが変わっていくからです。
人の五感は対数に比例するという ヴェーバー‐フェヒナーの法則 があるので、おそらく正しいです。自然界や人が良い（美しい）と思うものを思い浮かべると納得いく気がします。

また、縦方向のグリッドに関しては、ノートの罫線とかを想像すれば分かりやすいと思いますが、やっぱり揃っている方が綺麗ですよね。現在の Web のほとんどのページは縦に伸びていくので意識しない限り縦方向にグリッドが作りにくいので、少なくとも文字（文章）ぐらいはきっちり揃えていきましょうということです。

フォントサイズ

フォントサイズは <p> のサイズを基準値（今回の例は 16px ）として <h1> がその3倍になるような等比数列にします。

<p> から <h1> にかけて常に 1.1 倍みたいな公比の決め方であれば計算は簡単なんですが、今回は最終的に3倍になるという決め方をしています。この公比は累乗根（冪根）となるため、計算が少し複雑です。

3倍まで拡大し、<p> から <h1> までは6ステップあるので、以下の式で係数が求められます。i は各段階（<p> が 0 で <h1> が 6）が入ります。

\sqrt[6]{3^{i}}

ただし、CSS の calc() では累乗根のような複雑な計算ができません。そこであらかじめ計算機やプログラムを使って求めておきます。
累乗根は普通の累乗の計算に置き換えられるので、使用するものが累乗根に対応していない場合は、以下の式を用いましょう。

({3^{i}})^{\frac{1}{6}}

行間

縦方向のグリッドは最小単位を <p> のフォントサイズの2倍としています。

この値を基準に <h1> から <h6> に対しては2グリッド分を与えています。ただ、後半（ <h5>, <h6> ）あたりは余白が大きくなってしまうので1グリッド分でも良いかなとも思っています。その辺は臨機応変に。

おわりに

テンプレの完成目指して頑張ります。

僕はデザイン工学という学士を取っていますが、別に（日本語的な意味の）デザインを学んでいたわけではありません。でも、デザインに興味があるので勉強もしてます。そこで滅多に本を読まない僕が読んだデザイン関係の本について書こうと思います。紙の本は本当に読まないので、全て Kindle 本です。

紹介する本

3冊（＋おまけ1冊）を紹介します。法則や仕組みを学ぶものから、実例で学ぶものもあります。

• ノンデザイナーズ・デザインブック
  法則や仕組みよりです。

• なるほどデザイン
  法則や仕組みと実例の中間です。

• あるあるデザイン
  実例よりです。

• （おまけ）Google Fonts・和文・多言語 フリーフォント最強Selections
  僕の作ったフォントが掲載されています。

ノンデザイナーズ・デザインブック

有名な本で気になっていた時に友人からもらったので読みました。

タイトルの通り、デザイナではない人に向けたデザインの本です。デザインがどういうふうに出来上がっていくかがよくわかる本だと思います。上記で「法則や仕組みより」と書きましたが、1章でデザインの原則を学び、2章でタイポグラフィをしっかりと知ると言ったものです。タイポグラフィだけで70ページ近くあり文字に興味がない人もかなり詳しくなれる内容でした。

誤解を恐れずに言えば、イケイケのデザインができるようになるわけではないですが、基礎を知り変に違和感のない「普通」なデザインができるようになると思います。

今まではデザインを特別意識してはなかったけど、気になってはいた人や、デザインを学びたい人におすすめです。

なるほどデザイン

もともと大学の講義で教科書と指定されていたので購入したのがきっかけです。

実例をもとに、なぜそのようなデザインがなされているのかを解説しながら学ぶスタイルです。これもタイトル通りですね。実例を交えつつなので、わかりやすく、本の構成的にも読みやすい印象を受けました。

ただ、多くの要素を一通り説明しているので、それぞれについて深堀はしていないです。

デザインを学び始めるとっかかりや、デザインにどのような要素があるのか一通り知りたい人におすすめです。

あるあるデザイン

デザインのあるあるを並べたデザインサンプル集です。

タイトルの通りどっかで見たことあるようなデザインが45種類紹介されています。それぞれのデザインを使用したサンプルが6個ずつぐらい紹介されているので、実際に見ながら使えそうなものを探せる素材集のような本です。

上記の2冊のように法則や仕組みは全くありませんが、視覚的に学ぶということはできます。

引き出しを増やしたい人、マネから学びたい人や、とりあえずそれっぽくしたい人におすすめです。

（おまけ）Google Fonts・和文・多言語 フリーフォント最強Selections

僕が今までに作ってたフォントがいくつか掲載されています。ただの紹介でした。

おわりに

普段、びっくりするぐらいに本は読まないし、ましてや紹介なんてしないですが、こういうの書くのって難しんですね。

ゼミの進捗報告だったり、カンファレンスだったり、勉強会だったりと何かとスライドを使って発表する機会があります。その際、色々なソフトを使ってスライドを作ってるので、使ってみた感想を書いてみたいと思います。

なぜPowerPointじゃないのか

デザインを細かくいじれない。

これが全てです。グリッドとかスナップが微妙だし、用意されてる図形もいまいち。タイポグラフィ？なにそれ？って言わんばかりの文字周りの不自由さが嫌いでパワポは使ってません。

気軽に他の人も使えるという利点ももちろんあるので、他の人とスライド作る際などは使うこともありますが…

Illustrator

言わずと知れたAdobeのIllustratorです。一番長く使っている（といっても5年ぐらい）ので最も使い慣れています。

僕のスライドの作成画面はこんな感じです。

ページにはアートボードを使って、グローバルカラーやスタイルを使ってテーマを作り上げていく感じです。図も文字も細部までこだわれるのが最高ですね。

ただ、最近は起動が遅かったり、PDFの書き出しで画像が書き出されないなど、不満がどんどん溜まってました。周りの脱Adobeもあって、SketchやAffinityを使ってみたという感じです。

Sketch

プロトタイピングツールのSketchです。UX/UIの分野では有名ですね。

制作風景はこちら。

要素をシンボル化することで、テーマを作っていきます。

個人的に「WebページをGUIで作る」みたいなイメージでスライドが作れます。グリッドとかスナップがイラレよりキビキビしてる気がします。

文字周りを細かく設定しようとすると大変なのがマイナスポイントです。

ただ、プロトタイピングツールということもあり、遷移を設定すれば、プレビュー機能を使い、Sketch上でプレゼンがそのまま行えます。ページの進行も自由なので色々と遊びがいがありそうです。

Affinity Publisher

最近人気（だと勝手に思ってる）のAffinityシリーズのPublisherです。

制作風景はこちら。

組版用のソフトなので、ページ性のあるスライド作りにも向いています。

今回比べた中で1番良さそうです。

マスターページがちゃんとしてるのが最高ですね。マスターに沿ったデザインが必ず出来上がるので、マスターページをちゃんと作り上げれば、細かいことは気にせず、ページをどんどん作れるのがいいです。

また、僕はAffinity DesignerとPhotoも持ってるので、Publisherから直接それぞれを扱える（ペルソナ）のでそれも素晴らしいです。ベクタもラスタも自由自在で全てが1つのソフト上で完結します。

もちろん、よくない点もあって、日本語周りがまだ不安定です。タイポグラフィも細かくいじれるので、早く改善されるのを期待します。

おわりに

色々なデザインソフトを使ってスライドを作ってきましたが、結果的には「Affinity Publisher」が一番良さそうです。

もし、これもいいよ！みたいなのがあれば、教えてください。