グーペを実際に使い使用感を記事にしました

お店のホームページ運営に強い「グーペ(Goope)」を実際に使い、使用感やグーペの特徴を記事にしてみました。店舗運営で忙しい中更新も簡単で、コスパにも優れているサービスです。お店のホームページをご検討の方は、選択肢の一つとしてみてはいかがでしょうか?

インフォメーション

2017 / 02 / 16  17:40

お店の写真を紹介する際の、画像の入手や注意点についてご説明

フラワーアレンジメント教室のイメージ画像。楽しそうに教えてもらっている。

「教室の楽しさも伝わるといいですね。」

 

 

3回シリーズで画像の使い方のコツについてご説明して
きましたが、ほんの少しのコツを実際にやってみるだけで、
お店のサイトがずいぶん素敵に見えると実感された方も
いらっしゃるのではないかと思います。

ちょっとしたコツとは・・

 

○適正な画像サイズの写真を使う (コツその1)

○画像加工ソフトを使いこなす (コツその2)

   コツその1、その2は、別ページでご説明しています
  → 適切なサイズの画像を使い、かっこよくお店を紹介する

○拡張子の使い方を覚える (コツその3)

  コツその3は、別ページでご説明しています
  → 画像ファイルの拡張子を理解して、お店をきれいに紹介しましょう

○画像の入手方法。どこで手に入れるのか? (コツその4) (今回ご説明します)

○できれば入力したい「altタグ」(コツその5) (今回ご説明します)

 

たったこれだけのことでもきちんと実践できれば
見違えるように見栄えが良くなりますので、ぜひお試しください。

 

さて、今回は、「画像の入手方法」と「altタグ」に
ついて記事を書きたいと思います。

 

 

まずは、画像の入手方法を3つご紹介します

(画像をうまく使いこなすコツ その4です)

 

1.「プリントスクリーン」はもっとも簡単な画像取得方法

 

前回の記事を読まれた方は、もう知っている知識ですが、
もう一度ご説明します。

 

パソコンの画面を取り込む「プリントスクリーン」が
1つ目の方法です。ソフトも機材も必要ないので一番手軽です。

 

私のパソコンでは下のふたつのキー

 

パソコンのFNキーの写真 と パソコンのPRTSCのキーの写真

 

を同時に押すだけで画面の取込ができます。

 

パソコンでFNキーとPRTSCキーの位置を示した写真

 

いまあなたのパソコンの画面に映っている画像は
この方法で簡単に取り込めますので、試しに同時押しを
やってみてください

・・・

ひとまず、何もおきませんよね。

 

まずは、コピーされた画像がパソコンに取り込まれている
状態ですので、次はアウトプットする作業をします。

 

※「画像編集ソフト」や保存する際の「拡張子」については、 

 別ページでご説明していますので、ぜひご確認ください。

 → 画像ファイルの拡張子を理解して、お店をきれいに紹介しましょう

 

画像編集ソフトの「JTrim」を立ち上げて、「編集」→「貼り付け」を選択します

JTrimの画面で編集から貼り付けボタンを選ぶ画像

 

すると、取り込んだ画像がソフトにアウトプットされます。

 

JTrimで「編集」ボタンを押し「貼り付け」ボタンを押したら取り込んだ画像がアウトプットされたことを示した画像

 

 

取り込んだ画像を加工して、保存する際に「.jpg」「.png」
のどちらかの拡張子を選んで保存するということになります。

 

なお、かんたんな加工のやり方については、こちらのサイトを
参考にしてください。

→ 画像の加工を覚えると、サイト作成の幅がグンと広がります

 

 

画像を使う際は「著作権」に気を付けてください

 

 

プリントスクリーンを使うと、画像がパソコンから
簡単に入手できます。

 

でも、取り込んだ画像をwebサイトなどに掲載する際は
「著作権」に気を付けてください。

 

無断転載は著作権法違反で訴えられる可能性があります。

 

では、どうやって取り込んだ画像を使えばいいのかですが、
「引用」という方法があります。

 

<著作権法 第32条>

ウィキペデイアから著作権法第32条「引用」の条文を抜粋した画像

   ウィキペディア (Wikipedia):「引用」(最終更新 2017年1月15日 (日) 06:07)分より抜粋

 

ルールに則って運用すれば問題ありませんので、
要件を理解して「引用」すれば大丈夫です。

 

特に「引用部分を明確にすること」と
「出所を明示すること」は必ず行ってください。

 

<引用の要件>

ウィキペデイアから著作権法第32条「引用」の適用要件を抜粋した画像

   ウィキペディア (Wikipedia):「引用」(最終更新 2017年1月15日 (日) 06:07)分より抜粋

 

 

2.自分で撮影した写真を利用する

 

船場カリーのカレーライスを撮影した写真。ルーの色が独特

「ルーの色が独特の『船場カリー』さん」

 

 

ご自身で撮影した写真をwebサイトにどんどん
使ってほしいと思います。

 

ご自身で撮影した画像は、「生々しさ」というか
「リアル感」が違います。

 

お店の紹介であれば、なおさらリアル感があるほうが
親近感がわきますので、ぜひ多用してほしいと思います。

 

写真技術が優れているに越したことはありませんが
ピンボケでなければ、そんなに上手くなくても大丈夫です。

 

私の家で文章の書き方の本を並べた画像

「少し下手でも『リアル感』が大切です」

 

 

気を付けていただくのは「画像のサイズ」です。
別ページでご説明しましたが、webサイトへ
貼り付ける画像は、大きくて(横)1,200pxくらいです。

 

下の画像はスマホで撮影した写真ですが、
(横)3,840 × (たて)2,160px のメガサイズです。
webサイトが重くなるので、適切に加工して使います。

 

参考サイト → 適切なサイズの画像を使い、かっこよくお店を紹介する

 

フォルダに保存している画像ファイルの画像。スマホで撮影した写真でもかなり大きなサイズであることを示した画像

 

大きいサイズの画像なら、小さく加工しても
画像が劣化しにくいのでご安心ください

 

要はスマホで撮影した写真でも十分使える
ということが言いたいわけです。

 

あと、実際に作業する際の注意点として、オリジナルの
画像は別に残しておくことをおすすめします。

 

上書きしてしまうと、サイズを小さくしすぎたときなど
再び大きくすると画像がかなり劣化するからです。

 

オリジナルの画像から、実際に使用するまでの修正回数は
できるだけ少ないほうがいいです。

できたらオリジナルの画像そのまま使用するのがベストです。

 

JTrimで巨大サイズの画像を、webサイトで使える大きさに
縮小してみます。↓↓

 

大きなサイズの画像をソフトでリサイズすることを説明した画像

 

上の操作だけで簡単にリサイズできますので、ぜひ
お試しください。出来上がりはこのようになりました↓↓

 

リサイズしwebサイトに適した大きさになった京都清水寺の写真

 京都「清水寺」です

 

 

グーペなら画像のアップロードも簡単です!!

 

 

出来上がった画像は、写真なら「.jpg」、境界の
はっきりした画像なら「.png」の拡張子を選んで
パソコンに保存しましたね。

 

ご参考ページ → 画像ファイルの拡張子を理解して、お店をきれいに紹介しましょう

 

次のステップは、フォルダに保存した画像を
webサイト上に追加する作業をします。

 

まずは、下の画像↓↓のように「画像を追加する」
ボタンを押します。

 

グーペで画像を追加する場合に押す、「画像を追加する」ボタンの位置を示した画像

 

すると「画像を追加する」ボックスが出てきます。

 

ここで「ファイルを選択」ボタンを押して、パソコンに
保存した画像ファイルを選び「アップロード」ボタンを押します

 グーペで画像をアップロードする際の操作ボックスの画像

 

画面に選んだ画像が追加されますので、画像サイズを
選びます。

 

事前にwebサイトに表示したい画像サイズに
加工してある場合は「オリジナル」を選択します
この場合、保存してある画像がそのままwebサイト上に
出力されます。

 

あとは出したい画像をクリックすると完了です。

 

グーペで画像をアップロードする際の操作ボックスの画像

 

このページに表示している画像も、すべて同じ手順で
出力しています。

 

 

3.写真や画像を購入して入手する

 

 

はじめに押さえたい「肖像権」のこと

 

 

webサイトに使う写真を、ネット上で探すと思いのほか
苦戦します。

 

先ほど触れた「著作権」の問題とか、「肖像権」の
問題など、どこまで気を付けたらいいのかわかりにくい
ことがたくさん出てきます。

 

特に人物の写真(肖像権)は複雑です。

 

肖像権については、明文化された条文がなく、判例上
認められているものなので、法律家でない私の手に
おえるものではありません

 

ネット上から勝手に拾ってきた画像を使うと非常に危ないのです。

 

ですから、私は決まったサイトから画像を入手するように
しています。

 

どちらかというと私はwebサイトに画像を多用している方なので、
「使う写真のことで(法律上の)余計な心配をせずに済むこと」や
「写真のクオリティ」「写真の数の多さ」の観点から、有料の
写真を購入するようにしています。

 

ペイレスイメージズの「利用規約」の抜粋です

ペイレスイメージズの利用規約第5条ライセンスの規約抜粋の画像  ペイレスイメージズの利用規約、禁止事項の規約抜粋の画像

 

かんたんに要約すると・・ 

 

購入した写真や画像はホームページなどに掲載できて、
販売目的の商品や有料デジタルコンテンツに利用するときは
別途エクストラライセンス料が必要になるということです。

 

加えて、禁止事項に該当する利用はできないということを
押さえておけばいいです。

 

ペイレスイメージズの画像申し込み画面抜粋

 

また、「モデルリリース」とは肖像利用承諾のことを指します
「写真素材足成」の利用規定からの抜粋を参考にしてください↓↓

 

「写真素材足成」の利用規定からの抜粋モデルリリースについての説明

                 「写真素材足成 人物写真のご利用について」からの抜粋

 

モデルリリースのないものは、人物の特定ができないように
顔の一部を利用するなどの加工が必要とのこと。

 

以上の点を押さえたら写真選びはどうすればいいのか
見えてきませんか?

 

人物であれば、モデルリリースのある写真を探す
ということになります。

 

 

別ページになりますが、

・とりあえず試したい無料写真素材集のおすすめサイト2つ

・私が使っている有料の写真素材集おすすめサイト3つ

をご紹介しますので、ぜひ参考にしてください。

→ サイトデザインを劇的に変化させる写真素材

 

 

 

できれば入力したい「altタグ」

(画像をうまく使いこなすコツ その5です)

 

 はみがきを小さい女の子に教えている、若い女性歯科衛生士

 「大きく口を開けてね。『はい、あーん。』」

 

 

「altタグ」については、「??」って思った方が多いかもしれません。

 

webサイトで検索順位までこだわる人にとっては、「あたりまえ」
の知識ですので、店舗を運営するあなたにも、あたりまえの知識に
してほしいと思って記事にしました。

 

でも、そんなに難しい話でもないので、力を抜いて
読み進めてくださいね。

 

 

実は、上の歯みがきの写真には、コメントが付けてあります。
どんなコメントかというと、

 

「はみがきを小さい女の子に教えている、若い女性歯科衛生士」です。

 

ちなみに、このコメントはソースコードの中に記載があるだけで
webサイトを眺めても確認できません。

 

ぐーぺのソースコードのボックス。altタグを赤枠でくくり強調した画像

 

 この「altタグ」は「代替テキスト」と呼ばれ、本来の
使い方としては、音声読み上げソフトが画像の説明を
読み込む場合や、何かの原因で画像が表示されないときに
代わりに説明の表示をするものです。

 

画像ファイル名をわざと間違えて「代替テキスト」を表示してみました。

↓↓このように表示されます

はみがきを小さい女の子に教えている、若い女性歯科衛生士

 

お店を経営するあなたにとっては、どうでもいい情報のように
思えるかもしれませんが、実はこの「代替テキスト」は、
google検索などの「画像検索」の結果に反映されたりするので、
アクセスアップにもつながってきます。

 

例えば歯医者さんのwebサイトであれば、上の写真のコメント
で「はみがき」とか「歯科衛生士」というキーワードがしっかりと
入力されていることになりますので、間違いなく検索結果にプラスに
働きます。

 

本当は「alt=" "」として、何も入れなくても問題はありませんが、
少しの入力の手間をかけて、少しでも多くのお客様をサイトに
誘導してみてはいかがでしょうというご提案なのです。 

 

 

「altタグ」はどこから入力すればいいのか?

 

 

画像のHTML入力は、下のように「<img src~」で
始まる記述になっています。

 

画像にかかるHTMLの記述のうちaltタグについて示した画像

 

その中でも「alt=" "」の部分が「altタグ」になります。

 

緑の〇〇〇の部分にコメントを入力します

 

 

ちなみに、グーペでは何もしなければ「画像ファイル名」
が入るようになっています。

 

入力は「ソースコード」のボタンを押し、画面を開きます。

 

グーペでaltタグを入力するため、ソースコードを開くボタンを示した画像

 

ボタンを押すと先ほどのソースコード入力画面が
表示されます。

 

「<img src~」で始まる画像の記述の中に「alt=" "
をさがし、"〇〇〇"の部分にコメントを入力してゆきます。

 

何を書いたらいいのかは、この後ご説明します。

 

ぐーぺのソースコードのボックス。altタグを赤枠でくくり強調した画像

 

 

「altタグ」に何を入力すればいいのか?

 

 

結論から言うと、

「写真の内容を適切に反映した文章」を書く

ということになります。

 

写真だけではなく、サイトの内容に応じた文脈に沿った
内容を記載するのがベストです。

 

はみがきを小さい女の子に教えている若い歯科衛生士の写真を題材に、altタグの記載方法を解説した画像

 

例えば、上の画像でいえば、単に写真の説明で
「はみがきを小さい女の子に教えている、若い女性歯科衛生士」と
するのではなく、

 

「はみがきを小さい女の子に教えている若い歯科衛生士の写真を
題材に、altタグの記載方法を解説した画像」という記載が
適切ということになります。

 

ただし、長すぎる記載や、キーワードを詰め込んだような記載は
良くないので、適切に内容を反映するものにとどめてください。

 

 

altタグについては記事を書いていますので、ぜひ参考にしてください。

→ Googleが伝える、適切な「alt属性の入力」のススメ

 

 

 

 

あなたもグーペでお店の写真をたくさん紹介してみませんか?
下のボタンを押すと「公式サイト」にリンクしています。


店舗のwebサイトに強い「グーペ(Goope)に興味がある」
という方は、こちらのボタンから グーペーとはどのような
サービスかぜひご確認ください。

        ↓↓↓

グーペ公式サイトにリンクするボタン画像

アクセスランキングのブログパーツ

2017.09.24 Sunday