デザイン

オシャレなブログデザインの作り方

オシャレなブログデザインの作り方

 

 

ここあです。

 

このサイトはワードプレステーマ「AFFINGER5」の

個人的なテストサイトして立ち上げています。

※ただし、記事はしっかり書いてます!

 

AFFINGER5」は本当にいろんなことができすぎて

こだわればこだわるほどカスタマイズ可能な超優秀なテーマ。

 

しかし、あれもこれもできるからと言って

何から何まで詰め込んでしまうと結局はごちゃごちゃして

 

何をメインに伝えたいブログなのかが

分からなくなってしまいます。

 

なので、私もやりたいことはたくさんあるけど

とにかくシンプルでオシャレなサイトを作ってみようと

今回のようなブログの雰囲気に仕上げてみました。

 

ブログアフィリエイト」で収益化する場合は

確かにデザインよりも記事の内容が大事。

 

しかし、まだブログを始めたばかりで

質の高い記事もろくに書けないレベルなのに

ブログのデザインまで酷かったら

 

あなたのブログ記事を読んでもらえる可能性は

さらに低くなるかもしれません。

なので、最低限の見栄えだけは整えておきたいものです。

 

だから、今回はデザイナーとして

20年の現場経験がある私が

 

ブログのデザインで悩んでいる方のために

誰でも簡単にデザインをキレイに仕上げられる

ちょっとしたコツをお伝えしようと思います。

 

オシャレなブログデザインの作り方

簡単にポイントだけ分かりやすくお伝えしていきます。

 

なので「これだけやってみよう」と思える部分があれば

真似してやってみてくださいね。

 

色数をおさえる

このブログを見ても分かる通り

私は色数を絞ってこのブログのデザインをしました。

 

色数は以下の4色

  • Green(緑)、Red(朱色)、Yellow(黄)、Gray(灰色

 

アイキャッチ画像やヘッダー画像は

色数を抑えるのは難しいかもしれませんが

 

逆にブログのベースとなるデザインカラーを抑えることで

カラフルなアイキャッチ画像はさらに引き立ちます。

 

なので…

  • 「ブログ全体に統一感がない」
  • 「なんかごちゃついて見える」

と感じた場合は

 

思い切って使っている色数を減らしてみてください。

それだけでかなり印象が変わります。

 

そして、私のサイトカラーはヘッダー画像から色をチョイスして、

  • パソコンから、ブルーグリーン
  • 光の部分から、オレンジがかった黄色
  • 机と人から、黄みの強い朱色

これら3色をベースカラーとして採用し

全体的に統一感を出しています。

 

サイトの配色でお悩みの場合は

以下のサイトでカラーバランスを検討してみてください^^

→Color Hunt

 

ポイント

デザインがごちゃついて見える時は色数を減らしてみよう!

 

余白(ホワイトスペース)を大事にする

デザイン業界で、

いわゆるホワイトスペースと言われる部分を

大事にレイアウトしてみましょう。

 

ホワイトベース」ではありませんよ。

それはガンダム(笑) ※分からない人ごめんなさい…

 

ホワイトスペース」とは簡単に言うと…余白です。

 

余白と効くと…

余った部分、つまり無駄なスペースに

思ってしまいがちですがそうではありません。

 

その「ホワイトスペース」を活かさなければ

圧迫感」を感じ、とても窮屈に見えてしまします。

 

なので、記事の本文にしろ、

アイキャッチ画像、ヘッダー画像にしても

ホワイトスペース」を意識することはとても大事。

 

ホワイトスペース」が有効に使えれば

キャッチフレーズやワンポイントとして入れた

イラストなどはより引き立ちます。

 

今回、新たに追加されたAFFINGER5のイラスト対応メニュー

これが、ボックスのセンターにバランスよく配置されている様子は

 

ある意味、ホワイトスペースを生かした

ゆったりとしたレイアウトとなっています。

 

それぞれのイラストが各ボックス内に

ゆったり収まっていることで、

読者の目を引きつけられるというのが、

 

まさに、ホワイトスペースを生かした効果です。

 

ポイント

ホワイトスペース(余白)を意識してレイアウトしてみよう!

 

背景にシンプルな素材を選んでよりオシャレに

AFFINGER5管理の「はじめに」のところで紹介されている

toptal」という背景素材のサイトは

なかなか秀逸です。

 

→ toptal(背景素材):toptal.com

 

背景に使える素材はシンプル、かつ、

リピート表示が効くのでデータも軽く抑えられます。

 

背景画像を使う場合は、主張しすぎる素材ではなく

見えるか見えないかギリギリの素材を

さりげなく入れることでオシャレ感が出ます。

 

Webサイトというデジタルの空間に

紙や布といったアナログ素材を持ってくれば

人のぬくもりが感じられる温かみのあるサイトにもなります。

 

ポイント

背景素材をさりげなく使っておしゃれに!

 

ターゲットの属性に合わせた色を設定する

デザインする時に気をつけて欲しいのが

ターゲット属性に合わせた色を設定するということです。

 

どういうことかと言うと…

あなたがこれから目指すサイトイメージに合わせて

色のバランスを考えて欲しいのです。

 

例えば、「子供向けのやさしいサイト」にしたいのに

寒色系のどぎつい色がメインのサイトであれば

堅苦しい重たいイメージになってしまうし…

 

ビジネス系の誠実なサイト」にしたいのに

パステルカラーでやわらかい色ばかりにすると

全然頼りなさそうなイメージになってしまいます。

 

なので…

誰にどんな情報を発信をしたいかで

色の選び方も変わってきます。

 

その辺をちゃんと意識して配色を考えると

Webサイトのコンセプトにマッチした色を探せます。

 

また、イラストを使用する際には

イラストのタッチを揃えてみてください。

 

イラスト素材のおすすめサイトとして

よく「イラストAC」を見かけますが

 

イラストAC」には

たくさんのイラストレーターが登録しており

イラストの種類も豊富です。

 

だから、イラスト素材を探す時は

どうしてもいろいろと目移りがしてしまい

使いたい素材を手当たり次第使いがちです。

 

しかし、イラストレーターそれぞれにも

独特の個性や癖があります。

 

なので、イラストを使う時も

同じ作者に絞ってイラストを採用する方が

ある程度の統一感が得られます。

 

また、例え作者が違っても

  • 線画で描かれたものだけに絞って採用する
  • 黒い縁取りのあるイラストだけでまとめてみる

など、どこかしらちゃんと採用するルールを決めて

ブログに反映すれば、素人くさいサイトにはなりにくいです。

 

ポイント

  • サイトのコンセプトやターゲットに合わせて色を考えよう!
  • イラストを使う時は自分なりのルールを作って採用しよう!

 

メリハリ(強弱)を付ける

デザインで大事なのはメリハリです。

 

例えば

  • タイトルや本文の大きさ
  • 文中でのメリハリ

など、単調にならないように

ジャンプ率を意識してみましょう。

 

ジャンプ率とは簡単に説明すると…

 

君が好きだ〜!
だから俺と付き合ってくれ…(祈)

 

みたいな感じ…(笑)

 

つまり、ジャンプ率とは「本文の文字サイズ」と

タイトルや見出しサイズ」の比率のことを指します。

 

言葉の使い方としては…

  • ジャンプ率が高い(大きい)
  • ジャンプ率が低い(小さい)

と表現します。

 

ジャンプ率が高い」ということは

本文の文字サイズと見出しの文字サイズの差が大きいということ。

 

この記事のアイキャッチ画像の

DESIGN」と「オシャレなブログの作り方

のジャンプ率は大きくしています。

 

また、先ほどの「君が好きだ〜!」のように

見出しに限らず、本文中でもジャンプ率を変えて

メリハリを付けることで

 

オシャレに見せたり

読者に飽きさせない工夫をすることもできます。

 

ポイント

デザインにはメリハリも大事!

 

オシャレなブログデザインにするために

私が普段から使っている

オシャレな素材サイトをいくつかご紹介しておきます。

 

ブログのデザインをキレイに仕上げるには

やはり「良い素材」を使うのが一番の近道です^^

 

写真素材

 

アイコン

ほぼ「AFFINGER5」に紹介されているサイトばかりですが…^^;

 

まぁ、言ってみれば、

とりわけみんなが知らないサイトから素材を持って来ずとも

AFFINGER5」ならオシャレなサイトが作れると言うことです…

 

そんなオチでいいですかね?(笑)

 

オシャレなブログデザインの勉強方法

オシャレなブログデザインにしようと思うなら

あなたのオシャレ感覚を磨くしかありません。

 

そのためにはなるべく

オシャレなサイトを日頃からたくさん見て

どうしてそのサイトがオシャレに見えるのか?

分析をする癖をつけることが大事です。

 

ただ漠然と見ているだけでは

あなたのオシャレ感覚はアップしません。

 

特にシンプルなデザインが良い場合は

海外のサイトを見るのがおすすめです。

 

もちろん、日本にもたくさん良いサイトがあるので

まずは「あなたが好きだ」と思うサイトを

集めてみてください^^

 

あなたが良いと思ったサイトを見つけたら

そのサイトの良いところを少しずつ真似してみて

あなたのサイトをブラッシュアップしていくと

 

だんだんデザインのコツが分かってくると思います。

何事も分析と行動です^^

 

オシャレなブログデザインの作り方まとめ

簡単にではありますが

ブログデザインをオシャレに作る方法をまとめてみました。

 

先にもお伝えした通り

デザインには正解はありません。

 

しかし、少なくともあなたが考えなければならないのは

  • どんなターゲットに
  • どんな情報を発信するかのか?

ということです。

 

子供向け、女性向け、ビジネス向け

ファッション、ダイエット、ゲーム、アニメなど…

やはりそれぞれのジャンルにあった見せ方はあります。

 

私がいろんなブログを見て感じたのは

例えば、ワードプレステーマ「STORK」なら

オシャレなブログが簡単にできる」と書いてあるにも関わらず

 

そのブログ自体が全くおしゃれじゃないということです。

 

しかも、「STORK」を使っているにも関わらず…

 

それでは、いくら「STORK」を使って

オシャレなブログが出来ると言っても全く説得力がありません。

 

つまり、

「オシャレを語るなら、オシャレなデザインにする」というのが

ネットユーザーの心理になります。

 

なので、当然、そんなことにも気付かず

「このブログテーマならおしゃれなサイトができます!」と

語ったところで、誰もそのテーマを欲しいとは思いません。

 

だから、少なくとも

あなたがブログデザインで意識しなければならないのは

 

あなたがどんなビジネスをするにしても

あなたが集客したい属性にあった

デザインにする必要があるということ。

 

もちろん、デザインは上手いに越したことはありませんが

いくらデザインがうまくても、集客する属性を無視したデザインでは

全く意味がありません。

 

そういう意味では、デザインの上手い下手ではなく

ちゃんとあなたの集客したい属性の好みを考えた

デザインにすれば、それでOKです。

 

ひと昔前は「下手うま」と言われるイラストが流行した時代もありました。

なので、デザインは上手ければそれで良いというものでもありません。

 

とは言え、デザインに力を入れすぎて

記事を書くのが疎かにならないようにだけ気をつけましょう。

何だかんだ言ってもネットビジネスに大事なのは記事の質です。

 

私も「デザイナー」を語っている以上は

デザインに手が抜けないのが辛いところ…^^;

 

とは言え、当の本人はかなり楽しんでやってますが…(笑)

 

以上、最後までお読みいただきありがとうございました!

 

  • この記事を書いた人

ここあ

グラフィックデザイン歴20年のフリーランスデザイナー。大手広告代理店や大手印刷会社と取引のある制作プロダクションに20年勤務し、2017年に独立。現在は、グラフィックデザインを生かしたWebデザインのビジネスを展開しながら、コンサルティング業務など幅広く活動しています。

Reccomend

オシャレなブログデザインの作り方 1

    ここあです。   このサイトはワードプレステーマ「AFFINGER5」の 個人的なテストサイトして立ち上げています。 ※ただし、記事はしっかり書いてます! &nb ...

【AFFINGER5使い方】ヘッダー画像にタイトルとボタンを入れる方法! 2

  ここあです。   ワードプレステーマ「AFFINGER 5」は 5/21に大型アップデートとしてβ版が公開されました。   今回は、その大型アップデートで実装された ...

-デザイン
-, , , ,

© 2021 THE BLOG LIFE