ブログで生活している沖ケイタと申します!この記事を読んでいるあなたは、きっとブログが大好きで、これからもブログを頑張っていきたいという素晴らしい気持ちを持っている方なのでしょう。あなたがどんなに良質な記事を書いたとしても、読みづらくて汚いブログデザインだったら、読者は途中で離脱してしまいます。ブログと言えど、見た目が大切なのです...そこで、この記事では「ブログ初心者でも今すぐマネできるオシャレなブログデザインの法則」を紹介します。1>白・黒・グレーなどシンプルな色をメインカラーにするカラフルで個性的でおしゃれなブログはたくさんあります。初心者がそういったブログのデザインを参考にするの少々ハードルが高いです。これはファッションで考えるとわかりやすいはず。雑誌モデルのような派手な色で目立つ服装を素人がマネしようとすると、めちゃくちゃダサくなりますよね笑しかし、下は黒のスキニーパンツ、上は白シャツというシンプルなファッションなら誰でもそこそこおしゃれに見えます。ブログデザインも一緒で、ベースの色を白・黒・グレーなどのシンプルな色にすることで、何となくまとまったオシャレな雰囲気を演出できます。ミニマリストしぶくんのブログはこのシンプルな配色が徹底されているので、とても参考になります。2>おしゃれな配色パターンをそのままパクる「白と黒だけじゃやっぱりつまらなくて嫌だ...」という方もいるかもしれません。そんな人にオススメなのが、おしゃれな配色パターンをそのままパクるという方法です。COLORS」というツールです。僕もよく利用させていただいてます。これは40個のおしゃれな配色パターンとそのプレビュー画面を一覧できる素晴らしいツールです。自分の気になる配色パターンをクリックしたら、右にその配色を使ったプレビューがでます。このツールを使ってお好みの配色をそのままパクってしまえばOK!簡単におしゃれなブログデザインを実現できます。3>見出しを装飾するブログの記事を書くときに多くの人が見出しを設定しているはず。見出しとは、文章の構成を読者にわかりやすく伝える大切な役割を担っています。この見出しが装飾されていないと、ただの大きい太文字と勘違いされてしまうのです。ワードプレスだと有料テーマならデフォルトで見出しの装飾が設定されていますが、無料テーマだと設定されていないものもあります。サルワカさんの「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」という記事を参考にすれば、コピペでオシャレな見出しを実現することができます。4>画像の幅は記事のウインドウ幅とあわせる記事を書く際に画像を使うことも多いと思います。その画像の横幅のサイズが揃っていなくてガタガタだと、すごくダサく見えてしまいます。食レポなど写真を多く使う記事では幅を揃えるだけで、見やすいデザインを実現できます。5>リンクの色は原則「#0044CC」にするリンクの色を気にしていない人は意外と多いです。青以外の色をリンク色に使うと読者がリンクと認識しづらくなります。理由はGoogleやYahoo!、Amazonなどの大手のWebサービスがリンク色に青を採用しているからです。慣れみたいなものですね。ブログと並行してアフィリエイトで収益を上げていきたい人はリンクのクリック率はとても重要なので、しっかり押さえておきましょう。クリックされる色は「#0044CC」と言われているので、当ブログでもこの色をリンク色に採用しています。個人的には下線付きの方がさらにリンクとして認識されやすいのでオススメです。6>文字を大きくしない強調するために文字を大きくする人がいますが、オススメしません。理由としては見た目が少し汚く見えてしまうからです。実際に大手Webメディアで文中の文字を大きくしているところはほとんど見あたりません。僕もごく稀に文字サイズを大きくすることがあります。それはネタ記事でウケを狙う時です。これは僕の中でのマイルールですが、特別な理由がない限り文字を大きくするのはやめましょう。7>色文字は使わないこのように、自分の記事をカラフルに装飾する人がいますが、やめましょう。単純に読みにくいです。色んな色を使うと、本当に強調したい表現やリンクが目立たなくなってしまいます。「色々強調しすぎるのは、全部強調していないのと一緒」ということを覚えておきましょう。実際に僕が強調に使っているのは太文字だけです。僕も稀に赤文字を使うことはあります。それは注意や警告を喚起する時です。(例)※バナナはおやつに含みません。これは僕の中でのマイルールですが、参考にしてみてください。8>行間を調整するなかなか意識が回らないところかもしれませんが、文字と文字の行間はブログ全体のイメージに大きな影響を与えます。行間が狭すぎても、広すぎても読みづらいです。WordPressの有料テーマなら、初めからちょうど良い行間に設定されているかもしれませんが、もしそうでない場合は必ず自分で設定しましょう。サルワカさんの「【CSS】line-heightで行間を調整する方法:おすすめの値は?」という記事を読めば誰でも簡単に行間を調整できるのでおすすめです。9>吹き出しを使ってみる沖ケイタこんな感じで吹き出しを使うのも時には有効だよ!デザイン的に吹き出しを使うことが、おしゃれかどうかは賛否両論ありますが、ワンポイント的に使えば読者の読みやすさはアップすると思います。インタビュー記事にもとても有効。文章よりも会話形式の方が読みやすく読者の離脱率を下げることができます。それ以外にも記事の途中の箸休め的に使うこともありますね。有名なメディアだと新R25が吹き出しを多く使っています。10>ブログにキャラクターを導入する先ほどから「シンプル!見やすく!」という法則ばかり紹介していますが、見やすさ重視とはいえ、100%無個性のブログデザインになるのも少々もったいないです。そこでオススメなのがブログにキャラクターを導入することです。自分をキャラクター化してもいいのですが、もう一人いることで会話させたりすることもできます。僕も「ハシモトくん」というナマケモノのキャラクターを作ったことがあります。沖ケイタやっほーハシモトくんわふー(・ω・)ノ一時期はLINEスタンプを作るくらい溺愛していましたが、今となってはレアキャラと化しました笑しかし、一度作っておけばアイキャッチ画像や文中の画像にも使えて、簡単にオリジナル感を演出できます。ACADEMY」の小林亮平さんもブログにペンギンのキャラクターを導入しています。ココナラで発注すれば、キャラクターは簡単に作れるので、興味がある人はおすすめです。11>箇条書きを使う箇条書きは意外と使ってない人が多いですが、かなり見やすくなるので使わない手はないです。僕は3つ以上のものを並列で表記するときは箇条書きを使うようにしています。(例)「僕の好きな食べ物はリンゴとスイカとマンゴーです。↓(箇条書き)僕の好きな食べ物は以下の3つです。リンゴスイカマンゴーこれだけでもかなり読みやすがアップするのがわかると思います。12>枠を使う先ほどから多用していますが、枠を使うことで文章を読みやすくできるシーンは多いです。僕も先ほどから例を紹介するときは他の文章と混ざらないように、枠を使って区別しています。他にも記事の大事なところをワンポイント的にまとめたり、過去記事を紹介するとき、なども枠を使って目立たせることができます。WordPressの有料テーマだとデフォルトで枠が設定されているものも多いですが、そうでない人は、サルワカさんの「【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30」という記事が役にたちます。13>表記のルールを統一する細かい表記のルールをちゃんと統一すると、読みやすいブログを実現できます。「」と『』がごちゃ混ぜ数字の全角と半角がごちゃまぜYouTubeとyoutubeのような表記揺れなどなど。他にも色々なパターンをよく見かけます。このように、なんとなく意識せずに表記がバラけているものはしっかりと統一しましょう。14>記事内の画像のルールを統一するやはり記事内に画像が入っていた方が読者の離脱率が下がります。僕は最低でもH2見出しの下にはオリジナルの画像を入れるようにしています。1枚1枚丁寧に作っていても時間がかかるし、デザイン素人の人はかっこいい画像なんて作れないですよね。そこでオススメなのが全ての画像に統一感を持たせるという方法です。5つ統一するだけでオシャレ感を演出アイコンを統一する色を統一するフォントを統一する配置を統一する大きさを統一する例えば「ブログが続かない9つの原因と対策をプロブロガーが解説」という記事ではこの5つをしっかりと統一して記事内の画像作成しました。アイコンはオリジナルのものでなくても構いません。15>アイキャッチ画像の世界観を統一する実はこれは僕はできていません笑ブログのアイキャッチ画像も同じような世界観で統一することで、ブログ全体をおしゃれに見せることができます。「同じような世界観」と言われてもピンとこないと思うので、具体例を紹介していきます。こちらはmanablogのマナブさんのブログです。統一感あっておしゃれですよね〜。先ほどから、何回も紹介させていただいてるサルワカさんです。マテリアルデザイン風のオシャレなアイキャッチですね!海外を旅しながらブログで生活するテツヤマモトさんの「面白ハンター」です。全てのアイキャッチ画像が「写真+文字」の形で統一されていて、フォントや大きさ色も統一されています。16>固定フッター、追尾サイドバーはいらないこれも賛否両論わかれそうですが、個人的には固定フッターや追尾サイドバーは不要です。読者が記事を読むことに集中できないのに加えて、あまりクリックされないんですよね。僕としてはやっぱり記事を読んでほしいし、そのためのブログデザインでもあるので、これらのデザインは本末転倒と考えております。固定フッターは有名なブロガーさんでも利用している人が多いので、意見が分かれるところだと思います。17>とりあえず有料テーマを使うここまで紹介してきたデザイン法則はWordPressの有料テーマならほとんどデフォルトで付いている機能です。無料のテーマでもCSSをいじれば大丈夫ですが、その辺の知識がない人は有料テーマでサクッとデザインを整えて、記事の執筆に集中するのがおすすめです!おすすめの有料テーマ・ストーク僕が以前使っていたテーマです。したら、一番使われているブログテーマかもしれません。「迷ったらストークにしよ!」とオススメできるテーマです。・SANGO僕が現在使っているテーマです。この記事でも何度も登場したサルワカさんが開発したテーマ。マテリアルデザイン風のおしゃれなデザインにしたい人はおすすめ・JIN有名アフィリエイターのひつじさんが開発に関わっているテーマです。ここ最近で一番見かけるテーマですね。沖ケイタブロガーブログで年商1300万円達成。基本的に頑張りたくない。