10分で差をつける！初心者でも簡単に出来る画像加工・編集ガイド

Goodpatch Blogエディターのkeoです。
みなさんは、ちょっとした画像の加工・編集に悩まされることはありませんか？

私は記事を書いている途中で、「この画像、ちょっとだけ色味を補正したいな」「イメージ通りの画像が見つからない」という場面によく出くわします。

そんな時、これまでは社内のデザイナーや、写真が得意なメンバーに画像の加工・編集をお願いしていましたが、自分でも出来るようになれば作業が効率的に進められるのでは、と気づきました。

そこで、色々な方法を試してみました。
今回はその中から、ブログで使用するOGP画像を簡単に加工・編集して作成する方法をご紹介します。

非デザイナーで、記事作成や資料作成をする機会が多い人に特におすすめです！

画像加工・編集に使用するツール

画像加工・編集ができるソフトと言えば、まずPhotoshopが挙げられるでしょう。

保存形式が豊富で、高画質で画像が加工できる非常に高機能なツールですが、使用するPCによってはオーバースペックにもなり得る側面があります。
私が使用しているのはMacBook Airなので、Photoshopはフリーズしやすく悩んでいたところ、Sketchを教えてもらいました。

基本的にSketchは、UIデザインのためにデザイナーが使用するツールです。

しかし、直感的に操作できる点と、私のMacBook Airでもサクサク動き、ストレスなく操作できる点が気に入って、愛用するようになりました。

OGP画像を作ってみよう＜所要時間10分＞

今回はSketchを使用して、複数の画像を1枚に収める方法をご紹介します。
私はよくブログで記事を書くので、オリジナルのOGP画像を作成したい時にこの方法を使っています。

イラストを描くなど凝った加工が出来なくても、複数の画像を組み合わせるだけで、1枚の画像で伝えられる情報量が増える上に、オリジナリティも出せると思います。

OGPとは何か

OGP（Open Graph Protocol）とは、Facebook,Twitter,はてなブックマークなどのSNS上でコンテンツがシェアされたときに表示される、いわばコンテンツの看板のようなものです。
看板は、どんなお店なのかが一目でわかる必要がありますし、お店へ入ってみたくなるデザインだとより意味がありますよね。
つまり、ユーザーがSNS上でコンテンツのOGPを見た時に、コンテンツの内容が連想できて、クリックしたくなることを意識して作成すると良いでしょう。

推奨サイズ

一般的にOGPの推奨サイズは、1200px × 630px以上とされています。

推奨サイズで作られたOGPは、Facebookでシェアされると以下のように表示されます。

画像が大きく表示され、コンテンツの看板としての役割を果たしていると言えますね。

しかし600px × 315px以下の画像を設定している場合、Facebookでは以下のように表示されます。

*1,*2 参照： ウェブサイトとモバイルアプリのシェアのベストプラクティス

画像が小さく表示されてしまうことにより、例えばOGPに文字が載っていた場合、すぐに確認することは難しいでしょう。
画像サイズが小さいと、最適なOGPとは言えません。高解像度デバイスでもはっきり表示できるように、最低でも600px × 315px以上のサイズで作成しましょう。

Facebookの開発者向けページに、OGPについての詳細な記載があるので、参考にしてみてください。
https://developers.facebook.com/docs/sharing/best-practices

推奨サイズがわかったところで、実際にOGP画像を作成してみましょう。
サンプルとして、本記事でOGPに設定しているこちらの画像の作成方法をご紹介します。

OGP画像は、以下の手順で作成します。

1. 1200 x 630 のアートボードを作成する
2. 分割するサイズのアートボードを作成する
3. 写真を配置する
4. エクスポートする

1. アートボードを作成する

まず、OGP画像の推奨サイズ 1200 × 630 のアートボードを作成します。

1-1 Sketchを起動し、「New Document」を選択

「New Document」を選択し、「Choose」をクリックします。

Sketchは言語が英語ですが、難解な英単語は使われていないので、悩まずに操作ができると思います。

1-2 アートボードを作成

「New Document」を選択すると、Sketchの操作画面が開きます。

操作画面左上にある「＋（Insert）」をクリックし、「Artboard」を選択します。

1-3 長方形を描く

中央の白い画面上にカーソルを持っていくと「＋」マークが表示され、四角を作成することができるので、画面上に適当な大きさの長方形をドラッグで描いてください。

操作画面の右側にある「Size」の項目で、長方形の高さと横幅を調整することができます。ここでは、推奨サイズの1200と630をそれぞれ入力します。

1200 × 630のアートボードが作成できました。これがOGP画像のベースとなります。

 

2. アートボードを3分割にする

次に、1で作成したアートボードを3分割にします。実際には、3分割にした細長いサイズのアートボードを3つ作成しています。

2-1 アートボードを作成

再び、操作画面左上の「＋（Insert）」をクリックし、「Artboard」を選択します。

1で作成したアートボードを、縦で3分割したおおよその大きさで、長方形を描きます。

1で行った手順と同様に、操作画面の右側にある「Size」の項目から、長方形の高さと横幅を調整します。1200 × 630を3分割するので、400 × 630の長方形が3つ並ぶことになります。

2-2 400 × 630のアートボードを複製する

2-1で作成した400 × 630のアートボードを選択した状態で、 command + c でコピーをします。続いて、 command + v でペーストをします。
すると、2-1で作成した400 × 630 のアートボードが複製されます。
これを2回繰り返し、400 × 630のアートボードが3つある状態にしましょう。

2-3 複製したアートボードを配置する

1200 × 630のアートボード内に、2-2で複製したアートボードを並べます。
Sketchは水平や直角の部分で赤いガイドが表示されるので、ガイドに従って3つのアートボードがぴったり収まるように配置します。

これで、1200 × 630のアートボードが3分割できたことになります。

3. 画像を配置する

アートボードが3分割にできたら、画像を配置していきます。

3-1 画像を読み込む

操作画面左上の「＋（Insert）」をクリックし、「Image」を選択します。
※画像は、Sketch上に直接ドラッグ＆ドロップで配置することもできます。

画像が配置できました。2で作成したアートボードの上に、画像が配置されている状態です。

3-2 レイヤーの重なり順を変更する

画像のレイヤーが一番上にあると、分割したアートボードを横切ってしまうことになります。
そこで読み込んだ画像のレイヤーを、分割したアートボードの下に移動します。

レイヤーをアートボードの下に移動することで、400 × 630のアートボードの中だけで画像の位置を調整できます。

残り2つのアートボードも同様に、レイヤーの位置に注意して、3枚の画像をバランスよく配置します。

3-3 アートボード全体のトーンを整える

最後の仕上げとして、3枚の画像のトーンを揃えるため、アートボード全体に白っぽい加工をかけます。
同じ明るさで撮影された写真であれば、この手順は省いてしまって構いません。

操作画面左上の「＋（Insert）」をクリックし、「Shape」▶︎「Rectangle」を選択します。

1200 × 630の長方形を描きます。アートボードと同様に、長方形の高さと横幅は、操作画面右側の「Width」と「Height」で調整ができます。

長方形の塗りつぶしの色を変更します。ここでは、カラーコードは #000000 にしました。
塗りつぶしの色は、操作画面右側の「Fills」から変更できます。その下にある「Borders」では枠線を変更できますが、ここでは使用しないため、チェックを外しました。

白い長方形を、3分割されたアートボードの上に持っていきます。この時、白い長方形のレイヤーが一番上に来るようにしましょう。

白い長方形と、3分割されたアートボードを完全に重ねます。

操作画面右側にある「Opacity」のスライダーをドラッグすると、透明度が調整できます。
これで白い長方形の透明度を調整し、アートボード全体に白いフィルターをかけたように加工します。

今回は透明度を30%にしました。
画像1枚ずつをソフトで加工する時間がない時、私はこの方法でフィルターの代用をしています。

これでOGP画像が完成しました！

4. エクスポートする

OGP画像が完成したら、エクスポート（保存）をします。

操作画面右上の「↑（Export）」をクリックします。
保存するアートボードは1200 × 630サイズなので、それ以外のアートボードはチェックを外します。

データに任意の名前をつけて、お好きな場所にエクスポートしたら、作成完了です。

以上がOGP画像作成の手順です。
Sketchに慣れれば、1〜4の工程は10分ほどで行うことができます。一工夫でオリジナリティが出せるので、ぜひトライしてみてください。

あわせて知っておきたい便利ツール、サイト

• Skitch
  こちらはSketchではなく、Skitchというアプリです。
  このツールでは、画像に文字や矢印を載せたり、強調したい部分を四角く囲むことができます。
  

  Skitchの機能の一部。矢印や四角をつけたり、モザイクをかけたりできます

  今回の記事でも、キャプチャの一部を四角く囲んで強調したい時には、Skitchを使用しました。
  さらにモザイク加工もできるので、モザイク加工だけを写真加工ソフトで行なっている人は、手間が省けるのでおすすめです。

• OGP画像シミュレータ作成したOGP画像をサイト上にアップロードすると、様々なパターンのプレビューを確認することができるツールです。
  シェアされた時、どのように表示されるのか事前に確認できるので、記事公開後に「OGP画像のサイズが小さすぎた！」と慌てる事態を防ぐことができますね。

• Sketch（Sketch 3）のメニューと環境設定を日本語へ意訳をしましたよ。｜creative tweet.
  Sketchのメニューを日本語に訳してくれています。
  「この操作はどのメニューから行うんだっけ」と迷った時に参考になります。

まとめ

今回は、非デザイナーでも簡単に出来る画像の加工・編集方法をご紹介しました！
短時間で出来ることを重視していますが、もっと効率よく出来る方法をご存知の方はぜひ教えてください。

便利ツールをさらに詳しく知りたい人は、以下の記事も参考にしてみてくださいね。