おかだの光画部トーク[111]画像編集Webアプリを使ってみよう/岡田陽一

投稿:  著者:  読了時間:6分(本文:約2,500文字)


ふわっとでは、クライアントのWeb担当者さんが自分たちで更新しやすいWebサイトを制作し提供しています。

主に、a-blog cms < http://www.a-blogcms.jp/ > というサイトを更新するシステムをサーバーにインストールして、ブラウザ上から簡単に更新できるサイトにしているので、クライアントのWeb担当者さんにも喜んでいただいてます。

しかし、いざ自分たちで更新するとなると、それ以前の素材の準備に、担当者さん達が苦労されたり悩んだりされてることがとても多く、その部分がボトルネックになり、更新が滞ったり、あまりパッとしないエントリーが量産されることになります。これは更新する人にとっても、サイトに訪れる人にとっても残念なことです。


自分たちで簡単に更新できるようになったら、そこに何を載せるのか、コンテンツの質が重要になってくるのですが、普段、会社の業務をしている企業のWeb担当者さんに、いきなり上手な写真の撮り方や、画像加工・編集の方法、より内容の詰まった文章の書き方などまでカバーするには、やはり大変すぎるはずです。

なので、その部分を少しずつでもサポートできるように、今年はこのコラムでも、Web担当者さん向けの内容を少し加えてみようと思います。

不動産・建築関連企業のWeb担当者さんが、こんなことに困っておられました。

「掲載している販売中物件の画像、この物件が売れたら『成約済』というスタンプ風の文字画像を合わせた画像にして掲載したい」

スタンプ風の文字画像は、画像に重ねて作ることができるように、あらかじめこちらで透過pngの画像を作ってお渡ししている。その画像と、物件の画像を合成するにはどうするかということです。

普通であれば、Adobe PhotoshopかIllustrator、Fireworksあたりをオススメするのが定番でしょうか。
・Photoshop < http://www.photoshop.com/products/photoshop >

これらのソフトは結構高額なものなので、制作が本業ではない一般の企業では、WordやExcelと違ってなかなか導入しにくいものでしょう。

次に、Photoshop Elementsあたり、チョイスがあります。
・Photoshop Elements < http://www.photoshop.com/products/photoshopelements >

これらのソフトもいいのですが、用途が限られていて、追加の出費を避けたい場合は、オンラインのPhotoshopのような編集ができるWebアプリがあります。無料です。

今回紹介するのは、オンライン画像編集Webアプリ「PIXLR EDITOR」です。
< http://pixlr.com/ >

まず、サイトにアクセスし、左側の「PIXLR EDITOR」をクリックします。
< http://flic.kr/p/kbtMFX >

次の画面では、画像を選択します。上から2番目の「コンピューターから画像を開く」を選択します。
< http://flic.kr/p/kbvu1o >

ここでは、パソコン内にある物件間取り画層を選択すると、画像が読み込まれます。
< http://flic.kr/p/kbvtVy >

パソコン内の画像のままだと、少しサイズが大きいので横1200ピクセル程度に縮小します。上部メニューの「画像」→「画像サイズ...」で出てきたパネルに数値を入れ「OK」
< http://flic.kr/p/kbtfRc >
< http://flic.kr/p/kbvtSh >

更に、用意してある「成約済」の透過pngスタンプ画像を読み込みます。メニューの「ファイル」→「画像を開く...」すると、画像が読み込まれます。
< http://flic.kr/p/kbtfKv >

スタンプ画像は背景が透明なので、グレーと白の格子模様で表示されます。メニューの「画像」→「全て選択」を選んで画像全体を選択
< http://flic.kr/p/kbtMgi >

「画像」→「コピー」を選びます。
< http://flic.kr/p/kbvtAq >

次に、間取りの画像の枠をクリックしてこちらの画像に、先ほどコピーしたスタンプ画像を貼り付けます。「画像」→「貼り付け」
< http://flic.kr/p/kbtfrK >

すると、間取り画像にスタンプ画像が重なって表示されます。
< http://flic.kr/p/kbvtzJ >

スタンプ画像を任意の位置に移動させます。左端に並んでいるツールの中から、右上の「移動ツール」をクリックして選択。
< http://flic.kr/p/kbtfpv >

スタンプ画像の上でクリック・ドラッグして好きな場所に移動させます。
< http://flic.kr/p/kbtfoP >

最後に、上部メニューの「ファイル」→「保存...」で名前を付けて保存して終了です。
< http://flic.kr/p/kbtM68 >

保存する際に、JPEGやPNGなど選択できます。通常はJPEGで保存すれば問題ないでしょう。

今回は、2枚の画像を重ねるだけでしたが、このWebアプリはもっと色々な機能が使えるので、また他の機能も紹介していきます。

今後もWeb担当者さんに役立つ情報を続けたいと思います。

【岡田陽一/株式会社ふわっと 代表取締役 ディレクター+フォトグラファー】
< mailto:okada@fuwhat.com > < Twitter:http://twitter.com/okada41 >

めったに雪なんて積もることのない、兵庫県の瀬戸内海沿いのエリアですが、先週はさすがに結構積もりました。でも一日で溶けてしまったので、関東や甲信地方の被害を思えば大したことありません。

また、今週も南岸低気圧が通るそうなので、雪の被害に遭われた地方のみなさんは、くれぐれもお気をつけてください。