画像編集用にオススメのwebアプリケーション(Pixlr Editor編)

WordPressを更新する際に、お客様から「オススメの画像編集ソフトはありますか?」とご質問を受けることがあります。

実はWordPressにも「メディアを編集」という機能があるのですが、最小限の編集機能しか実装されておらず、使い勝手もイマイチなのであまり効率的とは言えません。

そこでお勧めなのが、ブラウザ上で画像編集ができるwebアプリケーションです。デジカメやスマートフォンで撮影した写真をブログに掲載する程度であれば、高価なソフトを購入しなくても、ほとんどの作業がこれらのサービスで事足りてしまいます。しかも大半が無料で利用できます。

今回はその中でも一押しのPixlr Editorをご紹介します。Pixlr Editorは米国Autodesk社のサービスで、非常に多機能かつ日本語にも完全対応していますので初心者の方でも安心してご利用になれます。

ここでは画像編集の基本となる「トリミング」と「リサイズ」について解説します。WordPressに画像を登録する際は、事前にこれらの操作をマスターしておくと、体裁が整った一貫性のあるページを維持することが可能になります。

目次

  1. Pixlr Editorにアクセスする
  2. サイズ変更したい画像を選択する
  3. メニューを日本語表示に変更する
  4. 表示倍率とズームイン・アウト
  5. 画像をトリミングする
  6. 画像を保存する
  7. 画像をリサイズする
  8. まとめ

1.Pixlr Editorにアクセスする

まずは以下よりPixlr Editorにアクセスします(ここではGoogle Chromeを例に解説させて頂きます)。
Pixlr Editor

Pixlr Editor 初期画面

Pixlr Editorにアクセスすると「Flashを有効にしてください」という初期画面が表示されますので、まず「To enable Flash, please click here.」の「here」をクリックします。

Flashの実行を許可する

画面左上に「pixlr.comが次の許可を求めています」のポップアップが表示されますので「許可」ボタンをクリックします。

2.サイズ変更したい画像を選択する

編集画像選択画面

Flashを有効にすると目的に応じてボタンを選択する画面に切り替わります。今回はPC内の写真を読み込んで編集しますので真ん中の「OPEN IMAGE FROM COMPUTER」をクリックします。

ちなみに「CREATE A NEW IMAGE」は新たにオリジナルの画像を作成する場合、「OPEN IMAGE FROM URL」はインターネットに公開されている画像を読み込んで編集する場合に選択します。

画像選択画面

PC内からサイズ変更したい画像を選択して「開く」ボタンをクリックします。

3.メニューを日本語表示に変更する

メニューを日本語に変更する

Pixlr Editorはデフォルトのメニューが英語になっていますので、「Language」メニューをクリックして「日本語」を選択し、日本語の表示に切り替えます。

4.表示倍率とズームイン・アウト

現在の画像サイズと表示倍率

画像の左下には①現在の表示倍率(12%)と②実際の画像サイズ(横4,000ピクセル×縦2,667ピクセル)が表示されています。※①の表示倍率は使用されているモニターの解像度によって異なります

なお、この画像の本来のサイズは5,568ピクセル×3,712ピクセルですが、Pixlr Editorは縦横最大で4,000ピクセルまでしか編集ができないので、それを超える画像は自動的に上限までリサイズ(縮小)されて読み込まれる仕様になっています。

表示倍率を等倍に変える

表示倍率を等倍(100%)にしたい場合はツールパレットの「拡大ツール」をダブルクリックします。

ナビゲーターでの表示領域確認

その際に画像全体のどの部分が表示されているかは画面右上にある「ナビゲーター」パレットの赤い枠で確認することができます。

画像が表示される最大倍率に戻す

等倍表示を元の表示倍率(画像が全て表示される最大倍率)に戻すには「ハンドツール」をダブルクリックします。また、表示倍率を細かく調整したい場合は、画像の上にカーソルがある状態でマウスホイールを手前に転がすと徐々に拡大、奥に転がすと徐々に縮小されますので、この操作を覚えておくと便利です。

5.画像をトリミングする

切り抜きツールを選択

この画像を指定サイズ(ここでは横740ピクセル×縦350ピクセル)にトリミングしてみましょう。まず、画像が全て表示されている状態で、ツールパレット左上の「切り抜きツール」を選択します。

固定化メニューの出力サイズを選択

続いてオプションバーの「固定化:」から「出力サイズ」を選択します。

トリミングしたいサイズを指定する

さらに右側の「幅:」と「高さ:」にトリミングしたいピクセルサイズをそれぞれ入力します。なお、Pixlr Editorのオプションバーは入力フィールドの選択状態が見づらいので、入力ミス防止の為、各フィールド内を「Ctrl + A」で全選択後に数値を入力すると確実です。

切り抜きたい範囲と位置を指定する

画像の左上から右下にドラッグし、範囲の調整は四隅のコーナーハンドル、位置は指定範囲内にカーソルを合わせると表示される移動ツールをドラッグして切り抜きたいエリアを確定します。

写真を切り抜く

エリア確定後は指定範囲内をダブルクリックして写真を切り抜きます。

等倍で画質を確認

切り抜き範囲を確認

切り抜き後は「拡大ツール」や「ハンドツール」を使って意図した画質や範囲で切り抜かれているかを確認します。思うような結果が得られない場合は「Ctrl + Z」で手順を戻し、もう一度範囲指定からやり直します。

6.画像を保存する

保存を選択

トリミング後の画像を保存するには、ファイルメニューから「ファイル→保存…」を選択します。

画像を保存ダイアログ

表示された「画像を保存」ダイアログで「名前:」に半角英数字で画像のファイル名を入力します。基本的に編集画像が写真の場合は「フォーマット:」と「クオリティー:」はこのままでOKですので、右下の「OK」ボタンをクリックします。

リサイズした画像を保存する

PC内の所定の場所に画像を保存して完了です。

7.画像をリサイズする

画像サイズを選択

画像のリサイズはトリミングと同様の手順で編集したい画像を開き、「画像」メニューから「画像サイズ」を選択します。

画像サイズを指定

表示された「画像サイズ」ダイアログボックスで「縦横比を固定」にチェックが入っているのを確認し、「幅:」に変更したいピクセル値を入力すると、縦横比を維持したサイズが「高さ:」にも自動で指定されますので、そのまま「OK」ボタンをクリックします。

※なお、元画像よりも大きいサイズを指定したり、縦横比を変更すると画質が劣化してしまいますので注意が必要です。

リサイズ後の画像

※横幅720ピクセル×高さ480ピクセルにリサイズされた画像

8.まとめ

いかがでしょうか?トリミングやリサイズはPixlr Editorに実装されている一部の機能ですが、動作も非常に快適ですし、編集後の画質も市販のソフトと比較して全く遜色がありません。

また、Photoshop(プロ向けのレタッチソフト)と操作パネルやショートカットが共通な面も多いので、まずはPixlr Editorで画像編集の基礎を学び、ある程度習得ができたら本格的なソフトに移行するのもありだと思います。

それにしても無料でここまで出来るのは凄いですね!画像編集に興味のある方は是非お試しになって下さい。

Share!