ふわっとでは、クライアントのWeb担当者さんが自分たちで更新しやすいWebサイトを制作し提供しています。
主に、a-blog cms < http://www.a-blogcms.jp/
> というサイトを更新するシステムをサーバーにインストールして、ブラウザ上から簡単に更新できるサイトにしているので、クライアントの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
>
めったに雪なんて積もることのない、兵庫県の瀬戸内海沿いのエリアですが、先週はさすがに結構積もりました。でも一日で溶けてしまったので、関東や甲信地方の被害を思えば大したことありません。
また、今週も南岸低気圧が通るそうなので、雪の被害に遭われた地方のみなさんは、くれぐれもお気をつけてください。
なので、その部分を少しずつでもサポートできるように、今年はこのコラムでも、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
>
めったに雪なんて積もることのない、兵庫県の瀬戸内海沿いのエリアですが、先週はさすがに結構積もりました。でも一日で溶けてしまったので、関東や甲信地方の被害を思えば大したことありません。
また、今週も南岸低気圧が通るそうなので、雪の被害に遭われた地方のみなさんは、くれぐれもお気をつけてください。