HP運営ブログ

カテゴリー: 画像編集・画像加工 のアーカイブ

2016.02.18.イキイキした[人が集まるホームページ]を作るワンポイントアドバイス

 

以前にもお伝えしたように思うのですが、弊社が販売しておりますホームページ簡単作成システム『Groop(グロープ)』では『Pixlr Editor(ピクセラエディタ)』で画像編集がしやすい管理画面を採用しています。

 

画像編集ソフトにもいろいろあります。

高額なものから無料のものまで。

あなたはどのようなソフトを普段利用されていますか?

  

私たちが普段利用しているのは『Photoshop(フォトショップ)』という「Adobe」から出されているソフトですが、制作業務に特化していない企業だと無用の長物になる可能性のあるソフトです(^^;)

「時々、ホームページやブログに掲載する写真を少し改造したい!」というのであれば、Pixlr Editor(ピクセラエディタ)がお勧めです。

インターネット環境がないと使えませんが、無料というのが魅力ですね(^^)

 

そんな『Pixlr Editor(ピクセラエディタ)』の使い方を簡単に紹介しているサイトがいくつかあります。

今日はそのありがたいサイトを紹介させて頂きます!!

 

  1. 【無料】Pixlr Editor(ピクセラエディタ)の機能説明&使い方〜高機能画像処理ソフト
  2. Pixlr Editorの機能いろいろ 〜画像編集基本機能編〜
  3. 超優秀!無料画像編集ソフト「Pixlr Editor」の基本的な使い方その1

 

このようにまとめていてくれると、本当に助かりますよね(*⌒∇⌒*)

 

パソコンが苦手な人は、ツールを見ただけでも後ずさりするかもしれませんが、簡単なところから触って手下さい。

 

さしあたっては色補正から始めるのが良いですね。

色補正に関しては、こちらを参考にしていただければ嬉しいです(*⌒∇⌒*)

 

ホームページ作成初心者に送る「画像の色補正」

 

色補正をしたり、トリミング(切抜き)をするだけでも印象は随分変わりますから(^^)

見栄えがするように画像加工ができたらワクワクしてきます!

するとアプリを触ることが楽しくなってくるので、上達も加速するはずです!

 

あなたのホームページやブログがイキイキしてくるように、是非活用くださいね!

イキイキした活気あるサイトには、徐々に人が集まりだしますから(^^)

 

今日はここまでです。

最後までお読みいただいて、ありがとうございます。

 

 

2016.01.12.伝わる★商品・サービスイメージで売上アップに貢献する色(色彩・カラー )

Web運営初心者のためのブログ連載記事|ビジュアル・バナーで営業できるホームページを育てる!  『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』第4回Web運営初心者のためのブログ連載記事|ビジュアル・バナーで営業できるホームページを育てる!

『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』第4

 

1回目の『画像加工は、売上アップにつながるのか?

第2回の『売上をアップに貢献する★バナーキャンバス作成

第3回は『伝わる★商品・サービスイメージで売上アップに貢献する画像加工 (切抜き)』ご覧いただけましたか?

いかがでしたでしょうか?

 

前回は切抜きを通じて「形」にあるメッセージ性についてお伝えしました。

「形」を利用するのは、切抜きだけではありませんね。

 

バナーに使う素材の1つひとつの形にも言えることなので、形の持つメッセージ性について覚えておいてください。

これ実は写真撮影の時にも使える考え方なので、いろいろな物に応用してください。

 

前回話の中で「色」にもメッセージはあるような話を少しだけ出しているのですが、今日は色にあるメッセージ性について簡単に伝えていこうと思います。

色も奥が深いので、詳細を伝えると色だけで延々とブログを書くことになってしまうので少しだけ(^^;)

 

あなたは色彩心理という言葉を聞いたことがありますか?

色彩には心を動かす効果があると考えられています。

心に働きかけるので、癒しなどにも活用されていることが多いですね。

 

色で心に働きかけるというのは、生活場面でたくさん取り入れられています。

身近なところで言いますと

 

危険を直観的に伝えるために赤色や黄色

 

※落石注意の画像

 

※通行止めの画像

 

犯罪抑制のために青色(街頭)

 

ブルーライト(蒼い街頭|青い街頭)

 

老舗感を表すために…黒色・茶色

 

老舗には茶色

 

などです。

このように書き上げると「なるほどなぁ〜〜」ってなりませんか(^^)

 

危険を直観的に伝えるための「赤色・黄色」はセール時に使われやすい色合いです。

危険を直観的に伝えるということは、注目されやすい色だからセール時に使うんですね。

 

同じセール時でも、「安いよ!」を伝えるより「高級な品が」を伝えたければ、黒色をベースに使うとまた違った雰囲気でのセール案内になりますね。

色にはこのようにメッセージが含まれ、その色の組み合わせによってメインとなる「伝えたいメッセージ」が変わってきます。

またターゲットによっても色合いは変わります。

 

赤ちゃんならパステルカラーでしょうし、アスリートならビビットカラーかもしれませんし、年配の方ならダークな色合いかもしれません。

「かもしれません」と表現したのですが、ターゲットだけで色を限定できないからです。

伝えたい内容やサービス、取り扱っている商品などを組み合わせて、初めて色が決まってきます。

 

冒頭でも伝えたように、色の事を詳細に伝えようとするとこのブログは色のことで延々と続いてしまいます。

いろいろな役立つ情報を伝えたいので、かいつまんでしか紹介できないのが残念です。

 

ただ、せっかくしった情報を自分の中で肥やして、自らの力に変えることはできます。

今日伝えた「色にはメッセージがある」という知識を元に、手元にある商品の色に「疑問」を持ってください。

『なぜ、その色が使われているのか?』

電話は白色が多いですね?それは何故だと思いますか?

高速道路の案内板は青色ですよね?それは何故だと思いますか?

コカ・コーラのラベルの色は「赤色」ですよね?それは何故だと思いますか?

 

実際の答えは、各関係機関に聞かないとわからないかもしれませんが、仮説を立てることはできます。

その仮説を元に、他の商品と見比べてみてください。

すると「共通するポイント」が見えてきます。

 

それをあなたのホームページのバナーに取り入れると良いのです!!

 

最近の商品だと、その概念を壊すことで目を引くために、意外な色をあえて使っていると考えられる商品もあるので、そういった商品を探してみるのもおもしろいかもしれません(^^)

 

今日はここまでです。

で「伝えたいことを直観的に伝えることができる」ということを覚えておいてくださいね。

 

 

にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
にほんブログ村

http://blog.with2.net/img/banner/c/banner_1/br_c_1072_1.gif
ウェブデザイン ブログランキングへ

2015.12.14.お気に入り必須★ホームページに息を吹き込むお得な使える素材サイト!

ホームページ作成に際して、バナーを作ったりイメージ画像を編集する機会があるかと思います。

ブログの更新でも、記事内容に沿った写真等を入れると更に読んでもらえる記事のエッセンスともなりえます。

 

しかしながらイラストを描くにしても写真を撮るにしても、それを生業としていない場合なかなか難しいですよね?

 

そんな時役立つのが素材サイト!!

素材サイトも無料のものから有料のものまでイロイロありますが、今回紹介させていただくのは、格安で利用可能な素材サイトです(^^)

もちろん商用利用も可能です!

 

少し前までは無料だったのですが、つい最近有料になってしまいました(TOT)

しかし、懐に優しい価格(*⌒∇⌒*)

 

プレミアム会員サービスの利用料金は296/ 月ですが、201512月末まで183円でご提供となっている模様!!

登録しておくなら今のうちです!!

 

イラストなら『イラストAC

無料イラストなら「イラストAC」

 

写真なら『写真AC

写真素材なら「写真AC」無料(フリー)ダウンロードOK

 

シルエットなら『シルエットAC

シルエット イラストの無料ダウンロードサイト「シルエットAC」

 

この3サイトあわせてプレミアム会員サービスの利用料金は296/ 月ですが、201512月末まで183円で提供となっています。

これからホームページの更新に力を入れていこうと考えているなら、早めの登録をお勧めします!

 

もちろんイラストも描けます!写真も素晴らしいのが撮れます!という方には必要ないとですが…(--)

 

ホームページのイベントバナーやサービス案内、会社案内にイメージ画像を考えているなら、クオリティの高い素材を活用して、ホームページからの売上アップに少しでも近づいていきましょう!

 

今連載中の『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』でも、こういった素材を利用しつつ、画像編集やバナー作成の説明をさせていただく予定ですので、こういった素材サイトをいろいろ今のうちにチェックしておくのも良いですよ(*⌒∇⌒*)

 

にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
にほんブログ村

http://blog.with2.net/img/banner/c/banner_1/br_c_1072_1.gif
ウェブデザイン ブログランキングへ

 

2015.12.09.伝わる★商品・サービスイメージで売上アップに貢献する画像加工 (切抜き)

Web運営初心者のためのブログ連載記事|ビジュアル・バナーで営業できるホームページを育てる!『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』第3回Web運営初心者のためのブログ連載記事|ビジュアル・バナーで営業できるホームページを育てる!

『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』第3

1回目の『画像加工は、売上アップにつながるのか?』 第2回の『売上をアップに貢献する★バナーキャンバス作成』はご覧いただけましたか?

いかがでしたでしょうか?

 

前回は『PIXLR』を使ってキャンバスを作成するお話をさせて頂きました。

この『PIXLR』の利用方法についてもっと解説しても良いのですが、面白みがないですよね(--)

ということで、いろいろ作りながら『PIXLR』の使い方も同時に覚えてもらえるように進めることにしました!!

(*⌒∇⌒*)

 

バナーやメインビジュアルを作成する際に、各工程をきちんと踏むことでイメージしたものを作成していけます。

ですからこの工程の説明もしたいところですが、前回がアプリケーションの使い方ということで面白みにかけたので、画像の理解に今日は触れたいと思います(^^)

 

今日のテーマは『伝わる商品イメージ・サービスイメージで売上アップに貢献する画像加工(切抜き)』です!

 

切抜き画像で伝わる画像を作る

画像加工は大きく分けて「画像補正」「切抜き」「エフェクト」などがあげられます。

今日はその中でも「画像の切抜き」について説明します。

切り抜くことで何が表現できるのかというと、「動き」「感情」「雰囲気」「主役の強調」「優先順位」「導線」などです。

 

以前書いた「画像加工は、売上アップにつながるのか?」の記事ではトリミングという加工を施して主役を主張しています。

 

画像の主役を強調し訴求力をアップし売上に貢献できる画像作成をします

 

このトリミングを利用することで、主役が際立っていますよね!?

このような切抜き加工を施して「動き」「感情」「雰囲気」「主役の強調」「優先順位」「導線」を表現することの説明をさせて頂きます。

今日は主に「動き」「感情」「雰囲気」の部分の説明になります。

 

形のメッセージを知って、お客様に伝えたいイメージを伝える

まずは形の中にあるメッセージを理解しましょう。

この形によるメッセージ性はバナーやメインビジュアルを作成する上でいろんな場面で活躍するのでしっかり理解しておきたい部分です。

 

まずこの形をご覧ください。

 

丸い形

 

丸い形です。

 

次にこちら。

四角い形です

四角い形です。

 

次はこちら。

星の形です

星の形です。

 

形だけを見ていてイメージが違うのが解りますか?

丸は

丸い形

  • やわらかい
  • 優しい
  • 朗らか

といった言葉が似合うのではないでしょうか?

 

四角は 

四角い形です

  • きちんとした
  • 真面目な
  • 安定

といった言葉が似合うのではないでしょうか?

 

星形は 

星の形です

  • 楽しい
  • 無邪気

といった言葉が似合うように思いませんか?

 

この形に「色」が加わったり、大きさ位置配置変わったりすることでメッセージ性は多彩に広がりますが、今回は「形」に重点を置いて解説しますね。

この他にも世の中にはいろんな形が存在ししています。

矢印もあれば、三角も、台形も、楕円も、線も、波線もイロイロあります。

 

どの形にもメッセージがあります。

あなたなりに、いろいろな「形」が発しているメッセージを考えてみてください。

そういったことを普段から見て考えることで、実際に商品バナーやメインビジュアルを作ろうとした際に、どうしたら売上につながるのか、訴求力がアップするのかといった仮説が立てられ、ただキレイな整っただけではない、売上に貢献できる画像を作ることができるんです。

しかし、これはターゲットにもよって変わりますので、試行錯誤は必要です。

 

めんどくさい!見直しをするなら表現の基本なんていらないですよね!?

形のメッセージ性を知っていても、結局見直しするのか!検証するのか!試行錯誤するのか!という気分になっている方もおられます?(^^;)

だけどこれって重要だし、必要なんですよ…(*⌒∇⌒*)

 

どうしてこのように検証をするのに、形のメッセージ性だとか、前回お話したようなキャンバスのサイズであるとかを知っておく必要があるのか?

どうせ検証するなら「別に適当でいーじゃん!」ってなってしまうかもしれませんが、適当にすると「仮説」が立てられず、「見直し」がやみくもになり、結局いつまでたっても売上につながらないということになってしまうのです。

基本的な考え方を知っていると、仮説を立てやすく検証がすばやくできるようになり、売上につながるまでの期間が短くもなりますし、生きた検証ができてくるんです!!

 

これはビジネスで画像を加工したり、バナーを作成したり、メインビジュアルを作る上では必要不可欠なことなんです。

遊びで作るなら適当でいいんですけどね(^^)

 

メッセジがあるのは、形だけじゃない

先にも書きましたがメッセージがあるのは「形」だけじゃありません。

 

  • 色にもあります。
  • 場所にもあります。
  • 大きさにもあります。
  • 配置にもあります。

 

このように伝えたいメッセージを伝える方法はいろいろな要素が重なり合って表現されているんです。

より伝えたいメッセージを1枚の画像にしていく過程の中で、これらの形や色や場所、大きさ、配置にあるメッセージを組み合わせていくんですね。

そうすることによって商品やサービスの売上に貢献できる画像作成がおのずとできるようになってきます。

また色や、大きさ、場所、配置にあるメッセージについても今後お話させていただこうと考えています。

  

実際に見てみましょう!

ではいろいろな形で画像をいろいろな形に切り抜いたものを見てみましょう!

 

いろいろな売上に貢献する画像加工の形

 

どうですか?

1つひとつの切抜き画像をじっくり見てくださいね。

 

できるだけ大きさでのイメージが加わらないように、大きさを同じような大きさにしています。

また写真も同じものを使っています。

形によってイメージが変わるのが伝わっていますか?

 

この切抜きを『PIXLR』で表現できます。

今回は時間の都合で『PIXLR』での切抜きの仕方をお伝えできないのが残念ですが、このような基本的な考え方を覚えておくと、どのようなアプリケーションを使ったとして売上に貢献する画像作りはできますので、今回の記事の内容を覚えておいてくださいね。

また、いろんな形に隠されたメッセージに意識を向けてみてください。

 

家電にも形があります。乗り物にも形があります。広告内にも形があります。体系にも形があります。

そんな形にどんなメッセージがあって、私たちはその形を見て無意識化にどんなメッセージを伝えられているのか?

そいった目線を持って家を街中を探索してみてください(*⌒∇⌒*)

とっても勉強になりますよ!!

 

ちなみに、デザインに正解はありませんから感じるままを感じてみてください(^^)

 

 

このブログでは

ホームページで伝えたいことが伝わり、安心感を与えることで行動に繋がる、『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』の連載を始めています(*^^*)

バナー作成の話にも触れていきますので、楽しみにしていてください!

 

また連載記事としては、アクセス解析ツールであるGoogleアナリティクスの使い方がわからない、分析や読み取り方がわからないと言う方のために、1記事3分で読める『3分でわかるGoogleアナリティクス』の連載も始めています。(*^^*)

他にも楽しくワクワクとホームページの作成、運営、管理、更新に取り組めるような記事を、これからも書いていきますのでまた遊びに来てください!

お待ちしています(*⌒∇⌒*)

 

今日の記事も最後まで読んでいただきありがとうございます!

この記事が役に立ったという方は下記の2つのボタンをクリックしていってくださいね!

 

にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
にほんブログ村

http://blog.with2.net/img/banner/c/banner_1/br_c_1072_1.gif
ウェブデザイン ブログランキングへ

 

 

2015.12.07.売上をアップに貢献する★バナーキャンバス作成

Web運営初心者のためのブログ連載記事|ビジュアル・バナーで営業できるホームページを育てる!『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』第2回

Web運営初心者のためのブログ連載記事|ビジュアル・バナーで営業できるホームページを育てる!

『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』第2

1回目の『画像加工は、売上アップにつながるのか?』はご覧いただけましたか?

いかがでしたでしょうか?

 

画像を加工するということは、直接売上にもつながっていくのでここで皆さんと一緒にいろいろな画像加工方法について今後もお話をさせて頂いていきますね!

 

ここで言う画像加工方法とは、画像補正も含みますし、バナー作成メインビジュアルの作成方法まで幅広くお伝えできたらと考えています。

 

そうそう。

この連載記事を始める前にホームページ作成初心者に送る「画像の色補正」という記事を書かせていただいています!!

 
こちらは画像補正のお話を簡単にさせていただいた記事です。

こちらの記事も参考にしてください!!

  

では今日の本題に入ります(*⌒∇⌒*)

今日は売上アップに貢献するバナーキャンバス作成です!

 

画像補正・バナー作成、メインビジュアル作成 利用アプリケーションについて

画像補正やバナー作成に使用するアプリケーションについてですが、通常私たちはAdobe Photoshopというアプリケーションを利用しています。

月々2,180円で利用可能なアプリケーションです。

 

しかしながら皆さまは本業もありつつ、ホームページを作成したり、運営管理するはずです。

できればここにコストを掛けたくないのでは?と考え、Photoshopのように使い勝手のフリーのアプリケーションで説明させていただくのがベスト!と思い、このブログでは無料で使えるWebサービス 『 PIXLR を利用して解説させていただきます。

Webサービスというだけあって、このアプリケーションはインターネット環境があることで利用可能です。

 

他に無料で使える使い勝手の良いアプリケーションとしては『GIMP』というアプリケーションもあります。

こちらは書籍も販売されていて、PCにインストールするアプリケーションなのでインターネット環境がなくても使えます!

どちらを使って説明させていただいても良かったのですが、『 PIXLR 』のWebサービスは弊社サービスのGroop」にも組み込んでいますのでこちらで説明させていただくことにしました。

 

考え方を学ぶのにこのブログを活用される場合は、どのようなアプリケーションを使用していただいても大丈夫です。

作業として学ぶには、できれば同じアプリケーションを使用していただいた方が解りやすいと思います。

ただ、1つのアプリケーションは使いこなしていくと同じようなことができるアプリケーションであれば、使い勝手が似てきますので、ある程度他のアプリケーションに乗り換えても感覚的に使いこなせると思います。

 

Webサービス 『 PIXLR 』を開く

ではWebサービス 『 PIXLR 』にアクセスします。こちらをクリックしてください。

すると下図のようなページが開きます。

 

Webサービス-『-PIXLR-』

 

画像の加工をすすめていくにはPIXLR EDITORと書かれた、下図の部分をクリックしてください。

 

Webサービス-『-PIXLR-』

 

今度は下図のような画面になります。なりましたか?

 

Webサービス-『-PIXLR-』

  

主に利用するのは1と2になります。

 

Webサービス-『-PIXLR-』

 

1は最初から画像を作成する場合。

2は既にある画像を加工する場合に利用します。

 

今回は1を選択してキャンバスを作成してみましょう。

 

バナーキャンバスを作成する

ここでは、国際基準のバナーサイズでキャンバスを準備してみます。

バナーサイズには国際基準というものがあるんですよ(^^)

 

個人サイトにこの国際基準を当てはめることは日本では少ないですが、本来バナーの役割は広告画像に当たりますのでこういった基準が決まっているのです。

プチ知識として知っておくと良いかもしれません(^^)

 

あ、キャンバスの説明を忘れていました!

キャンバスとは「画像サイズ」です。

先に書いた国際基準で設定するとユーザーに見やすい・読みやすい・見なれた親しみやすい大きさになるのでクリックされやすい大きさとも考えられます。

クリックされやすい大きさということは、売上アップにも貢献する可能性が高いということにもなります。

 

国際基準では作らず、独自のサイズにする場合は、

 

l  クリックしやすい

l  見やすい

l  読みやすい

l  解りやすい

 

大きさを想定してサイズを決定してください。

そうすることで、売上を上げるバナーやメインビジュアルに1歩近づくことができます。

 

必ずホームページを運営する上での目標はあるはずです。

 

そこにはターゲットがいて、そのターゲットにバナーをクリックしてもらうことで、ページ遷移が発生したり、商品を購入していただいたりと、売上につながる行動があるはずです。

 

ターゲットによって文字のサイズ等が変わってきます。

するとそこに掲載したい情報量によっても、画像サイズは変わってくるはずです。

あとは全体的なレイアウトによっても変わりますよね。

そういったことを複合的に考え想定することで、売上に繋がりやすくなるか、売上に繋がりにくいかということにもなります。

画像のサイズもしっかり売上を見据えて決定していきましょう!

   

ではここでは国際基準の「300 x 250」のサイズで作成していきます。

下図の「1」をクリックしてください。

 

Webサービス-『-PIXLR-』

 

すると下図のような表示になります。

 

Webサービス-『-PIXLR-』

  

表示されているこのウィンドウ内に設定を入力していきます。

 

Webサービス-『-PIXLR-』

 

 

名前:ファイル名 任意のもので良い

プリセット:こちらに指定したいサイズがあれば、それを選択

幅・高さ:プリセットになければ任意の数字を入力

透明:作りたい画像によって変わる

 

ここでは

名前:バナーテスト

プリセット:さわらない

幅・高さ:幅(300)・高さ(250

透明:さわらない チェックを入れない

 

Webサービス-『-PIXLR-』

 

入力が完了したら、「OK」をクリックします。

 

すると下図のように新しいキャンバスが開きます。 

 

Webサービス-『-PIXLR-』

 

この画面のここがキャンバスに当たり、作業領域となります。

 

Webサービス-『-PIXLR-』

  

できましたでしょうか?

 

今日はここまでです!

今日はキャンバスを作成するお話からさせていただいていますが、まだまだ基本中の基本部分です。

売上を上げるバナーや、伝えたいイメージを伝えるメインイメージを作る方法は今後順序立てて解説させて頂きますね。

できる限り具体的な画像や状況を想定して、解りやすく説明させてもいただきますし、時にはPCを離れてというワーク的なものも提案させていただくこともあります(*⌒∇⌒*)

 

とにかく楽しくやらないと、売上を上げるバナーや、伝えたいイメージを伝えるメインビジュアルを作成するのは難しいと思います(--)

いやいや作ってては、それが表に出てしまいますからね

 

基本は楽しく!!ワクワク!!です(*⌒∇⌒*)

楽しんでいろいろ作ってください!

 

 

あ〜〜今日はおもしろい話ができませんでしたね〜〜残念です><;

もっと画像をいじくっていろいろしていきたいですよね〜〜〜!

 

次回からはできる限り画像をさわりながら、具体的な話をしていこうと予定しています!!

楽しみにしていてください(^^)

 

このブログでは

ホームページで伝えたいことが伝わり、安心感を与えることで行動に繋がる、『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』の連載を始めています(*^^*)

バナー作成の話にも触れていきますので、楽しみにしていてください!

 

また連載記事としては、アクセス解析ツールであるGoogleアナリティクスの使い方がわからない、分析や読み取り方がわからないと言う方のために、1記事3分で読める『3分でわかるGoogleアナリティクス』の連載も始めています。(*^^*)

他にも楽しくワクワクとホームページの作成、運営、管理、更新に取り組めるような記事を、これからも書いていきますのでまた遊びに来てください!

お待ちしています(*⌒∇⌒*)

 

今日の記事も最後まで読んでいただきありがとうございます!

この記事が役に立ったという方は下記の2つのボタンをクリックしていってくださいね!

 

にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
にほんブログ村

http://blog.with2.net/img/banner/c/banner_1/br_c_1072_1.gif
ウェブデザイン ブログランキングへ

 

2015.12.01.画像加工は、売上アップにつながるのか?

Web運営初心者のためのブログ連載記事|ビジュアル・バナーで営業できるホームページを育てる『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』第1回Web運営初心者のためのブログ連載記事|ビジュアル・バナーで営業できるホームページを育てる!

『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』第1

 

ホームページに、撮ってきた写真をそのまま掲載していませんか?

知らない間に、機会損失していませんか?

画像加工が、売上に繋がっている!
ということを意識してホームページの更新をしていますか?

 

まずは見てください

画像加工をしていない写真…もしこれが商品写真だったら売り上げアップに繋がるのだろうか…

 

旅先で撮影した写真。

形は崩れているソフトクリム。後ろを走るおじさん。明らかに天気は悪く寒そうな・・・

どうよ・・・(・・;)

 

これ、旅先で撮ってもらった写真。

なんだかなぁ・・・ですよね(^^;)?

  

この時私はと〜〜〜っても、ソフトクリームが食べたくてやっと買えたんですっ!!

2時間近く乗った電車で疲れ、歩いて疲れ、甘いものが食べたかった!

そしてやっと出会えたソフトクリーム!!即買い!

 

なので、めっちゃ嬉しかった!!そして、めっちゃおいしかった!!

 

そして、お店のおじさんがめっちゃ時間をかけてグルグル巻いたわりに形が崩れてて

ヘンテコな形になってるのよね(^^;)

しかしこのヘンテコな形のおかげで、一緒に旅した仲間と「崩れる〜〜!」とか言って楽しめたのですよぉ(*´▽*

私の中ではキラキラの思い出の写真なんです!

  

しかし、この写真でそれって伝わります???

 

多分
伝わりませんよね〜〜〜?
(・・;)

 

もし、これが商品写真だったら、売り上げアップにつながると思いますか?

 

 

で、ちょこっと加工を加えたのがこちら(*´▽*

 ↓↓↓

画像加工をやってみた。これなら売り上げに貢献できそうでしょ!

 

どうですか?

先程の写真と比べて、先程私が書いた旅の楽しさ伝わってきません?

ソルトクリームのゆがみも、愛らしい(*´▽*)

 

もう1度並べるとこんな感じです。

 

画像加工をせずにそのままの写真をホームページに掲載…。売上アップに貢献するでしょうか?

 

↓↓

 

画像加工をしっかりしました!楽しさワクワクを写真に乗せました!売上アップに貢献しそうじゃないですか?

 

下の写真だと、楽しさや明るさ、面白さなんかがなんとな〜〜く伝わってきますよね!!

写真加工ってこんなに大切なんです!(*´▽*

 

もし、これが商品写真だったら、売上アップに貢献しそうでしょ(^^)!?

  

プロカメラマンも画像調整しています

知ってました??

プロのカメラマンも画像に調整を施しているんですよ。

 

プロカメラマンは撮影するときから、画像調整を想定した写真の撮り方をしてるんです。

画像劣化のない写真の撮り方をして、綺麗に出力するためのに「現像」という工程を踏みます。

 

デジタルカメラ時代に「現像って?」って思っていたけれど、写真の調整をすることなんですね。

なので、写真撮影素人の皆さんが画像調整・加工を施すなんて、当たり前!

自信を持って堂々とおこなってください!!

ただ、嘘にならないように(^^

伝えたいことが伝わる写真にしていくことを心がけましょう。

 

伝えたいことが伝わる写真にするは

  • 美味しいものが美味しそうに
  • 楽しいものが楽しそうに
  • 優しい人が優しそうに
  • お得なものがお得なように
  • 高価なものが、高価に
  • 可愛いものが、可愛らしく

ですね。

 

ホームページに掲載する写真は

  • 会社のイメージを伝える
  • 人柄を伝える
  • 商品詳細を伝える
  • ホームページの歩き方を伝える

など、役割は盛りだくさん!

弊社ではお客様が提出してくださる写真をホームページに反映させることが多いのですが、いただいたままの写真だとお客様が伝えたいことが伝わらないといったことが起こることもあります。

  • 写真が暗い
  • 何を撮影したかわかりづらい
  • 主役がどれかわからない
  • 画像劣化が激しい
  • 背景が伝えたい事とは合わない

など、いろいろあります。

その時は、

  • 色合いを調整
  • トリミング
  • 画像加工
  • コピーの挿入

などを施し、お客様が伝えたいことが伝わりやすいように画像に加工を施します。

 

違和感を人は嫌う

写真を加工するということは、上記で書いたように、伝えたいことが伝わるようにするためと、もう1つ意味があります。

それは、クオリティを合わせ「安心感」を与えるという事です。

 

今出回っているホームページのクォリティは高いものが多くなってきていますが、そのクオリティと写真のクオリティが合っていないと、見ている人は無意識に「違和感」を感じます。

人って「違和感」を嫌うようにできています。

 

「違和感」を感じた時、あなたならどうしますか?

その場から立ち去りたくなりませんか?

 

人の心の動きとして「違和感」は「危機的状況」でもあるんです。

そこから身を守りたくなります。

だから、立ち去ってしまうんですよ。

または、攻撃的になってしまったり

 

これって機会損失ですよね(−−;)

写真1つでこんなことが起こるんです。

 

だからこそ、ホームページに載せる写真の画像調整や画像加工って必要なんです!

画像調整や画像加工をすることで、売上にもつながってくるんです!

  

これまで、撮ってきた写真そのまま載せてまいせんでしたか?

撮ってきた写真そのままで大丈夫!って思っていませんでしたか?

 

例え修正していたとしても

「伝えたいことを伝える」「安心感を与える」ということまで意識していましたか?

 

そういうことまで意識して始めて、ホームページを訪れてくれる方の目に止まり、興味を持っていただくことができ、行動に繋がるんです!

 

このブログでは

ホームページで伝えたいことが伝わり、安心感を与えることで行動に繋がる、『目に止まる!興味を持つ!すぐ行動!効果期待の画像加工・画像作成講座』の連載を始めていきますね(*^^*)

バナー作成の話にも触れていきますので、楽しみにしていてください!

また楽しくワクワクとホームページの作成、運営、管理、更新に取り組めるような記事を、これからも書いていきます!

 

今日の記事も最後まで読んでいただきありがとうございます!

この記事が役に立ったという方は下記の2つのボタンをクリックしていってくださいね!

 

 

にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
にほんブログ村


ウェブデザイン ブログランキングへ

 

 

2015.10.30.売れるネットショップとは?~商品撮影編~

おはようございます本日の担当は川畑です

今までにネットショップについていくつか記事を書いてきていますが、今日は「商品を綺麗に撮影する方法」について書きたいと思います。

ネットショップも開設した、周知広告も出した、けれども商品画像がイマイチ...というお悩みをお持ちの方は参考にしてみて下さい

 

過去の記事

 

光が重要!

どれだけ高画質のカメラで撮影したとしても、写真自体が暗いと見栄えが悪くなります。

かと言って、屋内の蛍光灯の光だけだと、変な影が入り込んだりして不自然な写りになってしまいます!

そこでオススメなのが...太陽光!!!!

太陽光であれば写真自体も明るくなり、なおかつ自然な写りになります。

ただ太陽光は天候の状況次第でバラバラの写りや、時間帯によっても違った写りになるというデメリットもあります...。

 

なので、手堅く簡易撮影キットを使用する!

撮影キットと言っても、プロの人が使っている大きな撮影キットではなく、Amazonや楽天で折り畳み式の机の上でできる簡易撮影キットが販売されています。

価格も5000円〜10000円とお手頃で、これを使えば変な影も入らず、自然な感じで簡単に撮影ができます!

 

実際に、撮影キットで撮った写真がこちらです

変な影が入ったりせず、蛍光灯の光だけで撮るより明るく映っています。

さらにこれをスマホのアプリやカメラの機能を使って、明るさ補正をかけていきます。

 

補正をかけると...

明るくなりましたね!

 

ただ、これだけだと味気ないというか、寂しい感じです...

さらに明るくして、文字も入れちゃいましょう!

それっぽくなってきました!

 

ワンポイントアドバイス

アクセサリーや服飾を商品にするならば、実際に着けている画像(着画)を載せている方が、お客様からしてもイメージが湧きやすいので、できるなら着画を撮っておきましょう!

 

そしてこれをさらに1枚の画像にしてみると...

ただ単に商品単体を写すだけより、商品のサイズ感がわかりやすく、見やすい写真になりました!

 

また、小物関係(この場合だと指輪を載せている三角コーン)などを利用すると、お店っぽい見せ方にもなります

貝殻や砂を利用すると季節感がでたりと、小物も使い方次第で色々なシチュエーションを表現できる重要なアイテムです

 

 

お金をかけずに撮影したいという方は、商品の下に白い板や机を置くだけで多少明るくもなりますし、LEDライトを持っている方は、横から光を当てるのではなく上からあてると、綺麗に撮れます。

 

ちょっとした工夫で綺麗に写真を撮る事ができるので、皆さんも自分に合った方法を考えてみてください

 

にほんブログ村 IT技術ブログへ
にほんブログ村


ウェブデザイン ブログランキングへ

2015.10.21.ホームページ作成初心者に送る「画像の色補正」

おはようございます。山田です(*⌒∇⌒*

この『Groop運営ブログ』はホームページ作成初心者の方へ情報を提供しています。

過去記事にも役立つ内容が多々ありますので、ブログ内をうろうろしてみてくださいね(^−^)

 

ホームページ作成初心者の、気持ちがなえるポイント

ホームページ作成初心者の気持ちがなえるポイントにはいくつかあります。
そのポイントを挙げてみましょう。

 

  • HTMLのソースを見て断念
  • CSSで装飾をしようと思い、まったく思い通りにならずに断念
  • ホームページを作ろうといろいろ調べたが、用語がわからず断念
  • 周りに聞ける人がいなくて断念
  • 画像編集がうまくいかずなぜかダサいと感じて断念
  • 「バナーを作って誘導しよう!」と思ったものの、思い描くバナーが作れなくて断念
  • 競合他社とホームページを見比べたとき、自身のサイトがいまいちに思えて断念
  • 更新時間がとれなくて断念
  • 得たい結果に繋がらなくて断念
  • キャッチコピーがさっぱり決まらないず断念…
  • 文章を纏められなず断念…

 

心がなえるポイントは他にもあるかと思いますが、大まかには上記のようなことで心がなえて断念してしまう方が多いようですね。

この断念ポイントホームページを1から作ろうとしている場合や、更新作業を自分自身で行ないたいと考えている方に共通するポイントもありますね。

 

今このブログを読んでいただいているあなたはどうでしょうか?

もしこれらのポイントに1つでも当てはまるものや近いものがあれば、私たちが運営するこのブログが役立つと思いますよ!

いや役立たせてみせますとも!

役立てると嬉しいですからね(*⌒∇⌒*

 

なので、いろんな困りごと等をコメント欄に書き込んでいただけるとありがたいです(*⌒∇⌒*)

 

ホームページ作成初心者がホームページ作成を楽しむために

先ほど挙げたポイント1つひとつを見直すことで、ホームページ作成初心者の方でも、楽しくホームページ作成や更新をできる可能性はたくさんあります!

それら1つひとつを一緒に見直せていけたら嬉しいです(^^)

上記に上げた箇条書きとは順番通りにはいかないですが、順次1つひとつのポイントに対する対策をご紹介していきますね。

また対策方法って1つではないので、いろんな方向からお伝えできるようにしていきます(^−^)

楽しみにしていてください!

今日は画像編集について少しばかりお伝えしていきますね。

 

画像の色調整をする

自身で撮影された写真をホームページに掲載しようとした場合に、写真が暗すぎたり明るすぎたりということもありますよね。

プロデザイナーはそういった写真でもPhotoshopという高価なアプリケーションを利用し、ホームページに合わせて見栄えの良い明るさに調整しています。

しかし一般の方が、そのような高価なアプリケーションを購入するのはコストがかさばるので現実的ではないでしょう。

そこでお勧めしたいのは無料で使えるWebサービス 『 PIXLR です。

 

PIXLRで色調整を実践!

では下記のように写真撮影をしたものの、「なんだか暗い」「ホームページに掲載しても見栄えが悪い」と感じられる写真しかなかったとします。

画像の色味が悪い少女の画像

 

そんな時に『PIXLRの出番です!

PIXLRにアクセスします → クリック

 

すると下記のようなページが開きますので、下図の案内で『ここをクリック』と書かれている部分をクリックしてください。

PIXLR 初期画面

 

すると下記のようなページになりますので、今回はパソコンに既に入っている画像の補正をしたいので、下図の案内で『ここをクリック』と書かれている部分をクリックしてください。

PIXLR PC内の画像を選択

 

画像を選択する画面が出てきますので、編集する画像をパソコンの中より選択して「開く」ボタンをクリックします。

PIXLR 画像選択画面

画像を開いたら下図のようになります。

PIXLR 画像を開いた

 

やっと画像を開くとこまでこぎつけましたね(^^;)

 

ここから画像の色補正をするのですが、今回は一番簡単な方法をお伝えしますね。

下図の案内で『ここをクリック』と書かれている「調整」をクリックします。

PIXLR 画像調整

 

すると下図のようにサブメニューが表示されますので、案内で『ここをクリック』と示しています「自動レベル」をクリックしてください。

PIXLR 画像調整自動レベル補正

すると、どういうことでしょう〜〜〜〜〜〜!!!

 

 

 

 

一発で良い色味の画像に補正修正をすることができました!

PIXLR 画像の色補正終了

 

画像の状態によっては、もう少し細かな段階を踏まないと画像補正が難しい場合もありますが、だいたいは今回案内した方法で色補正は可能です。

このように色補正した画像をホームページに掲載するだけで、ホームページの見た目は全然違ってきます。(*⌒∇⌒*)

ホームページ作成初心者の方はぜひ1度お試しくださいね。

 

尚今回ご紹介した『 PIXLR 』は弊社Groopと連動しています。 

ですからアップロードした画像の編集画面はいっぱつで『 PIXLR 』が開き即座に画像の補正・編集・加工を行うことができます。

  

と話が脱線しましたが(^^;)…

現在ブログランキングに参加しているので、今回の記事が少しでも役立ったという方は下記ボタンをクリックしていってください(*⌒∇⌒*)

 

2015.09.03.ホームページにおける画像や写真の形式

はじめまして本日のブログ記事担当の川畑です

今日のテーマは「ホームページにおける画像や写真の形式」です

みなさんは、ホームページに画像や写真を載せた時に

「せっかく綺麗に撮ったのに画質が悪くなった...「画像の読み込み速度が遅い

と思った事はありませんか?

今回はその悩みをちょっとでも軽くできるよう、それぞれの特徴をまとめていきますので参考にしてみて下さい

 

【 基本となる形式 】

ホームページで使用する形式は、基本的にJPEG・PNG・GIFの3種類です。

では、この3種類にはどのような特徴があるのか...?まずはJEPGから見ていきましょう

 

【 JEPGとは? 】

JEPGとは「Joint Photographic Experts Group(ジョイント・フォトグラフィック・エキスパーツ・グループ)」の頭文字をとった略語で、通称「ジェイペグ」と呼ばれています。

 

拡張子名:JEPG,JPG,jpeg,jpg

用途:写真のような自然色が多い時

特徴:24ビット(1670万色)フルカラー対応ができ、写真のような高画質を必要とする場合に適しています。

メリット:高画質で保存でき、なおかつファイルサイズが抑える事ができるので、表示速度が早くなります。

デメリット:保存する際に、データの一部を切り捨て圧縮しているので保存を繰り返すと画質が悪くなってしまいます。また、元に戻す事ができないので保存の時には注意が必要です。

 

 

【 PNGとは? 】

PNGとは「Portable Network Graphics(ポータブル・ネットワーク・グラフィックス)」の頭文字をとった略語で、通称「ピング/ピン」と呼ばれています。

GIFよりも扱える色数が多くなっていて、今一番web上で使用されているのがこのPNGです。

 

拡張子名:PNG,png

用途:イラストや写真などを保存する時

特徴:標準化団体W3Cが推奨している形式で、フルカラーを劣化させずに保存する事が可能です。

メリット:JPEGと同様、フルカラー対応でなおかつ、PNGはデータを捨てずに保存されるので、データを復元する事ができます。また、透過色を加える事ができるので、背景などを表示させたい時などは便利です。

デメリット:多くの場合、データを切り捨てず保存するPNGは画像によってはJPEGよりもファイルサイズが大きくなる場合があります。

 

【 GIFとは? 】

GIFとは「Graphics Interchange Format(グラフィックス・インターチェンジ・フォーマット)」の頭文字をとった略語で、通称「ジフ/ギフ」と呼ばれています。

ひと昔前では、GIFが主流だったのですが、使用するにはライセンス料が必要になった時にPNGが開発されたため、使用頻度は昔に比べるとかなり減ってきています。

 

拡張子名:GIF,gif

用途:色数(256色以下)が少ない簡単なイラストやアイコンなどに適しています。

特徴:色数が少なければ少ないほど容量をできる限り減らして、表示させる事ができます。

メリット:一番のメリットはやはりファイルサイズが小さい事です。また、同じGIFアニメーションといった動く画像を作る事ができます。

デメリット:扱える色数が256色と少ないため、写真や色数が多い画像に対しては綺麗に表示できません。

 

【 結局どのファイル形式がいいの? 】

とりあえず3種類の特徴や大きなメリットとデメリットがわかったところで「じゃあどれが一番いいの?」という問題になると思います。

 

その答えは...一番いいというものはナイ!!(笑)

 

というのも、それぞれ特徴があるという事は使用する画像や写真によって、適した形式があるからなんです。

高画質で、ファイルサイズが小さくて、画質が劣化しない...なんて形式があれば悩む必要はないと思います...。

しかし、個人的な意見ではありますが標準化団体W3Cが推奨しているPNGが一番無難ではないかと思います。

 

 

 

今回は画像や写真の形式について簡単にまとめただけの記事になりましたが、みなさんのお悩みがちょっとでも解消できれば光栄です

 

これから勉強していき、「こんな方法が最適」「こうすれば制作が楽になる」というのがあれば、また記事にしていこうと思っていますので、今後ともよろしくお願いいたします

  1 / 1  

無料で今すぐ作ってみる

ブログ内検索

フィード

分からないこと、聞きたいことご相談頂ければわかりやすく・丁寧にお答えいたします。

PAGE TOP