新規ホームページ制作時や公開後のコンテンツ追加の際、イメージ画像の掲載は視覚的にかなり有効です。そして追加する画像の選別や加工を工夫することで、ユーザーに対しより効果的な見せ方をすることができます。
今回のDirectorブログでは、自身で撮影した写真やフリー素材サイトでダウンロードした画像を「制作ページへ追加する時の注意点やお勧めの加工方法」について、ご紹介したいと思います。
一手間かけるだけで、劇的にページを開いた瞬間の印象が変わります。
「掲載画像 選別時のポイント」「画像掲載サイズに関する注意点」「一手間で見た目が劇的に改善！」の3つの内容をご覧いただけます。
ホームページ制作/ページ追加の際、有効な画像追加方法について
初期段階のホームページ制作時や新たなページを設ける際、タイトル帯と本文TEXTだけの状態では、よほど改行/文字色の工夫等をしないかぎりパッと見の印象が悪く、サイト訪問者はあまり内容を読む気になれません。
ところが、タイトル画像やイメージ画像を要所、要所に挿入すると一気にページ内容にメリハリがつき、ビジュアルが大きく改善されます。
こういったページ内容の見た目を良くするための画像に関し、知っていると役立つテクニックがいくつかあります。
掲載画像 選別時のポイント
最も基本的なポイントではありますが、「入れる画像の選別」は非常に大切です。
コンテンツ冒頭へ入れるタイトル画像や、ページの途中で入れるイメージ画像も掲載TEXTに合ったものを選ばなければ違和感が出てしまい、ユーザーにも紛らわしいため注意が必要です。
一般的なホームページだけでなく、ニュース系ポータルサイト等でも度々みられますが、タイトル画像に目を引く写真が載っており、興味を持ち下層ページ（内容ページ）へとアクセスしてみるとタイトル画像とは異なる内容でガッカリし、離脱することがあります。
こういったケースでは魅力的なタイトル画像を載せることで、TOPページからの下層誘導率/クリック数自体は上がりますが、ユーザーが早々に下層ページから離れてしまうリスクがあり、結果的に下層滞在時間が短くなってしまいます。
検索エンジンからの評価も下がることもあるので、避けるべきでしょう。
ベストはライティングした記事に合った画像で、且つ魅力的な目を引く画像、インパクトのある画像です。
このような写真は素材サイトへアクセスすると多数見つけられますが、その分、他のWebサイトや紙媒体、広告にも使用されている事が多いため、できれば自身で撮影した独自の写真を使用した方が他のホームページとの差別化になります。
できるだけオリジナルの撮影写真を活用するようにしましょう。
画像掲載サイズに関する注意点
ホームページ制作時やサイト更新時に追加する画像は大き目のサイズの方がインパクトがあり、視覚的に効果的ですが気を付けるべき点もあります。
デジタルカメラで撮影した写真や素材サイトからダウンロードした画像は多くの場合、初期状態のままだとサイズ/解像度が非常に高いです。
そのままホームページへ使用すると、ページ横幅を超え「横スクロールバーが表示」されてしまったり、画像が重いため、ページを開くのに時間が長くかかってしまいます。
上記場合、サイトへアクセスした訪問者はストレスを感じ、ページから離脱してしまう原因となります。
そのためWebサイトへアップする前に、予め画像加工ソフトや圧縮ソフトでリサイズした上で載せることをお勧めします。
最も良いのはフォトショップ等の画像専門ソフトによる調整ですが、こういった専門ソフトウェアがない場合には、フリーでDLすることが可能な「縮小専用。」を活用すると良いでしょう。
簡単な操作で画像サイズをリサイズできるのでとても便利です。
こちらのフリーソフトは、大量の画像を一気にリサイズする時も使用することができます。
縮小専用。については下記記事をご覧ください。
一手間で見た目が劇的に改善！
撮影画像やフリー画像は、画像加工ソフトを使って画像の上へ「記事タイトルやキャッチコピーなどを追加する」と非常に見た目が良くなるのでオススメです。
例えば先日、当ホームページ内 クリエイターブログ2017/06/15掲載の記事「ホームページ制作会社の評判は何で決まるのか？」のタイトル画像がそうです。
こちらはダウンロードした素材画像に対し、フォトショップを使い半透明の黒のレイヤーをおき、その上にタイトル文を配置しています。
写真を半透明のブラックやグレー・セピア調に加工し、その上へ白字TEXTを置く手法は近年流行の見せ方で、一気にスタイリッシュなデザインに変化します。
他の写真のみを載せたタイトル画像と比較しても、明らかにビジュアルが良いのが分かります。
他の記事よりも見た目が良いこともあり、クリック率が高いコンテンツとなっています。
このように少し加工をするだけで劇的に見た目が良くなり、下層誘導率も向上します。
ちなみにこちらのタイトル画像を作るのに5分もかかっていません。数分の一手間で、他のホームページとの差をつけることができます。
上記加工以外にもフォトショップを使った画像加工として、「明るさ補正」や「カラーバランスの変更」等も有効です。元の写真が暗かったり、もっと色合いを明るくしたい時に明るさ補正を行うと綺麗に仕上がります。
また「カラーバランスの変更」は画像を掲載した際、他の写真やリンクバナー・メニューボタン等のイメージ/色合いと異なり、ういた感じになってしまう時に調整することで違和感なく、自然な見た目にすることができます。
いかがでしたでしょうか？画像はページ全体のイメージへ大きな影響を与えます。
ちょっとしたテクニックや、注意すべきポイントをおさえるだけで、効果的に画像をページへと反映することができます。是非お試しください！
---------------------------------------------------------------
東京でホームページ制作を行うなら
エグゼクティブクリエイション！
------------------------------------------------
---------------------------------------------------------------
◇ウェブサイト作成/運営についての
お問い合せ・ご相談はこちら
TEL: 03-5839-2512
FAX： 03-5839-2513
------------------------------------------------
≫ホームページ制作 東京 エグゼクティブクリエイション
