ブログ記事のデザイン

• 落ち着いた雰囲気のブログ - thleap | JAYPEG

ブログ記事のデザインを作った。リンク先にはデザインの全体が見えるものを置いていて、リストやテーブルなどの各要素が見えるようになっている（画像がぼやけてるけど.. ）。
落ち着いて文章が読めるようなものに仕上げたつもり。

これを作るのに大体 5 ~ 6 時間かかった。
特に作ったデザインをこの先どうしようとかは無い。

デザイン

線を意識して使ったのと、記事内の見出し毎のレベルがしっかりわかるように注意をはかった。
配色についてはサイトの背景色を決めた後、文字なら目を凝らさずに読める程度に、線やブロックの背景は文章の邪魔をしないように背景色をベースに色を決めていった。

記事内の見出しは h1 ~ h4 まで作成し、このようにしている。

h1 は大きくセクションが変わる箇所になるので、見出し左横の画像は記事枠をはみ出すように置いた。
見出しはレベルが下がるごとに余白が詰まるようになっている。コンテンツが包括されていることを表したかったのでこのようにしたけど、いま見てみると h1 と h2 の間の余白を少し取り過ぎているように感じる。

製作中見てたもの

あまり作ったものに反映されてないと思うけど、何かの参考になるかと思って SMACSS を書いた人のブログや New York Times のサイトを見てた。