スマートフォンサイトを表示する

  1. TOP
  2. はじめて相談室 : 第31回 キャプションと代替テキストってなに?

エキスパートコラム

はじめて相談室

第31回:キャプションと代替テキストってなに?

執筆:#fc0(株式会社エフシーゼロ)

2017年11月13日更新

  • このエントリーをはてなブックマークに追加

閲覧数1,222views

このコラムをPDF形式でダウンロードする

「はじめて相談室」では、「はじめてWEB」を使ったホームページづくりが初めての方のお悩みや不安にナビゲーターがお答えします!「こんなこと聞いていいのかな…」という方大歓迎の相談室です。

今回は、ホームページの中のキャプションと代替テキストってなに?というご相談です。

おたより

はじめまして。早速ですが、画像を追加するときにずっと気になっていることがあります。
「キャプション」と「代替テキスト」という項目があるのですがこれはいったいなんなのでしょう?キャプションはなんとなくわかるのですが、代替テキストの意味が全くわかりません。
無視しても大丈夫なものですか?(80%カカオ)

ナビゲーターからの回答

ナビゲーター

80%カカオさん、はじめまして!
「はじめてWEB」ナビゲーターの広瀬みかです。

よく気づきましたね!画像の編集画面にある「キャプション」と「代替テキスト」!これに気づいている方って実はとても少ないんです。でもホームページを運営していく上でとても大事なものなのです。今日はこの「キャプション」と「代替テキスト」について解説します。

キャプションと代替テキストって?

今回の質問の「画像の追加のときに出てくるキャプションと代替テキスト」って?と思っている方も多いかと思います。まずはこちらから解説しますね。

[画像コンテンツ]の中で設定

[画像コンテンツ]を使って画像を選択するとタグっぽいアイコンがあります。これが[キャプションと代替テキスト]のボタンです。ここで「キャプション」と「代替テキスト」を設定することができます。

「あー!みたことある!でも使ったことなーい!」っていう方も多いかも。

キャプションと代替テキストの違いって?

この「キャプション」と「代替テキスト」はそれぞれ用途が違います。

キャプション 写真やイラストなどの画像に添える説明文
代替テキスト 画像の代わりとなる文章

うーん、これだけじゃよくわからないですよね。ということで、このあとキャプションと代替テキストの違いと使い方のコツをじっくりお伝えします!

キャプションにチャレンジしてみよう!

キャプションとは写真やイラストの下に添える文章のことです。
写真だけの表示でなく、写真の下にちょっとした説明文やコメントをつけると一層の臨場感が出ます。

キャプションのあるなしをみてみよう

まずこちらがキャプションがないときの表示です。いつもの感じですよね。

ではこれにキャプションをつけてみます。

こんな感じです。拡大してみましょう。

写真にちょっとした補足説明がつくだけで、なんだかとても臨場感が出たと思いませんか?

キャプションは「どんな写真なのか」という説明でもいいですし、ちょっとしたコメントで写真の説明に味を添えるのもいいと思います。

使いどころを見極めるのがポイント

キャプションは写真にプラスして説明できるのが便利なのですが、どんな画像にもキャプションをつけたらいいの?というと、そうではありません。

たとえば、挿絵的に入れているイメージ画像にまでキャプションを付けると、「情報がありすぎて」本当に見てほしい写真やイラストが目立たなくなってしまいます。「この画像にはしっかり説明文を入れたほうが伝わりやすいだろうな(^^)」というところに入れてみましょう。どの画像にキャプションをいれるかをいろいろ試してみてくださいね。

代替テキストを設定したワンナップ!

「代替テキスト」とは写真の代わりになる文字のこと。たとえばインターネット回線の都合で写真や画像が表示されなくても「ここにはこういう写真が入っていますよ!」ということを「文字で伝える」ことができます。画像を文字で伝えるためにあるので、「代替テキスト」を設定しても普段は画面に表示されません。

え?え?どういうこと??って思った方もいるかと思います。
以下の画面で解説していきますね。こちらはよく見る商品紹介の感じです。

代替テキストを指定していない場合

上の画面で[画像コンテンツ]に代替テキストを指定していない場合、画像が表示されない状態だったら、以下のように画像の存在さえわかりません。というか、画像の存在がない!

代替テキストを指定した場合

[画像コンテンツ]で代替テキストを指定した場合は、以下のように、写真を挿入したところに代替テキストで設定した文字列が表示されます。

なんとなくこんな感じの写真が入っているようだなぁ・・・ということがわかりますよね!

代替テキストの付け方ポイント

  • 画面を見た人が「写真なのかイラストなのか」がわかるかどうか
  • 電話で友だちに伝えるときにどう言うか

などを意識して写真や画像の見た目を説明する感じで入れるといいと思います。でも簡潔にね!

音声読み上げにもいい感じ

その他、パソコンやスマートフォンには、画面の内容を音声で読み上げてくれる「スクリーンリーダー」といわれる「画面を読み上げるソフト」が入っています(機種によってソフトが違います)。

このスクリーンリーダーを使うと、ホームページに書いてある文章を機械の音声で読み上げてくれます。
そして写真やイラストなど画像のところは「代替テキスト」に入力された文字を読み上げてくれるんです。すてきー!

最近は、ランニング中や車の運転中、お料理中など「しっかり画面を見ることができないとき」にスクリーンリーダーを使って「音声で情報を受取る」人が増えているようです。これからホームページを使ってビジネスをする上で音声対応も重要ですし、これはやるっきゃないですね!

SEOにも効果的

別に入れなくても大損害はでないですが、キャプションと代替テキストをちゃんといい感じで設定することでGoogleなどの検索エンジンとも仲良くなれます。

いかがでしたか?いままで「キャプション」と「代替テキスト」をスルーしていた方も、ぜひ試してみてくださいね☆

おたよりお待ちしています!

ナビゲーター

「はじめて相談室」では、みなさまからの「はじめてWEB」の素朴な疑問をお待ちしています!
「こんなこと聞いたら恥ずかしいかも。。。」というご質問大歓迎です!
「はじめてWEB」ナビゲーターがなんでもお答えしちゃいます!
おまちしてまーす!

ナビゲーターへの質問はこちらから!

このコラムでは、パソコン初心者の方からの
「こんなこと聞いてもいいのかしら?」という質問にお答えしています。

  • ※毎月1回程度のコラムですので、急を要する質問にはお答えできません。
  • ※すべての質問にお答えできるわけではありませんので、あらかじめご了承ください。
  • ※Jimdoの操作や、はじめてWEBに関する質問はQ&Aコーナーもご活用ください。

お名前(ペンネーム)

メールアドレス

質問

確認する

はじめてWEB

「はじめてWEB」でホームページを作成しよう!

「はじめてWEB」のホームページ開設支援サービスとは、7つのステップで簡単に無料で作成ができ、さらにその後1年間無料でご利用いただけるサービスです。

さあ、はじめよう!

さあ、はじめよう!

はじめてWEB ホームページ公開の7ステップとポイントを動画でご紹介!!

  • ホームページ公開の7ステップ

    ホームページ公開の7ステップ

    ホームページ公開の7ステップ
  • はじめてWEB サービス紹介

    はじめてWEB サービス紹介

    はじめてWEB サービス紹介
  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

#fc0(株式会社エフシーゼロ)

#fc0(株式会社エフシーゼロ)

JimdoExpert
http://fc0.vc/

「もっと多くの人に、"Webへの入口"を」をコンセプトに、中小企業や個人商店をメインとしたWebサイトの企画・制作・運営アドバイスなどの業務を行う。また、主に初心者を対象とした講師・執筆も多数。

主な著書に『デザインの学校 これからはじめるFireworksの本』(技術評論社)、『デザインの学校 これからはじめるDreamweaverの本』(同)、『ああしたい、こう変えたいが手にとるようにわかるCSS基礎』(共著、エムディエヌコーポレーション)など。

小さなお店&会社のホームページ Jimdo入門

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2018/2/11~2018/2/17]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ