格安ガジェットブログ

格安ガジェットブログ

月水金の隔日更新!ガジェットの紹介、コラムを書いてます。

ブログの始め方を教えます! レイアウト編

f:id:GadegetMaso:20210108200548j:plain

これからブログを始めたい。しかしどういうレイアウトなら読みやすいか、どういうデザインにすれば良いかと悩む人も多いと思います。

今回の記事では、ブログのデザインやレイアウトについて解説していきます。

ブログのレイアウトの基本3種

ブログのレイアウトといっても、基本的には3種類しかありません。他のブログを見ていても、だいたいはこの3種のパターンに分類されます。

奇をてらうならばもう少し奇抜なレイアウトにもできるでしょうが、そういったものは大抵が見にくいデザインで、アクセス数は伸びないでしょう。

 

3カラム

f:id:GadegetMaso:20210504194128j:plain

まず3カラムというブログのレイアウトから。上記の図のようにサイドバーが右左に2つ並んでいるレイアウトです。

このレイアウトの良いところは、サイドバーに情報を沢山詰め込んでも、縦に長くなりすぎずにスクロールの手間が減ることです。ただし、読者に記事に集中して貰いにくいという欠点もあるし、レスポンシブデザインにした際にスマホではスクロールが多くなってしまうという欠点もあります。

スマホによるネットサーフィンが一般的になって現在に置いては、徐々に数を減らしているのかあまり見なくなってきました。

 

2カラム

f:id:GadegetMaso:20210504194544j:plain

2カラムは上記の図の様に、左右のどちらかにサイドバーを設置したタイプのレイアウトになります。あまりサイドバーにコンテンツを置いてしまうと、短い記事より長くなってしまうというデメリットこそありますが、パソコンでのブログ閲覧時では1番支持されているデザインと言えます。

レスポンシブデザインでスマホ表示になった際も、3カラムに比べて情報を少なめにしていれば、スクロールそこまで多くならないのが良い点です。

 

1カラム

f:id:GadegetMaso:20210504194921j:plain

基本的にスマホ表示になった際に採用されるレイアウトです。一応、パソコンでも最初からこの形式にも出来なくはないですが、パソコンのような横長ディスプレイではサイドバーが横にあった方が利便性が高いので、レスポンシブデザインでのスマホ表示に限定したレイアウトにした方が良いでしょう。

 

 

レスポンシブデザインについて

レスポンシブデザインというのは、基本的にはスマホもパソコンも同じデザインのブログテーマを使用しているが、ディスプレイの横幅やOSなどでレイアウト構成を切り替えるデザインの事を言います。

多くの場合、パソコンでは2カラム、スマホでは1カラムになることが多いです。

これを採用する事で、いちいちスマホやパソコンでデザインを変更して管理する必要がなくなるし、パソコンとスマホで全然違うデザインで違和感あるという事態を解消することが可能です。

 

デザインCSSについて

自分の個性を出そう

多くのブログサービスには、デザインCSSで見た目を変更する事が可能です。テンプレートのテーマを使用した際は没個性になってしまいガチですが、このデザインCSSを使う事で見た目を変えて自分だけの個性を出すことが可能です。

 

詰め込み過ぎは厳禁

ブログのデザインを変更するというのは結構楽しいもので、いろいろと詰め込んでしまいがちです。しかし、結局は記述を追加しているのでブログの読み込みはどうしても遅くなってしまいます。

特にはてなブログは、スマホでの読み込み時間が長いとされるサービスなので、ある程度取捨選択してCSSを選択する必要があります。

 

色使いを気をつけよう

たまにドギツイ色に変更しているブログがありますが、そういうのは正直いって視覚を攻撃してくるので読者もうんざりします。私も昔やらかして、Twitterのフォロワーに色変えた方が良いぞとアドバイスされました。

カラーを変更する際は、なるべく優しい色合いにした方が良いでしょう。

 

まとめ

デザインはいわばブログの顔や身なりです。第一印象が良ければブログを見に来た人の印象が良くなるし、定期購読してくれるようになるかもしれません。

その逆もまたしかりで、どんなに素晴らしい記事を書いても、レイアウトが見にくいと読む前にブラウザバックされかねません。

かっこよいデザインよりも、まずは見やすいデザインを心がける事が大事です。

 

ASUS TUF Gaming FX505DT
頑丈なゲーミングノートパソコン。ブログ執筆的にゲーミングである必要はないがコスパ的に良かったのでこちらをチョイス。
 

 

HOME