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

お店のホームページ運営に強い「グーペ(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.06.25 Sunday