運営しているウェブサイトやブログの訪問ユーザーを増やしたい、と思っている人は多いでしょう。
2013年から公開されている Canva デザインブログは、ゼロから月間100万セッションへと急成長を続けています。また2015年より、ソーシャルネットワーク Pinterest を活用したことがきっかけとなり、世界的な大企業のクリエイティブ作成にも利用されるようになりました。
Canva チームは、Pinterest からの流入ユーザーをより増やすために、公開する記事には最低でも20枚の素晴らしいグラフィックを含むようにしたことで、現在では60,000セッション以上が Pinterest 経由でのアクセスとなっています。
彼らが達成したことを真似するのは難しそうですが、そうではありません。この記事では、ウェブサイトやブログでより影響を与えるグラフィックの作り方を、無料テンプレート素材と一緒にみていきましょう。
01. ビジュアルコンテンツ用のスタイルガイドを作成しよう。
デザインをはじめる前に、ウェブサイトやブログでどのようなフォントや配色、パターンなど、どのようなビジュアル要素を利用するのか決めていきましょう。基本的に、参考デザインとして利用することを考えた、スタイルガイドを作成すると考えると良いでしょう。
ブログサイト用のスタイルガイドを作成し、スタイルを固定することで、記事全体の統一性を高め、ブランディングにもつながり、より素早くグラフィック素材を作成できるようになるでしょう。
スタイルガイドを作成するときは、以下の点に注意しておきましょう。
書体（英: Typefaces）
見出しや小見出しなどに、どのような書体を利用するのか、あらかじめ決めておくと良いでしょう。
最近では、数多くのフォント素材が公開されているので、ひとつに決めるのは大変ですが、最高でも4つくらいにしておくのが無難でしょう。あまり多くの書体を使い過ぎると、統一感のある見た目を損ねてしまうでしょう。
以下のサンプル例を参考に見てみましょう。
どちらのセットも、書体を同じ目的、コンセプトで利用しています。書体をばらばらにしなかったことで、統一感のあるプロフェッショナルな見た目を実現しています。
参考サンプルを例に、カスタマイズできる無料テンプレートをまとめています。
配色（英: Color）
ウェブサイトやブログで利用する配色カラーパレットを作成しましょう。ブログデザインに配色を活用しているときは、グラフィック要素にも適用してみましょう。配色を決めるときは、以下のツールを活用してみても良いでしょう。
– Colordot
– Coolors
ではどのように統一感のある配色を、グラフィックに活用したら良いでしょうか。以下の参考サイトでは、ブログ全体のどのページでも、同じ配色をグラフィック要素に活用しているのが分かります。
上記サンプル例を参考に用意されたテンプレートで、オリジナルのレイアウトを作成してみましょう。
ビジュアル要素（英: Visual Elements）
デザインに利用するテクスチャや図形シェイプ、パターンなどを決めていきましょう。背景にパターンを利用したり、図形シェイプの中に文字テキストを入れるのかなど、より具体的なデザインも一緒に考えておくと良いでしょう。
以下サンプルのように、ボーダーラインを利用したグラフィック要素を見かけることもあります。もし利用するときは、どのようなときに活用できるのか書き留めておくと良いでしょう。
現在人気となっているこのスタイルを試したいときは、以下の無料テンプレート素材を活用してみると良いでしょう。
写真スタイル（英: Photography Style）
他のデザイン要素と同じように、利用する写真イメージも統一性を持たせることが大切になります。
同じカラーフィルターを利用するというわけではなく、統一感のある明るさや構図を意味しています。文字テキストを重ねるときは、あらかじめ選択しておいた書体を、より自然に用いるようにしましょう。
以下のサンプル例は、それぞれの写真イメージは異なる記事ごとに利用されていますが、構図や配色、照明を合わせることで、統一感のある見た目を実現しています。
先ほど述べた配色カラーパレットも、写真イメージと合わせてみましょう。背景やアクセントとして活用することで、デザイン性をグッとアップしてくれます。
また写真イメージを利用するときは、利用ライセンスがどのようになっているのか、きちんと確認しておくことも重要となります。
その他（英: Others）
Gif アニメーションなど、その他のデザイン要素を活用するときは、どのように使うべきか、そしてどのように使うべきではないか、明確にしておきましょう。
これまで見てきた要素を利用し、スタイルガイドを作成することで、デザイン制作をスピードアップし、不要なデザイン変更を防ぐだけでなく、統一感のあるウェブサイトやブログスタイルを実現することができます。
スタイルガイドのより具体的なデザインサンプルは、デザイナーの勉強になる、有名ブランドのスタイルガイド厳選50個まとめを参考にどうぞ。
02. よく利用するグラフィック素材を決めよう。
新しいスタイルガイドを作成したら、どのようなグラフィックを活用するのか決めましょう。どのようなデザインに仕上げたいのかうまく理解することが重要になります。
たとえば、見出しとなるタイトルは、記事の内容を紹介することが目的です。通常これらのコンテンツはシンプルで、以下のサンプル例のように単語ひとつの場合もあります。
サンプル例のようなデザインを作成したいときは、以下の無料テンプレートを活用してみましょう。
インフォグラフィクスなど、統計データを伝えたいときは、グリッドなどを用いた、より複雑なレイアウトを用いることで、異なる情報をまとめることができ、情報の重要度もうまく表現することができるでしょう。以下の無料テンプレートを参考に、活用してみると良いでしょう。
03. 手軽にカスタマイズできるテンプレートセットを作ろう。
時間が経過するにつれて、特定のコンテンツでは同じようなグラフィックを利用するということが、すこしずつ見えてくるでしょう。もし見出しタイトルや引用文、データまわりのデザインをいつも作成しているなら、使い回しがきくテンプレート素材を用意し、制作時間を短縮してみましょう。
作成するテンプレート素材は、柔軟にデザインできるようにしておくことで、どの記事を読んだり、シェアしたのか分かりやすくしてくれます。
以下のサンプルサイトでは、どの記事にも毎回見出しタイトルと一緒に、美しい写真イメージを重ねています。
写真や文字テキストを、手軽に変更することができ、カスタマイズしやすいテンプレート素材を揃えておくと良いでしょう。
04. おわりに。
作成したスタイルガイドを参考にグラフィックを作成し、テンプレートを使えるときは率先して活用しましょう。文字テキストや配色を加えることで、重要度をあらわす階層のあるデザインを心がけ、他のデザイン要素や写真イメージの最終調整を行いましょう。
コンテンツがデザインを通して伝わっているか、いつも念頭においておきましょう。では、デザインを楽しんで！
