【メディア運営者必見】記事でつかうオリジナル画像を超手軽に作るノウハウを完全無料で公開します
記事の内容にそった、オリジナルの画像があったほうがUXがよい。
と、メディア運営者ならだれしも思っているんじゃないでしょうか。
SEOとはUXであるという観点に立つと、画像で視覚的にわかるほうが直感的で、明らかにUXが優れています。
しかし現実には、
- デザイナーを別途雇わないとできない=単価が高くなってしまう。
- 発注のオペレーションをできる人がいない。
- コスト面や生産本数の観点から、どうしてもテキスト >>>> オリジナル画像 の優先順位になってしまう。
などの課題をかかえていると思います。
しかし本当は、オリジナル画像があったほうが良い。というのは心の底ではわかっているとおもうんです。
例えばアプリマーケティング研究所をご存知でしょうか。アプリマーケティング研究所では、各センテンスをオリジナル画像でグラフィカルにまとめており、非常に見やすいんですよね。
アプリマーケティング研究所はイラストもオリジナルで作成しており、かなり力を入れて画像を制作していることが伺えます。
ここまでやるとかなりハイコストになってしまうので、本記事ではもっと手軽に70点を取りに行くことを目指します。
たとえばこういう感じのやつ。
こういうのとか
こういうのとか。
こういうのです。すいません最後ふざけました。
さて具体的な制作ノウハウに入る前に、全体の指針を説明させて下さい。
そのほうが、なぜこういう仕組みなのかが分かりやすくなると思います。
指針というのは、要は「こういうことに配慮してこのメソッドを組み上げました」というものですね。
指針
今回紹介する方法は、メディア企業に記事生産の仕組みとして組みこめることを前提にしています。
さらにそのうえで、次の条件をみたすように研究した結果行き着いたものです。
- ブラウザで動く画像編集ソフトを使う。ソフトウェアのインストールが不要。
- 作ったものをクラウドで管理できる。
- 画像のバージョンが管理できる。
- 画像の再編集が可能。
- 誰でもカンタンに作れる。覚えることが少ない。
これら5点は満たしています。そんなわけでよくあるWebメディア企業で導入しやすいようになっています。
どうですか？もしこの時点で「良さそうじゃねぇか！」とおもって頂けたなら、この先もぜひ読んでみて下さい。きっと気に入っていただけると思います。
【本編】オリジナル画像制作ノウハウの全て
さてここからはいよいよ制作ノウハウの説明に入っていきたいと思います。
まずは使用する画像編集サービスから紹介します。
今回の主役、『Googleスライド』です。
Googleスライドを中心に制作体制を作ることで、だいたいいい感じに回ります。
他に必要なものは、
- フリーの画像素材
- Googleドライブ
ぐらいじゃないでしょうか。使い方を含めて把握しておくとより捗るかと思います。
Googleスライドは、機能の少ないオンラインのPowerPointです。
画像やテキストを適当に並べればそれっぽい画像を作ることが出来ます。
吹き出しや図形も必要最低限はそろっているので、あとはフリー素材の画像を持ってきて並べるだけでオリジナル画像を作ることが出来ます。
冒頭でもお見せしたこちらの画像を例にとって説明しましょう。
- まず、背景に四角い図形をもってきて、オレンジに塗りつぶします。
- その上に白い丸の図形を重ねます。
- なやんでる男性の素材を配置
- Googleスライド備え付けの吹き出し図形を3つ配置。変形、コメント入れ、枠線を太く、塗りつぶしを白に設定。
- 図のタイトルをテキストで入力
たった5分でハイ、完成。カンタンですね。
これをスクリーンショットし、記事に貼り付けたらおしまいです。
大枠はこれだけなんですが、もうちょっと細かいはなしをあれこれしていきますね。
もっとGoogleスライドのステキ機能を知りたい方や、クオリティを高めるTipsに興味がある方はぜひ読んでみて下さい。
勝手にバージョン管理してくれる。
Googleドキュメントやスプレッドシートもそうなんですが、変更履歴は全てGoogleが保存してくれています。
過去に戻りたいときはここを押すと全履歴を参照でき、好きなタイミングに戻れます。
記事ごとにオリジナル画像を管理できる
記事ごとにスライドのファイルを分けましょう。すると記事 対 スライドファイルが対応するので、あとあと楽になります。
たとえば、記事をリライトする際に、画像にも少し手を加えたい、といったシチュエーションで、参照しやすくて便利ですね。
使うのがかんたん
ツールボックスを見てもらえばわかると思うんですが、本家PowerPointよりかなり機能が削られていて、シンプルになっています。他のGoogleのサービスともほぼ共通なので、スプレッドシートやドキュメントを使ったことのある方ならかなりカンタンに使いこなせると思います。
最低限使える上で、とりわけ覚えたほうが良さそうなことは、
- アイテムの表示順序入替え
- 枠線の太さ、塗りつぶし。またこれらの色を透明にすること。
- 特殊図形の変形。吹き出しの > を上下左右につけ替えられる。
- 画像の切り抜き。いらない箇所を削れる。図形にそって切り抜ける。
- 画像URLから画像を挿入できる
- 図形の中に直接テキストを打てる
- キャンバスの大きさを変更できる。
ぐらいでしょうか。この辺覚えとけばかなり捗ると思います。
クオリティをあげるためのTips
普通に作っていると、フォントやカラーパレットの色のせいでどうしてもチープになりがちなんですよね。なのでいろいろ駆使してかっこよくしていきたいです。
Tips1 テキストボックスを画像で用紙する。
黒板やノートの画像を用意しておき、そのうえに画像を載せるだけでかなりかっこよくなります。
また、いろんな画像で使いまわすことで、サイトとしての統一感も生まれますよね。
Tips2 テキストを画像として貼り付ける
Googleスライドではフォントが限られているし、文字への修飾もあまりできません。
なので文字をリッチにするために、外部から画像でもってくるというのはありです。
こういうのですね。しかしこれには2つの問題があり、その場での再編集が不可能であるということと、あとから見たときにどうやって作ったのかがわからないということです。僕はあとから作り直しやすいように、Web上にあるジェネレーターサービスで作ることと、どのジェネレーターを使ったのか、スライドのメモ欄に書くということで対策をしています。
自分のサイトに合った、オシャレなジェネレーターを探してください。
おわりに
この仕組みも完璧ではないので、次のようなデメリットがあります。
- フォントを追加できないので既存のフォントしか使えない。
- 書き出すとフォント設定が全て無視され、Arialになる。
- かっこよくするにはデザインセンスが要る（さすがにね）
これは70点を目指すノウハウなので、ダサさには目をつぶっています。
とはいえ、デザイナーがしっかり先導してガイドラインを作れば、ある程度まではおしゃれに作れるようになると思います。そういう意味では拡張性も担保されているかなと思います。
この仕組みを使えば、少なくともだいぶ外注しやすいと思うんですよね。
内容指定はラフ画でもいいし、テキストで説明してもいい、H3ごとに内容をまとめた画像を作って下さい、など、どのレベルでも、一応発注自体は成り立つと思います。あとは求めるクオリティとコストとの相談ですね。
そんなこんなで、オリジナル画像を作るノウハウ、いかがでしたでしょうか。
メディアはどこも量産重視で中身はゴミ記事だなんだ言われてますが、裏を返せば一本一本のクオリティがあがっていけばほんとにみんなハッピーになれるということなんですよね。わかりやすいサイトが世に増えたらいいなぁと思います。
頑張ろうWEBメディア人！
