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

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

インフォメーション

2017 / 02 / 16  17:42

インフォメーションの更新について

まめに更新してくださいと言っているイメージの女性

 

「まめに更新してくださいね」

 

 

「お知らせ・インフォメーション」とは・・

お店の休業やイベントなど必ずお知らせしないと
いけない情報をお客様にお伝えする機能です。

 

 

単に休業日やイベントなど、お客様にお知らせしないと
いけない情報を掲載するのもよし。

 

ブログや日記のような形で、日々お店に起こったことを記事に
する方もいらっしゃいます。

 

いずれにしても「まめに更新」してあると、放置した感じに
なりませんので、定期的な情報発信を心がけてくださいね。

 

 

グーペーで作られた「インフォメーション欄」をご紹介しますので
ぜひ参考にしてください

 

  → 「カフェ・プラス・ジョーヌ」さんのインフォメーション

  → 「まのわ整体院」さんのインフォメーション

 

 

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


店舗のwebサイトに強い「グーペ(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 / 02 / 14  12:45

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

居酒屋の女性店員のイメージ画像。背後に一升瓶が並んでいる。お店の雰囲気は正しく伝わっていますか?と微笑みながらこちらに質問しているイメージ

「お店の雰囲気は正しく伝わっていますか?」

 

 

「『拡張子』なんて難しい言葉はめんどくさそう。」

なんて言わずに、少しだけ付き合ってください

 

 

よく使う拡張子はたった2種類!

 

使い分けるだけで格段にあなたのサイトが変わります

 

 

拡張子とは下のように画像を保存したときの
「.jpg」「.png」の部分のことです。

 

.jpgと.pngの画像ファイルが多く保存されたフォルダの画像

 

画像の拡張子の種類はいろいろありますが
基本「.jpg」と「.png」の2種類を使い分ける
だけで大丈夫です。

 

 

では、どのように使い分けたらいいのかというと、
結論から先に言います。

 

<画像拡張子の使い分け まとめ> (画像をうまく使うコツ その3)

 
  • 境界のはっきりした画像は「.png」を使う
  • 境界のはっきりしない画像は「.jpg」を使う

 

ということになります。

 

※画像をうまく使うコツ(その1)(その2)は別ページで
 ご説明しています。あわせてご確認ください。

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

 

「どのように使うの?」とか「どうやって作るの?」という
ことは後でご説明しますので、まずは、「.jpg」と「.png」の
違いからお話しします。

 

 

具体的に例を見るとわかりやすいと思いますので
下の例を見てください↓↓↓

 

〇境界のはっきりした画像は「.png」を使う

  (例えば、下のような↓↓パソコンの画面からとった画像など)

パソコンの画像を切り取った画像。教会のはっきりした画像の例として掲示

 

 

〇境界のはっきりしない画像は「.jpg」を使う

   (例えば、下のような↓↓写真画像)

 境界のはっきりしない.jpgで保存された写真画像の例として掲示。歯医者で口をゆすぐ若い女性の写真

 

 

 

比較するとよくわかる。「.jpg」と「.png」の適性と違い

 

 

まずは、境界のはっきりした画像を比べてみる

 

まずは、パソコンの画面が取り込んだ画像を
並べてみました。

 

境界のはっきりした画像なので「.png」を使うのが
正解でしたよね。

 

目を凝らして見比べていただくと、「.jpg」の方が
「ぼやっとした感じ」になっていませんか?

 

「.jpg」の画像                 「.png」の画像

googleの検索結果を切り取った画像。.jpgファイルとして保存されているためぼやっとしたイメージの例示として掲示  googleの検索結果を切り取った画像。.pngファイルとして保存されているためクリアなイメージの例示として掲示

 

上の画像で、わかりにくかったという方も、
拡大してみると、もっとよくわかります↓↓ 

 

上の「.jpg」の画像を拡大すると・・

 

字の周りに薄い点々が見えますね。

 

 googleの検索結果を切り取りさらに拡大した画像。.jpgファイルとして保存されているため余白の部分が濁っているイメージの例示として掲示 

 

 上の「.png」の画像を拡大すると・・

 

字の周りは真っ白で、とてもクリアに見えませんか?

 googleの検索結果を切り取りさらに拡大した画像。.pngファイルとして保存されているため余白の部分もクリアに出離よくされているイメージの例示として掲示

 

この画像処理の違いが、「.png」がはっきりした
境界の画像に適した画像ファイルということです。

 

 

 

次は、境界のはっきりしない写真を比べてみる

 

次は、写真画像を並べてみました。

 

境界のはっきりしない画像なので「.jpg」を使うのが
正解でしたよね。

 

「.jpg」の画像                     「.png」の画像

飲食店で働く女性の写真。ドリンクをお客さんに笑顔で渡すイメージ。.jpgファイルとして保存された写真   飲食店で働く女性の写真。ドリンクをお客さんに笑顔で渡すイメージ。.pngファイルとして保存された写真  

 

よく目を凝らしてみても、あまり違いがわからない
と思いませんか?

 

実は、違いは見た目ではなく「ファイルサイズ」にあります。

 

webサイトの画像は、画面の表示スピードが速いほうが
サイトを訪れるお客様のストレスが少なくなるので
できる限りファイルサイズが小さいほうがいいのです。

 

 

 ファイルサイズを見てみると・・

同じ写真を.jpgと.pngで保存し、ファイルサイズを比べている画像

 

上の写真は「.jpg」107KB、「.png」149KB で
約1.4倍「.png」が大きくなります。

 

ものによっては9倍近くファイルサイズが違うものも
ありました。

 

ですので、写真はファイルサイズの軽い「.jpg」を使うのです。 

 

 

まずは、画像の保存方法についてご説明します

 

 

「.jpg」「.png」の違いが分かったところで、
「じゃあ、どうやったら.jpgのファイルが作れるの?」
とお感じの方も多いと思います。

 

作り方はかんたんで、「画像処理ソフト」で画像を
保存する際に「.jpg」「.png」のどちらかの拡張子を
選んで保存することで区別して作成できます。

 

 

具体的にやり方をご説明しますので、まず手始めに
「無料画像処理ソフト」を手に入れてみましょう

  

私がいつも使っている無料画像処理ソフトを
ご紹介します。

 

JTrimのショートカットアイコンの画像

 

「JTrim」という無料ソフトです

無料ダウンロードはこちらから → Vector ソフトを探す!

 

とても軽く動き、使いやすいソフトです。
長い間使っていますが、難しい加工をする
とき以外普段使いはほとんどこれを使っています。

 

まずはダウンロードして、ソフトを立ち上げて
みてください。

 

もちろんダウンロードに抵抗のある方は、お手持ちの
ソフトでも大丈夫です。

 

 

一番手軽な画像取り込み方法についてご説明します

 

 

いわゆる「ソフト」ではありませんが、小さい画面の取込は
やはり、Print Screen(プリントスクリーン)が便利です。

 

画面に表示されている部分の取込しかできないので、画面の
大きさまでの小さい画像専用なのですが、ソフトの立ち上げが
必要ありませんので早くてカンタンです。

 

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

 

パソコンのキーボードFNの画像 と パソコンのキーボードPRTSCの画像

 

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

 

パソコンのキーボードFNとPRTSCの位置を示した画像

 

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

 

・・・

 

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

 

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

 

JTrimを立ち上げて、「編集」→「貼り付け」を選択します

 

JTrimで「編集」ボタンを押し「貼り付け」ボタンを押すことを示した画像

 

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

 

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

 

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

 

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

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

 

保存は、あなたがわかりやすい場所にフォルダを作り、
そのフォルダに保存します。

 

「ファイル」→「名前を付けて保存」を選択します。

 

JTrimで「ファイル」ボタンを押して「名前を付けて保存」ボタンを押すことを示した画像

 

「名前を付けて保存」をクリックすると、下の画像のような
ボックスが出てきます。

 

 

まずは、先ほど準備したフォルダを選択します。

 

次に、ファイル名(英数字半角小文字がベター)をつけて、
「ファイルの種類」から、保存する拡張子を選びます。

 

プリントスクリーンで取り込んだ画像でしたら「.png」ですね。

 

拡張子を選び、保存すると画像が取り込めます。

 

 JTrimの「名前を付けて保存」画面で、フォルダの位置、フォルダ名を付けること、拡張子を付けることを示した画像

 

いかがですか?

 

思いのほかカンタンだと思いませんか。
たったこれだけで、画像の保存は完了です。

 

一瞬で「.jpg」と「.png」ファイルを区別した保存が
マスターできました。

 

拡張子を区別して画像の使い分けができるようになると
貼り付けた画像がクリアに表示されるようになります。
あなたのサイトも画像を見直したらもっと素敵に変身するかもです。

 

 

※取り込んだ画像を使用する際の注意点(著作権等)について
 記事を書きましたので、ぜひ参考にしてください。
 → お店の写真を紹介する際の、画像の入手や注意点についてご説明

 

 

 

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


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

        ↓↓↓

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

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

2017 / 02 / 12  14:18

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

グーペで作成したホームページのサンプルページ。飲食店で料理を前に微笑む女性の写真が貼りつけてある。クリアに貼り付けできた画像の例のイメージ

 

使ってある画像がきれいだと、印象がいいですよね。

 

お客様はお店や診療所の看板であるwebサイトの
第一印象でお店のイメージをつかみます。

 

逆に、ぼやけた画像を使っていたらどうでしょう?

 

たとえどんなに実店舗で、気を使った運営をしていても
ホームページ来訪者はそんなことはわかりませんので、
きっと、「ちょっとしたことにも気をつかえないお店」
というレッテルが貼られることでしょう

 

きれいな画像をホームページに貼るだけで、ホームページが
しまって見えます。

 

ちょっとしたコツをつかむだけで実現できますので、
ぜひ挑戦してみてください。

 

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

 

○適正な画像サイズの写真を使う (コツその1) (今回ご説明します)

○画像加工ソフトを使いこなす (コツその2) (今回ご説明します)

 (おすすめの無料加工ソフトを1つご紹介します)

 

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

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

○画像の入手方法。どこで手に入れるのか? (コツその4)

○できれば入力したい「altタグ」(コツその5)

  コツ4,5は、このページでご説明します
  → お店の写真を紹介する際の、画像の入手や注意点についてご説明

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

 

では、ひとつずつご説明します。

 

 

適正な画像サイズの写真を使う

 

 不鮮明な画像を張り付けたトップページの画像。画像の使い方の悪い例として表示

 

たまにこんな写真を使っているサイトを見かけます

 

ここまでひどくなくても、クリアでない写真を
利用しているケースは多いと思います。

 

せっかく写真を準備して貼り付けまで頑張ったのに
なぜこのような残念なことになるのでしょうか?

 

それは、適切な大きさの写真を使っていないからです。

 

webサイトにきれいな画像を貼りつけるコツ(その1)は・・

「適正な大きさの画像を使うこと」です

 

適切な大きさの写真(画像)とは何に注意すればいいのか、
使い方のコツを知ればすぐに使えます。

 

ここでは画素数の解説やその他むずかしい説明は
できるだけ省きますのでご安心ください。

  

画像ファイルの性質として

小さいサイズの画像を拡大するとぼやけた画像になる
特徴があります

 

逆に大きな画像を小さくするのはそれほど崩れませんが
少し乱れます

 

ですので、最初から画面の大きさに合わせた大きさの
画像を用意するのがベストです

 

web貼り付け用なら大きさは「ピクセル(px)」で見ていきます

 

下の画像の大きさの表示は

(横) 400 (px) × (たて) 268 (px) ・・のように表示されています↓↓

 

→ ペイレスイメージズの購入画面より抜粋

 ペイレスイメージズの写真購入画面の画像抜粋。写真サイズの例示として表示した

 

→ stock.fotoの購入画面より抜粋

 stock.fotoの写真購入画面の画像抜粋。写真サイズの例示として表示した

 

私も最初はそうでしたが、ピクセル(px)と
言われてもイメージできない方も多いと思いますので・・

 

まずは、お使いになっているパソコンの幅を例に
考えてみます。


みんなの知識 ちょっと便利帳さんのサイトをクリックすると
あなたがお使いのパソコンの画面の幅が表示されます。

 

ちなみに、私のパソコンの画面サイズは(横)1,366×(たて)768(px)でした。

 

皆さんの使っているディスプレイ環境も横幅が
1,024~1,366ぐらいが多いようです

ちょっと便利帳のサイトより抜粋。パソコンディスプレイサイズの利用割合が掲載してある

                                                          みんなの知識 ちょっと便利帳さんのサイトより抜粋

 

ですので、いくら大きくても上の販売されている写真の例でいえば、
中解像度またはMサイズまでを使うということになります。

 

最近はサイトの横幅も広くなってきましたが、IT通信/WEBの業種
で絞ってみると、950ピクセル~1020ピクセルが多いようです

 

上場企業のサイトの横幅を調べたサイトです。ご参考まで

→ Webサイトの横幅まとめ

 

サイドメニューもあるので2カラムの場合700pxちょっとくらいまでが
使える画像の最大値になりそうです

 

 webサイトの幅はそんなに大きくないので高解像度の

写真は必要ないということですね。

 

実は、大き過ぎる写真を使うとファイルサイズが
重くなり、画面の表示スピードが遅くなってしまうので
大きすぎるのもいけません。

 

 

あとは、画面の大きさとにらめっこしながら
適切な大きさを探ります。

 

実際にいろいろな大きさの写真を張り付けて
みましたので、大きさを実感してみてください。

 

また、写真を拡大したり、縮小したものもあります
ので、画像の乱れ具合もよく観察してください。

 

(スマホで見ている方はサイズが同じになるので
違いがわからないかもしれません。ごめんなさい)

 

 

サイズ: (横) 450 × (たて) 300 (px)

拡大縮小なしのオリジナルサイズです。

 

webサイトの写真として十分使えるサイズですが、
最近のwebサイトの傾向がやや幅広になっているので、
幅広なサイトには物足りないサイズかも知れません。

手にいろいろな色の絵の具を付けた外人の女の子の写真。450px×300pxサイズの画像の例として表示

 

 

サイズ: (横) 600 (たて) 400 (px)

847×565(px)の写真を縮小して作成した画像です。

 

縮小の加工をしましたが特に画像の乱れも目立たず、
比較的きれいな仕上がりになっています。

最近は私のサイトでこのサイズに加工して使う
ことが多くなりました

手にいろいろな色の絵の具を付けた外人の女の子の写真。600px×450pxサイズの画像の例として表示

 

 

サイズ: (横) 750 × (たて) 500 (px)

450×300(px)の写真を拡大して作成した画像です

 

拡大して作成した画像は細部がぼやけます。特に髪の毛
のあたりは上下の写真と比べると1本1本がわかりにくく
なっています。

写真を拡大するとこのように画質が劣化するという例で
示させていただきました。

手にいろいろな色の絵の具を付けた外人の女の子の写真。750px×500pxサイズの画像の例、拡大して画像劣化した写真の例として表示

 

 

サイズ: (横) 847 × (たて) 565 (px)

拡大縮小なしのオリジナル画像を使用しています。

 

普通のwebサイトで使うにはやや大きすぎるので、
私はよく縮小して使います。

 

トップページのスライドショーにはこのまま使用するか、
画面の大きさによってはもうワンサイズ大きなものが
必要になるかも知れません。

お使いになる場所の大きさと比較してお決めください。

手にいろいろな色の絵の具を付けた外人の女の子の写真。847px×565pxサイズの画像の例として表示

 

 

 

無料画像加工ソフトを使いこなす

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

 

 

私がいつも使っている無料画像処理ソフトを
ご紹介します。

 

JTrimのショートカットアイコンの画像

 

「JTrim」という無料ソフトです

無料ダウンロードはこちらから → Vector ソフトを探す!

 

とても軽く動き、使いやすいソフトです。
長い間使っていますが、難しい加工をする
とき以外普段使いはほとんどこれを使っています。

 

上に貼り付けた画像もすべてこのソフトで
加工しています

 

あまりに使いやすいので、ほかのソフトを
使おうとあまり思ったことがありません。

 

使える機能はたくさんありますが、画像加工と
いっても、「画像縮小(リサイズ)」「画像切り取り」
「モザイク」「画像の枠線作成」を中心に使うだけ
ですので、不足を感じないのです。

 

「画像縮小(リサイズ)」

「画像切り取り」

「モザイク」

「画像の枠線作成」

 

これらの加工のやり方については、以前私が作った記事で
説明しています。内容が重複してしまうので、下のリンク
から内容をご確認ください。


文字入れソフトもご紹介していますので、きっとお役に
立てると思います。

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

 

 

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


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

        ↓↓↓

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

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

2017 / 02 / 10  00:24

SSLを使った顧客情報の保護はあたりまえの時代です

スマホを胸に当て安心した表情の若い女性

「安心して取引できました」

 

 

大切なお客様情報の受け渡しに気を使っていますか?

 

 

毎日毎日驚くほどたくさんの情漏漏洩事故が
起きています

 

実際にこうやって時系列に並べてみるとびっくり
するほどたくさんやっちゃっていますね。

 

情報漏洩事故の時系列表示。毎日のように情報漏洩が起きていることがわかる画像

                                     Security NEXTさんのwebサイトより抜粋

 

従業員のうっかりミスによる情報紛失、盗難、
誤廃棄など様々な要因がありますが、

 

中でもうっかりでは済まないのが不正アクセス
などによる個人情報の流出です。

 

なぜうっかりで済まないのかというと、事業主として
の対策をきちんとしていれば防げる話だからです。

 

httpsで始まるURLと「保護された通信」が示してある画像

 

あなたは「保護された通信」の表示をご覧になられた
ことはありますか?

 

この表示がされているサイトは、情報の暗号化が
できているサイトです。

 

もしも、あなたがお客様なら、個人情報やクレジットカード
の情報を入力するページが「保護」されていないと
気持ち悪いと感じるのではないでしょうか?

 

商品をせっかく買う気になったり、サービスを利用する
気になったのに、情報入力画面が「気持ち悪い」せいで
購入直前でやめてしまうお客様が結構いることに気づいて
欲しいと思います

 

では、どうすればお客様情報が保護できるのかご説明します。

 

 

SSLを導入するとお客様情報の保護ができます

 

筆記用具を手に勉強している女性の画像

 

「SSLのことを教えてください」

 

 

SSLとは何ですか?正しく理解して使いたいSSL

 

 

「SSLって何ですか?」

 

SSLはあなたの持っているパソコン、スマホなどの
情報端末とサーバーの間でやり取りする情報を暗号化する
規格のことを言います。

 

暗号化することで、データを第三者の改ざんや盗難から
情報を守ることができます。

 

図で表すと下の通りです。「情報の暗号化」の部分がSSLです。

 

SSLの図解説明をした画像。スマホ、タブレット、パソコンとサーバーをつなぐ間に鍵の画像

 

 

SSL(Secure Sockets Layer)の直訳は難しいですが
「暗号の利用により安全性を高めるための規格」
ぐらいでご理解いただければよいと思います。

 

SSLの暗号は「SSLサーバ証明書」という電子証明書を
使いますが、その「SSLサーバ証明書」を使用した
通信規格をHTTPSといいます。

 

HTTPS(Hypertext Transfer Protocol Secure)は、
HTTPによる通信を安全に(Secureに)行うために
SSLサーバ証明書を使用して実行されます。

 

この画像のように「https~」で始まるURLは
SSLにより保護されている通信ですので、今度見かけたら、
ぜひ注目してみてください。

 

金融機関のSSLでは、銀行名が表示されている画像

 

SSL導入により次のようなメリットが考えられます。

 

特にお店のサイトでお客様の情報の受け渡しがある方は、
SSL導入により確実に信用力がアップしますので、
積極的にご検討いただきたいと思います。

 

○盗聴を防止することによるユーザーの安心感向上

○情報を暗号化することによるサイトの改ざん防止

○検索エンジン上位表示に影響するためアクセスが増加する

 

 

SSLについてのより詳しい記事を書いています。ぜひ読んでみてください。

→ SSL化のメリット、デメリットについて考える。本当に必要な機能なの?

 

ちなみにこのページはhttpsになっていますが、アクセス
カウンターのタグを張り付けているため「保護された通信」
ではなく、httpサイトと同じ保護レベルのサイトになっています。

 

「危険なサイト」ではないのでご安心ください。
その辺の話も上の記事で説明しましたので、ぜひご覧ください。

 

 

goopeなら簡単にSSL導入手続きができます。

 

 思いのほかカンタンなんですと指をさし案内する女性の画像

 

「思いのほかカンタンなんですよ」

 

 

「SSL導入なんていうと、なんか難しそう・・」

 

そう感じておられる人も多いはず。

 

確かに普通のサイトで導入すると、少しむずかしい
作業も必要になります。

 

でも、グーペのSSL移行はめちゃくちゃ簡単でした。
本当ですよ

 

ぐーぺのSSLオプション申し込み画面の入り口を示した画像

 

まず、「SSLオプション」ボタンを押して契約
画面に入ります。

 

すると、メリット、料金などが確認できる画面が
出てきます。

 

グーペのSSLは月額1,000円で利用できます。

 

 SSLオプション申し込みボタンと、利用利用金が1,000円であることを示している画像

 

申し込みは「事前確認」「証明書取得」「ご契約」
「完了」の4ステップで終わります。

 

下の画面は、私のSSLオプションの契約画面です。
すでに契約しているので、申し込みの際の画面とは
少しだけ違うと思います。

 

要は「http」で始まるURLを「https」に変えるだけ
の作業ですので、そんなに難しいものではないですよ。

 

 私のURLがhttpsに変更してあることを示す画像

 

完了するとすぐにURLがhttpsで始まるものに変わっていました

 

私は他のサイトでもSSL化をしましたが、グーペのSSL化は
格別に簡単でした。

 

お店のホームページでは顧客情報のやり取りが
出てくると思いますので、安心感のあるSSLを
グーペで使ってみてはいかがでしょうか?

 

 

あなたも手軽にSSLが使えるグーペでお店を紹介してみませんか?
下のボタンを押すと「公式サイト」にリンクしています。


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

        ↓↓↓

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

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

1
2017.03.01 Wednesday