自分のブログ、かっこよくしたいと思いませんか。
でも、どうすればかっこよくなるのか分からない。
という方向けに、当ブログではどのようにブログデザインしたのかをご紹介します！
少しでもきっかけを掴んでもらえると嬉しいです！
1.配色：色数を抑えたブログデザイン
ブログデザインで一番気を使ったのが「配色」です！
当ブログはJINというテーマを使っているのですが、初期設定ではネイビー、グリーン、オレンジ、イエローと様々な色が使われていてごちゃごちゃした配色をしていました。
僕は、もともとデザインセンスなどは皆無でしたので、最初はどのような色を使えばいいのか全く見当もつかない状態でした。
そこで、色々と調べていたところ「色数を抑える」ことが大切だと知りました。
そして、WEBの配色では「ベース、メイン、アクセント」の3つのカラーを決めることが重要なテクニックと知りました。
そこで、僕は淡い青が好きなので、以下のような構成を考えました。
- ベースカラー：白
- メインカラー：淡い青・青
- アクセントカラー：黄色
主に使っている色はこの3色に抑えました。
文字も真っ黒では無く、少しグレーにして濃淡も気にしてみました！
自分の好きな色をテーマカラーにするのおすすめ！
参考にさせていただいたサイト
「SANKOU!」さん
オシャレなWEBサイトがいっぱい紹介されていて、流し見るだけでも楽しい！
「M-HAND」さん
WEBサイトの配色の基本を分かりやすく教えてくれています。
WEBデザインで押さえるべき配色（ベース、メイン、アクセント）の基本「3つのカラー」｜テクニカルブログ｜株式会社エムハンド
「サルワカ」さん
みんな大好きサルワカさん！配色パターンをいくつも紹介されているので、とっても参考になります！
配色パターン見本40選：ベストな色の組み合わせ確認ツール|サルワカ
マテリアルデザインカラー：使用例までチェックできる配色見本集|サルワカ
2.ヘッダー画像：シンプルなモノトーン
次に、ヘッダー画像です。
白と黒(記事の文字色と合わせた少しグレー)の2色だけで作ってみました。
濃淡が優しいイメージを感じさせてくれませんか？
くれますよね。ああ、よかった。
こんなにシンプルなモノトーンにしたのにはもう一つ理由があります。
それは「記事一覧のアイキャッチにどんな色を使っても合う」ことです。
3.オリジナルのアイキャッチ画像
記事の顔となる部分がアイキャッチ画像です。
僕はこのアイキャッチ画像もなるべくこだわって作るようにしています！
でも、けっこう作るのが面倒なんですよね。
なので、アイキャッチ画像のパターンを10個提示している記事も書いていますので、よければ合わせて読んでみてください。
僕がアイキャッチ画像にこだわっているのは、この３つです。
- 自分で撮影した写真を使う
- 無料写真は使わない
- 無料素材は組み合わせて個性を出す
やはり、オリジナル感を出すには自分で撮影した写真を使うのが一番です！
しかし、毎回写真を用意できるわけもありません。
そのようなときには、イラストや図形、フォントなどの無料素材を使ってアイキャッチ画像を作成します。
その場合でも、組み合わせには気を付けて個性を出せるようにしています。
自分で撮影した写真って、自分だけのものだから個性を出すには一番！
最後に：なんとなく本格的感を演出したかった
ブログを読む際に、かっこ悪いデザインをした記事ってなんとなく信頼感にかけませんか。
せっかく記事を書いたのに、デザインがかっこ悪いのは損ですし、逆に少し物足りない記事でも、デザインがかっこいいと、なんとなく信頼感が出てきます。
今回、僕が気を付けた3つの点は特に相乗効果が高いと感じています。
全体的に色を抑えたことで、アイキャッチ画像が強調されました。
そして強調されたアイキャッチ画像を頑張って作ったことで、なんとなく本格感が出たように思えます！
初めてのブログデザインで悩まれた時には、新しいテーマを買ったり、アレコレと手を出すのではなく、この3つのことに力を注ぐことをおすすめします！
「配色」「ヘッダー画像」「アイキャッチ画像」この３つに注力しました！
ちなみに、僕はアイキャッチ画像を作るときはCanvaという無料のWEBツールを使っています。
かっこいいアイキャッチ画像が短時間でできるので、ほんとにおすすめです！
よこっち(@tirykt)から一言。
なんとなく「それっぽい」ブログになってきたと思ってる笑
コメント