【電子書籍・ブログで差がつく】無料で使える画像加工ツールとデザインのコツ

こんにちは、ユースケです。
北海道拠点のLIFE NAVIというIT系フリーランスチームの代表だったり、Amazonランキング1位獲得から権威性を活かした活動をサポートする「龍之介とみんなの学校」で教頭をしたりしています。

ここでは不定期ですが、電子書籍やブログに役立つ初心者向けのコラムを投稿しています。

第1回目のコラムではwebライティングの基本、
第2回目はあると便利なツール集を解説しました。

第3回目の今回は第2回目で紹介した
canva
フリー画像素材サイト
screen presso
これらを使った画像加工において役立つ情報やデザインのコツなど、少し深掘りして解説しますね。

「背景を透明化」の概念

さて、背景を透明化と聞いて想像がつきますでしょうか？
白い背景に画像を重ねた場合は気づきにくいのですが、画像の余白部分に白い背景が自動で設定されている状態。
こういった状態から白い部分をなくして、黒い背景のサイトや画像に自然になじむ状態にすることを言います。

文面での理解がしにくいと思いますので、今回はみん学の校長の画像を使って説明しますね。

このように、白い背景が残っていると黒い画像などに重ねた際に不自然な白い枠が出来ていますね。前回紹介したcanvaで作った画像も、余白があるデザインの場合このような背景が必ずついてきます。

この白い部分を消すことを「背景を透明化」と言います。

では、この背景を透明にする方法ですが、基本的にはAdobe photoshopなどのソフトを使って行うのがグラフィックデザインの定番です。
ですが精度はそこまで高くなくとも、十分画像の加工に使える方法がありますのでご安心ください。

WEBブラウザ上で画像をアップ⇒背景を透明にできるツールがあります。

PEKO STEPというサイト上で特にソフトのインストールも必要なく、画像切り抜きの技術も必要なく、透明にしたい色を透明化してくれる自動ツール。
PEKO STEPはこちら

いつでも何度でも無料で使えます。
特に難しい操作もありませんので、まずやってみることをおすすめします！

画像の切り抜き

上記は僕のTwitterアイコンですが、Twitterでは丸く表示されています。
ですが保存して他で使おうと思っても、右側のようになってしまう。
こちらもAdobe Photoshopなどがあれば簡単に加工が可能ですが、そういった有料のソフトが無くてもキレイに丸形に切り抜くことは可能です。
先ほどのPEKO STEP同様、Banner Koubouというサイトで特にソフトのインストールも必要なく加工ができます。
Banner Koubouはこちら

こちらも無料で難しい操作もありませんので、簡単に利用できるかと思います。ぜひ使ってみてください。

【デザインの基礎】初心者はフォント多用に注意

さて、電子書籍やブログにおいて、定期的な画像の挿入は必須化と思います。
モノによって量こそ差はありますが、電子書籍なら図解や扉ページ、ブログなら見出しごとなど1作品に複数の画像は使うことでしょう。

今は商用利用可能なフリー画像などもかなり充実しており、画像探しに困ることは無いですが・・・。
こんなブログ、見たことないですか？

・何かよくわかんないけど外国人の画像ばかり
・何かよくわかんないけどきれいな景色の画像ばかり

これが記事や書籍の内容にマッチしていればまだ良いのですが、関連性が不明な画像は全く意味がありません。
さらに、ブログであれば画像がオリジナルかどうかがＳＥＯに関わってきたりもします。

前置きが長くなりましたが、そういうワケでブログでも電子書籍でもオリジナルの画像があることは確実に見やすさの面でもあなたの作品の価値を高めてくれます。

ちなみにここでいう「オリジナル画像」とは何もクォリティの高い写真に限った話ではありませんのでご安心ください。

テキスト中心で作った画像や図解も立派なオリジナル画像です。
そこで素人がやりがちな失敗例として、フォントの多用があります。

上記は簡易的な表紙デザイン風画像ですが、左側がフォントを多用した例です。
素人デザインでありがちな考え方は、
①足し算デザイン思考
②パーツごとにデザインを考える

特に注意すべきはこの2つ。
①の「足し算デザイン思考」とは、ファッションで言うとガラ物に別のガラ物を合わせるようなもので、どんどんごちゃごちゃになり洗練された雰囲気が全くなくなってしまいます。

②の「パーツごとにデザインを考える」も①に近く、パーツそれぞれに最適なデザインを考えた結果、組み合わせたときにおかしくなるデザインのことを言います。

この2つの対策は簡単で、
・フォントは2種類程度にまとめる
・全体を見てから隙間を埋めるようにパーツをデザイン

これでたいていの場合この落とし穴には落ちにくいハズ。
参考になればうれしいです。

まとめ

さて、長くなりましたので今回の内容を振り返って終わりにしましょう。

１　背景を透明化の概念
白い背景なら問題ないですが、背景が別の色の場合残念なことになるので加工をお忘れなく！
webツールで簡単に加工できます。
PEKO STEPはこちら

２　画像を丸く切り抜く
Twitterのアイコンは丸いですが、それを保存しても画像は丸い状態で使えません。
こちらもwebツールでの加工をお忘れなく。
Banner Koubouはこちら

３　デザインの基礎
初心者はフォントの多用に注意。足し算ではなく引き算思考でデザインすると、洗練されたデザインができます。

今回の内容のさらに深堀りなどもっと聞きたいことなどありましたら、グループDMでも個人DMでも構いませんので、いつでもお待ちしています。

出版はあなたとみん学の第一歩。
その第一歩が遅れても絶対に放置しませんのでご安心ください。
どれだけ時間がかかっても、目指すもっと先のゴールに向かって一緒に頑張りましょう！