第10回：ホームページにおける画像や動画などの効果的な使い方

前回の講座（第９回）では、ホームページの骨格となる「文章コンテンツ」の書き方・重要性について解説しました。そして、その文章の魅力を何倍にも高め、お客さまの理解を助ける強力な武器となるのが、今回のテーマである「画像」と「動画」です。

はじめてご自身の会社のホームページを作る経営者の皆さま、WEBサイトでの集客において、この画像や動画がどれほど重要かご存知でしょうか？ 魅力的なビジュアルは、お客さまの心を自然と惹きつけ、ホームページ全体の印象を決定づけるほどの力を持っています。

しかし、その使い方を間違えると、思わぬ落とし穴にはまることも少なくありません。

例えば、サイトの表示が遅くなり、せっかく訪れたお客さまがすぐに離れてしまったり、知らないうちに他人の権利を侵害してしまう著作権のトラブルに巻き込まれたりする危険性もあります。

そこで今回の講座では、成果につながる画像・動画の「効果的な使い方」と、トラブルを未然に防ぐための「守るべき基本ルール」を、初心者の方にも分かりやすく解説します。

ページの魅力を高めながら、表示速度や著作権で失敗しないための実践的な知識を身につけ、成果につながるホームページを一緒に作り上げていきましょう。

なぜ画像は重要なのか？
お客さまの心をつかむ画像の４つの役割

ホームページに掲載する画像は、単なる飾りだと思っていませんか。

実は、画像には、商品やサービスの魅力を何倍にも高め、お客さまの心を動かして「問い合わせ」や「購入」といった成果につなげる、大切な役割があるのです。

本章では、画像が持つ具体的な４つの役割をご紹介します。

画像で具体的にイメージしてもらう

お客さまが本当に知りたいのは、商品の機能やスペックだけではありません。

その商品を手に入れたり、サービスを利用したりすることで得られる「素晴らしい未来の体験」（＝ベネフィット）も大切な情報です。画像には、その未来をお客さまに疑似体験してもらう力があります。

魅力が格段に高まる具体例

例えば、あなたがファミリー向けの自動車を販売しているとしましょう。

車の外観や内装の写真だけを並べるよりも、「家族みんなでキャンプに出かけ、満面の笑みでバーベキューを楽しんでいる」といった情景が伝わる写真を一枚加えるだけで、商品の魅力は格段に高まります。

文章だけでは想像しにくい「この車があれば、家族との時間がもっと豊かになる」というワクワク感や幸福感を、画像は一瞬で伝えることができるのです。

信頼感を高め、「しっかりした会社」という印象を与える

「人は見た目が９割」とよく言われますが、これはホームページにも当てはまります。

サイトで使われている画像の質は、そのまま会社の印象に直結し、お客さまが抱く信頼感を大きく左右します。

信頼感に直結する画像の質

清潔感のある明るい写真や、プロがデザインした洗練されたビジュアルは、訪れたお客さまに「この会社はしっかりしているな」というプロフェッショナルな印象を与えます。

逆に、スマートフォンで撮ったままの暗くてピントがぼやけた写真や、画質が粗い画像ばかりではどうでしょうか。「仕事も雑なのではないか」というマイナスの印象を与えかねません。質の高い画像を選ぶことは、信頼される企業イメージを築くための第一歩なのです。

伝える情報をわかりやすく整理する

さらに、たった一枚の画像が、長い文章よりも多くの情報を分かりやすく伝えることもあります。特に、複雑な情報を整理して見せる際に、画像は絶大な効果を発揮します。

複雑な情報をシンプルにする視覚化

例えば、サービスの利用手順や複数の料金プランといった、文字だけで説明すると難しくなりがちな情報も、イラストを交えた図や、比較しやすい表（グラフやチャート）として視覚化するだけで、お客さまは要点を直感的に理解できるようになります。

整体院のホームページなら、施術の流れを写真付きでステップごとに紹介することで、初めてのお客さまでも「こんな風に進むのか」と安心して予約の電話をかけられるようになるでしょう。

サイトからの離脱を防ぎ、滞在時間を延ばす

訪れたお客さまをページの途中で飽きさせず、最後まで読んでもらう。そして、最終的には「問い合わせ」や「購入」といった行動に繋げる。そのための「道しるべ」としても画像は活躍します。

次の行動へ誘導する画像の使い方

お客さまに見てほしい「続きはこちら」の案内や、「お問い合わせはこちら」といった重要なボタンに、目を引く画像を使ってみましょう。こうしたお客さまの行動を促すための仕掛けを、専門用語で「CTA（コール・トゥ・アクション）」と呼びます。

例えば、「無料相談はこちら」というテキストだけのリンクよりも、親しみやすいスタッフの写真と共に「お気軽にご相談ください」と書かれたボタン画像のほうが、クリックしたくなると思いませんか。

魅力的な画像は、お客さまの興味を持続させ、次の行動へとスムーズに誘導する力を持っているのです。

著作権トラブルを避ける！
ネット上の画像利用ルールと素材活用術

インターネットの世界には、素敵な写真やイラストがたくさんあふれています。ご自身のホームページにも使いたくなるかもしれませんが、ここでひとつ、注意が必要です。

ネット上の画像には、それを作成した人の権利である「著作権」というものが存在し、そのすべてを自由に使えるわけではありません。

「知らなかった」では済まされない著作権のトラブルを未然に防ぐため、基本的なルールと、安心して利用できる素材の活用方法をしっかりと理解しておきましょう。

知っておくべき著作権の基本ルール

他人の家に無断で入ってはいけないのと同じように、ネット上の画像も、作者の許可なく勝手に使うことは原則としてできません。会社のホームページで画像を使う際には、これからお伝えする点を確認する習慣をつけましょう。

許可なく使ってはいけないのが大原則

画像を使おうとする際には、まず「ライセンス」を確認することが大切です。ライセンスとは、その画像を「どのような条件なら使って良いか」を示した利用ルールのことです。

例えば、Googleの画像検索にも、このライセンスを確認できる便利な機能があります。

画像検索を行った後、検索窓の下にある「ツール」をクリックし、続いて表示される「ライセンス」の項目で「クリエイティブ・コモンズ ライセンス」を選択すると、利用条件が示された画像に絞って検索することが可能です。

ここで出てくる言葉の意味も知っておくと、より安心して画像を選べるようになります。

このように、画像を使う前には作者（著作権者）の許可が必要かどうかを必ずチェックする習慣をつけましょう。

「著作権フリー」と「ロイヤリティフリー」の違い

ここで、初心者の多くが混同しがちな二つの言葉について解説します。

「著作権フリー」と「ロイヤリティフリー」です。どちらも「フリー」と付きますが、意味は全く異なります。

つまり、最初に購入費用が発生する場合がほとんどなので、混同しないように注意しましょう。

安心して使える素材サイトの活用術（無料・有料）

ホームページを制作する上で、高品質な画像を提供してくれる素材サイトは、非常に心強い味方です。無料のサイトと有料のサイト、それぞれの特徴を理解し、目的に合わせて賢く活用していきましょう。

利用規約は必ず熟読する

まず大前提として、無料・有料にかかわらず、画像素材を使う前には必ず各サイトの「利用規約」というルールブックに目を通してください。特に、以下の点は必ず確認すべき重要なポイントです。

• 商用利用は可能か？（会社のホームページや商品紹介で使えるか）

• クレジット表記は必要か？（サイト名やカメラマンの名前などを記載する必要があるか）

• 画像の加工は許可されているか？

ご自身の利用目的と、サイトのルールが合致しているかをしっかりと確認することが、トラブルを避ける上で最も重要です。

まずはここから！ 代表的な【無料素材サイト】

・写真AC

無料素材サイトには海外のものが多い中で、日本人のモデルや日本の風景写真が豊富なのが特徴です。オフィス風景や飲食店のイメージなど、企業のホームページや採用ページで使いやすい素材が多く見つかるでしょう。

・ぱくたそ

時事ネタやユニークな企画写真が多く、見ているだけでも楽しいサイトです。登録カメラマンが撮影・所有しているオリジナルの写真が多いため、権利関係の心配が少なく、安心して利用しやすい点も魅力です。

・いらすとや

テレビや広告でも頻繁に見かける、かわいらしくて温かみのあるイラストが豊富に揃っています。文章だけでは少し堅苦しくなってしまう内容も、ここのイラストを添えるだけで、ぐっと親しみやすい雰囲気に変わります。

ワンランク上を目指すなら！代表的な【有料素材】サイト

有料サイトの最大のメリットは、クオリティの高さとオリジナリティです。

無料サイトの画像は多くの人が利用するため、他社サイトと同じ画像になってしまうこともありますが、有料サイトならその可能性を低くできます。

また、万が一の権利侵害トラブルに対する補償制度が用意されているサイトもあり、より安心して利用できます。

・PIXTA（ピクスタ）

日本の企業が運営している、国内最大級の素材サイトです。

最大の強みは、日本人モデルや日本のビジネスシーン、季節のイベントといった、日本の企業が求める素材が圧倒的に豊富な点。

写真やイラストだけでなく、動画や音楽素材も揃っており、ホームページの表現の幅を広げたい場合に非常に頼りになります。

・Adobe Stock（アドビストック）

デザインソフトで有名なAdobe社が運営するサービスです。強みは、PhotoshopやIllustratorといった同社のデザインソフトとスムーズに連携できる点。

ソフト内から直接画像を検索し、デザインの仮置き（カンプ）ができるため、作業効率が格段に上がります。素材点数も膨大で、あらゆるジャンルをカバーしています。

お客さまの心に響くオリジナル写真の選び方と見せ方

無料の素材サイトは手軽で便利ですが、ホームページの「信頼感」を最も高めるのは、やはりあなた自身の会社で撮影したオリジナルの写真です。

「プロに頼まないと、きれいな写真は撮れないのでは…」

と心配する必要はありません。最近のスマートフォンは性能が高いので、ポイントさえ押さえれば、お客さまの心に響く写真は十分に撮影できます。ここでは、会社の魅力がぐっと伝わる写真の選び方と、見せ方のコツをご紹介します。

独自の写真で信頼感と安心感を築く

なぜ、オリジナルの写真がそれほど重要なのでしょうか？

それは、お客さまがサービスや商品を選ぶとき、「どんな人が、どんな場所で、どんな想いで提供しているのか」という背景の物語を知りたいからです。

オリジナルの写真は、その物語を伝え、お客さまに安心感と親近感を与えます。

スタッフの「顔」を見せる重要性

使用シーンを具体的に見せる

お客さまの声や導入事例の効果的な見せ方

企業が自ら「私たちの商品は素晴らしいです！」と何度もアピールするよりも、たったひとりの第三者からの「このサービス、すごく良かったです！」という声のほうが、お客さまの心に強く響くことがあります。

第三者の声で信頼感を高める

サイトが重くならないための、
画像ファイルの適切なサイズと拡張子の選び方

どれほど魅力的な写真や動画を掲載しても、ホームページの表示に時間がかかってしまっては意味がありません。特に、高品質な画像をたくさん使えば使うほど、ページのデータ量は重くなり、表示に時間がかかりがちになります。

一般的に、ページの表示に３秒以上かかると、約４割の人が見るのをやめて離れてしまうと言われています。これはWEB集客において、非常にもったいない機会損失です。

ここでは、お客さまを待たせることなく、快適にホームページを閲覧してもらうための、画像ファイルの技術的な基本ルールを学びましょう。

画像サイズと容量を適切に調整する方法

ページの表示が遅くなる最大の原因は、画像ファイルの「重さ（データ容量）」にあります。特にスマートフォンのカメラで撮影した写真は、高画質できれいな反面、ホームページにそのまま載せるにはデータが重すぎることがほとんどです。適切なサイズと容量に調整する一手間が、サイトの快適さを左右します。

【画像サイズ（ピクセル）の基本】

まず覚えておきたいのが、画像の寸法を表す「画像サイズ（ピクセル/px）」です。

これは、画像を構成する小さな点の数を表す単位で、いわば画像の「大きさ」そのものです。基本的な考え方は、「画像が表示される場所の幅と高さに、画像サイズを合わせる」ことです。

例えば、ブログ記事の横幅が800pxの場所に、横幅が4000pxもある巨大な写真をそのまま載せてしまうと、見た目は縮小されていても、データとしては大きなサイズのまま読み込むため、表示速度が遅くなる原因になります。

逆に、800pxの場所に100pxの小さな画像を表示させると、無理やり引き伸ばされてしまい、画質がぼやけて粗い印象を与えてしまいます。画像は、大きすぎず、小さすぎず、表示させたいスペースに合ったサイズに調整することが大切です。

【データ容量の圧縮（簡単な方法）】

画像サイズを適切に調整したら、次に行うのが「圧縮」です。これは、見た目の美しさをほとんど変えずに、画像のデータ容量（重さ）だけを軽くする作業です。

データ容量が大きいままの画像をアップロードすると、表示速度が遅くなるだけでなく、「このサイトは表示が遅い」とGoogleなどの検索エンジンからの評価が下がり、検索結果の順位に悪影響を及ぼす可能性もあります。

圧縮作業は、専門のソフトがなくても、無料で使えるオンラインサービスで簡単に行えます。

・TinyPNG（タイニーピング）

パンダのアイコンが目印の有名なサイトです。圧縮したい画像ファイルを点線で囲まれた大きな枠の中にドラッグ＆ドロップするだけで、自動的に最適な容量に圧縮してくれます。

圧縮が終わると緑色の「Download all images」というボタンが出てくるので、それをクリックして保存します。

こうしたツールを使い、品質とファイルサイズのバランスを見ながら、できるだけ容量を軽くする習慣をつけましょう。

用途に合わせた「拡張子」の使い分け

画像ファイル名の末尾についている「.jpg」や「.png」といった部分を「拡張子（かくちょうし）」と呼びます。これはファイルの種類を示す目印のようなもので、それぞれに得意なこと・不得意なことがあります。

特徴を理解し、用途に合わせて使い分けることで、より効果的に画像を活用できます。

拡張子	特徴	適した用途（具体例）
JPEG （ジェイペグ）	データ容量が比較的小さく、フルカラー（約1677万色）を表現できるため写真の表現が得意。	風景や人物の写真、色のグラデーションが豊かなイラストなど。ただし、背景を透明にすることはできません。
PNG （ピング）	背景を透明（透過）にできる。何度保存し直しても画質が劣化しにくい。	会社のロゴや、背景を切り抜いて使いたいイラストなど。ただし、写真に使うとJPEGより容量が重くなる傾向があります。
WebP （ウェッピー）	Googleが開発した新しい形式。JPEGやPNGと同じ画質でも、データ容量を約20%～30%も軽くできる。	ホームページの表示速度を少しでも上げたい場合に最適。現在では、ほぼすべてのブラウザで対応済み
SVG （エスブイジー）	点と線の情報で描かれた図形データ。どれだけ拡大・縮小しても画質が全く劣化しない。	ロゴやアイコンなど、くっきりと見せたいシンプルな図形に最適です。複雑な写真には使えません。

検索エンジン対策も意識した画像アップロードのコツ

画像をアップロードする際に、ほんの少し工夫するだけで、SEO（検索エンジン最適化）、つまりGoogleなどの検索結果で上位に表示されやすくなる効果も期待できます。ぜひ実践したい二つのポイントをご紹介します。

ファイル名に意味を持たせましょう

画像を保存する際のファイル名、IMG_001.jpg のようにカメラで撮影したときのままにしていませんか。これは非常にもったいないです。検索エンジンはファイル名も見て、画像の内容を理解しようとします。

例えば、美味しいピザの写真なら、pizza_01.jpg ではなく、delicious-margherita-pizza.jpg のように、画像の内容が具体的にわかる英単語で名前を付けるのがおすすめです。

なぜ英語が良いかというと、日本語のファイル名は、利用環境によっては文字化けを起こして画像が正しく表示されないリスクがあるためです。半角の英数字とハイフン（-）で繋ぐのが一般的です。

ALTテキスト（代替テキスト）を必ず追加する

ALTテキスト（オルトテキスト）とは、何らかの理由で画像が表示されなかった場合に、代わりに表示される「画像の説明文」のことです。これは二つの重要な役割を持っています。

ひとつは、目の不自由な方がホームページを訪れた際に、音声読み上げソフトがこのALTテキストを読み上げることで、画像の内容を理解する手助けになるというアクセシビリティ（利用しやすさ）の観点です。

もう一つは、検索エンジンに対して「この画像はこういう内容ですよ」と正確に伝えるSEOの観点です。

専門用語なので難しく聞こえるかもしれませんが、設定はとても簡単です。WordPressのようなホームページ作成ツール（CMS）をお使いの場合、画像をアップロードした際に表示される「代替テキスト」という入力欄に、画像の説明文を入力するだけで設定は完了します。弊社が提供する【あきばれホームページ】でも簡単に設定できます。

例えば、会社の受付の画像なら、代替テキストの欄に 株式会社〇〇の明るい受付の写真 のように、画像の内容を簡潔かつ具体的に記述しましょう。

この一手間が、より多くの人や検索エンジンに、あなたのホームページの内容を正しく伝えることに繋がるのです。

動画を最大限に活用し、情報量と魅力を一気に高める方法

画像や文章だけでは伝えきれない会社の魅力や商品の価値を、一瞬にしてお客さまに届けることができる。それが「動画」の持つ力です。

一説には、１分間の動画が伝える情報量は、文字情報に換算するとWEBページ約3,600ページ分に相当するとまで言われています。スマートフォンの普及と通信環境の高速化が進んだ現代において、動画はWEB集客を成功させるための強力な武器となるのです。

動画がホームページ集客にもたらす強力な効果

ホームページに動画を掲載することは、単に見た目が華やかになるだけではありません。集客に繋がる、明確で強力なメリットが存在します。

テキストよりも圧倒的に情報量が多い

動画は、映像と音声（BGMやナレーション）を組み合わせることで、テキストや画像の何倍もの情報を、短時間で効率的に伝えることができます。

例えば、繊細な動きが特徴の工業製品であれば、その滑らかな動作を動画で見せるのが一番です。リフォーム会社なら、施工前と施工後の変化を動画で見せることで、お客さまはリフォーム後の素晴らしい生活をよりリアルに想像できるでしょう。

文章で長々と説明するよりも、サービスを利用している様子を数十秒の動画で見せるほうが、お客さまの理解度は格段に深まります。

記憶に残りやすく、離脱率を下げる

動きと音を伴う動画は、静的なテキストや画像に比べて、人の感情に訴えかける力が強く、記憶に残りやすいという大きな特徴があります。

特に、ホームページを開いて最初に目に入る画面である「ファーストビュー」に魅力的な動画を配置すると、訪れたお客さまの心を一瞬でつかみ、「このサイトは面白そうだ」と興味を持たせることができます。結果として、すぐにページを閉じられてしまう「離脱率」を下げ、サイト内をじっくりと見てもらうきっかけを作れるのです。

購買意欲やコンバージョン率の向上に繋がる

動画を通じて、商品の使い方を分かりやすく解説したり、サービスに込めた想いを社長自らが語ったりすることで、お客さまが購入前に抱える「これってどう使うんだろう？」「どんな人がやっている会社なのだろう？」といった疑問や不安を解消できます。

情報が視覚的にわかりやすくなることで、お客さまは安心して「問い合わせ」や「購入」といった次のステップへ進みやすくなります。その結果、ホームページの最終的な目標達成率である「コンバージョン率（成約率）」の向上に大きく貢献するのです。

動画利用の際に注意すべき３つのポイント

動画は非常に強力なツールですが、その力を最大限に引き出すためには、いくつか押さえておくべき注意点があります。

１. ページの読み込み速度に影響が出ないように調整する

動画ファイルは画像よりもはるかにデータ容量が大きいため、何も考えずに掲載すると、ページの表示速度を著しく低下させる原因となります。

前の章でお伝えした通り、表示の遅いサイトはお客さまが離れる大きな原因です。動画を掲載する際は、読み込み速度に影響が出ないよう、技術的な工夫を検討しましょう。

２. 音声がなくても内容が伝わるようにする

多くのお客さまは、通勤中の電車内や職場の休憩時間など、音声を出せない環境でスマートフォンからホームページを見ています。

そのため、音声がなくても動画の伝えたい内容がきちんと理解できるように、字幕やテロップ（画面に表示される文字）を必ず入れるようにしましょう。重要なポイントを文字で補足するだけで、動画の伝達力は大きく向上します。

３. 短く簡潔な動画で最後まで見てもらう工夫

よほど興味を引く内容でない限り、長い動画を最後まで集中して見てもらうのは難しいものです。伝えたいメッセージをひとつに絞り込み、できれば３分以内、長くても５分以内など、できるだけ短く簡潔にまとめることが重要です。

特に「最初の５秒」が勝負です。動画の冒頭で「この動画を見れば〇〇がわかります！」といったように、視聴するメリットを提示し、お客さまの心を一気につかむ工夫を凝らしましょう。

動画をホームページに「埋め込む」２つの方法

さて、実際に動画をホームページに掲載するには、どうすれば良いのでしょうか。主な方法として二つをご紹介します。

動画共有サイト（YouTubeなど）のコードから埋め込む

動画ファイルを直接サーバーにアップロードする

もうひとつは、動画ファイルそのものを、ご自身が契約しているサーバーに直接アップロードする方法です。HTMLの<video>というタグを使って表示させます。

YouTubeなどのロゴが表示されないため、完全に自社サイトのデザインに溶け込ませることができるのがメリットです。

しかし、動画ファイルはデータ容量が非常に大きいため、サーバーに多大な負荷をかけてしまい、かえってサイト全体の表示速度を遅くしてしまう危険性があります。

結論として、特別な理由がない限りは、YouTubeなどの動画共有サイトを利用して埋め込む方法を選択するのが最も安全で効果的と言えるでしょう。

【まとめ】画像・動画を活用術して集客につなげよう

ホームページにおける画像や動画の活用法を習得することは、WEB集客成功への近道になります。大切なのは、画像や動画を単なる飾りとしてではなく、「お客さまに未来の素晴らしい体験をイメージしていただくためのツール」として捉える視点です。

お客さまの心を惹きつけ、商品やサービスの魅力を最大限に伝えることで、ホームページは強力な営業マンの役割を果たしてくれます。

同時に、サイトの表示速度を損なわないための画像圧縮や適切な拡張子の選択、そして、何よりも重要な著作権のルールを守ることの大切さもお伝えしました。こうした技術的な基本とルールを守ることが、お客さまの信頼を損なわないための土台となります。

今回学んだ基本ルールと活用術を実践することで、御社のホームページは、単なる会社案内から、お客さまを惹きつけて離さない「強力な集客の窓口」へと生まれ変わるはずです。

さて、ここまで学んだ内容を活かして魅力的なホームページが完成したら、いよいよ公開です。しかし、ホームページは作って終わりではありません。むしろ、公開してからが本当のスタートなのです。

次回は、ホームページ運用における重要なステップへと進みます。

ホームページ公開前の最終チェックリストから、公開後に成果を出し続けるための「改善サイクル」の回し方、そして具体的な運用術まで、あなたのホームページを「成果の出る資産」へと育てていくための秘訣を解説します。

次回の講座はこちら