私らしい世界観をブログで表現する６つのポイント

個人で活動する人にとって、ブログやホームページはネット上での自分の分身みたいなもの。

私らしさを反映しつつ、おしゃれなブログを作りたいですよね。

でも、好きな写真や色を並べてみても、いまいち統一感が出ないなんてこともあります。

今回は、自分好みの世界観をつくるために、私が意識していることを紹介します。

簡単にできることばかりなのでぜひお試しください。

① まずはコンセプトを決める

コンセプトは表現したいイメージを言葉に表したものです。

ブログを見たときに、どんな印象をもってほしいかをコンセプトが決まると、デザインを選ぶびやすくなります。

・どんな雰囲気にしたいか
・どんな気持ちを届けたいか
思いつくキーワードを考えてみましょう。

その中からキーワードを組み合わせて、コンセプトを作ってみましょう。

例えば、このブログは、「森に住むWEB魔法使いのアトリエ」をイメージしています。

webって、思い描いたもの具現化してくれたり、難しいことをパパッと簡単にしてくれて、魔法みたいだから。

それだけだと無機質なので、木の温もりやアナログ的な要素を入れたい。なので、森のアトリエです。

元々ファンタジーが好きなので、自分の好きものを入れています。

② コンセプトからデザインの要素を導く

コンセプトが決まったら、そこからデザインの要素を決めていきます。

主なデザイン要素は3つ
・色
・モチーフ
・フォント

この３つはブログやホームページで変更しやすい箇所になります。

アイデアを広げてメモしておきましょう。

③ カラーは３色にしぼる

コンセプトをもとに、
ホームページで使う、3つのカラーを決めていきます。

・ベースカラー
・メインカラー
・アクセントカラー

私はcoolorsというツールで色を選んでいます。
最初は、カタログガイドからイメージに近い色を探して、パレットを開き、色を調整していくといいと思います。

canvaを使っている方は、デザイン上で作って、色を置いてイメージをみてもいいかも。

ベースカラー

ベースカラーは、背景や余白に使われる色。
ベースカラーは白を使ってもいいですし、ベージュ系も目にやさしくて、素敵です。
上に文字や写真が載るので、なるべく薄い色を選びましょう。

メインカラー

これはホームページの中でよく使われる色です。
特に、ボタンや見出しの色として使います。

私は森のアトリエというコンセプトに合わせて、木のブラウンを選んでいます。

アクセントカラー

これはリンクや強調部分に使う色です。
メインやベースと合いそうな色で、コンセプトと合う色を選びます。

私は森っぽく緑色を選んでいます。

ブログの設定で色合いを見る

多くのブログでは基本の色設定できることが多いです。

swellだと、外観>カスタマイズ>サイト全体設定＞基本カラーで設定できます。

それぞれ設定して見てみましょう。

実際にブログ上で見てみると、色を選んだときとブログ上でみたときが違うことはよくあるので、そしたらカラーパレットに戻って調整してあげます。

④モチーフはさりげなく使う

モチーフは使いすぎたり、いろんなモチーフを混ぜると、装飾が多すぎてうるさい感じになります。
迷ったら無理して使わなくてもOK。
アクセントにちょこっと使うくらいがちょうどいいです。

メインビジュアルやアイコンに使う

一番目に入りやすい場所なので、
メインビジュアルは、コンセプトにあった画像を使いましょう！

アイコンはお気に入り登録したり、ホームページ目印になりますので、モチーフを使ってみるといいでしょう。

私のコンセプト(森のweb魔法使いのアトリエ)にあわせて、木のシルエットを入れています。

あとは、ブログ全体の背景画像に木目のパターンを入れています。

見出し・区切りデザイン

ブログ記事内でモチーフを使ったあしらいを入れてもいいでしょう。

• 見出し横に小さなアイコン
• 区切り線をモチーフで装飾
• 飾り枠にモチーフを入れる
  

Swellだとテキストメニューから、「 」や「 」など、アイコンを文章内に入れることができます。

より細かい調整をするには、HTML/CSSのカスタマイズが必要です。

• 箇条書きリストをおしゃれにするCSS10個

⑤フォントは読みやすさ＋アクセント

同じ文章でもフォントが違うだけで印象が変わります。

フォントは大きく明朝体とゴシック体の2種類あります。

• 明朝体
  • Noto Serif JP
  • 游明朝 (Yu Mincho)
  • ヒラギノ明朝 (Hiragino Mincho)
• ゴシック体
  • メイリオ (Meiryo)
  • ヒラギノ角ゴシック
  • 游ゴシック (Yu Gothic)
  • Noto Sans JP

明朝体は上品で落ち着きがあり、長い小説やビジネス文書でよく使われます。
ゴシック体でシンプル、読みやすく、実用的でよく使われています。

ゴシック体には角ばった「角ゴシック」と丸みを帯びた「丸ゴシック」があります。丸ゴシックの方がカジュアルでやさしい印象になります。

他にも筆書体・デザインフォントもありますが、長い文章には向かないため、特に目立たせたい部分にアクセントとして使うといいと思います。

本文は読みやすさが大事

ホームページやブログでは、ゴシック体が使われることが多いです。
どれだけ世界観があっても、読みにくいと読者は離れちゃうので。

swellであれば、外観＞カスタマイズ＞サイト全体設定＞全体デザインから選べます。

Google fontなどのWEBフォント使うと、もう少し選択肢は広がります。
ただ追加で設定が必要なので、需要がありそうだったら、また記事にしますね。

無料ブログだと、基本的にはフォントが決まっていて、カスタマイズできないかも。
その場合は、タイトルやアイキャッチなど、画像の中に入れる文字を工夫してみましょう。

おしゃれ文字はアイキャッチ画像で使う

個性的なフォントに関しては、タイトルや見出しに絞って使うか、アイキャッチ画像の中で使ってみましょう。

いろんなフォントがあるので、イメージに合ったものを日本語用、英語用に選んでおくと、使いやすいです。

⑥使い回してデザインを楽に揃える

あとは、日々、記事を書くときに文字色やマーカーの色を揃える。
画像を作るときに、色やフォントを揃える。
決めたものを使い回すと、効率的＆統一感がでやすいです。

swellはよく使う色を設定しておくと便利

SWELLはよく使う色を濃い、薄いで設定できます。
最初に設定しておくと、簡単に同じものを使いまわせるようになります。

また、マーカーやボタン、枠なども色などを設定できるます。

canva（プロ版）はBrand Kitを使う

Canvaではブランドキットを使うと、自分のブログで決めた色やフォント、ロゴ、写真などを登録しておくことができます。

新しく画像を作成するときにブランドキットで設定した内容を、すぐに使えるので便利。

無料版でも、よく使う色やフォントの設定を、どこかのファイルにまとめておくだけでも、迷いにくくなります！