デザイン良いなー
今日、ちょっと前にブックマークしたサイトがリニューアルしてた。
文章と画像、どっちも栄えるように考えられた良いデザインだなーと思った。画像を無理なく大きく見せれるこのレイアウトが適してるのかな。
少ない色数で強い色、サイズとタイプを変えたタイトルと本文の大きなジャンプ率も良いなー。
thleap.net 作ってる時に、ブログのような文章主体になるコンテンツと作品のように画像主体になるコンテンツを混ぜてデザインするのが難しいと思った。
文章を配置することを想定して最適なサイズ・余白を取っても、その場所に画像を置くと上手くハマらないということが製作中に多かった気がする。
文章は一文字一文字抜けのポイントがあるのに対して、枠いっぱいに広がるイラストや写真は見た目的に "重く" 感じるんだと思う。
リニューアルしたかどうかあやふやな時は Internet Archive で確認してる。
thleap.net v2 & thleap.github.io
モノクローム・デザイン
モノクローム・デザインという本を普段手元に置いている。
あんまりこういうコレクション本は持ってないんだけど、この本は色をほとんど使わない分、形や配置に凝ったデザインが多くて面白かったのでしばらく前に買った。
本に載ってたものそのままではないんだけど、良いなーと思ったので似た感じで日付が付いたタイトルのデザインを作ってみた。
オススメの一冊です。
見出しと本文の強弱と、セクションの切れ目のつけ方
見出しと本文に差をつけながらセクションの分かれ目をしっかりつける、そんなスタイルを探り探り。
まずは余白と文字サイズのみで強弱をつける。これを基本型として考えてみる。
- 本文に対して見出しの文字サイズを 2倍にする
- 見出しと本文の間は見出し文字サイズの半分（本文と同じサイズ）空ける
- セクションの切れ目は見出し文字サイズの 2倍（本文文字サイズの 4倍）空ける
例:
| 見出し文字サイズ | 本文文字サイズ | 見出し本文間の余白 | セクション間の余白 |
|---|---|---|---|
| 32px | 16px | 16px | 64px |
ウエイト
見出しと本文の文字サイズにウエイト差をつける。見出しをボールド、本文をライトにする。
ベーシックだけど非常にわかりやすくなった気がする。
明度
見出しと本文の文字色に明度差をつけて強弱を出す。見出しを hsl(0,0,100%)、本文を hsl(0,0,40%) にする。
色相差は他の邪魔をしそう（青を使うとリンク色と被るとか）だし、彩度差は分かりにくいので明度で差をつけるのが良いかと思う。
ずらし
本文を一文字分内にずらし、見出しがその分飛び出るようにする。
ずらした分、本文に収められる文字数が減る。
アクセント
見出しにアクセントをつける。
一文字目の横に置いたり、上下に線を引いたり。
他
こういうのもある。
毎日ゲーム、今日たまたまデザイン
今日は一日デザインやってた。やらなきゃいけなかったことを忘れてて、期限が近づいてきて思い出したので急いでやった。以下感想。
- 色の見え方はその色を置く面積で大分変わるから、箱と線とテキストでそれぞれに色を適用して確認するのが良さそう。
- 色相を 2 ~ 3色に収めてデザインするのはうまくなってきた気がする。
- 余白を変なところで大きく取りがちで、それが理由でセクションの分かれ目が見えにくくなる。
それはそうと、テキストリンクの青色下線付け縛りきついです。
