[Web] YoheiM.NETの見た目を大きく変えた７つの理由。初心者なりにですが考えました！

最近、このページ（YoheiM.NET）のデザインを変更しました。
情報を得づらいサイトだなと感じたためです。
Webデザインは未学習ですが、自分なりに考えながら変更したので、その理由を今日は書きたいと思います。

Webデザインについて

Webデザインを本格的に学んだ事はありませんが、以下の言葉がスゴく心に残っています。

デザインは問題解決の手法であり、アートは自己表現の手法である。

この言葉を真に受けて、「YoheiM.NETから情報を読み取りづらい」という問題を設定し、 その問題解決としてWebデザインの変更を行いました。

変更点となぜそれにしたのか考えた理由

レイアウトの変更、色味の変更など変更点とその理由を7つ書きます。

【１】ブログ部分の明確化（背景色、パディング、線引き）

当初のYoheiM.NETは、全部背景白色でした。そのため、どこからどこまでがなのか、 よく見ないと分かりませんでした。改善として以下３点取り組みました。

【１】背景色での区別。全体は和紙を背景にしつつ、ブログ部分は背景白にして、区別しました。
【２】余白での区別。記事部分とそれ以外でパディング（余白）を付け、一目で記事とそれ以外の境目が分かるようにしました。
【３】ボーダーでの区別。記事部分は灰色の線で囲み、他部分と差別化を測りました。

【２】3列レイアウトから2列レイアウトへ

以前は、3列レイアウトで（左から、リンク集、ブログ本文、広告）で分けていました。
しかし、以下２点の理由から、２列レイアウトにしました。

【１】記事部分の幅を増やし、記事をメインとしたサイトにしたい。
【２】はてなブックマークなどページの最初部分を自動で切り取るサービスに向けて、HTMLファイル上で記事が最初になるようにした。

【３】タイトルヘッダーの変更

当初は、H1タグなどを使い、ページのトップにデカデカと「YoheiM.NET」と表示していました。
しかし、訪問者はそれを見たいのではなく、記事を見たいのではと思い、 YoheiM.NETの職表示でより多くの分量が表示されるように、タイトル部分の高さを減らしました。
今では一番上に、背景黒っぽくいる形にしています。

【４】ブログのタイトルやサブタイトルのCSS修飾

H3,H4,H5タグをブログ記事で使いますが、最初は装飾が無かったので、どこがタイトルか分かりづらかった。
パッと見ただけで、文章構造が分かる為にも、文字色の変更とCSS装飾を行いました。

【５】ブログの行間を標準の150%に

読みづらいと感じた点として、文章と文章の間の余白が少ないことに気付きました。
１行１行の行間を少し広めに取る事で、文章の親しみやすさが向上したと思います。

【６】ブログ文字サイズのUp

ブログの文字サイズを最初は、"font-size : small"として、格好良さを出そうとしていました。
でも文字が主役のサイトで文字を読んでもらいたいので、フォントサイズを通常にして、 より読みやすい大きさに変更しました。

【７】各記事にソーシャルボタンを追加

レイアウトの修正ではありませんが、各記事にソーシャルボタンを追加しました。
設置理由は、良い記事でそれを広めたいという気持ちを持った訪問者の方が、 アクションしやすくしたいと思ったからです。

参考にした情報

以下の情報を参考にサイトの修正を行いました。ありがとうございました。

- （PR Amazon.com）ノンデザイナーズ・デザインブック [フルカラー新装増補版]
- （PR Amazon.com）みんなの「生きる」をデザインしよう

最後に

色々と修正して、理由を考えつつデザインを改善できて良かったです。
まだまだ直したいところあるし、スマートフォンからも見やすくしたいと企んでいるので、 これからも修正の日々です♪(´ε｀ )
目指すは、訪問者がすぐに欲しい情報を得られるくらい分かりやすいデザインであること。