ブログ運営報告

ブログサムネイルをミニマルなデザインに変更する方法

こんにちは。ミニマルコピーライターのゆきたかです。

1週間くらい前から、ブログ全体で使っているサムネイルを、ミニマルなデザインに変更しました。

サムネイルは、直訳で「Thumb(親指の)Nail(つめ)」という意味です。

WordPressブログでは、記事へ誘導するの縮小見本画像に当たります。

ワードプレスに反映されるサムネイルの位置

(また、各記事タイトル下のアイキャッチ画像と共通)

画像1枚ですが、一番目がいく箇所でもあり、ブログデザインとしては重要箇所です。

非常にシンプルなデザインですが、ブログのコンセプトに合ったデザインにブラッシュアップでき、満足しています。

デザインの流れまとめますので、よろしければご参考くださいませ。

※筆者はグラフィックデザイナーではありませんが、デザイン学科出身で現在広告会社のクリエイティブ部門にいます。コピーライターはグラフィックデザイナーの相棒の方です。

サムネイルデザインの流れ

流れとしましては、別にこれが正解ではないですが超簡単に

  1. コンセプト決め
  2. 参考資料&先例を探す
  3. デザイン

グラフィックデザイン上の注意点として、

  • フォント
  • レイアウト
  • 統一感(何枚も並ぶので)
  • 量産しやすさ

あたりを気にしました。

❶コンセプト決め

本来最初に決めておくべきですが、このブログの場合、

3つくらいテーマのある雑記→ミニマリストメインの半特化

という形にシフトしました。

そのため、当初と少し変わって現在のサムネイルコンセプトは

「The Minimal」です。

❷参考資料&先例を探す

社内外問わず、どんなグラフィックデザイナーも突然デザインは始めません

(正直このサムネイルのデザインくらいなら、いきなり始めてもつくれますが笑)

まずは参考資料探しをします。

今回、参考にしたのはビートルズのThe Beatles(ホワイトアルバム)のジャケットデザインです。

ビートルズは、音楽だけでなくジャケットデザインの格好良さにも僕は注目しています。

他にも「アビーロード」や「リボルバー」などのジャケットも有名ですね。

権利の関係で直接画像を貼れないので、興味ある方はこちらを。

rockinon.com; THE BEATLESの『ホワイト・アルバム』はアナログ時代はエンボス加工のシリアル・ナンバー付きでした

ほかのデザインも「ビートルズ ジャケット」でググれば、たくさん出てきます。

ホワイトアルバムのすごさは、”印刷されていないこと”

真っ白なジャケットに、エンボス加工(プレスして凹凸をつくる加工法)で”The Beatles”と小さく刻まれているのみ。

それまでガチャついたデザインの多かったレコードジャケットに、究極のミニマルデザインを生み出しました。

❸デザイン

ホワイトアルバムを参考にデザインへ。

上に書いた通り

  • フォント
  • レイアウト
  • 統一感(何枚も並ぶので)
  • 量産しやすさ

がポイント。それぞれ見ていきます。

フォント

ホワイトアルバムに合わせてシンプルなゴシック系がいいかなと。

でも実は全然こだわりありません笑

使っているのは「こぶりなゴシック」

他にも王道ですが英文字なら「Helvetica」などは、無難です。

サイズ的には、ホワイトアルバムに合わせ小さくしたいのですが、特にスマホで読めなくなるのでそれなりのサイズ感は担保。

色も、量産することを考えると型にはめるのが楽です。

Googleが提唱する“マテリアルデザイン”というデザインのガイドラインがあります。

それに従って、Material Design color palettesというページ下部にある色味を使用します。

もともと雑記ブログなので

  • ミニマリスト系 青
  • 海外系 緑
  • 広告系 赤
  • ブログ系 ブルーグレー

と文字の色でテーマを分けています。

文字サイズを大きくし多分、立ちすぎない様に色の濃さはうすめにしました。

レイアウト

もちろんグラフィックデザイナーは意図を持ってレイアウトします。

でも、僕はレイアウトは素人なのでもう感覚です。

強いて言えば、ただの白い面に文字を乗せるだけにしないで、余白を作ってドロップシャドウ(影)を落としました。

一応ホワイトアルバムにある、エンボス加工の雰囲気を出すためです。

サムネイルデザインにドロップシャドウを落とす

影の色味は、文字の色味に合わせています。

統一感

  • ミニマリスト系 青
  • 海外系 緑
  • 広告系 赤
  • ブログ系 ブルーグレー

これらのデザインを、同じレイアウト、同じフォントで表現することで統一感を出します。

統一感のあるサムネイルデザイン

違いは、文字と色味で表現します。(正直モノクロでも良かった)

量産しやすさ

統一感とつながるところです。

統一感が出る上に、デザインが簡単なので量産がしやすいです。

一石二鳥!

ブログの記事には毎回サムネイルがつくので、”量産”は重要だと思います。

 

ちなみにですが、それに合わせてツイッターのヘッダーも変えてみました。

ツイッターのヘッダーデザイン

真ん中に”STAY MINIMUM”のコピーをミニマムに。

スマホだと読めないので、なかなか尖ったデザインになっています笑

以上ご参考になれば幸いです。

お読みいただきありがとうございます。

↓ブログランキング、クリックで応援いただけますと、たいへん励みになります!

にほんブログ村 ライフスタイルブログ ミニマリストへ
にほんブログ村

↓他の記事も是非!

ミニマリスト実践法の記事はこちら>>

おすすめミニマリスト本の記事はこちら>>

COMMENT

メールアドレスが公開されることはありません。

CAPTCHA