おしゃれなブログデザインの考え方【初心者向け】

今回はわたしがブログを作るうえでよくお世話になっている、おすすめのツールやサイトをご紹介します！

ブログを始めたい！

ブログのデザインがいまいちパッとしない・・・

という方の参考になればと思います。

ブログテーマを選ぶ

ブログテーマは、無料テーマと有料テーマの大きく二つに分けられます。

無料テーマ

ワードプレスの無料テーマといえば、やはりCocoon一択！

SNSのシェアやCSSでのカスタマイズなど、無料とは思えないほど機能性に優れています。

という人は、Cocoonで間違いないです。
わいひらさんが開発したテーマで、利用者も多数いらっしゃいます。

• 無料で使える
• 日本語に対応している
• カスタマイズ方法など、困ったこともググればすぐに出てくる

というのが、ブログ初心者にとってなんとも心強いメリットです。

有料テーマ

つづいて有料テーマです。

• AFFINGER5
• JIN
• SANGO
• SWELL
• THE THOR

ここらへんが、候補に挙がるのではないかと思います。

サイトの雰囲気を見てお分かりになる方もいらっしゃると思いますが、わたしはSWELLを選びました。

• 雰囲気が合っていた
• カスタマイズが簡単
• 最近人気が出ている

これが、SWELLを選んだ主な理由です。

CSSド素人ですが、分からないなりに調べてカスタマイズしてと、Cocoonも楽しかったです。
でも、CSS知識がない人はどうしても時間が掛かります。

有料テーマに乗り換えたらリライトも必要なので、さらに時間が掛かります。

手っ取り早くおしゃれなブログを作って執筆に時間をあてたいという方は、早めの移行が正解です◎

配色を考える

つづいて、ブログのイメージを決める配色について考えていきましょう。

テーマカラーを決める

まずは、メインにつかう色を１色決めましょう。

ブログの印象を左右する、ブログのイメージカラーです。

わたしはごらんの通り、水色をテーマカラーにしました。

カラーコードまで決めなくても、「青」「薄いオレンジ」などアバウトでOK。

色ごとにイメージや心理効果が異なるので、どんなブログにしたいかで決めていくのもいいかもしれません。

相性の良いカラーを選ぶ

１色決めたら、つぎは相性の良い配色を調べます。

使うのはcolorate。

色見本をクリックするか、テーマとなるカラーコードを入れると、おすすめの配色や彩度明度などを変えた色が表示されます。

ちなみに（#88ABDA）でやるとこんな感じ。

ボタンなどを目立つ色にしたい！
という方は、反対色や補色を使うのも良いですよ。

ただし、反対色や補色を使う際は配置に注意！
となり同士に置くときつい印象になってしまうので、なるべく離しましょう。

ちなみに、わたしの配色

• 背景色（#fafafa）
• 文字色（#333333）
• リンク色（#da888a）

背景色と文字色を、コントラストの強い色にするのは避けるのがベター！
目に負担がかかり、読者に優しくないブログになってしまいます。
<例>背景色(#FFFFFF)、文字色(#000000)

サイトデザインを考える

初期設定だと、トップページがブログ型になっていると思います。
日記やトレンドブログなどだったら向いていると思いますが、回遊を狙えるサイト型がおすすめ。

ブログ型：新着記事が上に更新されていくトップページ
サイト型：カテゴリなど、必要な情報が整理されているトップページ

回遊：ユーザーがサイト内を巡回すること

このブログも、サイト型を採用しています。

SWELLブログをサイト型にカスタマイズ！

SWELLをサイト型ブログにしたい

という方は、くうかさんの解説記事がおすすめ。

画像付きで、めっちゃ丁寧に説明してくださっています！

他の人のブログからヒントを得る

SWELL導入を検討している

ブログデザイン、構成に迷っている

という方は、さとしんさんのSWELLサイト集にヒントがあるかも。

サイト掲載数は100サイト以上！

しゃり。チャンネルも掲載させていただいています！

さいごに

ブログデザインは奥が深いです！

初心者にはハードルが高いと感じるかもですが、慣れてくるとおもしろいですよ。

CSSアレルギーで慣れそうにない！！

楽しく、長くブログを続けたい

デザインはサクッと仕上げて、執筆に集中したい

という方は、有料テーマもぜひ選択肢の一つに加えてみてください！