ブログデザインを一瞬でおしゃれにする10の鉄則【WordPress初心者向け】 | LIVE YOUR LIFE

 

ブログデザインを一瞬でおしゃれにする10の鉄則【WordPress初心者向け】

 

WordPressブログをおしゃれにしたい…

初心者でもデザインにちょっとはこだわりたい…

おしゃれなブログに憧れる…

 

この記事にたどりついたということは、もしかしたらあなたはこんなことを思っているでしょうか。

 

そう、ブログを運営していく上で『デザイン』というのは避けても通れないもの(全く気にしない人もいるけど)。

でもWordPressでブログを始めたばかりの初心者にとって、ブログデザインなんてさっぱりわけがわからない世界かもしれません。

 

ただ、当ブログは『デザインがおしゃれ!』『記事が読みやすい』『世界観が好きです』というような声をよくいただきますが、実際ぼくはデザインなんて一切理解していない超ブログ初心者でした。

パソコンの知識も絵心もなく、ブログ開設初期の頃のデザインなんて今では暗黒時代です(笑)

 

この記事では、そんなぼくが現在の洗練されたブログデザインを実現するに至るまでに学んできた、ブログデザインを一瞬でおしゃれにする10の鉄則について紹介していきます。

 

もちろんぼくが以前そうであったように、WordPressを始めたばかりの初心者でも実現できる内容となっているので、ぜひとも読みながら一緒に作業してみてくださいね。

 

デフォルトデザインだと面白味がない

 

まずWordPress最大の魅力は、その『カスタマイズ性の高さ』にあります。

 

管理画面のダッシュボードから設定を施したり、スタイルシートにコードを少し書き加えるだけで、自分の思うようなブログデザインを実現することができるんです。

もちろん使用しているテンプレートによってその差は生まれてくるものですが、ほとんどのテンプレートにおいて固有のカスタマイズを施すことができます。

 

そんなWordPressの目玉要素を活かさずに、デフォルトデザインのままブログを運営していくというのもなかなか損な話。

 

というよりも、完全デフォルト状態のまま運営されているブログって、単純に『面白味がない』と感じられてしまう可能性があります。

どれだけ役に立つ記事を書いたとしても、ブログのデザインがなんだかダサかったりするだけで読者さんが離脱してしまうんです。

 

それではやはり、もったいない。

 

せっかくこのインターネット時代にブログを開設し運営しているのだから、我が子のようにブログを磨いていくことです。

何より、WordPressは初心者でも簡単にブログをおしゃれにすることができるので、ぜひとも今回を機に『デザイン』を意識したブログ運営を心がけるようにしましょう。

 

おしゃれなブログデザインの大原則は『シンプル』

 

 

さて、次に10の鉄則をお伝えする前に、おしゃれなブログを作る上での大原則についてお伝えしておきます。

 

それはずばり、『シンプル』であること。

おしゃれの対極、つまりは『ダサい』ブログとはどんなデザインなのか?ということを考えれば明解ですね。

 

もちろんド派手な感じが好きな人もいるかもしれませんが、ブログの本質は『文章を読んでもらう』ということです。

そのため、ブログの装飾やデザインをド派手でガチャガチャさせたものにしてしまうと、文章を読んでいる読者さんの気も散ってしまうんですね。

 

また、もし仮に個性的なデザインを実現しようとしても、それは初心者の段階ではなかなか難しい話です。

プログラマーやデザイナーのブログなんかを見るととても個性的なものばかりですが、ぼくらはデザインを専門にしている人間ではありません。

 

あくまで文章を快適に読んでもらうためにも、シンプルなブログデザインの実現を目指していきましょう。

 

ブログデザインを一瞬でおしゃれにする10の鉄則

 

 

それではさっそく、ブログデザインを一瞬でおしゃれにする10の鉄則についてお伝えしていきましょう。

 

まとめてみると、次のようなラインナップになります。

  1. HTMLCSSを最低限理解する
  2. ブログ全体に目立つを使わない
  3. 適度に画像をはさむ
  4. 画像の幅を大きくしすぎない
  5. 見出しの周囲に余白を入れる
  6. 色文字のルールを決める
  7. 文章単位で太文字にする
  8. 文字サイズを大きくしすぎない
  9. 読みやすいフォントを使う
  10. 読みやすい行間の幅にする

 

今回はWordPress初心者でも簡単に実装できるように、初級編といいますか、簡単に設定が済むものをまとめました。

解説をもとに、ぜひともお好みであなたのブログに取り入れてみてください。

 

HTMLとCSSを最低限理解する

 

WordPressブログのデザインをいじっていく上で、HTMLCSSは避けては通れないものです。

 

ただだからと言って、その道のプロレベルの知識が求められるということでもなく、幸い最低限の知識さえあればコードをいじってブログデザインを変更していくことができます。

基礎の基礎である『HTMLとは何なのか?』『CSSとは何なのか?』ということや、タグやクラスの仕組みについてなど、本当に最低限の仕組みさえ理解しておけばOKです。

 

ブログデザインをいじっておしゃれにしていきたいのであれば、実際に調べてみて『何となくわかった』くらいのレベルに持っていっておくと良いですね。

 

ぼくは初心者の頃から『HTMLクイックリファレンス』さんでよくHTMLとCSSの勉強をしていましたので、参考までに。

 

ブログ全体に目立つ色を使わない

 

ブログのベースカラーやメインカラーに、あまり目立つ色を使いすぎないよう意識しましょう。

 

カラフルなサイトは見ていて楽しい気持ちになりますが、それは絶妙な配色やバランスがあってこそ。

初心者の段階からメインカラーに奇抜な色などを使っていってしまうと、ただ単に『見づらいブログ』になってしまうので要注意です。

 

メインとなるカラーはあくまで白や黒をベースとし、そこに1・2色自分らしいカラーを取り入れていくくらいの感覚が良いですね。

 

適度に画像をはさむ

 

 

文章を読んでもらうことが本分とは言えど、文章だけがダラダラ続くブログは読者さんにつらい思いをさせかねません。

 

やたら画像を使えばいいというわけではありませんが、『そろそろ文章読んでてつらくなっちゃうかな』と思うくらいのところで画像をはさむようにしましょう。

基本的には、文中にいきなり関係のない画像をはさむのも良くないので、見出しの前後などに箸休め的な意味ではさむと良いですね。

 

個人的には『TABIPPO』さんの記事なんかは、適度に画像も使われていて読みやすいと感じるデザインになっています。

 

画像の幅を大きくしすぎない

 

 

画像についてもうひとつ、サイズも気をつけるようにしましょう。

 

時々メインカラムから画像がはみ出していたり、逆に画像が小さすぎる…というようなサイトを見かけますが、基本的に画像の幅は文章のウィンドウ幅に合わせると見やすくなります。

また、2枚目の写真のように画像の幅がそれぞれバラバラになってしまうと、記事がガタガタしている印象を受けるので気をつけましょう。

 

見出しの周囲に余白を入れる

 

See the Pen midashi-sample by RIKU (@coderiku) on CodePen.

 

見出しの周囲、特に前後には余白を入れるようにしましょう。

 

見出しは本来、文章の構成を伝えるための大切な役割を担っていますが、前後の余白がないと見出しそのものが目立たなくなってしまいます

また、ダラダラと文章が続いている印象も与えかねないので、読者さんを導く要素として見出しをしっかり目立たせていきましょう。

 

ただし、見出しのデザインを目立つものにすれば良いということでもなく、あくまでデザインそのものはシンプルに保つよう意識しておくと良いですね。

 

色文字のルールを決める

 

See the Pen fontcolor-sample by RIKU (@coderiku) on CodePen.

 

文字を装飾するについて、自分なりのルールを決めるようにしましょう。

 

上記のように様々な色を同じ生地で使ってしまうと、どこが伝えたい部分なのか?ということが読者さんにとってわかりづらくなってしまいます。

リンクはできるだけ青文字で表記し、大事なところは赤文字で最低限の部分に絞るようにすると良いですね。

 

文章単位で太文字にする

 

See the Pen strong-sample by RIKU (@coderiku) on CodePen.

 

これはぼくが個人的に意識していることですが、太文字を単語単位ではなく文章単位で使っていくと、記事の見やすさも増してきます。

 

上記で解説しているように、太文字の単語が乱立していると雑多な印象の文章になってしまうので、あくまで大切な単語は赤文字で装飾すると。

細かいことではありますが、この部分を意識している人もあまり見受けられないので、ぜひとも参考までに。

 

文字を大きくしすぎない

 

See the Pen fontsize-sample by RIKU (@coderiku) on CodePen.

 

これも説明している通りですね。

基本的に地の文の文字サイズは『16~18px』あたりが好ましいですが、文章の途中でいきなり文字サイズを変えることはあまりおすすめできません。

 

もちろんそれだけ単語を目立たせることはできますが、普段使いとして文章に頻繁に取り入れるようなことは避けるべきです。

色文字のルールでも決めたように、あくまで大切な単語は赤文字や太文字で装飾するなど、できるだけ読者さんにとって読みやすいよう配慮していきましょう。

 

ちなみに当サイトで使用している『賢威』では、『design.css』にある以下のコードの数値を変えれば、地の文のフォントサイズを変更することができます。

参考記事:賢威6.2の文字フォント周りのカスタマイズまとめ|種類・サイズ・行間を変更する方法を解説

 

読みやすいフォントを使う

 

読みやすいフォント、とざっくり言ってもわかりづらいかもしれませんが、変に個性的な装飾を施したフォントを使用していなければOKです。

 

サイトの雰囲気に合わせて、お好みでベースとなるゴシック体・明朝体を選択していけばOKですし、地の文が筆記体などでなければ基本的に大丈夫でしょう。

当サイトでは『游ゴシック体』というフォントを地の文に使用しているので、参考までに。

 

『賢威』で地の文のフォントの種類を変更するには、『common.css』より以下のコードに手を加えていきましょう。

参考記事:賢威6.2の文字フォント周りのカスタマイズまとめ|種類・サイズ・行間を変更する方法を解説

 

読みやすい行間の幅にする

 

フォント続きで、文章の行間についても配慮していくと良いですね。

 

行間の幅がせますぎても文字を読むのがつらくなってしまいますし、逆に幅が広すぎると間延びした印象を与えかねません。

当サイトでは『1.6em』で行間の幅を設定しているので、良かったら参考までに。

 

また、『賢威』で文章の行間を変更する際には、『design.css』に記載されているコードに『line-height』で値を設定していきましょう。

参考記事:賢威6.2の文字フォント周りのカスタマイズまとめ|種類・サイズ・行間を変更する方法を解説

 

ブログデザインは『模倣』し『試行錯誤』すべし

 

 

さて、ここまでブログデザインを一瞬でおしゃれにする方法について解説してきました。

一度おさらいしてみましょう。

  1. HTMLCSSを最低限理解する
  2. ブログ全体に目立つを使わない
  3. 適度に画像をはさむ
  4. 画像の幅を大きくしすぎない
  5. 見出しの周囲に余白を入れる
  6. 色文字のルールを決める
  7. 文章単位で太文字にする
  8. 文字サイズを大きくしすぎない
  9. 読みやすいフォントを使う
  10. 読みやすい行間の幅にする

 

これらすべての要素を取り入れなければいけないわけではありませんが、ぜひとも積極的にあなたのブログに取り入れてみてくださいね。

 

ただ、ブログデザインはコードをいじったりセンスが求められるように感じたりと、一見玄人向けのように思えるかもしれません。

 

しかし、WordPressであればコードの知識など少しかじった程度のものしか必要としませんし、何よりこのカスタマイズ性の高さを生かさない手もないと思います。

 

ぼくは気に入ったサイトを保存してストックしておいたりしていますが、何事もまずは『模倣』から始まるもの。

『このデザイン良いな!』と思ったブログの要素を、どんどん自分の中に取り入れていくことで、センスやスキルも磨かれていきます。

 

そして何より、『デザインなんてさっぱり』と諦めてしまうのではなく、自分の理想のデザインを実現するためにどれだけ試行錯誤できるか、それこそが良いブログを作れるかどうかの分岐点です。

 

ぜひとも、これからの活動において『気に入ったブログデザインをとにかく模倣すること』『自分の理想のデザインを実現するために試行錯誤すること』、この2つのことを頭の中においておきましょう。

 

最後に

 

以上、ブログデザインを一瞬でおしゃれにする10の鉄則を、WordPress初心者の方に向けてお伝えしました。

 

再三にはなりますが、ブログにおいて『デザイン』はないがしろにすべきではない大切な要素です。

どれだけ記事内容が良かったとしても、ブログデザインが良くないがために途中で離脱してしまう読者さんもいるでしょう。

 

そういった意味でも、できるだけブログはおしゃれに保つべきだし、そのためにデザイン面でも試行錯誤していくことが大切です。

 

ただ、ひとつだけ気をつけて欲しいのが、あくまで本分は『文章を書くこと』だということ。

 

ブログデザインばかりに時間を取られて、結局ブログ記事を書けなくなってしまったら本末転倒です。

WordPress初心者の段階では、まず今回紹介した最低限設定することができるデザインを実装し、あとは記事投稿に専念しましょう。

 

ブログデザインは地道に地道に、そして記事執筆はガツガツやっていく。

そんな意識でブログ運営に取り組んでいけると良いですね。

 

デザイン関連はもちろんのこと、その他ブログに関してお困りのことや疑問点などありましたら、ぜひとも気軽にご連絡くださいね。

それでは、最後まで読んでいただきありがとうございました。

 


MAIL MAGAZINE

RIKU

最後まで読んでいただきありがとうございます!

僕のコンサルなど最新の情報は、
無料のメール講座にご登録いただいた方に優先的にお届けしていきます。

その他ビジネスに関する情報からプライベートに関する何気ない話題まで
表のブログではできないお話を楽しくお届けしているので、
ぜひ気軽にご参加くださいね:)

 

 

     

公開日:2017/08/22 更新日:2017/08/25

コメントを残す

サブコンテンツ
FEATURED ARTICLE

TO THE TOP