初心者がブログをデザインする方法【抑えるべきデザインの基本】

 

ブログを作ってみたけど、テンプレがダサすぎる。

せっかくならお洒落なやつ作ってモチベ上げたいなぁ。

でもデザインって難しい知識が必要だから初心者じゃお洒落なの作れないよね?

もしお洒落なデザインにする方法が存在するなら知りたい!

 

どうも、モリスです!

 

今回はブログデザインの基本について、解説していきます。

 

この記事で分かること

・ブログは初心者でもお洒落なものが作れる理由
・すぐ使えるお洒落に見えるテクニック

・お洒落なデザインの共通点

 

デザインには、あるツボみたいなものがあって、そこを抑えつつカスタマイズしていけば、センスは全く必要ありません。

 

注意
最初に初心者でもデザインが簡単な理由について書いてあります。パパッとデザインのテンプレやデザインの共通点だけを知りたい人は目次から飛んでください

 

初心者がブログをデザインする方法【基礎知識編】

 

ウェブデザイナーという職業があるくらい、今の時代ではデザインする事が崇高なものへと変化を遂げている気がします。

 

ただ、今はネットの発達によって、技術は情報となり、デザインは誰にでもできるものへと変化しました。

 

つまり、誰もがネット検索する現代では、特別な技術なんてなくても、デザインの上手いブログを見つけて真似をする事ができるのです。

 

極端な話、これを知っていればデザインについては何も知らなくて良いくらいです。

 

それぐらい簡単だし、模倣する事は大事なのです。

 

#技術の前にテンプレを見つける

お洒落なデザインのブログを作りたいと思ったら、まずお手本となる(真似したいと思う)ブログを見つけましょう。

 

テンプレを見つける前に、いろんな技術を身につけようと本屋さんでデザイン本買ったり、ネットで色彩の勉強とかしてもあまり意味がありません。

 

何故なら、向かうべきゴール(テンプレ)がなければ、技術を身につけても使うべきところが見分けられなくて、余分なスキルばかり身に付いたノウハウコレクターになってしまうからです。

 

デザインのスタンスは、ゼロから新しいものを産み出すんじゃなくて、今までに存在しているものと自分の価値観を混ぜ合わせるイメージです。

 

このデザインカッコいいな!って思ったらそのデザインを自分なりにカスタマイズする感じです

 

いつだって、革新的なアイデアというものは既存のアイデアと自分の持つアイデアの掛け合わせから出来上がります。

 

デザイン上達の図式

既存のお洒落なデザイン×自分のアイデア=最高のブログ

 

でも、模倣と聞くと所詮は真似事で、オリジナルを超えれないと思う人もいるかもしれません。

 

確かに、模倣だけでは本家を超える事は無理です。

 

なので、オリジナリティを出すためには、上の図式にプラスアルファで、自分の思い描いているペルソナ(仮想ユーザー)目線に立つ事が大事になってきます。

 

ペルソナ目線

・ペルソナのニーズはなんだろう?お洒落さ?シンプルさ?
・ペルソナの性別、年齢、好きな事、嫌いな事、やりたい事は何?
・ペルソナに提供できる自分の価値を引き立たたせるデザインは何?
・ペルソナの目が疲れないようにするにはどうしよう? etc…

 

ブログ運営は、読者様目線に立つことを徹底することで、オリジナリティが勝手に生まれるようになっています。

 

なので、自分の好みのデザインを見つけたら、積極的に自分のブログにも取り入れていきましょう。

 

注意
ただ、真似するのにも限度があります。完全にコピーするのは絶対にダメです。コピペはパロディになりかねないので、最低限のエチケットは必ず守りましょう

 

#センスではなく情報を頼るべき

いろんなブログを見て回っていると、自分の好きな色やゴテゴテなヘッダー、文字の大きさも強調したい所よってバラバラみたいなサイトがあります。

 

自分なりのオリジナリティを出すのは、とても大事で素敵なことですが、自分の感覚(センス)だけに頼っていると、いつの間にか読者様目線から逸れてしまい自己満足なデザインが出来上がってしまう事があります。

 

なので、頼るならセンスではなくて、正しいソースから発信されている情報に頼るようにしましょう。

 

デザインの情報の定義

人間の視覚による効果や、近年の自分のペルソナに受けそうなトレンド

 

”人間の視覚の効果”とか、”近年のトレンド”とか難しく聞こえるかもしれませんが、自分がかっこいいと思うとか、自分のブログと相性が良いと思うような物を取り入れれば良いだけの話なので、詳しく知る必要はありません。

 

これも自己満足ではなく、あくまで読者様目線を意識してです

 

自分のブログのサイトに活かせるような情報だけ知っておいて、専門的な知識はインスタントに学ぶぐらいでOKです。

 

言ってしまえば僕も、詳しいデザインの要素とか専門用語とかは全く知りません。

 

でも、ある程度のデザインなら表現できる自信があります。

 

何故なら、いろんなブログのデザインを見てきてインスタントに学んで、それなりに画像編集してきた経験があるので、自分なりの感性とペルソナ向けに必要な技術を選んで使う事ができるからです。

 

最初はややこしく感じるかもしれませんが、記事のアイキャッチ画像やブログのカスタマイズをしていくにつれて、自分の表現したいデザインと読者様から見た時の好感度のバランスが取れるようになっていくはずです。

 

そして、そのバランスを取る指標にしなきゃいけないのが、自分のセンスではなくネット上に拡散されている情報なのです。

 

#いつだって根底にあるのは読みやすさ

オシャレなブログはいくらでもネット上で見つける事ができますが、オシャレにする本来の目的を見失ってるブログも数多く存在しています。

 

オシャレなブログにする目的

・テンプレートのままだと離脱率が上がるから
・アクセスしてくれたお客様を楽しませるため
・提供している価値情報を読みやすくするため

 

読者の方は、読みにくいと感じたら、その瞬間サイトから離脱します。

 

あまりにも凝ったデザインは、ごちゃごちゃになりやすいので、シンプルさも必要です。

 

余白の大切さについては、記事の後半でも解説します。

 

本当の理想は、読者様が「このブログを読んでいる自分センスあるな!」みたいにステータスの一部みたいに思ってもらえるようなデザインにする事です。

 

やはり、読みやすさをキープすることを考えても、自己満足なデザインは控えた方が良いです。

 

上記の3点が満たされないようなデザインならば、もう一度見直した方がいいかもしれません。

 

#センスが要らない理由

ブログデザインにセンスはあまり必要ありません。

 

もちろん、あった方がプラスなのは間違いないですが、上記に書いてきた通り、模倣することでセンスは借りる事ができます。

 

ブログデザインに限らず、その道を極めるためには、まず真似をするべきテンプレートを見つけて、そこから派生させるのが一番効率的で効果があります。

 

情報メタボにならないように、必要な知識だけ蓄えながら、ブログ運営をしていきましょう。

 

すぐ使えるデザインテンプレート

 

お洒落な編集をするコツは、簡単なテクニックをインスタントに真似してみるのが一番です。

 

そこで、お洒落な画像編集をする為のテクニックを5つほどご紹介させていただきます。

 

画像編集ソフトがあれば、誰でも簡単に真似できるので、ぜひブログに取り入れてみてください。

 

補足
特にヘッダーなどはブログの印象の大部分を担うので、真剣に悩んで作り上げましょう。 

 

#4分の1を帯にしてみる

 

画像をデザインする時に考えることは、一眼で読者様に情報を伝えられるのかと、パッと目に入った時のインパクト。

 

その2つをお手軽に取り入れられるのが、画像の4分の1を意識することです。

 

これは結構便利なテクニックで、不思議なことに画像の4分の1に帯を入れてみたり、文字を入れてみたりするだけで、簡単にそれっぽく見えるようになるんです。

 

特に、テキストの入れる場所がハッキリするので、情報の要約ができるのもいいですね。

 

半分に割るのもアリだけど・・・

2分の1を意識するツートーンも、十分にお洒落に見えるテクニックなのですが、僕的にツートーンは文字を入れるバランスを取るのが難しい気がします。

 

例えば、上の画像の構成をもしツートーンにしてみたとしたら、こんな感じになります。

 

 

左にスペースが開くので、ここに文字を入れればいいじゃん!と思うかもしれませんが、スペースが広い分だけ文字がゴチャゴチャします。

 

そして逆に、右側のスペースを有効活用しようと思っても、中途半端に狭くなった分、圧迫感を与えてしまうので、画像自体が見づらくなってしまいます。

 

洗練したシンプルな感じを出したい時は、このテクニックがすごいオススメです。

 

#ゴチャゴチャ写真に透明な四角

 

写真のインパクトが強い時や、画像そのものの良さを活かしたいときは、このテクニックが効果抜群です。

 

あえて抜け感の出る透明な四角形を真ん中に配置することで、自然な写真とテキストの両立をする事ができます。

 

少し透けさせるのがコツ

本当にちょっとした違いなんですが、透けさせるだけでお洒落に見えます。

 

下記の画像は透けてないver.なんですが、写真のお肉の美味しそうな感じを打ち消してしまってます。

 

 

チラリズムなんて言葉もあるように、シースルーなデザインは人間の目を楽しませてくれます。

 

自分なりにいろんな応用をして使ってみてください。

 

#オビ・ゴシック・英語

 

シンプルな余白の多い画像の真ん中に、太めのオビとゴシック調の英字を組み合わせると、簡単に今風な編集にする事ができます。

 

自然とオビのテキストに目がいくので、どんな記事なのか?、どんなサイトなのか?を表現することも可能です。

 

ちなみにこれは、supremeをオマージュしたテクニックとして、デザイン本などにもよく載っています。

 

 

一番取り入れるのが簡単な、最近のトレンドですね。

 

散らしてみる

 

オビのいいところは、散らせば賑やかに、整頓すればシックな感じに、重ねればリズムが生まれる・・・というように、配置を工夫することでいろんな雰囲気を出せることです。

 

いろんなアイコンなどと組み合わせて使ってみても、面白いかもしれません。

 

モノクロ

 

不思議なもので、モノクロ写真にするだけで画像は雰囲気が出ます。

 

このテクニックは、ただ白黒に編集するだけなので、一番簡単かもしれません。

 

色の数は絞る

 

モノクロ写真は万能性が高いですが注意点として、色を使う場合は、色の数を絞った方がお洒落に見えます。

 

上記の画像はわざとカラフルにしてみましたが、子供っぽく見えるかと思います。

 

使っても2色ぐらいがバランスを取りやすいと思います。

 

太い線

 

文字の下や、イラストの中に太い線を1本入れると、それだけでお洒落になります。

 

よく、本の表紙などにも使われているテクニックです。

 

これだけでタイトルが引き締まるので、タイトなビジネス向けの記事や、商品紹介の記事などと相性がいいと思います。

 

テキストの色に気を付ける

 

太い線はアクセントになる分、色に気をつけないと背景色やテキストのフォントと相性が悪かったりする時があります。

 

上記の画像は、緑と相性がいい白を使って背景色とケンカをしないよう、爽やかに仕上げてみました。

 

使う時には、背景やフォントに気をつけましょう。

 

#とにかく経験を積む

最初から、画像編集を上手くやろうとしても、難しいです。

 

人によって感性も違うし、運営するサイトのジャンルも人それぞれなので、何が正解なのかは全く分からない世界です。

 

ただ、ある程度のテンプレートは存在しているので、そこから自分なりの工夫を取り入れていくのが、やっぱり最善策な気がします。

 

いいデザインの共通点

 

人間が好感を持てる画像デザインの共通点は2つあると言われています。

 

いいデザインの共通点

・デザインが洗練されていること
・情報が整理されていること

 

ここを抑える事ができれば、綺麗なブログを作るのはとても簡単です。

 

#デザインの洗練

洗練って聞いても難しく感じますよね。

 

デザインを洗練しろ!って言われてすぐに画像編集出来る人は、もはやプロだと思います。

 

ただ、デザインを洗練させる簡単な方法は確かに存在します。

 

それは、勇気を持って余白を作るという事です。

 

例えば、下記の画像。

 

 

下半分に情報を詰め込みすぎて、ゴチャゴチャしてる感じが否めません。

 

せっかくのお洒落な画像も、テキストに打ち消されてしまって、残念な感じになってしまいました。

 

画像編集で余白を作ることは、少し物足りなく感じて勇気がいることです。

 

でも、ゴチャゴチャした感じは避けたいですよね。

 

そこでこの画像を洗練させるために、思い切って余白を作って上げると・・・

 

 

真ん中に思い切ってスペースを作ってあげる事で、シンプルな感じになったのがお分かりいただけますでしょうか?

 

情報量は全く同じなのに、テキストの配置や色、画像の良さを意識するだけでこれだけ見え方が変わるのです。

 

ただ、もちろん一眼で確実に豊富な情報を伝えたい!とかインパクト重視!みたいなブログはガンガン文字とかアイコンをいろいろ入れても良いと思います。

 

この記述はお洒落なブログを作りたい方へ向けたものなので、ニーズに合わせて参考にしていただければ、とても嬉しいです。

 

一番大切なのは、やっぱりそのブログの特徴にあったデザインをしてあげる事だと思うので、まずは自分のブログのペルソナが喜ぶデザインはどんなものなのかをしっかりと考えておきたいですね。

 

#情報が整理されている

ブログは情報を伝えるフォーマットなので、出来る事なら画像も一眼で必要な情報を伝えられるのが理想です。

 

そのためには、載せるべき情報の選別と、並べ方がとても大事になってきます。

 

例えば、筋トレブログでジムの紹介画像を作るとしたら・・・

 

 

これだと思いつきで作れるようなのぺっとした感じなので、もっとテキストを大きくして、キャッチフレーズと情報の両立をしてみます。

 

あと、罫線が堅苦しさを出してる気がするので、取り除いて下線だけにします。

 

 

ペルソナを女性の方と想定して、ポップな柄と柔らかい感じのアイコンを取り入れてみました。

 

ペルソナを意識して、情報をキレイに整理するだけで、これだけ印象を変える事ができます。

 

読者様が直感で「へぇ、こんなジムなんだ!」って思ってもらえるように情報を整理できると完璧だと思います。

 

#2つだけ意識すればキレイなデザインに

抑えるべきところだけ意識すれば、簡単にそれっぽい画像を作ることができます。

 

いいデザインの共通点
・デザインが洗練されていること
・情報が整理されていること

 

ただ、最近のYouTubeのサムネイルなどを見ると、テキストギチギチに入れた方がネットユーザーのウケが良い気もします。

 

有名YouTuberのサムネは、一眼見るだけでどんな動画が分かるぐらいテキスト入ってますもんね。

 

やはり、一番大事なのはどんな人が読んでくれているのかをしっかり考えることです。

 

その上で、読者のニーズとデザイン性のバランスを見つけるのが、真のお洒落なブログだと僕は思います。

 

まとめ

 

ブログで一番に評価するべきなのは、もちろん記事の質です。

 

しかし、最近は日本人のネットリテラシー(ネットの理解度)が上がってきていて、どれだけ良い事が書いてあるブログでも、ただコピペした画像が貼ってあるだけでは満足してもらう事が難しくなっているのも事実です。

 

解決策として、有料画像サイトなどを使えば差別化が図れたりしますが、せっかくなら自分で編集して画像を作ってみるのも、ブログ運営を楽しくさせる一因になると思います。

 

もしこの記事が、あなたのサイトを少しでもよくすることに繋がれば、とても嬉しいです。

 

では、今回も貴重な時間を割いてまでこの記事を読んでいただきありがとうございました。

 

ブログ作成関連記事

【超初心者向け】収益ブログの作り方を徹底解説←1時間で作れます

無料ブログは稼げないです【本気なら有料ブログを使おう】