COLUMN
よく検索されるキーワード
2026/10/05
ホームページ制作の基本Webアクセシビリティとは？誰にでも使いやすいホームページの基本
Webアクセシビリティとは？ Webアクセシビリティとは、障害の有無などにかかわらず、Webサイトの情報や機能を利用できるようにする考え方です。 たとえば、 画面を見づらい人 マウスを操作できない人 音声を聞くことが難しい人 文字の理解に時間がかかる人 など、それぞれ異なる方法でWebサイトを利用しています。 W3Cでは、Webアクセシビリティを、障害のある人がWebを知覚・理解・操作し、情報やサービスを利用できる状態と説明しています。 また、アクセシビリティへの配慮は障害のある人だけでなく、 高齢者 一時的にケガをしている人 日差しが強い場所でスマートフォンを見る人 音を出せない環境で動画を見る人 などにも役立ちます。 つまり、Webアクセシビリティは一部の人だけのためではなく、できるだけ多くの人が使いやすいホームページを作るための基本設計です。 なぜ企業サイトでも重要なのか 企業サイトでは、 商品・サービスを調べる 問い合わせる 予約する 求人へ応募する 資料を請求する など、さまざまな行動が行われます。 もし、 「文字が読めない」「ボタンを操作できない」「フォームの入力方法が分からない」 という状態になっていれば、ユーザーはサービスを利用できません。 アクセシビリティを改善することは、 より多くのユーザーへ情報やサービスを届けること につながります。 日本では2024年4月1日から改正障害者差別解消法が施行され、民間事業者にも障害のある人への合理的配慮の提供が義務化されています。 ただし、これは「すべての企業サイトが特定のWebアクセシビリティ規格へ完全準拠しなければ違法」という意味ではありません。 Webサイトも含め、利用上の障壁を減らす取り組みを継続的に考えていくことが重要です。 知っておきたいWCAGとJIS Webアクセシビリティには、代表的なガイドラインがあります。 WCAG WCAG（Web Content Accessibility Guidelines）は、W3Cが策定する国際的なWebアクセシビリティのガイドラインです。 2026年現在、WCAG 2.2がW3C Recommendationとして公開されています。 WCAGでは、大きく4つの原則に分けて考えます。 知覚可能：情報を認識できる 操作可能：サイトを操作できる 理解可能：内容や操作方法を理解できる 堅牢：さまざまな環境・支援技術で利用できる 適合レベルはA・AA・AAAの3段階に分けられています。 JIS X 8341-3 日本では、Webアクセシビリティに関する規格としてJIS X 8341-3:2016が広く参照されています。 デジタル庁の最新ガイドブックでも、現在参照されることの多い規格として紹介されています。 企業サイトで初めて取り組む場合、最初からすべてを完璧に対応しようとするより、影響の大きい部分から改善していくことが現実的です。 企業サイトで確認したい7つのポイント 文字と背景のコントラスト 薄いグレーの文字を白背景に配置すると、視力によっては読みづらくなります。 デザイン性だけでなく、十分に文字を認識できる色の差を確保しましょう。 画像に代替テキストを設定する 重要な画像には、内容を説明するalt（代替テキスト）を設定します。 たとえば商品写真なら、画像を見ることができないユーザーにも何の画像なのか伝わるようにします。 W3Cも、画像への適切な代替テキストをWebアクセシビリティの基本例として示しています。 見出しを正しい順番で使う ページタイトルや項目を、 H1 H2 H3 などの見出しタグで適切に構造化します。 単に文字を大きくするのではなく、内容の階層が分かるHTML構造にすることが重要です。 キーボードでも操作できるようにする すべてのユーザーがマウスを利用できるとは限りません。 メニュー ボタン フォーム モーダルウィンドウ などを、キーボードでも操作できるか確認します。 W3Cも、マウスだけに依存せずキーボードから機能を利用できることを基本的なアクセシビリティ例として紹介しています。 ボタンやリンクを分かりやすくする 「こちら」だけでは、リンク先が分かりにくくなります。 たとえば、 × こちら ではなく、 ○ 料金プランを見る○ お問い合わせフォームへ のように、押した後に何が起こるのか分かる文言にします。 フォームの入力方法を分かりやすくする 問い合わせフォームでは、 何を入力する項目なのか 必須なのか任意なのか 入力エラーの理由 どこを修正すればいいのか が分かる設計にします。 色だけでエラーを伝えるのではなく、 「メールアドレスを入力してください」 など文章でも伝えることが重要です。 動画には字幕・テキスト情報を用意する 音声だけで重要な内容を説明すると、音声を聞けないユーザーには情報が伝わりません。 必要に応じて、 字幕 テキスト説明 文字起こし などを用意します。 これは、電車内など音を出せない環境で動画を見るユーザーにも役立ちます。 よくあるアクセシビリティのNG例 企業サイトでは、次のような状態に注意しましょう。 文字が小さすぎる デザインを優先して本文まで極端に小さくすると、読みづらくなります。 薄い文字色を多用する おしゃれに見えても、背景とのコントラストが不足している場合があります。 画像内に重要な文章をすべて入れる 画像が表示されない環境やスクリーンリーダーでは、情報が伝わらない可能性があります。 色だけで情報を区別する たとえば、 「赤色が必須、緑色が任意」 だけでは、色を区別しづらいユーザーに伝わりません。 文字や記号も併用しましょう。 自動再生・激しい動きを多用する 動画やアニメーションを自動再生し続けると、利用しづらくなる場合があります。 停止・一時停止できる設計を検討します。 公開後もアクセシビリティを維持する アクセシビリティは、制作会社だけが対応すれば終わりではありません。 公開後に、 ブログを追加する バナーを作る PDFを掲載する 動画を追加する 新しいフォームを作る ことで、アクセシビリティが損なわれることがあります。 デジタル庁も2026年6月に、サイト公開後に追加されるコンテンツのアクセシビリティを扱う「ウェブアクセシビリティ広報向けガイドブック」を公開しています。 そのため、社内でも最低限、 画像には代替テキストを付ける 見出し構造を守る 読みやすい文字色を使う リンク先が分かる文章にする 動画には必要に応じて字幕を付ける といった更新ルールを決めておくことが大切です。 また、アクセシビリティチェックツールだけですべてを判定できるわけではありません。 W3Cも、ツールによる自動評価だけでは完全な判断はできず、人による確認も必要と説明しています。 まとめ：特別対応ではなく“使いやすいサイト”の基本 Webアクセシビリティという言葉を聞くと、 「特別な対応が必要なのでは？」 と難しく感じるかもしれません。 しかし基本は、 文字を読みやすくする 画像の内容を伝えられるようにする マウス以外でも操作できるようにする フォームのエラーを分かりやすくする 音声以外でも情報を伝える サイト構造を正しく作る といった、ホームページを使いやすくするための設計です。 WCAG 2.2などの基準を参考にしながら、自社サイトで影響の大きい部分から改善していきましょう。 アクセシビリティは一度対応して終わりではなく、ホームページを運用し続ける中で維持・改善するものです。 多くの人が迷わず情報を確認し、問い合わせ・予約・応募まで進めるホームページを目指しましょう。 無料相談 Refuでは、デザインの見た目だけではなく、文字の読みやすさ・情報構造・フォーム・スマートフォン操作など、実際のユーザーが使いやすいホームページ設計を重視しています。 「今のホームページが使いづらくないか確認したい」「リニューアルを機にアクセシビリティも見直したい」 といった場合も、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら スマホ対応は必須！レスポンシブデザインの基本 お問い合わせが増える導線設計｜CTA・ボタン・フォーム最適化の基本 原稿が書けないを解決！伝わる文章構成テンプレと作り方 ホームページの写真で反応が変わる｜撮影のコツと“使える写真”チェックリスト ホームページはどのくらい更新すべき？更新頻度と運用ルールの決め方
2026/09/30
デザイン・ブランディング多言語サイトのデザイン設計｜言語が変わっても崩れないレイアウトの考え方
多言語サイトは「日本語を翻訳するだけ」では作れない 海外顧客や外国人ユーザーに向けて、 英語 中国語 韓国語 ベトナム語 などのページを用意する企業が増えています。 ここで注意したいのが、 「日本語サイトをそのまま翻訳すれば完成する」 わけではないことです。 言語が変われば、 文章の長さ 単語の長さ 改行位置 フォント 読み方 情報の伝え方 も変わります。 そのため、多言語サイトでは最初から「言語が変わること」を前提にデザインすることが重要です。 まず結論：文章量が変わっても成立するデザインにする 多言語サイトで最も重要なのは、文字数をピッタリ合わせることではありません。 文章が少し長くなっても、短くなっても崩れないレイアウトを作ることです。 例えば日本語では、 「お問い合わせ」 という短い言葉でも、英語では、 Contact Us など別の長さになります。 文章になると差はさらに大きくなります。 そのため、 高さを固定しすぎない ボタン幅に余裕を持たせる 改行位置を固定しすぎない 文字数ありきでデザインしない といった設計が必要です。 多言語化でレイアウトが崩れる5つの原因 言語によって文字量が変わる 多言語化すると、同じ意味でも文章の長さは変わります。 特に、 キャッチコピー サービス名 見出し ボタン は影響を受けやすい部分です。 日本語版だけを見て文字サイズや枠の高さをギリギリまで調整すると、翻訳時に崩れやすくなります。 少し余白を持ったレイアウトにしておきましょう。 ボタン・メニュー幅を固定している ヘッダーメニューも注意が必要です。 日本語なら、 会社概要 で収まっていても、英語では、 Company Profile になることがあります。 メニュー幅を固定すると、 2行になる 隣のメニューと重なる ヘッダー全体が崩れる といった問題が起こります。 文字量に合わせて伸縮できる設計にするのが基本です。 日本語前提のフォントを使っている 日本語フォントが、すべての言語に対応しているとは限りません。 対応していない文字では別フォントへ切り替わり、ページ内で雰囲気が変わる場合があります。 多言語化する場合は、 日本語 英数字 対象言語 で実際に表示を確認しましょう。 フォントが変わってもブランドイメージが崩れないかまで確認することが大切です。 画像の中に日本語を入れている 例えば、 「選ばれる3つの理由」 という文字を画像そのものに入れている場合、英語版では画像も作り直す必要があります。 記事やページ数が増えるほど運用負担も大きくなります。 可能であれば、 文字はHTML、写真やイラストは画像 と役割を分けましょう。 画像内に文字を入れる場合は、言語ごとの制作・管理が必要になることを前提にします。 言語切替が分かりにくい 多言語ページを作っても、切り替え方法が分からなければ意味がありません。 おすすめは、ヘッダーなど分かりやすい場所に、 日本語｜English のような言語切替を設置することです。 国旗だけで表現すると、国と使用言語が必ずしも一致しないため、言語名も表示した方が分かりやすくなります。 多言語サイトで押さえたいデザインの基本 多言語サイトでは、次の5点を意識すると大きく崩れにくくなります。 余白を多めに取る 文章が長くなっても窮屈に見えないようにします。 高さを固定しすぎない カードやテキストエリアは、文章量に応じて伸びる設計にします。 横幅の狭いボタンを避ける 文字数が増えても対応できる余裕を持たせます。 写真とテキストを分ける 画像内文字を減らし、翻訳・更新しやすくします。 スマホでも必ず確認する PCでは問題なくても、スマートフォンでは改行が増え、デザインが大きく変わります。 特に見出し・ボタン・表・料金表示は確認しましょう。 翻訳するときは「直訳」ではなく、伝える内容を揃える 多言語化では、日本語を一語ずつ置き換えることが目的ではありません。 重要なのは、 「日本語版と同じ価値が伝わっているか」 です。 例えば日本語特有の、 丁寧な言い回し 抽象的なキャッチコピー 業界特有の略語 日本独自のサービス名称 は、そのまま翻訳しても意味が伝わりにくい場合があります。 そのため、 原文 → 翻訳 ではなく、 伝えたい意味を整理 → 対象言語で自然な表現へ調整 という考え方がおすすめです。 特に、 サービス説明 契約条件 料金 注意事項 など重要な内容は、機械翻訳だけで公開せず、必要に応じて対象言語に詳しい人による確認を行いましょう。 多言語SEOで最低限確認したいポイント デザインと同時に、検索エンジンへの対応も必要です。 言語ごとにURLを分ける Googleは、多言語ページについて言語ごとに異なるURLを使用することを推奨しています。 例えば、 example.com/ja/ example.com/en/ といった形です。 hreflangを適切に設定する 同じページに日本語版・英語版がある場合は、hreflangを使って、どの言語・地域向けのページなのかGoogleへ伝えられます。 勝手に別言語へリダイレクトしない Googleは、ブラウザや推測したユーザー言語によって強制的に別言語ページへ転送するのではなく、ユーザー自身が言語を切り替えられるリンクを用意することを推奨しています。 1ページ内に複数言語を混在させすぎない Googleはページ上の表示テキストから言語を判断します。 そのため、日本語と英語を同じページに大量に併記するより、言語ごとにページを分け、各ページでは基本的に1つの言語を使用する方が分かりやすい設計です。 なお、Google検索はページ言語の判断にHTMLのlang属性を利用しませんが、W3Cはスクリーンリーダーなどが適切な言語で読み上げられるよう、HTMLでページの言語を指定することを推奨しています。 SEOとアクセシビリティは分けて考えましょう。 公開後の運用で崩さないためのルール 多言語サイトは、公開後の更新で差が生まれやすいサイトです。 例えば日本語版だけ、 新サービスを追加 料金を変更 会社情報を変更 して、英語版が古いまま残るケースがあります。 そこで、 「日本語版を更新したら、多言語ページも確認する」 という運用ルールを作ります。 特に同期したいのは、 会社概要 サービス内容 料金 営業時間 問い合わせ先 利用規約 プライバシーポリシー です。 すべての記事を必ず全言語へ翻訳する必要はありません。 どの情報を全言語共通で管理するのかを最初に決めておくことが重要です。 多言語サイト制作チェックリスト デザイン 文章が長くなってもレイアウトが崩れない ボタン幅に余裕がある カードの高さを固定しすぎていない 対象言語でフォント表示を確認した 画像内の文字を必要最小限にしている スマホでも確認している コンテンツ 直訳だけになっていない サービス名称が統一されている 料金・条件が日本語版と一致している 翻訳が難しい重要情報を確認している SEO・実装 言語ごとにURLを用意している hreflangを適切に設定している 言語切替リンクがある 自動リダイレクトに依存していない ページのlang属性を適切に設定している 運用 日本語版更新時の確認ルールがある 翻訳担当・確認担当が決まっている 古い料金・会社情報が残らない仕組みがある どの記事を翻訳するか基準が決まっている まとめ：言語が変わっても“同じブランド”に見える設計を 多言語サイトで重要なのは、日本語サイトとまったく同じ見た目にすることではありません。 言語が変われば、文字量やフォント、改行位置も変わります。 その違いを受け入れながら、 色・写真・余白・情報の優先順位・ブランドのトーン を統一することが重要です。 多言語化するなら、 「日本語サイトを完成させてから翻訳を流し込む」 のではなく、 最初から複数言語でも崩れない構造を作る。 この考え方が、デザイン品質と更新しやすさの両方につながります。 運用・法務面の注意 海外向けサイトでは、対象国・地域によって、個人情報保護、Cookie、通信販売、広告表示などに関するルールが日本と異なる場合があります。 特に問い合わせフォームやEC機能を設ける場合は、「日本語サイトのプライバシーポリシーをそのまま翻訳すればよい」とは限りません。 対象地域とサービス内容に応じて、必要に応じて専門家へ確認しましょう。 多言語サイト設計ならRefuへお任せください Refuでは、日本語サイトを単純に翻訳するのではなく、文章量の違い・スマホ表示・言語切替・ブランド統一・更新運用まで考慮した多言語サイト設計をご提案します。 「海外向けに英語ページを作りたい」「現在のサイトを多言語化するとデザインが崩れそう」 といった場合も、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら 色・フォント・写真で変わる印象！Webデザインの基本原則 トーン＆マナーの整え方｜ブランドらしさを伝えるデザイン戦略 フォント選びで損しない｜和文・欧文の組み合わせと読みやすさの鉄則 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方 企業ロゴやコーポレートカラーを活かした統一ブランディング術 スマホで差がつくUI改善｜押しやすさ・読みやすさのチェックポイント Webアクセシビリティを意識したデザインとは？中小企業サイトの改善ポイント
2026/09/23
デザイン・ブランディングWebサイトと営業資料のデザインを統一する方法｜ブランド体験を揃える運用ルール
Webサイトだけ整えても、ブランド体験は完成しない ホームページをリニューアルして、 ロゴを整えた ブランドカラーを決めた 写真撮影をした キャッチコピーを作った デザインを統一した にもかかわらず、営業担当者が顧客へ送る提案書を見ると、 Webサイトとはまったく違う色・フォント・写真・言葉遣いになっている。 こうした状態は珍しくありません。 ユーザーからすると、Webサイトも営業資料も同じ企業との接点です。 ホームページでは洗練された印象だったのに、送られてきた資料が古いデザインだった場合、 「Webサイトだけきれいに作っている会社なのかな」 という違和感につながる可能性があります。 逆に、 Webサイト↓会社案内↓営業資料↓提案書↓商談 まで同じ世界観でつながっていれば、企業としての一貫性を感じてもらいやすくなります。 ブランドはホームページだけで作るものではありません。 顧客が企業と接するすべての場面で、同じ印象を積み重ねることで形成されます。 まず結論：統一すべきなのは「見た目」ではなく“判断ルール” デザインを統一するというと、 「全部同じ色にする」「全部同じテンプレートを使う」 と考えられがちです。 しかし、本当に揃えるべきなのは判断ルールです。 例えば、 ブランドカラーは青 だけでは運用ルールとして不十分です。 より具体的には、 メインカラーはどこに使うか 背景にはどの色を使うか 強調色は何色か CTAはどの色にするか グラフでは何色まで使えるか まで決めます。 フォントも同様です。 「ゴシック体を使う」 だけではなく、 大見出し 小見出し 本文 数字 注釈 で使い方を決めることで、Webでも資料でも同じ印象を再現できます。 つまりブランド統一とは、 「誰が作っても、その会社らしくなる仕組みを作ること」 です。 Webサイトと営業資料で揃えるべき7つの要素 ロゴとロゴ周辺の余白 ロゴはブランドの中心となる要素です。 ところが営業資料では、 ロゴを必要以上に大きくする 縦横比を変える 背景に埋もれる 別の色に変更する 周囲に文字を近づけすぎる といったことが起こりやすくなります。 最低限、 使用できるロゴデータ 背景別の使用パターン 最小サイズ 周囲に確保する余白 変形・色変更の禁止 を決めておきましょう。 ロゴを毎回違う扱いにしないことが、ブランド統一の第一歩です。 ブランドカラーと配色ルール Webサイトでは配色を厳密に決めていても、PowerPointやGoogleスライドでは担当者が自由に色を追加してしまうことがあります。 例えば、 Webサイト：青・白・グレー なのに、 営業資料：青・赤・黄色・緑・紫 となれば、ブランドの印象は大きく変わります。 おすすめは、 メインカラーブランドを象徴する色 サブカラー背景や補助に使う色 アクセントカラーCTA・重要情報などに限定して使う色 ニュートラルカラー白・黒・グレーなど に役割を分けることです。 さらに、資料内のグラフなどで追加色が必要な場合も、 「グラフ用カラーセット」 をあらかじめ用意すると崩れにくくなります。 フォントと文字の階層 Webサイトと営業資料で完全に同じフォントを使えない場合もあります。 例えばWebフォントがPowerPoint環境に入っていなければ、そのまま再現できません。 その場合は、 Web用フォントと資料用代替フォントをあらかじめ指定 しておきます。 例えば、 WebNoto Sans JP 営業資料Noto Sans JPまたは環境に応じた指定フォント という形です。 重要なのはフォント名そのものより、 大見出しは太く大きく 本文は読みやすく 注釈は小さく 強調は太字 むやみに色を使わない といった情報階層を統一することです。 写真・イラストのトーン Webサイトではプロが撮影した写真を使っているのに、営業資料では突然テイストの違うフリー素材が登場する。 これもブランドが崩れる典型例です。 写真では、 明るさ 色温度 人物の表情 背景 構図 加工方法 を揃えます。 例えばブランドが、 誠実／上質／落ち着き なら、 自然な表情 落ち着いた色 余白のある構図 を基本にします。 逆に、 親しみ／活発／楽しい なら、明るい表情や動きのある写真を選ぶ方法があります。 写真選定にもブランドの判断基準を持ちましょう。 コピー・言葉遣い・表記 ブランド統一は、デザインだけではありません。 例えばWebサイトでは、 「お気軽にご相談ください」 と柔らかいトーンなのに、営業資料では、 「弊社サービスの導入をご検討ください」 と急に固くなると、企業の人格が変わったように感じられます。 揃えたいのは、 丁寧さ 専門用語の使い方 漢字・ひらがなの割合 サービス名称 呼び方 キャッチコピー 数字表記 などです。 特にサービス名は、 Webサイト：Web制作支援営業資料：ホームページ制作サービス見積書：サイト制作事業 のようにバラバラになりやすいため、正式表記を決めておきます。 図解・グラフ・アイコン 営業資料では、Webサイト以上に図解・グラフが使われます。 ここも統一しないと、ブランド感が崩れます。 揃えたいポイントは、 矢印の形 線の太さ 角丸 アイコンのテイスト グラフカラー 見出しデザイン 図形の形 です。 例えば、 Webサイトでは線画アイコンなのに、営業資料だけ立体的なイラストを使うと別ブランドに見えます。 図解のルールを、そのまま営業資料にも展開すると運用しやすくなります。 CTAや問い合わせの見せ方 Webサイトだけでなく営業資料にも、 次に何をしてほしいのか を明確にします。 例えば資料の最後に、 お問い合わせ 無料相談 QRコード WebサイトURL 電話番号 を掲載します。 ここでも、WebサイトのCTAと表現を揃えることが重要です。 Webでは、 「無料相談はこちら」 なのに、資料では、 「お問い合わせください」 となっているなら、可能な範囲で統一します。 同じ行動を、同じ言葉で案内することで認知がつながります。 なぜデザインがバラバラになる？よくある5つの原因 制作担当者が違う Webサイトは制作会社、営業資料は営業担当者、会社案内は印刷会社。 このように担当者が分かれていると、個別最適になりやすくなります。 元データが共有されていない ロゴデータやブランドカラーが分からないため、営業担当者が、 「なんとなく近い青」 を使ってしまいます。 デザインガイドラインがない 「Webサイトを見て同じ感じにしてください」 だけでは、判断が人によって変わります。 営業資料が継ぎ足しで作られている 過去資料へページを追加し続けることで、 フォントが違う 色が違う 古いロゴが残る サービス名が古い という状態になります。 統一する責任者が決まっていない 最終的に、 「誰がブランドを管理するのか」 が決まっていないと、ルールがあっても崩れていきます。 統一感を作るためのデザインガイドラインの作り方 最低限のルールから始める 最初から100ページのブランドガイドを作る必要はありません。 中小企業であれば、まずは次の項目だけでも十分です。 ロゴ 使用データ 余白 NG例 カラー メイン サブ アクセント 背景 フォント 見出し 本文 数字 写真 明るさ トーン NG写真 図解・アイコン 使用スタイル 色 コピー 基本的な言葉遣い サービス正式名称 この6項目が決まるだけでも、かなり統一しやすくなります。 Web用・資料用で共通ルールと例外を分ける すべてを完全に同じにする必要はありません。 Webと営業資料では媒体特性が違います。 例えば、 Web スクロール前提 アニメーションが使える CTAを複数配置できる 営業資料 ページ単位 印刷される可能性がある 商談しながら説明する という違いがあります。 そのため、 ブランドとして揃える要素 と、 媒体ごとに最適化してよい要素 を分けます。 ブランド統一とは、すべてをコピーすることではありません。 同じブランドに見える範囲で、媒体ごとに最適化すること です。 NG例まで決めておく 「こうしてください」だけでなく、 「これはやらない」 も重要です。 例えば、 ロゴの変形禁止 グラデーション禁止 ブランドカラー以外の強調色を追加しない 影を多用しない 写真を過度に加工しない フォントを3種類以上使わない などです。 NG例があると、デザインに詳しくない人でも判断しやすくなります。 テンプレート化して誰でも使える状態にする ルールをPDFで配るだけでは、実際の運用では守られないことがあります。 そこで、 PowerPoint Googleスライド Canva Figma などで営業資料テンプレートを作ります。 例えば、 表紙 会社紹介 課題 サービス紹介 強み 実績 料金 導入フロー FAQ 問い合わせ までテンプレートを用意します。 営業担当者は文章と写真だけ変更すればよい状態にすると、ブランドを維持しやすくなります。 営業資料で特に注意したいデザインポイント 1ページ1メッセージにする 営業資料に情報を詰め込みすぎると、商談中にどこを見ればよいか分からなくなります。 基本は、 1ページ＝1つの主張 です。 例えば、 私たちの強みは3つあります というページなら、料金・事例・会社概要まで同じページに入れないようにします。 Webサイトと同じ説明順に揃える Webサイトでは、 課題 → 解決策 → 強み → 事例 なのに、営業資料では、 会社概要 → 沿革 → サービス → 課題 では、説明の印象が変わります。 可能であれば、 Webサイトと営業資料の“ストーリー”を揃える ことをおすすめします。 すると、 Webで事前確認↓営業資料で説明↓Webで再確認 という流れでも理解がつながります。 図解・事例を共通資産として使う 毎回同じ説明をゼロから作らず、 ブランド共通パーツ として管理します。 例えば、 サービス全体図 制作フロー 料金表 導入事例 対応エリア 比較表 などです。 Web用と資料用でサイズを最適化しながら、内容とデザインは共通にします。 こうすることで、情報のズレも防げます。 営業担当者が編集しても崩れない設計にする 営業資料は、最終的に現場で編集されます。 そのため、 「絶対に触らないでください」 では現実的ではありません。 むしろ、 編集してよい場所 固定する場所 写真の差し替え方法 ページ追加の方法 使える色 を決めます。 変更される前提で設計すること が、運用できるブランドガイドラインです。 Webサイトと資料の内容がズレない運用方法 ブランドの統一で意外と問題になるのが、見た目より情報のズレです。 例えば、 Webサイト：月額30,000円〜 営業資料：月額25,000円〜 となっていれば、ブランド以前に信頼を落とします。 そのため、共通情報は管理元を決めておきましょう。 例えば、 会社情報 会社名 所在地 代表者 設立 電話番号 サービス情報 サービス名称 料金 提供内容 対応範囲 実績情報 実績件数 顧客名 数値成果 などです。 さらに、 情報を変更したときに何を更新するか までルール化します。 例： 料金変更 Webサイト↓営業資料↓会社案内↓見積テンプレート↓FAQ を同時に確認する。 こうした更新チェックリストがあると、情報の古さを防げます。 ブランド統一でやってはいけないNG例7つ ロゴだけ統一して満足する ロゴが同じでも、色・写真・文章・図解が違えばブランドは揃いません。 WebデザインをそのままPowerPointへコピーする 媒体が違うため、読みづらくなる場合があります。 世界観は揃え、レイアウトは媒体に最適化 しましょう。 営業担当者ごとに資料テンプレートが違う Aさんは青、Bさんは赤、Cさんは昔の資料。 この状態を避けるため、正式テンプレートを1つ決めます。 ブランドカラーを増やし続ける 「この資料だけ目立たせたい」と色を増やすと、少しずつ世界観が崩れます。 古いロゴ・料金・実績が残る デザイン統一以前に、情報の不一致が信頼を損ないます。 ガイドラインが細かすぎて誰も使わない ルールが難しすぎると、現場で守られません。 必要最低限＋テンプレート を基本にしましょう。 デザイン担当だけがルールを知っている 営業・採用・広報など、実際に資料を作る人へ共有されなければ意味がありません。 ブランドはデザイナーだけで管理するものではなく、組織全体で運用するものです。 このまま使えるブランド統一チェックリスト ロゴ 正式なロゴデータが共有されている Webと資料で同じロゴを使用している 縦横比を変更していない ロゴ周辺の余白ルールがある 旧ロゴが残っていない カラー メインカラーが決まっている サブカラーが決まっている アクセントカラーが決まっている RGB／HEXなどの値が共有されている 資料担当者が自由に色を追加していない グラフ用カラーが決まっている 文字 見出し用フォントが決まっている 本文用フォントが決まっている 資料用の代替フォントが決まっている 見出し・本文・注釈の階層が統一されている サービス名称の正式表記が統一されている 写真・図解 写真のトーンが揃っている サイトと無関係なフリー素材を多用していない アイコンのテイストが揃っている 図解の線・色・角丸が揃っている Webと営業資料で共通図解を利用している コンテンツ 会社情報が一致している サービス内容が一致している 料金が一致している 実績件数が一致している キャッチコピーが一致している Webと営業資料で説明の流れが大きくズレていない 運用 正式な営業資料テンプレートがある 編集してよい箇所が決まっている ブランドガイドラインが共有されている 更新担当者が決まっている 情報変更時の更新対象が一覧化されている 古い資料を使用しないルールがある まとめ：ブランドは“一つの制作物”ではなく、すべての接点の積み重ねでできる Webサイトのデザインを整えることは、ブランディングの重要な一歩です。 しかし顧客は、ホームページだけを見て企業を判断しているわけではありません。 SNSを見る。営業資料を見る。提案書を見る。担当者と話す。見積書を見る。 それらすべてを通して、 「この会社はこういう会社なんだ」 という印象を作っています。 だからこそ、Webサイトだけ高品質にするのではなく、 色フォント写真コピー図解サービス名称問い合わせ導線 まで共通のルールで整えることが重要です。 そして本当に重要なのは、一度きれいに揃えることではありません。 更新しても、担当者が変わっても、資料が増えてもブランドが崩れない仕組みを作ること。 デザインガイドラインとテンプレートを用意し、Web・営業・採用・広報で共通利用できるブランド資産を作る。 これが、継続的にブランドを育てるための運用方法です。 運用・法務面の注意 Webサイトから営業資料へ写真・顧客ロゴ・事例・お客様の声などを流用する場合は、Web掲載の許可だけで営業資料への二次利用まで認められているとは限りません。 特に、 顧客企業のロゴ 担当者の顔写真 お客様のコメント 制作事例 外部から購入した写真・イラスト は、利用許諾の範囲を確認しましょう。 また、営業資料に 「No.1」「満足度〇％」「売上〇倍」 などの表現を追加する場合も、Webサイトと同様に根拠・条件・対象期間を確認することが重要です。 「社内資料だから」「営業時だけ使うから」という理由で、誤認につながる表現を自由に使えるわけではありません。 ブランドの統一だけでなく、表現の正確性まで統一することが信頼につながります。 Webサイト・営業資料のブランド統一ならRefuへ Refuでは、Webサイト単体のデザインだけでなく、ロゴ・カラー・写真・コピー・図解などを整理し、営業資料や会社案内まで展開しやすいブランド設計を行っています。 「ホームページをリニューアルしたが営業資料が古いまま」「担当者ごとに資料のデザインが違う」「社内でブランドを統一できるルールを作りたい」 といった場合も、現在使っている制作物を整理しながら改善方法をご提案します。 ▶ 無料相談はこちらから その他おすすめ記事はこちら 企業ロゴやコーポレートカラーを活かした統一ブランディング術 トーン＆マナーの整え方｜ブランドらしさを伝えるデザイン戦略 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方 ブランドを言語化する「3語ルール」｜デザインがブレない軸の作り方 配色に迷わない｜メイン・サブ・アクセントの黄金比と運用ルール ブランドらしさが伝わる写真撮影の準備｜構図・服装・背景・チェックリスト 図解・グラフで難しいサービスを分かりやすく伝えるデザイン術
2026/09/02
デザイン・ブランディング図解・グラフで難しいサービスを分かりやすく伝えるデザイン術
難しいサービスほど「文章を増やす」だけでは伝わらない ホームページでサービス内容を説明するとき、 「専門的な内容だから、詳しく説明しなければ」 と考え、文章を増やしていないでしょうか。 特に、 Web・IT コンサルティング 製造業 士業 人材サービス 医療・福祉 法人向けソリューション などは、サービスそのものが目に見えなかったり、仕組みが複雑だったりするため、説明が長くなりやすい傾向があります。 しかし、説明量を増やせば増やすほど伝わるとは限りません。 例えば、 「ヒアリング後に現状分析を行い、課題を整理したうえで戦略を設計し、その後制作・実行・検証・改善まで一貫して対応します」 という文章。 内容は理解できますが、一度読んだだけでは全体の流れをイメージしにくいでしょう。 これを、 ヒアリング → 分析 → 戦略設計 → 実行 → 検証 → 改善 という図にすれば、サービスの流れを短時間で把握できます。 難しいサービスほど必要なのは、説明を増やすことではありません。 「文章で詳しく説明する情報」と「図や表で直感的に理解してもらう情報」を分けることが重要です。 まず結論：図解は「理解するまでの時間」を短くするために使う 図解というと、 「ページが寂しいから入れる」「デザイン性を高めたいから作る」 と考えられることがあります。 しかし、本来の役割は装飾ではありません。 図解の目的は、ユーザーが情報を理解するための負担と時間を減らすことです。 文章だけなら30秒かかる説明を、図を見ることで5秒程度で理解できるのであれば、その図解には意味があります。 反対に、図を見ても、 「結局、何を表しているのか分からない」 となるのであれば、図解した意味がありません。 作り始める前に、 「この図を見た人に、何を一瞬で理解してほしいのか？」 を決めることが重要です。 図解にした方が伝わりやすい情報6パターン 流れを伝える｜フロー図・ステップ図 時間や工程の順番がある情報は、文章よりも図解に向いています。 例えばホームページ制作なら、 お問い合わせ↓ヒアリング↓企画・設計↓デザイン↓構築↓公開↓運用・改善 という流れです。 特に、 制作の流れ 契約までの流れ サービス利用の流れ 商品発送までの流れ 採用選考の流れ などは、ステップ形式にすると全体像を理解しやすくなります。 さらに、 STEP 1 ヒアリング目的・課題・ご希望を整理します。 のように短い補足を添えることで、「何をする工程なのか」まで伝えられます。 違いを伝える｜比較表・Before／After 自社サービスと一般的なサービスの違いを長文で説明するより、比較表にした方が判断しやすい場合があります。 例えば、 一般的な制作 制作前：依頼内容をもとに制作制作後：納品して終了 改善型の制作 制作前：目的・ターゲット・導線を整理制作後：アクセス解析・改善まで支援 と整理すれば、違いが一目で分かります。 比較する場合は、 料金 対応範囲 サポート 納期 特徴 向いているケース など、ユーザーが実際に比較・判断する項目を選びましょう。 自社に有利な項目だけを並べるのではなく、ユーザーが納得して選べる材料を整理することが大切です。 全体像を伝える｜関係図・構造図 複数のサービスや施策が連携している場合は、関係図が効果的です。 例えば、 SEO・SNS・広告・オウンドメディア↓ホームページ↓問い合わせ・採用・売上 という形です。 この方法は、 ITシステム マーケティング 人材サービス コンサルティング 組織体制 製造工程 など、複数の要素がどのようにつながっているのかを説明するサービスに向いています。 数値を比較する｜棒グラフ 複数の数値を比較したい場合には、棒グラフが分かりやすい方法の一つです。 例えば、 問い合わせ件数 部門別売上 サービス別利用数 年代別利用者 顧客アンケート結果 などです。 棒グラフは、どの項目が大きいのか、小さいのかを比較するときに向いています。 項目を増やしすぎると読み取りにくくなるため、伝えたい比較に絞りましょう。 時系列の変化を伝える｜折れ線グラフ 時間の経過に伴う変化を見せたい場合は、折れ線グラフが適しています。 例えば、 サイトリニューアル前後12か月の問い合わせ数 などです。 「問い合わせが増えました」と文章で説明するだけでなく、グラフにすることで、 いつから、どの程度変化したのか を確認できます。 ただし、成果の変化をすべてWebサイトだけの効果と断定できるとは限りません。 広告施策、営業体制、季節性、市場環境など他の要因が考えられる場合は、その条件も合わせて説明しましょう。 役割や対応範囲を伝える｜マトリクス・領域図 「何ができる会社なのか」が分かりにくい場合は、対応領域を図にすると効果的です。 例えば、 企画 → 制作 → 集客 → 分析・改善 という流れの中で、Refuが対応できる範囲を色などで示します。 「企画から運用まで対応します」と文章だけで伝えるよりも、どこからどこまで任せられるのかを具体的に見せることができます。 BtoB・専門サービスで図解が特に効果的な5つの場面 サービスの仕組みが見えにくい 商品販売であれば、実際の商品を見せることができます。 一方、コンサルティング、Web制作、システム開発などは、依頼前に完成形が見えにくいサービスです。 そのため、 「依頼すると、具体的に何をしてくれるのか」 を図で示すことが重要になります。 他社との違いを説明しづらい 「丁寧に対応します」「ワンストップで支援します」 という表現だけでは、競合との違いが伝わりません。 例えば、 一般的な制作会社企画 → 制作 → 納品 自社企画 → 制作 → 公開 → 分析 → 改善 と比較すれば、対応範囲の違いを具体的に伝えられます。 ブランドの強みは、コピーだけではなく、サービスの構造として見せることもできます。 導入後の流れが想像できない サービス内容を理解していても、 「問い合わせた後はどう進むの？」 が分からなければ、相談へのハードルは下がりません。 導入フローを図解することで、 打ち合わせは何回程度あるのか どの段階で費用が決まるのか 自社で何を準備するのか いつ頃完成するのか など、問い合わせ前の不安を減らせます。 料金の理由が伝わりにくい 「ホームページ制作100万円」 と金額だけ書かれていても、高いのか安いのかを判断することは難しいでしょう。 そこで、 戦略設計＋サイト構成＋ライティング＋デザイン＋システム構築＋公開支援 と整理すると、何に費用がかかっているのかが分かります。 料金そのものではなく、価格を構成している内容を可視化することで納得感を高められます。 成果や改善内容を具体的に示したい 制作事例・導入事例では、図解やグラフが特に有効です。 例えば、 Before サービスページ↓問い合わせ だけだった導線を、 After 記事↓サービス↓事例↓料金↓問い合わせ へ変更したとします。 図で示せば、具体的に何を改善したのかが分かります。 実際の数値がある場合は、条件を明示したうえで変化も合わせて紹介すると、事例の説得力を高められます。 伝わる図解を作る7つのデザインルール 1つの図で伝えることは1つに絞る 最も重要なポイントです。 1枚の図に、 サービス内容 強み 流れ 料金 実績 をすべて入れると、図自体が複雑になります。 図解にはタイトルを付け、 「この図では何を説明するのか」 を明確にしましょう。 見る順番を設計する 図解にも視線の流れがあります。 フローであれば、 左 → 右または上 → 下 など、読む方向を統一します。 矢印が途中で戻ったり、上下左右へ行き来したりすると、理解するための負担が増えます。 「どこから見ればいいのか」をユーザーに考えさせないことが大切です。 色に役割を持たせる 図解をカラフルにする必要はありません。 例えば、 通常情報：グレー 自社の強み：ブランドカラー 特に重要なポイント：アクセントカラー のように役割を決めます。 色数を絞ることで、強調したい情報が分かりやすくなります。 サイト全体の配色ルールと統一することも重要です。 文章を詰め込みすぎない 図解の中に長文を入れると、文章を四角で囲っただけのデザインになってしまいます。 例えば図の中では、 戦略設計 → 制作 → 公開 → 改善 程度まで情報を絞り、詳細は図の下の本文で説明します。 図＝要点本文＝詳細 と役割を分けましょう。 アイコンは意味を補助するために使う アイコンは視認性を高めるために便利ですが、アイコンだけで意味を伝えるのは避けましょう。 例えば、 電話アイコン＋「電話で相談」メールアイコン＋「メールで問い合わせ」 のように、短いテキストとセットで使います。 見た人が意味を推測しなければならないような抽象的なアイコンは、かえって理解を妨げることがあります。 スマホで読める大きさを基準にする PC用に横長の図を作ると、スマートフォンで縮小された際に文字が読めなくなることがあります。 特に、 比較表 フロー図 組織図 大きな関係図 は注意が必要です。 必要に応じてスマートフォンでは、 横並び → 縦並び へレイアウトを変更します。 図解も通常のページと同じように、レスポンシブ対応を前提に設計することが重要です。 ブランドのデザインルールを統一する 図解だけが別のデザインになると、サイト全体の統一感が失われます。 揃えたいのは、 フォント ブランドカラー 線の太さ 角丸 アイコン 矢印 グラフの色 余白 などです。 記事やページごとにゼロから作るのではなく、図解用のデザインルールを決めておくことで、運用時の品質も安定します。 グラフで失敗しないための注意点｜数字を強く見せすぎない グラフは説得力があるからこそ、見せ方には注意が必要です。 例えば、 100件 → 105件 という5％の増加でも、縦軸を99から始めれば、非常に大きく増えたように見せることができます。 また、 都合のよい期間だけを切り取る 母数を書かない 比較条件を揃えない パーセントだけを大きく表示する 自社に有利な比較対象だけを選ぶ といった表現も、実態以上の印象を与える可能性があります。 グラフを掲載するときは、必要に応じて、 何の数値か 対象期間 母数 計測方法 比較条件 出典 を明示しましょう。 特に「No.1」「〇％改善」「問い合わせ〇倍」など、商品・サービスの優良性や成果を示す表現は、根拠を確認したうえで掲載する必要があります。 グラフは数字を大きく見せるためではなく、正しく理解してもらうために使うものと考えることが重要です。 SEO・アクセシビリティで注意したいこと｜重要情報を画像だけにしない 図解はユーザーにとって分かりやすい一方、 画像の中にすべての情報を書き、本文には説明がない という状態は避けましょう。 例えば「ホームページ制作の流れ」を図解した場合でも、図の近くに、 ヒアリング 企画・設計 デザイン 構築 公開 といった情報をHTMLテキストでも掲載します。 これによって、 画像を確認できないユーザー 画面読み上げソフトを利用するユーザー 画像が読み込まれなかった環境 でも、必要な情報を確認できます。 図解を掲載するときは、次の点を確認しましょう。 図解と関連する本文を近くに配置する 意味のある画像に適切なalt属性を設定する altにSEOキーワードを不自然に詰め込まない 図だけに重要な情報を閉じ込めない 分かりやすい画像ファイル名を付ける 必要以上に重い画像を使用しない スマートフォンに合わせて画像サイズを最適化する SEOのために図解を作るのではなく、ユーザーの理解を助け、その内容を検索エンジンにも正しく伝えられる状態を作ることが基本です。 図解制作の進め方｜文章から図に変換する5ステップ STEP1. まず文章で内容を整理する 最初からデザインソフトを開く必要はありません。 まず、 「この情報で何を伝えたいのか」 を文章で整理します。 STEP2. 情報の種類を判断する 次に、情報の性質を確認します。 順番→ フロー図 比較→ 比較表・棒グラフ 時系列の変化→ 折れ線グラフ・Before／After 関係性→ 関係図 対応範囲→ マトリクス・領域図 情報に合った形式を選びましょう。 STEP3. 不要な情報を削る 文章をそのまま図へ移す必要はありません。 例えば、 「担当者が御社へヒアリングを行い、事業内容やターゲットについて詳しくお伺いします」 という文章なら、図では、 ヒアリング事業・ターゲットを整理 程度で十分です。 詳しい説明は本文に残します。 STEP4. 視線の順番を決める 次に、 上 → 下 左 → 右 中央 → 外側 など、ユーザーが迷わず読める順番を決めます。 その後、必要に応じて矢印・色・アイコンを追加します。 STEP5. スマートフォンで確認する 最後は必ずスマートフォンサイズで確認します。 チェックするのは、 文字が読めるか 見る順番が分かるか 色の違いが認識できるか 不要な横スクロールが発生していないか 拡大しなくても概要を理解できるか です。 PCでは分かりやすくても、スマートフォンで読めなければWebサイト上の図解として十分に機能しません。 図解・グラフ改善チェックリスト 目的 この図で何を伝えるか1文で説明できる 本当に図解にした方が理解しやすい情報か確認した 装飾目的だけになっていない ユーザーの疑問解消につながっている 形式 流れ → フロー図 比較 → 比較表・棒グラフ 時系列 → 折れ線グラフ 関係 → 関係図 対応範囲 → マトリクス Before／After → 並列比較 など、情報に合った形式を選んでいる デザイン 1つの図に情報を詰め込みすぎていない 視線の流れが分かる 使用カラーが多すぎない ブランドカラーと統一されている フォントがサイトと統一されている アイコンだけに意味を持たせていない スマートフォンでも読める グラフ・数値 対象期間が明記されている 必要に応じて母数を表示している 比較条件が揃っている 数値の出典を確認している グラフの軸で過度に差を強調していない 成果との因果関係を断定しすぎていない 「No.1」「〇％改善」などの表示に根拠がある SEO・アクセシビリティ 図の内容を本文でも説明している 関連文章の近くに図を配置している 意味のある画像に適切なaltを設定している altへキーワードを羅列していない 画像だけに重要情報を閉じ込めていない 画像容量を最適化している まとめ：難しいサービスほど「読ませる」より「理解させる」 専門性の高いサービスでは、 「きちんと説明しなければ」 という意識から、文章が長くなりがちです。 しかし、ユーザーが求めているのは文章量ではありません。 「自分にも理解できること」です。 そのため、 文章で詳しく説明する 図で全体像を見せる 表で違いを比較する グラフで数値の変化を示す といった方法を、情報の内容に合わせて使い分けることが重要です。 図解は、ページを華やかにするための装飾ではありません。 複雑な情報を整理し、企業側とユーザー側の知識の差を埋めるためのコミュニケーション手段です。 自社にとって当たり前の情報ほど、初めてサイトを見るユーザーには難しく感じられることがあります。 文章を書き終えたら、一度、 「これは本当に文章だけで説明するのが一番分かりやすいか？」 と考えてみましょう。 適切な図解・比較表・グラフを組み合わせることで、専門性の高いサービスでも、初めて見る人が「分かる・納得できる・相談できる」ホームページへ近づけます。 専門サービスを「伝わる形」に整理するならRefu Refuでは、見た目を整えるだけではなく、専門性の高いサービスについて、「ユーザーにどうすれば理解してもらえるか」から逆算して情報を設計しています。 文章だけでは説明しづらい内容も、フロー・比較表・図解・事例などを組み合わせながら、初めて見る人にも全体像や違いが伝わるサイトへ整理します。 「サービス内容が複雑で説明が長くなっている」「営業では説明できるのに、ホームページでは伝わりにくい」「他社との違いを文章だけでは表現しづらい」 といった場合も、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら アイコン・イラスト活用で“伝わる”を加速する｜使いどころと注意点 “なんとなく見づらい”を解決する情報設計｜見出し・箇条書き・図解の使い分け BtoBサイトのデザインで意識すべきポイント5選｜“選ばれる企業”になるための信頼設計 導入事例ページの“見せ方”で受注率が変わる｜構成とデザインの型 “信頼される文章”に見せるデザイン｜行間・段落・余白の文章レイアウト術 Webアクセシビリティを意識したデザインとは？中小企業サイトの改善ポイント
2026/09/01
リニューアル・運用ノウハウWebアクセシビリティ改善の基本｜企業サイトで見直すべきポイント
Webアクセシビリティとは？誰でも情報を利用しやすくする考え方 Webアクセシビリティとは、年齢や障害の有無、利用している端末や操作方法などにかかわらず、できるだけ多くの人がWebサイトの情報や機能を利用できる状態にすることです。 例えば、Webサイトを見る人の中には、 視覚に障害があり、画面読み上げソフトを利用している人 マウスを使わずキーボードで操作する人 色の違いを判別しにくい人 小さな文字が読みづらい人 動画の音声を聞くことができない環境にいる人 スマートフォンの小さな画面を利用している人 など、さまざまなユーザーがいます。 W3Cが策定するWCAG（Web Content Accessibility Guidelines）は、Webコンテンツを障害のある人を含め、より利用しやすくするための国際的なガイドラインです。WCAG 2.2は、W3C Recommendationとして公開されています。 アクセシビリティ改善は、「一部の人だけのための特別対応」ではありません。 文字を読みやすくするボタンを押しやすくするフォームの入力方法を分かりやすくするページ構造を整理する といった改善は、多くのユーザーにとって使いやすいサイトづくりにもつながります。 なぜ企業サイトでもアクセシビリティが重要なのか Webアクセシビリティというと、行政機関や大企業だけが取り組むものと思われることがあります。 しかし、企業サイトでも、 問い合わせ 資料請求 採用応募 予約 商品・サービス情報の確認 など、Webサイトが事業と直接つながる場面が増えています。 もし「文字が読めない」「キーボードでフォームを操作できない」「ボタンがどこにあるか分からない」という理由で利用できなければ、ユーザーに必要な情報を届けられません。 デジタル庁も、行政機関だけでなく事業者を含む初心者向けに「ウェブアクセシビリティ導入ガイドブック」を公開し、アクセシビリティ改善の考え方や実践方法を案内しています。 また、日本では2024年4月1日から、障害者差別解消法に基づく事業者による合理的配慮の提供が義務化されています。 ただし、これは「すべての民間Webサイトが直ちに特定のWCAG適合レベルを満たさなければならない」という意味ではありません。 個別の場面や状況、事業者への負担などを踏まえながら、必要な対応を検討することが求められます。 WCAG・JIS X 8341-3とは？最低限知っておきたい基準 Webアクセシビリティを調べると、 WCAGJIS X 8341-3 という言葉がよく出てきます。 WCAGはW3Cが策定する国際的なWebアクセシビリティガイドラインで、達成基準には主にA・AA・AAAという適合レベルがあります。 日本では、Webコンテンツのアクセシビリティに関する規格としてJIS X 8341-3:2016が利用されています。 デジタル庁のアクセシビリティ方針や検証でも同規格が参照されており、WAIC（ウェブアクセシビリティ基盤委員会）も対応度表記や試験などに関するガイドラインを公開しています。 企業サイトを改善する際に、最初からすべての基準を完璧に理解する必要はありません。 まずは、ユーザーが利用できなくなる可能性の高い問題から改善することが現実的です。 改善ポイント①：文字と背景のコントラストを確保する デザイン性を重視するあまり、 薄いグレーの文字 淡い背景色＋白文字 写真の上に細い白文字 などを使用すると、文字が読みにくくなることがあります。 WCAG 2.2の達成基準1.4.3では、通常サイズのテキストについて、背景とのコントラスト比を原則4.5：1以上とする基準が設けられています。大きな文字には別の基準があります。 特に確認したいのは、 本文 グローバルメニュー CTAボタン フォームラベル リンク文字 画像上のコピー です。 「ブランドカラーだから変えられない」と考えるのではなく、ロゴなどのブランド表現と、実際に操作・閲覧するUIの色を分けて考える方法もあります。 おしゃれに見えるかだけでなく、きちんと読めるかまで確認することが重要です。 改善ポイント②：画像に適切な代替テキスト（alt）を設定する 画像には、必要に応じて代替テキスト（alt属性）を設定します。 代替テキストは、画像を見ることができないユーザーに対して、画像が伝えている情報をテキストとして補う役割があります。 例えば施工事例の画像であれば、 ×「写真」×「施工事例」 だけではなく、 「相模原市の工場で施工したステンレス配管」 など、画像から伝える必要がある情報を簡潔に記述します。 一方で、単なる背景装飾や意味を持たない画像まで、すべて詳しく説明する必要はありません。 ポイントは、 「その画像が表示されなかった場合、ユーザーへどの情報を補う必要があるか」 で判断することです。 画像やアイコンなどの視覚情報について、適切なテキスト代替を用意することは、Webアクセシビリティの基本的な考え方の一つです。 改善ポイント③：キーボードだけでも操作できるようにする Webサイトは、マウスだけで利用されているわけではありません。 Tabキーなどを使い、キーボードだけでWebサイトを操作するユーザーもいます。 確認したいのは、 グローバルメニューを開けるか リンクへ移動できるか フォームへ入力できるか モーダルを閉じられるか CTAボタンを操作できるか です。 実際にマウスを使わず、 「Tabキーだけでトップページから問い合わせフォームまで移動できるか」 を確認すると、問題を発見しやすくなります。 また、キーボードで現在どこを選択しているのか分かるフォーカス表示も重要です。 デザイン上の理由だけでフォーカス表示を消してしまうと、キーボード利用者が現在位置を把握できなくなる可能性があります。 ブランドイメージに合った形で、見やすいフォーカス表示を用意しましょう。 改善ポイント④：ボタン・リンクを押しやすく、意味が伝わる設計にする スマートフォンでは、ボタンが小さかったり、間隔が狭かったりすると押し間違いが発生します。 WCAG 2.2では、一定の例外を除き、操作対象について24×24 CSSピクセル以上、または同等の間隔を確保することを求める「Target Size (Minimum)」というAAレベルの達成基準が追加されています。 ただし、 「すべて24pxにすれば対応完了」 と機械的に考えるのではなく、 十分に押しやすいか 隣のボタンを誤って押さないか スマートフォンで操作しやすいか を実機で確認することが重要です。 また、リンクテキストも、 ×「詳しくはこちら」 だけではなく、 「ホームページ制作サービスについて詳しく見る」 のように、移動先が分かる表現にすると理解しやすくなります。 改善ポイント⑤：見出し構造を正しく設計する Webページの見出しには、 h1 h2 h3 h4 などのHTML見出しがあります。 これらは文字を大きくするためだけの機能ではなく、ページの情報構造を表すものです。 例えば、 h1：Webアクセシビリティ改善の基本h2：企業サイトで改善すべきポイントh3：文字色のコントラスト のように、内容の階層に合わせて設定します。 見出し構造を整えることで、 ページを拾い読みする人 スクリーンリーダーを利用する人 サイトを更新する担当者 にとっても、内容を理解しやすくなります。 見出しの見た目だけを変えるのではなく、情報の意味に合わせて適切なHTML要素を使うことが重要です。 改善ポイント⑥：問い合わせフォームを使いやすくする 企業サイトでは、問い合わせフォームのアクセシビリティが特に重要です。 どれだけサービス情報が分かりやすくても、最後のフォームを利用できなければ問い合わせにつながりません。 確認したいポイントは、 各入力欄に何を入力するか分かるラベルがある 必須・任意が分かる エラーの原因が具体的に分かる 色だけでエラーを表現していない キーボードだけでも入力・送信できる 入力欄の順番が自然になっている ことです。 例えば、 ×「入力内容にエラーがあります」 だけでは、ユーザーはどこを修正すればよいか分かりません。 「メールアドレスを正しい形式で入力してください。例：info@example.com」 など、問題と修正方法が分かる表現にします。 アクセシビリティ改善は、結果的に問い合わせフォームの入力離脱を減らす改善とも共通する部分が多くあります。 改善ポイント⑦：動画・音声コンテンツにも情報を補う 企業サイトでも、 会社紹介動画 採用インタビュー 施工動画 サービス説明動画 などを掲載するケースが増えています。 動画で重要な情報を伝えている場合は、音声を聞けないユーザーにも内容が伝わるように、字幕やテキスト情報を用意することを検討します。 一方、音声だけでは伝わらない重要な視覚情報がある場合には、その情報をどのように補うかも考える必要があります。 重要なのは、 「動画を再生できること」ではなく、「動画の中にある情報へアクセスできること」 です。 動画だけに重要情報を閉じ込めず、必要に応じてテキストでも確認できる状態を整えましょう。 改善ポイント⑧：スマートフォン・拡大表示でも崩れないか確認する アクセシビリティ確認では、PCの標準サイズだけを見るのでは不十分です。 例えば、 文字を拡大する スマートフォンを使う 画面幅を狭くする といった環境でも、情報を利用できるか確認します。 レスポンシブ対応していても、 ボタンが重なる テキストが切れる メニューが押せない 横スクロールしないと読めない といった問題が残っている場合があります。 リニューアル時には、デザインカンプ上の確認だけでなく、実際のスマートフォンやブラウザで操作するところまで確認することが大切です。 企業サイトでアクセシビリティを確認する方法 アクセシビリティは、自動チェックツールだけですべて確認できるものではありません。 おすすめは、 ① 自動チェック↓② 手動チェック↓③ 実際の操作確認 を組み合わせる方法です。 例えば、 コントラストチェックツール ブラウザのアクセシビリティ機能 HTML・altの確認 キーボード操作 画面拡大 スマートフォン実機確認 必要に応じてスクリーンリーダーでの確認 などを組み合わせます。 特に、 「リンクの意味が分かるか」「操作する順番が自然か」「エラーが起きたときに修正方法が分かるか」 といった内容は、自動チェックだけでは十分に判断できません。 また、JIS X 8341-3への「準拠」など正式な対応度を表明する場合は、単なる自動チェックだけでなく、対象範囲を定めた試験や結果の公開など、必要な手順を確認することが重要です。 リニューアル時にアクセシビリティを組み込むメリット 既存サイトへ後からアクセシビリティ対応を追加するより、リニューアルの設計段階から考える方が効率的です。 例えば、 ブランドカラーを決める時にコントラストを確認する ワイヤーフレームで見出し階層を整理する ボタン設計時にサイズやフォーカスを確認する CMS設計時に画像altを入力できるようにする フォーム開発時にラベル・エラー表示を設計する といった形で最初から組み込めます。 完成後に、 「このブランドカラーでは文字が読みにくい」「このメニューはキーボード操作できない」「CMSからaltを設定できない」 と判明すると、修正範囲が大きくなります。 そのためアクセシビリティは、公開前だけ確認する項目ではなく、要件定義・デザイン・実装・運用のすべてに関係する品質要件として考えるのがおすすめです。 アクセシビリティ対応でよくある誤解・失敗 「高齢者向けサイトだけ対応すればよい」と考える アクセシビリティは特定のユーザーだけを対象にしたものではありません。 スマートフォン利用、一時的なけが、騒音環境、明るい屋外での閲覧など、さまざまな状況で使いやすさにつながります。 デザイン性が下がると思い込む コントラストや文字サイズを確保しながら、ブランドイメージを表現することは可能です。 アクセシビリティを制約として後から加えるのではなく、デザイン要件として最初から組み込むことが重要です。 altをすべての画像に長文で入れる 重要なのは量ではなく、その画像が持つ意味を適切に補うことです。 装飾画像まで長い説明を読み上げさせると、かえって利用しにくくなる場合があります。 自動チェックツールでエラー0なら完了と考える 自動ツールだけでは、 リンク文言が分かりやすいか 操作順序が自然か コンテンツの意味が伝わるか といった文脈までは十分に判断できません。 手動確認も必要です。 「法律対応済み」と安易に表現する 障害者差別解消法による合理的配慮の義務化と、特定のWCAG・JIS適合レベルは同じものではありません。 個別の法的義務や適合表明については、対象となる事業・サービス・状況に応じた確認が必要です。 Webアクセシビリティ改善チェックリスト 文字・色 本文の文字サイズが小さすぎない 文字と背景のコントラストを確認している 色だけで「エラー」「必須」などを伝えていない 画像内文字が読みにくくなっていない 画像・動画 意味のある画像に適切なaltがある 装飾画像を不要に読み上げさせていない 動画の重要情報を字幕・テキストでも確認できる 画像だけで重要事項を伝えていない 操作 キーボードだけで主要機能を利用できる フォーカス位置が分かる 固定ヘッダーなどでフォーカス部分が隠れない スマートフォンでボタンを押しやすい リンク・ボタンの役割が分かる コンテンツ h1・h2・h3の階層が整理されている 見出しだけ読んでもページ構造が分かる 「こちら」だけの曖昧なリンクが多くない 専門用語を必要以上に多用していない フォーム 各入力項目にラベルがある 必須・任意が分かる エラー箇所と修正方法が分かる キーボードで入力・送信できる 入力途中で意図せず内容が消えない 運用 記事投稿時にaltを確認している 画像・動画追加時のルールがある サイト更新後にもアクセシビリティを確認する 定期的にキーボード・スマートフォンで実操作確認している 必要に応じてJIS・WCAGに沿った検証を行っている まとめ：完璧を目指すより、重要な問題から継続的に改善する Webアクセシビリティは、チェック項目を一度クリアして終わるものではありません。 企業サイトでは、 文字が読める画像の意味が伝わるキーボードでも操作できるボタンを押しやすいフォームから問い合わせできるスマートフォンや拡大表示でも利用できる といった、ユーザーが情報や機能へアクセスするうえで重要な部分から改善していくことが大切です。 WCAG 2.2には幅広い達成基準があり、日本ではJIS X 8341-3:2016もWebアクセシビリティを考えるうえで参照されています。 最初からすべてを完璧にしようとして動けなくなるより、 現状を確認する↓利用できなくなる重大な問題から改善する↓更新時にも確認する↓定期的に検証する という運用を作る方が現実的です。 アクセシビリティを「特別な対応」ではなく、使いやすく、伝わりやすく、企業として信頼されるWebサイトを維持するための品質管理として取り組んでいきましょう。 Webアクセシビリティを意識したホームページ改善ならRefuへ Refuでは、ホームページリニューアル時のデザイン・情報設計だけでなく、文字コントラスト、画像alt、見出し構造、フォーム、キーボード操作、スマートフォン表示など、アクセシビリティを意識したサイト改善にも対応しています。 「今のサイトが使いにくくなっていないか確認したい」「リニューアルを機にアクセシビリティも見直したい」「どこから改善すればいいのか分からない」 といった場合も、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら ワイヤーフレームで失敗が減る｜作り方・レビュー観点・よくある落とし穴 運用で差がつく！Webサイトの更新ルール（品質・表記・画像・承認フロー） E-E-A-Tを強化するサイト改修ポイント｜信頼を積み上げる情報設計 Core Web Vitalsの改善方法｜LCP・INP・CLSを初心者向けに解説 問い合わせが増える！フォーム改善の具体的テクニック
2026/08/26
デザイン・ブランディングOGP画像・サムネイルの作り方｜SNSでもブランドを統一するデザインルール
OGP画像は「記事のおまけ」ではなく、SNS上のファーストビュー オウンドメディアの記事をSNSやチャットで共有すると、記事タイトルや説明文とあわせて、大きな画像が表示されることがあります。 この画像がOGP画像です。 ホームページのファーストビューは丁寧に作り込んでいても、OGP画像については、 「とりあえず記事内の写真を設定している」 というケースも少なくありません。 しかし、SNS上で初めて企業を知るユーザーにとっては、OGP画像がその企業との最初の接点になる可能性があります。 つまりOGP画像は、単なる記事のおまけではありません。 SNSやチャット上に表示される「小さなファーストビュー」として設計することが重要です。 まず結論：OGPは「ブランド共通部分＋記事ごとの違い」で設計する OGP画像は、記事ごとに毎回まったく異なるデザインを作る必要はありません。 むしろオウンドメディアを継続的に運用するのであれば、共通部分を固定し、記事ごとに必要な箇所だけ変更する方が、ブランドの統一感を保ちやすくなります。 例えば、次のように整理します。 固定する要素 フォント ブランドカラー ロゴの位置 タイトルの配置 カテゴリの表示方法 基本レイアウト 余白のルール 記事ごとに変更する要素 記事タイトル メインキーワード 写真・イラスト カテゴリ名 カテゴリカラー 記事が増えるほど、 「このデザイン＝この会社の記事」 と認識してもらえる状態を目指しましょう。 OGPとは？まず知っておきたい基本 OGPで設定する主な情報 OGPは「Open Graph Protocol」の略で、WebページがSNSなどで共有された際に、そのページをどのように表現するかを伝えるためのメタデータです。 基本的には、HTMLのhead内へ次のような情報を設定します。 og:title：ページのタイトル og:type：ページの種類 og:image：共有時に表示する画像 og:url：ページのURL さらに、必要に応じて次のような情報も設定できます。 og:description：ページの説明文 og:site_name：サイト名 og:image:width：画像の横幅 og:image:height：画像の高さ og:image:alt：画像の代替テキスト つまり、OGP画像だけを設定するのではなく、 タイトル・説明文・URL・画像をセットで整える という認識が重要です。 OGP画像と記事内のアイキャッチ画像は同じでいい？ 同じ画像を使用しても問題ありません。 ただし、記事内のアイキャッチ画像とOGP画像では、表示される環境が異なります。 記事内のアイキャッチ画像→ サイトのデザインや記事タイトルと一緒に表示される OGP画像→ SNSやチャットなど、サイト外で単体に近い状態で表示される そのためOGP画像では、 「この画像だけを見ても、何についてのページかある程度分かる」 ことが重要です。 記事ページ内では近くにタイトルがあるため写真だけでも成立しますが、SNSでは画像が最初に目に入ることもあります。 オウンドメディアでは、OGPとして利用することまで想定してアイキャッチ画像を設計すると、運用しやすくなります。 OGPとGoogle検索の構造化データは別物 OGPと構造化データは混同されることがありますが、役割は異なります。 OGP→ SNSやチャットなどでページが共有された際の見え方を伝える 構造化データ→ ページ内の情報の意味を検索エンジンへ明確に伝える そのため、 「OGP画像を設定すればSEO順位が上がる」 と考えるのは適切ではありません。 OGPはまず、SNSやメッセージアプリで共有された際の見え方とブランド体験を整える施策として考えましょう。 クリックされやすいOGP画像を作る7つのデザインルール 一目で「何についての記事か」が分かるようにする OGP画像で最も重要なのは、見た目の美しさよりも理解の速さです。 例えば、 「ホームページについて解説」 では内容が曖昧ですが、 「ホームページ制作の費用相場」 であればテーマが具体的に伝わります。 さらにOGP画像内では、 「HP制作費はいくら？」 のように短くすると、小さく表示された場合でも内容を認識しやすくなります。 SNSはスクロールしながら見られるため、ユーザーがその記事について何も知らない状態でも理解できる設計が必要です。 タイトルを全文入れず、短いメッセージに絞る 例えば記事タイトルが、 「ホームページ制作会社の選び方｜失敗しないためのチェックポイント10選」 だったとしても、その全文をOGP画像へ入れる必要はありません。 OGP画像では、 ホームページ制作会社失敗しない選び方 程度まで短くしても、記事テーマは十分に伝わります。 SNS側でも記事タイトルがテキスト表示される場合があるため、画像内では最も伝えたい言葉だけを残す方が視認性を高められます。 重要な情報は中央寄りの安全な範囲に配置する OGP画像は、SNSやチャットツール、画面サイズによって表示方法が変わる場合があります。 そのため、 端ギリギリにタイトルを置く ロゴを四隅へ寄せすぎる 重要情報を画像の端へ配置する と、表示環境によって一部が見切れる可能性があります。 特に、 タイトル ロゴ カテゴリ名 などの重要情報は、多少トリミングされても残る中央寄りの範囲へ配置するのがおすすめです。 小さく表示されても読める文字サイズにする 制作画面では十分な大きさに見えていても、SNS上ではOGP画像がかなり縮小されることがあります。 公開前には、実際の表示を想定して小さく縮小して確認しましょう。 チェックしたいポイントは次のとおりです。 スマートフォンでもタイトルを読めるか 細すぎるフォントを使用していないか 背景と文字のコントラストが十分か 補足情報を入れすぎていないか 重要な文字が小さくなっていないか PCの制作画面できれいに見えることより、スマートフォンの小さな表示でも伝わることを優先します。 色・フォント・ロゴのルールを固定する オウンドメディアでブランドを積み上げるには、OGP画像にも統一感が必要です。 例えば、 記事A：青＋ゴシック体記事B：赤＋明朝体記事C：緑＋手書き風フォント のように毎回デザインが変わると、同じ企業が発信している記事だと認識されにくくなります。 最低限、 ブランドカラー 使用フォント ロゴの位置 タイトルの配置 余白 はルール化しましょう。 Webサイトのデザインガイドラインを作成している場合は、OGP画像のデザインルールも一緒に定めておくと運用しやすくなります。 写真・イラストは「内容を補足するため」に使う 写真やイラストを入れる場合は、 「このビジュアルによって記事内容が伝わりやすくなるか」 を基準に判断します。 例えば、 Webデザインの記事→ PC画面や制作風景 採用の記事→ 社員や職場、面談風景 製造業の記事→ 工場、設備、製品 などです。 単に空白を埋めるためだけに写真を入れると、情報量が増えてタイトルが伝わりにくくなることがあります。 文字だけで十分に伝わる場合は、写真を使わないことも選択肢です。 シリーズ記事は一覧で見たときの統一感を作る オウンドメディアでは、OGP画像を1枚だけで判断するのではなく、10枚、20枚と並んだ状態で考えることが重要です。 例えば、 ホームページ制作の基本：青系 リニューアル・運用：緑系 集客・マーケティング：オレンジ系 デザイン・ブランディング：別のテーマカラー のように、カテゴリ別に色を分ける方法があります。 ただし、カテゴリごとに色を変える場合でも、 フォント・ロゴ・レイアウトは共通 にすると、サイト全体のブランド感を維持しやすくなります。 OGP画像のおすすめ構成テンプレート3パターン メディア記事型｜タイトルを主役にする オウンドメディアで最も運用しやすい形式です。 構成例 上部カテゴリ名 中央記事のメインキーワード・短縮タイトル 下部企業ロゴ・メディア名 背景ブランドカラー＋シンプルな図形や装飾 この形式には、 記事を継続的に作りやすい タイトルを読みやすい 統一感を出しやすい 毎回写真を探す必要がない というメリットがあります。 写真型｜人物・商品・施工事例を主役にする 写真そのものに説得力がある業種では、写真を主役にしたOGP画像が向いています。 例えば、 建築・工務店 美容 飲食 製造業 採用 観光 などです。 構成例 左側短いタイトル 右側人物・商品・施工写真 下部ロゴ・カテゴリ名 写真を使う場合は、文字を載せるスペースまで考えて撮影・トリミングすることがポイントです。 ブランド型｜コピー＋ブランドカラーで印象を残す 企業の考え方やブランディングを伝える記事では、短いコピーを大きく見せる方法もあります。 例えば、 「かっこいいだけでは、伝わらない。」 というコピーに、ブランドカラーとロゴだけを組み合わせるデザインです。 あえて情報量を減らすことで、印象を強めることができます。 やってはいけないOGP画像7つ｜クリックされにくい典型例 記事タイトルを全文詰め込む 文字数が多いほど文字サイズが小さくなり、スマートフォンで読みにくくなります。 OGP画像用にタイトルを短く編集することが重要です。 小さな文字を大量に入れる サブタイトル、説明文、URL、会社名、カテゴリ、投稿日など、すべてを入れる必要はありません。 重要度を決めて、不要な情報を削りましょう。 背景写真と文字が同化している 写真の上へそのまま文字を載せると、背景によって可読性が大きく変わります。 必要に応じて、 オーバーレイ グラデーション 文字背景 影 などを使い、文字が確実に読める状態を作ります。 記事ごとにデザインが変わる 1枚ずつを見ると魅力的でも、記事ごとにデザインがバラバラではブランドとして積み上がりません。 「同じメディアの記事だと分かる」 ことを優先しましょう。 ロゴが大きすぎる 企業名を覚えてもらうためにロゴを大きくしすぎると、記事テーマが伝わりにくくなります。 基本的には、 記事テーマ ＞ ブランド情報 の順番で認識してもらえる設計がおすすめです。 フリー素材だけで構成する よく見かけるビジネス系のフリー素材を毎回使うと、他の記事や他社との違いが分かりにくくなります。 写真が記事理解に必要でなければ、タイポグラフィとブランドカラーだけで構成する方法も有効です。 SNSで確認せず、そのまま公開する 制作データ上では問題がなくても、実際にシェアすると、 文字が切れる 画像が更新されない 古い画像が表示される タイトルが意図と異なる トリミングによって重要部分が見えない といった問題が起きることがあります。 OGPは公開後の表示確認まで含めて制作と考えましょう。 記事を量産しても崩れないOGPデザインルールの作り方 固定する要素と変更する要素を分ける OGP画像を継続的に制作する場合は、毎回ゼロからデザインしない仕組みを作ります。 固定する要素 画像サイズ ロゴ フォント レイアウト 基本カラー 余白 タイトルの最大文字数 変更する要素 記事タイトル キーワード 写真 カテゴリ 固定部分を増やすことで、更新担当者が変わっても品質を保ちやすくなります。 カテゴリごとにルールを作る 記事数が多いオウンドメディアでは、 カテゴリ＝テーマカラー という設計も有効です。 ただし、色だけに依存すると分類が伝わらない場合があります。 カテゴリ名＋テーマカラー の両方で示すと、分かりやすくなります。 Canva・Figmaなどでテンプレート化する 更新担当者がデザイナーではない場合は、テンプレート化が特に重要です。 例えば、 タイトル入力欄 カテゴリ変更欄 写真差し替えエリア のみ変更できるようにしておきます。 さらに、 文字サイズは変更しない 新しい色を追加しない ロゴ位置を移動しない タイトルは〇文字以内 使用フォントを変更しない といった変更してはいけないルールまで決めておくと、品質が安定します。 公開前に実際の縮小サイズで確認する 最終確認では、OGP画像を原寸サイズだけで見ないようにしましょう。 スマートフォンで表示される程度まで縮小し、 タイトルを読めるか 最初にどこへ目が行くか 記事テーマを理解できるか ロゴが邪魔になっていないか 他の記事と並べても統一感があるか を確認します。 OGP設定で最低限確認したい技術項目 OGPはデザインだけでなく、サイト側の設定も重要です。 オウンドメディアであれば、最低限次の情報が適切に出力されているか確認しましょう。 og:title og:description og:image og:url og:type 必要に応じて、 og:site_name og:image:width og:image:height og:image:alt なども設定します。 CMSを利用している場合は、記事ごとにOGP画像やタイトルを変更できる仕組みにしておくと運用しやすくなります。 WordPressの場合は、テーマやSEO系プラグインからOGPタグが自動出力されているケースもあります。 独自実装を追加するときは、同じOGPタグが複数箇所から重複して出力されていないかも確認しましょう。 SNSごとの見え方が違うことを前提に設計する OGP画像を1枚設定しても、すべてのSNSやチャットサービスで完全に同じ形で表示されるとは限りません。 サービス側によって、 画像がトリミングされる タイトルの表示行数が変わる 説明文が省略される 表示レイアウトが変わる ことがあります。 そのため、 「画像の端まで使い切るデザイン」より、「多少トリミングされても成立するデザイン」 を目指すことが重要です。 また、SNS側に古いOGP情報がキャッシュされ、画像を変更してもすぐに反映されない場合もあります。 OGPを変更した際は、必要に応じて各サービスで表示を再確認しましょう。 著作権・ロゴ・実績表現の注意点 OGP画像はWebサイト内だけではなく、SNSやチャットなどサイト外にも表示されます。 そのため、使用する素材や表現の権利関係にも注意が必要です。 写真・イラスト 次の点を確認します。 商用利用できる素材か SNS上での表示も利用範囲に含まれるか 加工が認められているか クレジット表記が必要か ネット上で見つけた画像を、そのままOGP画像として利用することは避けましょう。 他社ロゴ 制作実績や導入実績として顧客企業のロゴを使用する場合でも、無断で使用してよいとは限りません。 特に、 Webサイトの実績ページへの掲載許可 と、 OGP画像やSNS投稿などのクリエイティブへの利用許可 は、利用範囲が異なる場合があります。 掲載許諾を取る際に、使用媒体まで確認しておくと安全です。 人物写真 社員、顧客、モデルなど人物が写る写真についても、Webサイトだけでなく、SNSで共有された際にも表示されることを想定して許諾範囲を確認します。 「No.1」「〇％増」「業界最安」などの表示 OGP画像は目立ちやすいため、強い数字やキャッチコピーを入れたくなることがあります。 例えば、 No.1 満足度98％ 問い合わせ3倍 業界最安 必ず成果が出る といった表現です。 しかし、画像内の表現であっても自由に掲載できるわけではありません。 数値や比較表現を使用する場合は、 調査対象 調査方法 集計期間 比較条件 数値の根拠 などを確認する必要があります。 OGP画像もユーザーに対する表示物の一部として、誤認を招かない表現を心がけましょう。 OGP画像チェックリスト デザイン 一目で記事テーマが分かる 記事タイトルを全文詰め込んでいない 画像内のメッセージが短い スマートフォンサイズでも文字を読める 背景と文字に十分なコントラストがある 重要情報を画像の端に置いていない ロゴが大きすぎない ブランド 使用フォントが統一されている ブランドカラーが統一されている ロゴ位置が統一されている 記事ごとに基本レイアウトが変わっていない カテゴリごとのルールが決まっている 過去記事と並べても同じメディアだと分かる 運用 OGP画像がテンプレート化されている 更新担当者向けのルールがある タイトルが長い場合の省略ルールがある 写真あり・写真なしのパターンを用意している 公開後にSNSやチャットで見え方を確認している 技術設定 og:titleが設定されている og:descriptionを確認した og:imageが記事ごとに適切に設定されている og:urlが正しい og:typeがページ内容に合っている 必要に応じて画像サイズや代替テキスト情報も設定している OGPタグが重複して出力されていない 権利・表現 写真・イラストの利用権を確認した 他社ロゴの掲載許可を確認した 人物写真の利用範囲を確認した 「No.1」「〇％」などの数値表現に根拠がある 誤認につながる強い表現を使用していない まとめ：OGPまで揃えると、サイトの外でもブランドが積み上がる OGP画像は、単なるSNS用のサムネイルではありません。 ユーザーが、 「この記事を読んでみよう」「この会社は信頼できそうだ」 と判断する最初の接点になる可能性があります。 だからこそ、 何の記事か一瞬で分かる 小さく表示されても読める ブランドらしさがある 他の記事と並べても統一されている 記事数が増えても品質が崩れない という状態を目指すことが重要です。 毎回、派手で目立つ画像を作る必要はありません。 むしろ、 ブランドカラー・フォント・ロゴ・レイアウトを固定し、記事ごとにタイトルやビジュアルだけを適切に変更する。 この積み重ねが、SNS上でも企業のブランド認知を育てていきます。 サイト内だけではなく、 「シェアされた後までデザインする」 ところまで考えることで、WebサイトとSNSをまたいだブランド体験につながります。 オウンドメディア・OGPデザインの設計ならRefuへ Refuでは、ホームページ本体だけでなく、オウンドメディアの記事一覧・アイキャッチ・OGP・SNSでシェアされた際の見え方まで含めて、サイトの外でもブランドが崩れないデザイン設計をご提案しています。 「記事を増やしているがサムネイルに統一感がない」「更新担当者が変わっても崩れないOGPテンプレートを作りたい」「記事一覧からSNS共有まで一貫したデザインに整えたい」 といった場合も、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら 企業ロゴやコーポレートカラーを活かした統一ブランディング術 トーン＆マナーの整え方｜ブランドらしさを伝えるデザイン戦略 “かっこいいだけ”では伝わらない。成果を生むデザイン思考とは 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方 ブランドを言語化する「3語ルール」｜デザインがブレない軸の作り方 配色に迷わない｜メイン・サブ・アクセントの黄金比と運用ルール ブランドらしさが伝わる写真撮影の準備｜構図・服装・背景・チェックリスト
2026/08/19
デザイン・ブランディングWebサイトにアニメーションは必要？印象と操作性を高めるモーションデザイン
Webサイトのアニメーションは「動かせばおしゃれ」ではない ホームページ制作の打ち合わせで、 「スクロールしたら文字を動かしたい」 「もっと動きのあるサイトにしたい」 「最近のサイトみたいにアニメーションを入れたい」 という要望をいただくことがあります。 確かに、アニメーションはWebサイトの印象を大きく変える要素です。 しかし、動けば動くほど良いサイトになるわけではありません。 アニメーションには本来、 ユーザーの視線を誘導する 操作結果を分かりやすくする 情報同士の関係を伝える ブランドの世界観を表現する といった役割があります。 目的のない動きを増やしてしまうと、かえって「読みにくい」「操作しづらい」「表示が遅い」サイトになる可能性があります。 まず結論：アニメーションは「ユーザーの理解と操作を助ける時」に使う アニメーションを入れるか迷ったときは、次の質問をしてみてください。 「この動きがあることで、ユーザーにとって何が分かりやすくなるのか？」 答えがあるなら、そのアニメーションには意味があります。 逆に、 なんとなく今っぽいから 動かないと寂しいから 他社サイトも動いているから だけであれば、本当に必要か一度検討した方がよいでしょう。 良いモーションデザインとは、装飾ではなく、ユーザーとのコミュニケーションを助ける設計の一部です。 Webサイトでアニメーションを使う5つの目的 視線を誘導して、重要な情報に気づかせる ページ内のすべてを同時に見せると、ユーザーはどこから見ればよいか迷うことがあります。 そこで、 見出しを先に表示する 次に説明文を表示する 最後にCTAを表示する といった順番を作ることで、視線を自然に誘導できます。 重要なのは、読ませたい順番と動く順番を一致させることです。 操作結果を伝えて「ちゃんと動いた」と感じてもらう モーションデザインは、操作へのフィードバックにも使えます。 例えば、 ボタンを押したら色や形が少し変化する メニューを開くと滑らかに展開する フォーム送信中に「送信中」と表示する お気に入り登録後にアイコンが変化する といったものです。 こうした小さな動きには、ユーザーへ「操作が受け付けられた」ことを伝える役割があります。 情報の変化や関係性を分かりやすくする 文章だけでは説明しづらい情報も、動きを加えることで理解しやすくなる場合があります。 例えば、 サービス利用までの流れ Before／After 数値の変化 グラフの推移 製品の仕組み システムの処理フロー などです。 「何が、どのように変わったのか」を伝える場面では、静止画よりモーションが適していることがあります。 スクロール体験にリズムを作る 長いページでは、同じレイアウトが続くと単調に感じられることがあります。 そこで適度に、 写真をフェードインさせる 見出しを少し遅れて表示する 数字をアニメーションで見せる などの変化を加えることで、ページ全体にリズムを作れます。 ただし、すべてのセクションを動かす必要はありません。 重要な場所に絞って使用するからこそ、動きが効果を発揮します。 ブランドの世界観や個性を表現する 動きにも「性格」があります。 例えば、 ゆっくり滑らかに動く→ 上質・落ち着き・高級感 軽快に素早く動く→ 親しみ・若さ・スピード感 直線的でシャープに動く→ 先進性・テクノロジー・合理性 というように、動き方によってブランドの印象は変わります。 色・フォント・写真と同じように、モーションもブランドを構成するデザイン要素として設計できます。 効果的なモーションデザイン｜使いやすい7つのパターン フェードイン｜コンテンツを自然に見せる スクロールに合わせて、文章や写真が少しずつ表示される表現です。 比較的使いやすく、 トップページ サービス紹介 会社紹介 採用サイト など幅広いページで利用できます。 ただし、表示速度を遅くしすぎないことが重要です。 ユーザーが読みたいのに、アニメーションが終わるまで待たされる状態は避けましょう。 ホバー・タップ｜操作できることを伝える PCでカーソルを合わせた際に、 色が変わる 少し浮き上がる 矢印が動く 写真がわずかに拡大する といった変化を加える方法です。 これは装飾というより、「ここは押せる場所です」と伝えるUI上のフィードバックとして機能します。 スマートフォンではホバー操作が基本的にないため、通常状態でもリンクやボタンであることが分かり、タップ時にも適切な反応が返る設計にしましょう。 ボタンフィードバック｜操作結果を返す CTAやフォームの送信ボタンでは、 押した瞬間に状態を変える 送信中であることを表示する 完了したことを伝える といったフィードバックが重要です。 「押したのに何も起きない」と感じると、連続クリックや離脱につながる可能性があります。 数字・グラフ｜変化や実績を理解しやすくする 例えば、 制作実績 300件 と表示するだけでなく、数字が自然にカウントアップする演出があります。 ただし、ここで大切なのは数字そのものの信頼性です。 演出を強くしても、根拠のない実績表示が許されるわけではありません。 「○件」「No.1」「○％改善」などを掲載する場合は、集計期間・条件・根拠を確認したうえで表示しましょう。 スクロール連動｜ストーリーを順番に伝える スクロールに合わせて、 課題 原因 解決方法 成果 のように順番に内容を見せる方法です。 ブランドストーリーや、複雑なサービス内容の説明と相性があります。 一方で、背景が大きく動くパララックスなどは、ユーザーによって不快感やめまいを感じる場合があります。 必要な場所に絞り、後述する「動きを減らす設定」への対応も検討しましょう。 ローディング｜待ち時間の不安を軽減する データ処理などで待ち時間が発生する場合、 スピナー プログレスバー スケルトンスクリーン などを表示することで、処理中であることを伝えられます。 目的は、かっこいいローディング画面を見せることではありません。 「サイトが止まったわけではない」とユーザーに伝えることです。 ページ遷移｜サイト全体の世界観をつなぐ ページを切り替える際に軽いトランジションを入れると、サイト全体を一つの体験として見せることができます。 ブランドサイトや採用サイトなど、世界観を重視するサイトでは効果的です。 一方で、ページを開くたびに長い演出が入ると、それ自体が待ち時間になります。 演出より、ユーザーが必要な情報へ早くアクセスできることを優先するのが基本です。 逆効果になるアニメーション7つ｜やりすぎに注意 何でもスクロールで動かす すべての文章や画像が、 下から出る → 横から出る → 回転する → 拡大する という状態になると、どこが重要なのか分からなくなります。 動かす場所と動かさない場所を分け、メリハリをつけましょう。 表示されるまで待たされる スクロールしたにもかかわらず、コンテンツが1秒後、2秒後まで表示されない。 これは演出ではなく、ユーザーにとって待ち時間になる可能性があります。 文章や重要情報は、すぐに確認できることを優先しましょう。 CTAまで動かして押しにくくする 問い合わせボタンを常に揺らしたり、大きく動かしたりすると、注意を引くどころか不快感につながる場合があります。 CTAは、 目立つことより、見つけやすく押しやすいこと を優先します。 パララックスを多用する パララックスは印象的な表現ですが、使いすぎると、 読みにくい スクロール位置を把握しづらい 動作が重くなる 動きに不快感を感じる人がいる といった問題が生まれます。 ブランド表現として必要な場所だけに限定するのがおすすめです。 自動再生を止められない 自動で動き続けるスライダーやコンテンツは、ユーザーの注意を奪う可能性があります。 一定時間以上自動で動き続けるコンテンツでは、必要に応じて、 一時停止 停止 非表示 などの操作を用意します。 そもそも、自動で動かす必要があるのかから検討することも大切です。 スマホで重くなる PCでは滑らかでも、スマートフォンでは動作が重くなる場合があります。 特に、 大きな動画 複雑なJavaScript 大量のスクロールアニメーション 重いぼかしや描画処理 などは注意が必要です。 PCブラウザだけで判断せず、実際のスマートフォンで確認しましょう。 「動かすこと」が目的になっている 最も避けたいのが、アニメーションを入れること自体が目的になる状態です。 演出が優先され、 ユーザーの目的 ＜ 制作側の演出 になってしまえば、サイト本来の役割から離れてしまいます。 迷ったら、 「なくしても情報は伝わるか？」「入れることで、理解・操作・印象の何が良くなるのか？」 を確認しましょう。 表示速度への影響｜アニメーションとCore Web Vitalsの考え方 アニメーション自体がSEOで直接評価されるわけではありません。 一方で、実装方法によってページの読み込みや操作性、表示の安定性などを悪化させれば、ユーザー体験へ影響します。 GoogleのCore Web Vitalsでは、 LCP：読み込みパフォーマンス INP：操作への応答性 CLS：表示の視覚的安定性 が主要指標として使われています。 そのため、アニメーションを実装した際には、 「動きが追加されたことで、表示や操作が重くなっていないか」 まで確認することが重要です。 アニメーション実装ではtransform・opacityを中心に検討する CSSアニメーションでは、実装方法によってブラウザへの負荷が変わります。 一般的には、 transform opacity など、レイアウト計算への影響が比較的小さいプロパティを中心に使用すると、滑らかなアニメーションを実装しやすくなります。 一方で、要素の大きさや位置を直接変更し、頻繁なレイアウト再計算を発生させる実装は、動作が重くなることがあります。 デザインだけでなく、実装後のパフォーマンスまで含めてモーションを設計することが重要です。 アクセシビリティも重要｜「動きを減らしたい人」への配慮 アニメーションは、すべてのユーザーにとって快適とは限りません。 大きな移動、ズーム、パララックスなどによって、不快感やめまいなどを感じる人もいます。 Webでは、OSなどで「動きを減らす」設定を利用しているユーザーを検知するprefers-reduced-motionという仕組みがあります。 例えば、 大きなスライド移動をフェードに変更する パララックスを停止する 装飾アニメーションを無効にする 不要な自動再生を停止する といった対応が考えられます。 重要なのは、「アニメーションが動かなくても情報や機能を利用できる状態」にしておくことです。 モーションを重要情報の唯一の伝達手段にしないようにしましょう。 ブランドらしいアニメーションを作る3つのルール 動きの速さを統一する 同じサイト内で、 あるボタンは非常に速い 別のボタンはゆっくり 写真はさらに遅い となると、統一感が失われます。 例えば、 小さな操作 コンテンツ表示 ページ遷移 など用途ごとに、ある程度速度のルールを決めておくと整いやすくなります。 動き方を2〜3種類に絞る 例えば、 基本：フェード 強調：軽いスライド 操作：ホバー・タップ時のフィードバック という程度でも十分です。 色やフォントと同じように、モーションにもルールを設けることで、サイト全体の統一感を作れます。 ブランドの性格から動きを決める ブランドの方向性を言葉にしてから、動きへ落とし込む方法も有効です。 例えば、 誠実／安心／上質→ ゆっくり・滑らか・動きは少なめ 親しみ／活発／楽しい→ 軽快・反応が分かりやすい・適度な弾み 先進的／合理的／シャープ→ 素早い・直線的・無駄の少ない動き というように、モーションをブランド表現の一部として設計できます。 導入前に考えるべき判断基準｜そのアニメーション、本当に必要？ アニメーションを実装する前に、次の6点を確認しましょう。 目的は何か？ 視線誘導・操作フィードバック・情報理解・ブランド表現のどれを目的としているか明確にします。 動かなくても情報は伝わるか？ アニメーションが停止した場合でも、必要な情報や機能を利用できる状態にします。 表示を待たせないか？ ユーザーが情報を確認する邪魔になっていないか確認します。 スマホでも快適か？ PCだけでなく、実際のスマートフォンで操作・スクロールを確認します。 動きを減らしたいユーザーにも対応できるか？ 不要なモーションを停止・軽減できる設計か確認します。 サイト全体で統一されているか？ ページごとに異なる動きを追加せず、一定のルールで運用します。 この6点に答えられれば、目的のあるアニメーションになりやすくなります。 このまま使えるモーションデザイン改善チェックリスト 目的 アニメーションを入れる理由を説明できる 「おしゃれだから」だけになっていない ユーザーの理解・操作・視線誘導のいずれかを助けている ブランドの世界観と動き方が合っている 見やすさ コンテンツ表示を必要以上に待たせていない 動きが多すぎて文章を読みにくくしていない CTAが動きすぎていない スクロール位置を把握しやすい 動かなくても必要な情報が伝わる 操作性 ボタン操作後に適切なフィードバックがある メニューの開閉が分かりやすい 処理中であることが分かる 自動で動き続ける要素を必要に応じて停止できる パフォーマンス スマートフォン実機で確認している アニメーション追加前後で表示速度を確認している Core Web Vitalsへ大きな悪影響が出ていない 不要に重い動画・JavaScriptを使用していない 実装方法も含めてエンジニアと確認している アクセシビリティ 大きなパララックスやズームを多用していない 不要な点滅・激しい動きを避けている 動きを減らしたいユーザーへの対応を検討している アニメーションがなくても情報や機能を利用できる 運用 使用する動きの種類が決まっている ページ追加のたびに新しいアニメーションを増やしていない デザインガイドラインにモーションのルールがある まとめ：良いアニメーションは「気づかれないくらい自然」に機能する Webサイトのアニメーションは、必須ではありません。 動きがほとんどなくても、情報が分かりやすく、使いやすく、ブランドらしさが伝わるサイトは作れます。 一方で、適切に使えば、 重要な情報へ視線を誘導する 操作結果を分かりやすく伝える 複雑な情報を理解しやすくする サイトを心地よく読み進めてもらう ブランドの個性を表現する といった効果が期待できます。 重要なのは、 「どこを動かすか」ではなく、「なぜ動かすのか」。 目立つアニメーションより、ユーザーが意識しなくても自然に操作できるモーションの方が、優れたデザインであることも少なくありません。 アニメーションは「足し算の装飾」ではなく、理解・操作・ブランド体験を整えるための設計要素として考えましょう。 アニメーションを活かしたWebサイト制作・改善もRefuにご相談ください Refuでは、見た目のインパクトだけを目的にアニメーションを追加するのではなく、サイトの目的・ブランド・ユーザー導線を整理したうえで、必要な場所に必要な動きを設計します。 デザインだけでなく、スマートフォンでの操作性や表示速度、アクセシビリティにも配慮しながら、サイト全体の体験としてモーションを設計します。 「動きのあるサイトにしたいけれど、やりすぎたくない」「今のアニメーションがユーザーの邪魔になっていないか確認したい」「ブランドらしい動きを取り入れたい」 といった場合も、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら “かっこいいだけ”では伝わらない。成果を生むデザイン思考とは UI/UXとは何か？成果を左右するユーザー体験設計の基本｜使いやすさで変わるサイトの成果 ファーストビューで離脱させない｜コピー×デザインの最適バランス ブランドを言語化する「3語ルール」｜デザインがブレない軸の作り方 スマホで差がつくUI改善｜押しやすさ・読みやすさのチェックポイント デザイン改修で成果を出すA/Bテスト入門｜小さく検証して勝ちパターンを作る Webアクセシビリティを意識したデザインとは？中小企業サイトの改善ポイント
2026/08/12
デザイン・ブランディングWebアクセシビリティを意識したデザインとは？中小企業サイトの改善ポイント
Webアクセシビリティは「一部の人向け」ではなく、誰でも使いやすいサイトを作る考え方 「Webアクセシビリティ」と聞くと、 障害のある人だけを対象にしたもの 公共機関のサイトだけが対応すればいいもの デザインの自由度が下がるもの というイメージを持つ方もいるかもしれません。 しかし、本質はもっとシンプルです。 年齢、障害の有無、利用している端末や操作方法などにかかわらず、できるだけ多くの人がWebサイトの情報や機能を利用できる状態にすること。 これがWebアクセシビリティの基本的な考え方です。 例えば、 文字が薄すぎて読みにくい ボタンが小さくて押しにくい 画像だけで内容を説明している キーボードではメニューを操作できない フォームのエラー理由が分からない といった問題は、特定のユーザーだけではなく、スマートフォンを使う人、高齢者、一時的に手をけがしている人、明るい屋外で画面を見る人など、多くのユーザーに影響します。 デジタル庁も、Webアクセシビリティについて、専門知識がない担当者や事業者が実務で取り組むためのガイドを公開しており、スマートフォン対応を含めた考え方を整理しています。 まず結論：中小企業サイトは「見える・読める・押せる・操作できる」から改善する Webアクセシビリティには多くの基準があります。 すべてを一度に理解しようとすると難しく感じますが、中小企業サイトで最初に見るべきポイントは、大きく4つです。 見える文字・ボタン・情報が認識できる 読める文章や画像の意味を理解できる 押せるボタンやリンクを間違えず操作できる 操作できるマウス以外の方法でも必要な機能を利用できる まずこの4つを基準に既存サイトを見るだけでも、多くの改善点を発見できます。 Webアクセシビリティとは？まず知っておきたい基本 WCAG 2.2とは？世界的に参照されるアクセシビリティガイドライン Webアクセシビリティを考えるうえで重要なのが、W3Cが策定するWCAG（Web Content Accessibility Guidelines）です。 2026年8月時点では、WCAG 2.2がW3C Recommendationとして公開されています。WCAG 2.2では、従来からの文字コントラストやキーボード操作などに加え、フォーカスが他の要素に隠れないことや、操作対象のサイズなども追加されています。 WCAGには、達成基準として主に A AA AAA というレベルがあります。 企業サイトでアクセシビリティを検討する際は、まずA・AAレベルの考え方を理解しながら改善すると現実的です。 日本ではJIS X 8341-3:2016も重要な基準 日本では、JIS X 8341-3:2016がWebアクセシビリティに関する規格として広く参照されています。 デジタル庁の2025年10月更新の「ウェブアクセシビリティ導入ガイドブック」でも、JIS X 8341-3:2016が現在も参照されることの多い規格として紹介され、スマートフォンなど、その後重要性が増した課題も含めた実践方法が整理されています。 「どこまで対応すればアクセシブルなのか」を考える際は、感覚だけで判断せず、こうした基準を参照することが重要です。 中小企業も無関係ではない｜合理的配慮との関係 日本では、2024年4月1日から、障害者差別解消法に基づく事業者による合理的配慮の提供が義務化されています。 ただし、ここは誤解しないことが重要です。 「すべての民間企業サイトが一律にWCAG 2.2へ完全適合しなければ法律違反になる」という単純な話ではありません。 合理的配慮は個別の場面・状況や事業者への負担なども踏まえて判断されます。Webサイトに求められる具体的な対応も、サービス内容や利用状況によって異なります。 とはいえ、企業がWebを重要な顧客接点として利用する以上、最初から利用しづらい状態を減らしておくことは、ユーザー体験とリスク管理の両面で重要になっています。 まず改善したい8つのポイント 文字と背景のコントラストを確保する おしゃれなサイトで特に起きやすいのが、 「薄いグレーの文字 × 白背景」 です。 見た目は洗練されていても、コントラストが不足すると読みにくくなります。 WCAG 2.2のレベルAAでは、通常サイズのテキストについて少なくとも4.5:1、大きな文字については少なくとも3:1のコントラスト比が基準として示されています。 特に確認したいのは、 本文 小さな注釈 ボタン内の文字 フォームのラベル 画像上に重ねた文字 です。 ブランドカラーだからといって、そのまま文字色に使えるとは限りません。 ブランドカラーの色相を守りながら、明度などを調整して読みやすさを確保するという設計が必要です。 色だけで情報を伝えない 例えばフォームで、 「入力エラーは赤色にします」 だけでは不十分です。 色の違いを認識しにくいユーザーには、何が間違っているのか分からない可能性があります。 そのため、 赤色＋「必須項目です」 赤色＋エラーアイコン＋説明文 グラフなら色＋柄・ラベル のように、色以外の情報も組み合わせることが重要です。 これはアクセシビリティだけでなく、誰にとっても分かりやすいデザインにつながります。 文字サイズ・行間・拡大時の読みやすさを確認する 文字が読みにくい原因は、文字サイズだけではありません。 行間が狭い 文字が細すぎる 1行が長すぎる 拡大するとレイアウトが崩れる スマホで文字が極端に小さくなる こうした問題も確認します。 特に重要なのは、デザインカンプ上で美しく見えるかではなく、実際の端末で読めるかです。 PC・スマートフォンの両方で、 文章を拡大する ブラウザのズームを使う 画面幅を狭くする などの確認をしておきましょう。 画像には内容に応じた代替テキストを設定する 画像だけに重要な情報が含まれていると、画像を認識できない環境では内容が伝わりません。 例えば、 商品写真 施工事例 グラフ サービスの仕組みを説明する図 バナー画像 などです。 意味のある画像には、内容に応じてalt属性などによる代替テキストを設定します。 一方で、純粋な装飾画像にまで説明文を付ければよいわけではありません。 重要なのは、 「この画像が表示されなくても、必要な情報が伝わるか？」 という視点です。 Google Search Centralも、画像などの視覚コンテンツについて、テキストによる説明を用意し、セマンティックなHTMLを使用することを案内しています。Googleはサイトについて、検索だけでなく、あらゆるユーザーに対するアクセシビリティも高めるよう推奨しています。 ボタン・リンクを押しやすくする スマートフォンでは、見えていても押せなければ使いやすいサイトとは言えません。 例えば、 小さな「×」ボタン 密集したテキストリンク 小さなページネーション タップ範囲が文字だけのメニュー などです。 WCAG 2.2では、新しいレベルAAの基準として、ポインター操作のターゲットサイズについて原則24×24 CSSピクセル以上とする基準が追加されています。ただし、要素間の間隔など複数の例外があります。 ここで重要なのは「24pxにすれば終了」ではありません。 実際のサイトでは、 十分なボタンサイズ ボタン同士の余白 タップしやすい位置 誤操作しにくいレイアウト まで含めて確認しましょう。 キーボードだけでも操作できるか確認する Webサイトはマウスやタッチ操作だけで利用されるとは限りません。 キーボードのTabキーなどを使って、 メニュー リンク ボタン フォーム モーダル を操作できるか確認します。 さらに重要なのが、今どこを選択しているのか分かることです。 WCAG 2.2では、キーボードフォーカスが視覚的に確認できることがレベルAAの達成基準として示され、さらにフォーカスされたUIが固定ヘッダーなどで完全に隠れないこともレベルAAの基準に含まれています。 デザイン上、 outline: none; などでフォーカス表示を消してしまうと、キーボード利用者が現在位置を把握できなくなる場合があります。 「デザイン的に邪魔だから消す」ではなく、ブランドに合った見やすいフォーカス表現へ調整することが重要です。 フォームの項目名・エラー内容を分かりやすくする 問い合わせフォームもアクセシビリティで重要な場所です。 特に確認したいのは、 入力欄に項目名がある 必須・任意が分かる エラー理由が具体的 色だけでエラーを表現していない 入力欄とラベルが正しく対応している キーボードでも順番に操作できる といったポイントです。 例えば、 ×「入力内容に誤りがあります」 だけではなく、 ○「メールアドレスを『example@example.com』の形式で入力してください」 のように、修正方法まで伝えます。 アクセシビリティ対応は、結果的にフォーム離脱の改善にもつながる考え方です。 動画・アニメーションは情報を取り残さない設計にする 動画やアニメーションはブランド表現に有効ですが、使い方には注意が必要です。 例えば、 動画でしか説明していない 字幕がない 自動再生され続ける 動きが激しく、情報を追いにくい カルーセルが自動で切り替わり、止められない といった状態です。 重要な情報は動画だけに閉じ込めず、必要に応じて 字幕 テキスト 操作ボタン 停止手段 などを用意します。 「動かすこと」自体を目的にしないことが重要です。 “アクセシブル＝地味”ではない｜ブランドデザインと両立する考え方 アクセシビリティ対応について、 「色が使えなくなる」「デザインが普通になる」「ブランドらしさがなくなる」 と心配されることがあります。 しかし、これは誤解です。 アクセシビリティが求めているのは、デザインを地味にすることではありません。 例えばブランドカラーのコントラストが足りない場合でも、 背景側を調整する 色の明度を調整する ボタンだけ別のアクセントカラーを使う 文字色ではなく装飾にブランドカラーを使う など、ブランドを守りながら改善できます。 むしろ、 「美しいけれど読めない」より、「ブランドらしく、しかも伝わる」ことが本当のデザインです。 アクセシビリティはデザインの制約ではなく、デザインの完成度を高める条件のひとつとして考えるのがおすすめです。 中小企業サイトで優先順位をつけるならどこから？ アクセシビリティ改善を「全ページ一気にやる」と考えると、ハードルが高くなります。 既存サイトであれば、重要度の高い場所から段階的に進める方法があります。 最優先：問い合わせ・予約などCVに直結する場所 最初に確認したいのは、 問い合わせフォーム 予約フォーム CTA 電話ボタン 資料請求 などです。 ここが利用できないと、ビジネス成果そのものを取りこぼします。 まず「相談したい人が最後まで操作できるか」を確認するのが優先です。 次に：トップ・サービス・料金など主要ページ 次に確認するのは、アクセスや比較検討で重要なページです。 トップページ サービスページ 料金ページ 実績・事例 FAQ 特に、 文字色／文字サイズ／リンク／画像／見出し構造／ボタン を重点的に確認します。 最後に：サイト全体へルールを展開する 主要ページを改善したら、個別対応で終わらせず、デザインルールにします。 例えば、 本文色はこの色以上のコントラストを確保 ボタンサイズはこのルール リンクには共通表現を使う フォームのエラー表示はこの形式 画像登録時はaltを確認 フォーカス表示は削除しない といったルールです。 これをCMSの運用ルールやデザインガイドラインに組み込めば、更新するたびにアクセシビリティが悪化する状態を防げます。 このまま使えるWebアクセシビリティ改善チェックリスト 文字・色 本文と背景のコントラストを確認した 薄すぎるグレー文字を多用していない 色だけで「正解・エラー・重要」などを表現していない 文字を拡大しても情報が読める スマホでも本文が小さすぎない 画像・動画 意味のある画像に適切な代替テキストがある 画像の中だけに重要情報を閉じ込めていない 動画だけで重要情報を説明していない 必要な動画には字幕などを用意している 自動再生・アニメーションが操作を邪魔していない 操作 ボタン・リンクが押しやすい タップ要素同士が近すぎない キーボードだけでも主要機能を操作できる Tabキーで現在位置が確認できる 固定ヘッダーなどでフォーカス位置が隠れない フォーム 項目名が入力後も確認できる 必須・任意が分かる エラー内容が具体的 色だけでエラーを示していない エラー後も入力内容が保持される 送信ボタンの役割が明確 運用 新規ページ作成時の確認ルールがある 更新担当者にもアクセシビリティ基準を共有している PCだけでなくスマホでも確認している 自動チェックだけで終わらず、実際に操作して確認している まとめ：アクセシビリティは“制約”ではなく、伝わるデザインの基本 Webアクセシビリティは、特別なユーザーだけを対象にした対応ではありません。 見える。読める。押せる。迷わず操作できる。 この基本を整えることです。 そして、この考え方は、 UI/UX スマホ対応 問い合わせフォーム改善 コンテンツ設計 ブランドへの信頼 とも密接につながっています。 Google Search Centralも、Webサイトについて安全性・速度・デバイス対応と並び、あらゆるユーザーにとってのアクセシビリティを高めることを案内しています。アクセシビリティを「SEOの裏技」と考えるのではなく、ユーザーにも検索エンジンにも内容を適切に届けるサイトづくりの土台として考えるのが適切です。 中小企業サイトであれば、最初から完璧を目指す必要はありません。 まずは問い合わせフォーム、CTA、トップページ、サービスページなど重要度の高い場所から確認し、改善したルールをサイト全体へ広げていきましょう。 法務面の注意 2024年4月1日から、民間事業者にも障害のある人への合理的配慮の提供が義務化されています。 ただし、「民間企業のWebサイトはすべてWCAG 2.2のAAに適合しなければならない」と一律に解釈するのは適切ではありません。 実際の法的義務や必要となる対応は、事業内容・利用者・具体的な申出・過重な負担の有無などによって判断されます。 そのため、公共性の高いサービスや、予約・申請・購入などWeb上で重要な手続きを提供している企業では、「法律でどこまで必須か」だけではなく、利用者がサービスへアクセスできる状態をどう確保するかという視点で対応することが重要です。 無料相談 Refuでは、見た目のデザインだけでなく、文字の読みやすさ・色のコントラスト・スマホ操作・CTA・フォーム・キーボード操作など、実際のユーザー体験を含めたサイト改善をご提案しています。 「アクセシビリティと言われても何から直せばいいか分からない」「デザイン性を保ったまま改善したい」といった場合も、現在のサイトを確認し、優先順位から整理します。 ▶ 無料相談はこちらから その他おすすめ記事はこちら スマホで差がつくUI改善｜押しやすさ・読みやすさのチェックポイント 問い合わせフォームのデザイン改善｜入力離脱を防ぐ項目・エラー表示・確認画面 “信頼される文章”に見せるデザイン｜行間・段落・余白の文章レイアウト術 配色に迷わない｜メイン・サブ・アクセントの黄金比と運用ルール ヘッダー・グロナビの正解は？迷わせないメニュー設計の基本 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方
2026/08/05
デザイン・ブランディング問い合わせフォームのデザイン改善｜入力離脱を防ぐ項目・エラー表示・確認画面
問い合わせフォームは、サイト成果を左右する「最後の接客ページ」です。 ホームページを見てサービスに興味を持ち、実績や料金を確認したユーザーが、最後に訪れるのが問い合わせフォームです。 ここまで順調に比較検討が進んでいても、フォームが使いにくければ問い合わせにはつながりません。 例えば、次のような状態です。 入力項目が多く、面倒に感じる 何を書けばよいのか分からない エラーが表示されたものの、直す場所が分からない 送信後に営業されそうで不安になる スマホでは入力しづらい 問い合わせフォームは、単なる入力欄ではありません。 サイトを訪れたユーザーに対し、最後に「安心して相談できる」と感じてもらうための接客ページです。 まず結論：入力項目を減らすだけではなく「迷い・手間・不安」を減らす フォーム改善というと、「入力項目を少なくすればよい」と考えられがちです。 もちろん項目数は重要ですが、項目を減らすだけでは十分ではありません。 改善すべきポイントは、次の3つです。 迷いを減らす 何を、どのように入力すればよいかを明確にする 手間を減らす 文字入力や画面移動をできるだけ少なくする 不安を減らす 送信後の対応や個人情報の扱いを分かりやすくする この3点が整うと、ユーザーは途中で止まりにくくなります。 問い合わせフォームで離脱が起きる主な原因5つ 入力項目が多く、完了までの負担が大きい フォームを開いた瞬間に入力欄が何十個も並んでいると、それだけで「時間がかかりそう」と思われます。 特に初回問い合わせで、次のような情報をすべて必須にすると、入力の負担が大きくなります。 住所 部署名 役職 従業員数 予算 希望納期 詳細な相談内容 自社を知ったきっかけ 情報収集の目的は理解できますが、問い合わせ前に必要な情報と、問い合わせ後のヒアリングで確認できる情報は分けて考える必要があります。 必須項目と任意項目の違いが分かりにくい どの項目を入力しなければ送信できないのか分からないフォームは、ユーザーに余計な判断をさせます。 特に避けたいのが、次のような表示です。 必須項目にだけ小さな記号がある ページ下部に「※は必須です」とだけ書かれている 任意項目なのか必須項目なのか表示されていない 各項目の近くに、「必須」「任意」を分かりやすく表示しましょう。 入力方法や回答例が分からない 入力欄があっても、ユーザーが何を書けばよいか分からなければ、入力は進みません。 例えば「お問い合わせ内容」とだけ書かれているよりも、次のような補足がある方が答えやすくなります。 記入例 「既存サイトのリニューアルを検討しています。ページ数は10ページ程度で、問い合わせ増加を目的としています」 相談内容がまだ整理できていないユーザーに向けて、次のような一文を添える方法も有効です。 内容がまとまっていない段階でも問題ありません。現在のお悩みやご希望を分かる範囲でご記入ください。 エラーの場所と直し方が伝わらない 入力エラーが発生した際に、ページ上部へ「入力内容に誤りがあります」とだけ表示しても、ユーザーはどこを直せばよいか分かりません。 エラー表示では、次の2点を具体的に伝える必要があります。 どの項目に問題があるか どのように直せばよいか 例えば、「メールアドレスが正しくありません」だけでなく、次のように表示します。 メールアドレスの形式を確認してください。例：info@example.com ユーザーを責める表現ではなく、修正方法を案内する表現にすることが重要です。 送信後の流れが分からず不安になる ユーザーはフォームを送信する前に、送信後に何が起きるのかを気にしています。 いつ返事が来るのか 電話がかかってくるのか 営業連絡が増えないか 相談だけでもよいのか 費用が発生しないか 送信ボタンの近くに、次のような情報を記載すると安心感が高まります。 通常〇営業日以内に返信します ご相談・お見積りは無料です 内容を確認後、担当者よりメールまたは電話でご連絡します ご相談内容に応じてオンライン打ち合わせをご案内します 記載内容は、実際の対応方法と一致させる必要があります。 入力離脱を防ぐフォームデザインの改善ポイント 項目は「問い合わせ対応に必要か」で判断する 入力項目を決める際は、「あると便利」ではなく、初回対応に本当に必要かで判断します。 一般的なBtoBの問い合わせフォームであれば、最初は次の項目でも対応できます。 会社名 氏名 メールアドレス 電話番号 問い合わせ種別 問い合わせ内容 住所や予算、詳細な要件などは、問い合わせ後に確認できる場合があります。 ただし、問い合わせ内容によって事前情報が必要なサービスでは、必要項目を無理に削る必要はありません。 重要なのは、項目ごとに必要な理由を説明できる状態にすることです。 入力順はユーザーが答えやすい流れにする フォームの入力順は、運営側が管理しやすい順番ではなく、ユーザーが答えやすい順番にします。 おすすめの流れは次の通りです。 問い合わせ種別 相談内容 会社名・氏名 連絡先 希望する連絡方法や時間帯 最初から個人情報を求めるよりも、まず相談内容を選べる方が、ユーザーがフォームに入りやすい場合があります。 一方で、短いフォームであれば、会社名・氏名から始めても大きな問題はありません。 サイトの目的や項目数に合わせて、自然な順番を設計しましょう。 ラベルとプレースホルダーを正しく使い分ける 入力欄の上や横に表示する項目名をラベル、入力欄の中に薄く表示する例文をプレースホルダーと呼びます。 プレースホルダーだけで項目名を表示すると、文字を入力した後に項目名が見えなくなります。 そのため、基本的には次のように使い分けます。 ラベル：項目名を常に表示する プレースホルダー：入力例や補足を表示する 例 メールアドレス【必須】 プレースホルダー：info@example.com ラベルと入力例の役割を分けることで、入力途中でも内容を確認しやすくなります。 選択式を活用して文字入力を減らす スマホでは、文字入力そのものが負担になります。 回答内容がある程度決まっている項目は、次のような選択式を活用します。 ラジオボタン チェックボックス プルダウン 日付選択 希望時間帯の選択 例えば、問い合わせ種別であれば次のように設定できます。 ホームページの新規制作 ホームページのリニューアル 更新・保守について Web集客について その他 ただし、選択肢が多すぎるプルダウンは、かえって探しにくくなります。 選択肢が少ない場合は、ラジオボタンなど、最初から内容が見える形式が分かりやすいでしょう。 必須・任意の表示を統一する 必須項目だけに「必須」と表示する方法と、すべての項目に「必須」「任意」を表示する方法があります。 どちらを採用する場合でも、ページ内でルールを統一することが重要です。 おすすめは、次のような表記です。 会社名 必須 電話番号 任意 色だけで区別すると分かりにくい場合があるため、文字でも明示します。 また、必須項目が多すぎる場合は、本当にすべて必要なのかを見直しましょう。 エラーは入力欄の近くに具体的に表示する エラーが発生した項目は、次のように分かりやすくします。 入力欄の近くにエラーメッセージを表示する エラーがある入力欄を枠線などで示す ページ上部から該当項目へ移動しやすくする 入力済みの正常な内容は消さない エラーメッセージは、短く具体的にします。 悪い例 入力内容に誤りがあります。 良い例 電話番号は半角数字で入力してください。 エラーが起きたことではなく、次に何をすればよいかを伝えましょう。 送信ボタンは「押した後」が分かる文言にする 「送信」だけでは、押した後の状態が分かりにくい場合があります。 フォームの種類に合わせて、具体的な文言を設定します。 入力内容を確認する この内容で問い合わせる 無料相談を申し込む 見積りを依頼する 資料を請求する 確認画面へ進むボタンと、最終送信ボタンは、文言を分けることも重要です。 入力画面：入力内容を確認する 確認画面：この内容で送信する これにより、誤って送信してしまう不安を減らせます。 確認画面は必要？省略する場合の判断基準 確認画面には、入力内容を見直せるというメリットがあります。 一方で、画面が1つ増えるため、問い合わせ完了までの手順も増えます。 確認画面を設けた方がよいケースは、次の通りです。 入力項目が多い 長文や重要情報を入力する 予約内容や希望日時を確定する 送信後の修正が難しい 個人情報や契約に関わる情報を扱う 一方で、項目数が少ない簡易フォームであれば、入力画面上で内容を確認しやすくしたうえで、確認画面を省略する方法もあります。 重要なのは、確認画面の有無ではなく、誤送信の不安と完了までの負担のバランスです。 スマホで入力しやすいフォームを作るポイント スマホでは、PC以上にフォームの使いやすさが成果を左右します。 特に確認したいポイントは次の通りです。 入力欄が画面幅に合っている 文字が小さすぎない 項目同士の間隔が狭すぎない ボタンが指で押しやすい 電話番号入力時に数字用キーボードが表示される メールアドレス入力時に適切なキーボードが表示される エラー表示後、該当項目が見つけやすい 入力途中で内容が消えない また、横並びの項目は、スマホでは縦並びにした方が入力しやすい場合があります。 PC画面だけで確認せず、必ず実際のスマホで入力テストを行いましょう。 問い合わせの目的別｜おすすめ入力項目テンプレート 一般的なBtoB問い合わせフォーム 会社名【必須】 氏名【必須】 メールアドレス【必須】 電話番号【任意】 問い合わせ種別【必須】 問い合わせ内容【必須】 個人情報保護方針への同意【必須】 見積り依頼フォーム 会社名【必須】 氏名【必須】 メールアドレス【必須】 電話番号【任意】 希望サービス【必須】 希望時期【任意】 予算の目安【任意】 相談内容【必須】 予算を必須にすると離脱につながる場合があります。 予算が決まっていないユーザーのために、「未定」「相談したい」という選択肢を用意すると回答しやすくなります。 無料相談フォーム 会社名【必須】 氏名【必須】 メールアドレス【必須】 相談したい内容【必須】 希望する連絡方法【任意】 希望日時【任意】 日時調整を後から行う場合は、希望日時を無理に入力させる必要はありません。 計測と改善｜フォームのどこで離脱しているかを確認する フォームは公開して終わりではありません。 可能であれば、次のような行動を計測します。 フォームページの閲覧数 入力開始数 確認画面への到達数 送信完了数 エラーの発生数 各入力項目での離脱 例えば、フォームページは多く見られているのに送信完了が少ない場合、フォーム内に問題がある可能性があります。 確認画面までは進んでいるのに送信されない場合は、確認画面の見せ方や最終送信ボタンを見直します。 項目を変更した際は、変更前後で送信完了率を比較すると、改善効果を判断しやすくなります。 このまま使える問い合わせフォーム改善チェックリスト 入力項目は初回対応に必要なものへ絞られている 必須項目が多すぎない 必須・任意の表示ルールが統一されている 項目名が入力後も見える 入力例や補足説明がある 選択式で回答できる項目は文字入力を減らしている エラーが該当項目の近くに表示される エラーの修正方法が具体的に書かれている 入力エラー後も、入力済みの内容が保持される 送信ボタンの文言で、次の動作が分かる 送信後の返信時期や対応方法が書かれている 個人情報保護方針への導線がある スマホで入力・確認・送信までテストしている フォーム到達数と送信完了数を計測できている まとめ：フォームは入力欄ではなく「安心して相談できる体験」を設計する 問い合わせフォームの改善で重要なのは、単に入力項目を減らすことではありません。 迷わず入力できる 少ない負担で完了できる エラーが起きても修正できる 送信後の流れが分かる 安心して個人情報を預けられる この一連の体験を整えることが、問い合わせ完了につながります。 サイトへのアクセス数を増やしても、最後のフォームで離脱していれば成果は伸びません。 まずは実際に自社のフォームをスマホから入力し、ユーザーと同じ手順で、迷う場所や負担に感じる場所を確認してみましょう。 無料相談 Refuでは、問い合わせフォームを単体で見るのではなく、サービスページからフォームへの導線、入力項目、エラー表示、スマホでの操作性、送信後の案内まで一貫して確認します。 「フォームまでは見られているのに問い合わせが増えない」「入力項目をどう整理すべきか分からない」といった場合も、現状を整理したうえで改善方法をご提案します。 ▶ 無料相談はこちらから その他おすすめ記事はこちら CTA（問い合わせ・資料請求）を押したくなるデザイン改善チェックリスト スマホで差がつくUI改善｜押しやすさ・読みやすさのチェックポイント “なんとなく見づらい”を解決する情報設計｜見出し・箇条書き・図解の使い分け 料金ページのデザインで失注を防ぐ｜見せ方・不安解消・注意点まとめ ヘッダー・グロナビの正解は？迷わせないメニュー設計の基本
