インフォメーション
適切なサイズの画像を使い、かっこよくお店を紹介する
使ってある画像がきれいだと、印象がいいですよね。
お客様はお店や診療所の看板であるwebサイトの
第一印象でお店のイメージをつかみます。
逆に、ぼやけた画像を使っていたらどうでしょう?
たとえどんなに実店舗で、気を使った運営をしていても
ホームページ来訪者はそんなことはわかりませんので、
きっと、「ちょっとしたことにも気をつかえないお店」
というレッテルが貼られることでしょう
きれいな画像をホームページに貼るだけで、ホームページが
しまって見えます。
ちょっとしたコツをつかむだけで実現できますので、
ぜひ挑戦してみてください。
ちょっとしたコツとは・・
○適正な画像サイズの写真を使う (コツその1) (今回ご説明します)
○画像加工ソフトを使いこなす (コツその2) (今回ご説明します)
(おすすめの無料加工ソフトを1つご紹介します)
○拡張子の使い方を覚える (コツその3)
コツ3は、このページでご説明します
→ 画像ファイルの拡張子を理解して、お店をきれいに紹介しましょう
○画像の入手方法。どこで手に入れるのか? (コツその4)
○できれば入力したい「altタグ」(コツその5)
コツ4,5は、このページでご説明します
→ お店の写真を紹介する際の、画像の入手や注意点についてご説明
たったこれだけのことでもきちんと実践できれば
見違えるように見栄えが良くなりますので、
ぜひお試しください。
では、ひとつずつご説明します。
適正な画像サイズの写真を使う
たまにこんな写真を使っているサイトを見かけます
ここまでひどくなくても、クリアでない写真を
利用しているケースは多いと思います。
せっかく写真を準備して貼り付けまで頑張ったのに
なぜこのような残念なことになるのでしょうか?
それは、適切な大きさの写真を使っていないからです。
webサイトにきれいな画像を貼りつけるコツ(その1)は・・
「適正な大きさの画像を使うこと」です
適切な大きさの写真(画像)とは何に注意すればいいのか、
使い方のコツを知ればすぐに使えます。
ここでは画素数の解説やその他むずかしい説明は
できるだけ省きますのでご安心ください。
画像ファイルの性質として
小さいサイズの画像を拡大するとぼやけた画像になる
特徴があります
逆に大きな画像を小さくするのはそれほど崩れませんが
少し乱れます。
ですので、最初から画面の大きさに合わせた大きさの
画像を用意するのがベストです。
web貼り付け用なら大きさは「ピクセル(px)」で見ていきます
下の画像の大きさの表示は
(横) 400 (px) × (たて) 268 (px) ・・のように表示されています↓↓
→ ペイレスイメージズの購入画面より抜粋
→ stock.fotoの購入画面より抜粋
私も最初はそうでしたが、ピクセル(px)と
言われてもイメージできない方も多いと思いますので・・
まずは、お使いになっているパソコンの幅を例に
考えてみます。
みんなの知識 ちょっと便利帳さんのサイトをクリックすると
あなたがお使いのパソコンの画面の幅が表示されます。
ちなみに、私のパソコンの画面サイズは(横)1,366×(たて)768(px)でした。
皆さんの使っているディスプレイ環境も横幅が
1,024～1,366ぐらいが多いようです
みんなの知識 ちょっと便利帳さんのサイトより抜粋
ですので、いくら大きくても上の販売されている写真の例でいえば、
中解像度またはMサイズまでを使うということになります。
最近はサイトの横幅も広くなってきましたが、IT通信/WEBの業種
で絞ってみると、950ピクセル～1020ピクセルが多いようです
上場企業のサイトの横幅を調べたサイトです。ご参考まで
サイドメニューもあるので2カラムの場合700pxちょっとくらいまでが
使える画像の最大値になりそうです
webサイトの幅はそんなに大きくないので高解像度の
写真は必要ないということですね。
実は、大き過ぎる写真を使うとファイルサイズが
重くなり、画面の表示スピードが遅くなってしまうので
大きすぎるのもいけません。
あとは、画面の大きさとにらめっこしながら
適切な大きさを探ります。
実際にいろいろな大きさの写真を張り付けて
みましたので、大きさを実感してみてください。
また、写真を拡大したり、縮小したものもあります
ので、画像の乱れ具合もよく観察してください。
(スマホで見ている方はサイズが同じになるので
違いがわからないかもしれません。ごめんなさい)
サイズ: (横) 450 × (たて) 300 (px)
拡大縮小なしのオリジナルサイズです。
webサイトの写真として十分使えるサイズですが、
最近のwebサイトの傾向がやや幅広になっているので、
幅広なサイトには物足りないサイズかも知れません。
サイズ: (横) 600 (たて) 400 (px)
847×565(px)の写真を縮小して作成した画像です。
縮小の加工をしましたが特に画像の乱れも目立たず、
比較的きれいな仕上がりになっています。
最近は私のサイトでこのサイズに加工して使う
ことが多くなりました
サイズ: (横) 750 × (たて) 500 (px)
450×300(px)の写真を拡大して作成した画像です
拡大して作成した画像は細部がぼやけます。特に髪の毛
のあたりは上下の写真と比べると1本１本がわかりにくく
なっています。
写真を拡大するとこのように画質が劣化するという例で
示させていただきました。
サイズ: (横) 847 × (たて) 565 (px)
拡大縮小なしのオリジナル画像を使用しています。
普通のwebサイトで使うにはやや大きすぎるので、
私はよく縮小して使います。
トップページのスライドショーにはこのまま使用するか、
画面の大きさによってはもうワンサイズ大きなものが
必要になるかも知れません。
お使いになる場所の大きさと比較してお決めください。
無料画像加工ソフトを使いこなす
(画像をうまく使いこなすコツ その2)
私がいつも使っている無料画像処理ソフトを
ご紹介します。
「JTrim」という無料ソフトです
無料ダウンロードはこちらから → Vector ソフトを探す！
とても軽く動き、使いやすいソフトです。
長い間使っていますが、難しい加工をする
とき以外普段使いはほとんどこれを使っています。
上に貼り付けた画像もすべてこのソフトで
加工しています
あまりに使いやすいので、ほかのソフトを
使おうとあまり思ったことがありません。
使える機能はたくさんありますが、画像加工と
いっても、「画像縮小(リサイズ)」「画像切り取り」
「モザイク」「画像の枠線作成」を中心に使うだけ
ですので、不足を感じないのです。
「画像縮小(リサイズ)」
「画像切り取り」
「モザイク」
「画像の枠線作成」
これらの加工のやり方については、以前私が作った記事で
説明しています。内容が重複してしまうので、下のリンク
から内容をご確認ください。
文字入れソフトもご紹介していますので、きっとお役に
立てると思います。
あなたもグーペでお店をかっこよく紹介してみませんか?
下のボタンを押すと「公式サイト」にリンクしています。
店舗のwebサイトに強い「グーペ(Goope)に興味がある」
という方は、こちらのボタンから グーペーとはどのような
サービスかぜひご確認ください。
↓↓↓
