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

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