画像加工に対して敷居の高さを感じておられないでしょうか。ホーページなどで情報を発信しようとした時に、画像を使用することでより内容をイメージしてもらいやすく、伝えやすくすることができます。効率良く質の高い画像加工を行えるようになることは、質の高い記事作りにも繋がります。人物を消したり、大きな画像加工が必要となる場合にはAdobeのPhotoshopなどの高機能な画像編集ソフトを使います。細かいレタッチなど行う場合は専門知識、技術の取得が必要となるケースがありますが、画像サイズを統一したり直感的に彩度や明度を調整したりするくらいの加工であれば、ウェブブラウザ上でも行うことができるのです。

今回は、簡単な画像加工をする時に重宝する。Google Chrome上でサクサク動作する便利なChrome拡張機能2つと、使い方をご紹介します。なお、どの拡張機能もインターネットが繋がったオンライン環境下でのみ作動しますので、その点だけご注意ください。

画像のリサイズ

画像のリサイズ

効率よく画像のリサイズを行うことに特化したChrome拡張機能です。画像編集の際に、難しい操作が必要な機能などはなく、直感的に扱えますので英語がわからない方でも簡単に使いこなせると思います。自由に縦横比を調節できるだけでなく、16:9、4:3のようによく使われる比率に自動で調節する機能もあり、まとめて同じ比率で揃えた写真を用意する際に重宝するChrome拡張プラグインです。拡張機能を利用してブラウザ上で画像加工を行うようにしておくと、使用するパソコンが変わってもアプリをインストールする必要なく、Googleのアカウントにログインするだけで、どのパソコンでも画像加工を対応できるようになります。本格的な画像加工ツールを使いこなしている方にとっても便利なシーンがあると思いますので、ぜひ一度使ってみて、いざという時にスムーズに使えるようにしましょう。

使い方

step1.


まず「画像のリサイズ」をインストールしたら、画面右上に表示されているアイコンをクリックします。すぐに画像の編集画面が表示されますので、画面左上の「Upload Image」をクリックして加工したい画像をアップロードしてください。

step2.


続いて、トリミングする画像の比率を選択します。画面右下に表示されている、リサイズの比率ボタンから選択してください。デフォルトは16:9です。

step3.


次に、リサイズする範囲を選択します。画像内に表示されている枠(step2で指定した比率になっています)を動かして、トリミングする位置を決定できます。
ウィンドウ下の拡大/縮小ボタンで、アップロードした画像を拡大/縮小させることも可能です。拡大/縮小は、パソコンのタッチパッドを二本指で上下にスワイプすることで変えることもできます。
範囲を決定したら、ロックアイコンをクリックして画面をロックしておきましょう。誤って画面を動かすことが無くなるため安心です。再び動かしたい場合は、ロック解除アイコンをクリックしてください。

step4.


リサイズする範囲を決めたら、画像を保存します。「Get Cropped Canvas」をクリックすれば、保存完了です。

フォトエディタ 画像の PhotoStudio

PhotoStudio

PhotoStudioは画像を読み込み、加工編集することができるChrome拡張機能です。ライブラリ上から画像を読み込むだけでなく、パソコンのカメラを使って撮影した写真をすぐに加工することもできます。こちらも先に紹介した「画像のリサイズ」と同様に、シンプルな操作で加工できますので、画像編集系のツールに慣れていない方の導入ツールとしてオススメです。

使い方

step1.

「フォトエディタ 画像の PhotoStudio」をインストールしたら、画面右上に表示されているアイコンをクリックします。「フォトエディタ 画像の PhotoStudio」は、ブラウザ上のアイコンをクリックして開きます。アイコンをクリックするとメニューが表示されますので、「オープンPhoto Studioフォトエディタ」を選択してください。

step2.


加工画面が表示されますので、画像をアップロードしましょう。ライブラリから写真を読み込む場合は「Upload a picture」を、パソコンに備え付けのカメラで撮影して取り込む場合は「Take a picture」をクリックしてください。

step3.


画像をアップロードすると上画像のように表示されますので、画面の上下に表示されているアイコンから加工します。

まず、画面上部に表示されているメニュー(上画像赤枠部分)をご紹介します。

  • New:新しい写真を読み込む際に利用する機能です。
  • export:編集した画像をダウンロードする際に利用します。
  • Zoom:拡大縮小を行えます。+アイコンとーアイコンで操作してください。

続いて、画面下部に表示されているメニュー(上画像青枠部分)は、左から順に以下のとおりです。

(1)Filters

写真にフィルターをかけることができる機能です。メニューアイコンをクリックすると表示される、画像下のサンプルフィルターから選択してください。

(2)Rotation

画像を90度回転させられる機能です。メニューアイコンをクリックするとさらに回転メニューが表示されますので、クリックしてください。

(3)Flip

画像を反転させる機能です。メニューアイコンをクリックするとさらに表示される反転メニューをクリックしてください。なお、左右反転、上下反転ともに可能です。

(4)Brightness
明るさを調節する機能です。メニューアイコンをクリックして表示される、画像下のつまみで調節します。

(5)Contrast

コントラストを調節する機能です。こちらも画像下のつまみから調節します。

(6)Saturation

画像の彩度を調節する機能です。こちらも画像下のつまみから調節します。

(7)Crop

画像のトリミングを行う機能です。まず、ある程度の形・大きさを画面下のメニューから選択します。その後枠の四隅を微調整して範囲の選択してください。選択後は、画面右下のチェックアイコンをクリックして保存します。

(8)Radial Blur

「ラジアルブラー」と呼ばれる特殊効果をつける機能です。選択した箇所を中心に急速に遠ざかるような効果が付与されます。一眼レフで撮影したような加工を行いたい時につかうフィルターです。効果の範囲を選択したら、画像右下のチェックマークをクリックして保存してください。

(9)Tilt-Shift

「ティルトシフト」と呼ばれる特殊効果をつける機能です。選択した箇所を中心に周りがぼやける効果が付与されます。
効果の範囲を選択したら、画像右下のチェックマークをクリックして保存してください。

(10)Frames

画像の周囲にフレームをつける効果です。画像下のつまみでフレームの太さを、Colorで色を調節することができます。
フレームの太さ、色を決めたら、画像右下のチェックマークをクリックして保存してください。

(11)Stickers

ステッカーを挿入できる機能です。
画像下のサンプルのうち、好きなものをクリックすると画像上に表示されます。ステッカーの右下の、白い丸(画像青枠部分)をドラッグして、大きさを変更することも可能です。ただし、ステッカーを斜めにするなどの編集はできません。
ステッカーの素材と配置場所、大きさを選択したら、画像右下のチェックマークをクリックして保存してください。

(12)Text

文字にテキストを入力する機能です。
写真に表示されている枠内にテキストを入力することができます。枠の位置は枠そのものをドラッグすることで変更可能で、枠の大きさは枠の右下の、白い丸(画像青枠部分)をドラッグして調整してください。
画像下のバーからフォントを選択することもできます。ただし日本語には未対応ですので注意してください。「Foreground」では文字の色を「Background」では背景の色を変更できます。
完了したらチェックマークをクリックしてください。

(13)Brush

画像に直接書き込みをする機能です。画像下の項目から、色と大きさを変更することができます。

まとめ

今回は、画像加工に特化したGoogle Chromeの拡張機能をご紹介しました。拡張機能を利用してブラウザ上で画像加工をすれば、たとえば使用するパソコンが変わってもアプリをインストールする必要がありません。いつでもどこでも、インターネットさえ繋がれば同じ環境で作業をすることが可能です。Googleのアカウントにログインするだけで、どのパソコンでもサクサク画像加工できるのは、意外と便利です。拡張機能の多くは日本語化されていないことがありますので、導入する際に難しく感じやすいですが、今回ご紹介した2つは、操作性・機能性ともに直感的でシンプルなものを選びました。使ってみると簡単に使いこなせると思います。作業環境がコロコロかわることがある方、画像加工のツール選びにお悩みの方は、ぜひ試してみてください。