私らしい世界観をブログで表現する６つのポイント
目次
個人で活動する人にとって、ブログやホームページはネット上での自分の分身みたいなもの。
私らしさを反映しつつ、おしゃれなブログを作りたいですよね。
でも、好きな写真や色を並べてみても、いまいち統一感が出ないなんてこともあります。
今回は、自分好みの世界観をつくるために、私が意識していることを紹介します。
簡単にできることばかりなのでぜひお試しください。
① まずはコンセプトを決める
コンセプトは表現したいイメージを言葉に表したものです。
ブログを見たときに、どんな印象を持ってほしいか、コンセプトが決まると具体的なデザインが選びやすいです。
- どんな雰囲気にしたいか
- どんな気持ちを届けたいか
思いつくキーワードを考えてみましょう。
その中からキーワードを組み合わせて、コンセプトを作ってみましょう。
例えば、このブログは、「森に住むWEB魔法使いのアトリエ」をイメージしています。
webって、思い描いたものを具現化してくれたり、難しいことをパパッと簡単にしてくれて、魔法みたいだから。
それだけだと無機質なので、木の温もりやアナログ的な要素を入れたい。なので、森のアトリエです。
元々ファンタジーが好きなので、自分の好きなものを入れています。
私の好きなイメージをAIに描いてもらうとこんな感じ。
② コンセプトからデザインの要素を導く
コンセプトが決まったら、そこからデザインの要素を決めていきます。
主なデザイン要素は3つ
**・色
- モチーフ
- フォント**
この3つはブログやホームページで変更しやすい箇所になります。
アイデアを広げてメモしておきましょう。
③ カラーは3色にしぼる
コンセプトをもとに、ホームページで使う、3つのカラーを決めていきます。
**・ベースカラー
- メインカラー
- アクセントカラー**
私はcoolorsというツールで色を選んでいます。
最初は、カタログガイドからイメージに近い色を探して、パレットを開き、色を調整していくといいと思います。
coolors便利！
Canvaを使っている方は、デザイン上で作って、色を置いてイメージをみてもいいかも。
ベースカラー
ベースカラーは、背景や余白に使われる色。
ベースカラーは白を使ってもいいですし、ベージュ系も目にやさしくて、素敵です。
上に文字や写真が載るので、なるべく薄い色を選びましょう。
メインカラー
これはホームページの中でよく使われる色です。
特に、ボタンや見出しの色として使います。
私は森のアトリエというコンセプトに合わせて、木のブラウンを選んでいます。
アクセントカラー
これはリンクや強調部分に使う色です。
メインやベースと合いそうな色で、コンセプトと合う色を選びます。
私は森っぽく緑色を選んでいます。
ブログの設定で色合いを見る
多くのブログでは基本の色を設定できることが多いです。
SWELLだと、外観>カスタマイズ>サイト全体設定＞基本カラーで設定できます。
それぞれ設定して見てみましょう。
実際にブログ上で見てみると、色を選んだときとブログ上でみたときが違うことはよくあるので、そしたらカラーパレットに戻って調整してあげます。
④モチーフはさりげなく使う
モチーフは使いすぎたり、いろんなモチーフを混ぜると、装飾が多すぎてうるさい感じになります。
迷ったら無理して使わなくてもOK。
アクセントにちょこっと使うくらいがちょうどいいです。
メインビジュアルやアイコンに使う
一番目に入りやすい場所なので、メインビジュアルは、コンセプトにあった画像を使いましょう！
趣味丸出しなヘッダー画像にしてみた
アイコンはお気に入り登録したり、ホームページの目印になりますので、モチーフを使ってみるといいでしょう。
なんやかんやずっと使ってるアイコン
私のコンセプト(森のweb魔法使いのアトリエ)にあわせて、木のシルエットを入れています。
あとは、ブログ全体の背景画像に木目のパターンを入れています。
見出し・区切りデザイン
ブログ記事内でモチーフを使ったあしらいを入れてもいいでしょう。
- 見出し横に小さなアイコン
- 区切り線をモチーフで装飾
- 飾り枠にモチーフを入れる
SWELLだとテキストメニューから、「 」や「 」など、アイコンを文章内に入れることができます。
より細かい調整をするには、HTML/CSSのカスタマイズが必要です。
⑤フォントは読みやすさ＋アクセント
同じ文章でもフォントが違うだけで印象が変わります。
フォントは大きく明朝体とゴシック体の2種類あります。
- 明朝体
- Noto Serif JP
- 游明朝 (Yu Mincho)
- ヒラギノ明朝 (Hiragino Mincho)
- ゴシック体
- メイリオ (Meiryo)
- ヒラギノ角ゴシック
- 游ゴシック (Yu Gothic)
- Noto Sans JP
明朝体は上品で落ち着きがあり、長い小説やビジネス文書でよく使われます。
ゴシック体でシンプル、読みやすく、実用的でよく使われています。
ゴシック体には角ばった「角ゴシック」と丸みを帯びた「丸ゴシック」があります。丸ゴシックの方がカジュアルでやさしい印象になります。
他にも筆書体・デザインフォントもありますが、長い文章には向かないため、特に目立たせたい部分にアクセントとして使うといいと思います。
本文は読みやすさが大事
ホームページやブログでは、ゴシック体が使われることが多いです。
どれだけ世界観があっても、読みにくいと読者は離れちゃうので。
SWELLであれば、外観＞カスタマイズ＞サイト全体設定＞全体デザインから選べます。
Google fontなどのWEBフォント使うと、もう少し選択肢は広がります。
ただ追加で設定が必要なので、需要がありそうだったら、また記事にしますね。
無料ブログだと、基本的にはフォントが決まっていて、カスタマイズできないかも。
その場合は、タイトルやアイキャッチなど、画像の中に入れる文字を工夫してみましょう。
おしゃれ文字はアイキャッチ画像で使う
個性的なフォントに関しては、タイトルや見出しに絞って使うか、アイキャッチ画像の中で使ってみましょう。
いろんなフォントがあるので、イメージに合ったものを日本語用、英語用に選んでおくと、使いやすいです。
⑥使い回してデザインを楽に揃える
あとは、日々、記事を書くときに文字色やマーカーの色を揃える。
画像を作るときに、色やフォントを揃える。
決めたものを使い回すと、効率的＆統一感がでやすいです。
SWELLはよく使う色を設定しておくと便利
SWELLはよく使う色を濃い、薄いで設定できます。
最初に設定しておくと、簡単に同じものを使いまわせるようになります。
SWELL設定＞エディター設定
また、マーカーやボタン、枠なども色などを設定できます。
Canva（プロ版）はBrand Kitを使う
Canvaではブランドキットを使うと、自分のブログで決めた色やフォント、ロゴ、写真などを登録しておくことができます。
Canvaのブランドキット
新しく画像を作成するときにブランドキットで設定した内容を、すぐに使えるので便利。
無料版でも、よく使う色やフォントの設定を、どこかのファイルにまとめておくだけでも、迷いにくくなります！
カラーパレットやよく使うフォントを記録
