いいけん、島根県　だれもが、だれかの、たからもの

島根県のIターン及びUターン、移住情報サイトです。

• 使用フォント：Noto Sans JP　ヒラギノ角ゴ Proなど
• フォントカラー：#333333
• ベースカラー：F2F2E9
• メインカラー： #FFFFFF

トップページ

line-heightは2.0〜2.5。文章をメインとしている部分のline-heightは2.5、紹介文などは2.0と設定されています。

また、見出し(h2~h3)と文章の余白は50px。制作中には「50pxって広いのかな…」と思っていましたが、、、意外とそんなことはなく、むしろこれくらいの方が気持ちよく感じます。

h5と文章の余白は5px。たった5pxですが、あるのとないのとでこんなに違うものなんですね。

上がマージン5px、下がマージン無し。見出しと文章の差をつけるために必須だと思わされます。

事例紹介ページ

本文のline-heightは2.26、文章と画像のマージンは、画像から文章の場合80px、文章から画像は70px、画像から画像は20px、一部文章と文章のマージンは150pxと設定されています。

スマートフォン版ページ

100という数字はどうも自分の中では「大きい」と感じてしまいますが、その大きさがサイトを洗練させていくのでしょうか。

「余白の使い方」が今の自分の課題だと思っています。大胆に使うのは少々怖いですが、勉強中なのでせっかくなら大胆にいこうと思います。しばらくは余白に注目してまとめていきます。

ちなみに今回余白を調べるために使ったのがGoogle Chromeのプラグイン「Grid Ruler」です。

Grid Ruler

このようにドラッグすることで距離を測ることができます。

デベロッパーツールではわからないセクション間の距離などを調べるのに非常に重宝します。ただ、これを起動させているとデベロッパーツールが使えないので、スコーーーし不便ですが（汗）