Moristapaper

紙のノートのような罫線を引く

January 18, 2019

ブログのデザインを変更した。Moristapaper という名前なので、紙のノートのような、便箋のようなあしらいを付けることにした。

グラフィックデザインにおけるレイアウト技法に「グリッドシステム」というものがある。 格子状のガイドラインを引くことで、整理された、秩序のあるレイアウトをすることができる。 人間はパターン認識が得意だと聞く。 なので実際に目には視えていなくても、調和感覚を通じてグリッドを意識するだろう。 そして、規則性の中にも美しさがあることは事実だと思う。

グリッドシステムを意識してデザインをすることは、ある種の心構えの表れだと思う。 規則性や一貫性を重視し、論理的で建設的な観点からデザインしていることを示している。 特に情報システムにおいては、このような考えのあしらいも映えるのではないだろうか。 ウェブデザインの95%はタイポグラフィだという意見がある。 文字がグリッドに揃ってビシッと組まれている様は美しい。

Bootstrap のような CSS フレームワークにもグリッドを表現する実装がある。 しかし、横方向のグリッドのみであることが多く、縦方向を考慮されていることは少ない。 これはウェブのコンテンツは縦方向に広がっていくようにデザインすることがほとんどで、ページを印刷でもしない限り全体を俯瞰して見ることはないため、縦方向のリズム(バーティカルリズム)に気づきづらいからだろうか。 もしくは、単に現状のブラウザの実装状況ではバーティカルリズムを実現しづらいからなのかもしれない。

CSS Rhythmic Sizing という仕様がある。 ここで定義されている line-height-step というプロパティを利用すると、簡単にバーティカルリズムを実現することができる。 しかしまだまだモダンブラウザでも実装されていないので、本サイトでは律儀に line-height を絶対数で指定した。 どの要素の line-heightmargin-(top|bottom) の値を n * 1rem (ベースフォントサイズの整数倍)とすることで実現できる。 厳密には本サイトでは 2rem の大きさごとに太さ 1px の罫線を引いているので、行間や縦方向の余白の大きさは、m 行の空白を空けたい場合、 m * 2rem - m * 1px としている。

CSS Grid が使えるようになる前までのグリッドの実装もそうだが、CSS にこのような利用可能なプロパティを上手く使って視覚表現を実現する例が多い。 このような技芸を発見することを面白いとも思うが、それは本質ではなくモヤッとする。 新しい視覚表現のテクニックが生まれ、そのハックを道具が抽象化し、仕様が吸収する。 このイタチごっこはウェブが進化し続ける限り続きそうだ。


Masaaki Morishita

フリーランスのデザイナー・プログラマー / StylefmtPicostyle の作者