COLUMN
よく検索されるキーワード
2026/07/15
デザイン・ブランディングデザイン改修で成果を出すA/Bテスト入門｜小さく検証して勝ちパターンを作る
A/Bテストは"センス勝負"をやめて成果を積み上げるための仕組み ホームページやLPの改善で、次のような状態になっていませんか？ 「なんとなくこちらのデザインが良さそう」で変更している 改修したものの、本当に成果が上がったか分からない 担当者が変わるたびに判断基準が変わる 改善を繰り返しても成果が積み上がらない このような状態を防ぐのがA/Bテストです。 A/Bテストとは、小さな改善を繰り返しながら数字で判断し、成果が出たパターンだけを残していく改善手法です。 感覚ではなくデータをもとに改善できるため、再現性のあるホームページ運用につながります。 まず結論：小さく変えて、1つの指標だけで判断する A/Bテストで失敗する原因の多くは、一度に大きく変えすぎることです。 例えば、 デザインを全面リニューアルして何が効果的だったか分からない 複数の要素を同時に変更して原因を特定できない 指標をたくさん見て都合よく判断してしまう といったケースは少なくありません。 成果につながるA/Bテストの基本は、次の3つです。 変更するのは1つの要素だけ 判断する指標は基本1つだけ 成果が出た改善は標準化して運用へ反映する シンプルなルールほど、改善は積み重ねやすくなります。 優先してA/Bテストしたい5つのポイント CTA（ボタン）の文言・配置・周辺情報 最も成果が出やすいのがCTA（行動を促すボタン）の改善です。 例えば、 「お問い合わせ」→「30分無料相談を予約する」 ファーストビューにもCTAを追加する ボタン付近に実績やFAQを掲載する など、小さな変更でもクリック率が改善することがあります。 ファーストビュー ファーストビューは、ユーザーがサイトを開いて数秒で判断する重要なエリアです。 次の内容がすぐ伝わるかを確認しましょう。 誰向けのサービスなのか 何が得られるのか なぜ選ばれるのか 実績や数字などの信頼材料を追加することも有効です。 お問い合わせフォーム フォームはCV（お問い合わせ・資料請求）に直結します。 改善例としては、 必須項目を減らす 選択式を増やす 入力しやすいUIにする などがあります。 ※個人情報は必要最小限にし、過剰な入力項目は避けましょう。 サイト内の導線 ユーザーが次に見るページも重要な改善ポイントです。 例えば、 ブログからサービスページへの導線 サービスページから事例ページへの導線 FAQからお問い合わせページへの導線 など、回遊しやすい設計を検証します。 事例・実績の見せ方 事例の見せ方によって相談率が変わることがあります。 例えば、 業種別に分類する 課題別に並べる 成果が分かるタイトルに変更する など、自分に近い事例を探しやすくすると効果が期待できます。 成果が出る仮説の立て方 まずボトルネックを見つける 改善は思いつきではなく、原因から考えます。 原因は大きく次の3つに分類できます。 CTAが見つからず押せない 情報が整理されておらず読みにくい 不安を解消する情報が不足している まずはどこが課題なのかを整理しましょう。 仮説は「なぜ→だから→こう変える」で考える 仮説は次の形でまとめると分かりやすくなります。 なぜ：何が原因なのか だから：ユーザーはどう感じているのか こう変える：改善内容 例えば、 なぜサービス内容が伝わりにくい だから何の会社か分からず離脱している こう変える見出しをベネフィット中心に変更し、対象ユーザーを追加する という流れです。 一度に変更するのは1要素だけ 画像も見出しもCTAも同時に変更すると、どの改善が効果的だったか判断できません。 原因を特定するためにも、1回のテストでは1つだけ変更することが重要です。 判断する指標はできるだけ少なくする 主指標は1つだけ決める 基本は目的に合わせて1つだけ選びます。 例えば、 お問い合わせ数を増やしたい → CV数 データが少ない → CTAクリック数 などです。 サブ指標は補足として見る 参考程度に見る指標としては、 直帰率 離脱率 スクロール率 フォーム到達率 などがあります。 ただし、最終判断は主指標で行うことが大切です。 データが少ない場合の考え方 BtoBサイトなどでは、CV数が少なく判断しづらいことがあります。 その場合は、 CTAクリック率 フォーム到達率 などの中間指標で判断すると改善しやすくなります。 また、十分なデータが集まるまでテスト期間を長めに設定しましょう。 実務で使えるA/Bテストの進め方 改善は次の手順で進めると整理しやすくなります。 改善したい目的を決める ボトルネックを分析する 仮説を立てる 変更する要素を1つ決める 主指標を設定する 一定期間テストする 勝ったパターンを採用する このサイクルを繰り返すことで、改善が積み上がっていきます。 よくある失敗パターン 一度にたくさん変更してしまう 何が成果につながったか判断できなくなります。 指標が多すぎる 都合の良い数字だけを見てしまい、正しい判断ができません。 ボトルネック以外を改善している 本当の課題ではない場所を改善しても、大きな成果は期待できません。 データが少ないのに早く結論を出す 十分なデータが集まる前に判断すると、誤った改善になる可能性があります。 勝ちパターンを標準化しない 改善して終わりではなく、成果が出た方法を今後の運用に反映することが重要です。 デザインの好みで元に戻してしまう 数字よりも好みを優先すると、改善の積み重ねが止まってしまいます。 計測できていない GA4やイベント設定が正しく動いていなければ、A/Bテストは成立しません。 まずは計測環境を整えることが最優先です。 このまま使えるA/Bテストテンプレート テスト目的 例：お問い合わせ数を増やす 対象ページ 例：サービスページ 主指標 例：CTAクリック率 仮説 なぜ ＿＿＿＿＿＿＿＿＿＿ だから ＿＿＿＿＿＿＿＿＿＿ こう変える ＿＿＿＿＿＿＿＿＿＿ 変更点（1つだけ） A：＿＿＿＿＿＿＿＿＿＿ B：＿＿＿＿＿＿＿＿＿＿ CTA文言の例 A：お問い合わせ B：30分無料相談を予約する ファーストビュー見出しの例 A：ホームページ制作を支援します B：問い合わせにつながるホームページ制作で集客を支援します まとめ：A/Bテストは"勝ちパターン"を増やすための改善手法 A/Bテストの目的は、完璧なデザインを作ることではありません。 小さな改善を繰り返しながら、 何が成果につながるのか どの導線がクリックされるのか どんな表現が問い合わせにつながるのか という「勝ちパターン」を蓄積していくことが目的です。 1つずつ改善し、数字で判断し、成果が出たものを標準化する。 この運用ができるようになると、ホームページ改善は感覚ではなく、成果を積み重ねる仕組みへと変わっていきます。 無料相談 Refuでは、ホームページのアクセス解析をもとに、改善すべきポイントの洗い出しから、A/Bテストの仮説設計、GA4による計測設定、改善サイクルの構築まで一貫してサポートしています。 「何を改善すれば成果につながるか分からない」「感覚ではなく数字で改善したい」という方も、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら CTA（問い合わせ・資料請求）を押したくなるデザイン改善チェックリスト ファーストビューで離脱させない｜コピー×デザインの最適バランス スマホで差がつくUI改善｜押しやすさ・読みやすさのチェックポイント 料金ページのデザインで失注を防ぐ｜見せ方・不安解消・注意点まとめ “なんとなく見づらい”を解決する情報設計｜見出し・箇条書き・図解の使い分け
2026/07/08
デザイン・ブランディングブランドらしさが伝わる写真撮影の準備｜構図・服装・背景・チェックリスト
写真は“おまけ”ではない。サイトの信頼感は写真で決まる 「ホームページが安っぽく見える」「なんとなく信頼できない」と感じられる原因は、配色やフォントではなく、写真にあることが少なくありません。 写真は、ユーザーがサイトを開いた瞬間に目に入る情報です。 例えば、 フリー素材ばかりで実在感がない 写真ごとに色味や雰囲気がバラバラ 何をしている会社なのか分からない このような状態では、どれだけ文章が充実していても信頼を得るのは難しくなります。 反対に、自社らしい写真が揃うだけで、サイト全体の印象は大きく変わります。 まず結論：撮影前に「誰にどう見られたいか」を決める 写真撮影が失敗する原因の多くは、撮影そのものではありません。 撮影前の設計が曖昧なことです。 よくある失敗例は次のとおりです。 とりあえず撮影しただけで用途が決まっていない 良い写真は撮れたがサイトの雰囲気に合わない 必要な写真が足りず、途中でフリー素材を使うことになった これを防ぐためには、撮影前に 誰に見てもらいたいのか どんな印象を持ってほしいのか 何を伝えたいのか を整理しておくことが重要です。 撮影前に決めておきたい5つのポイント ブランドイメージを3つの言葉で決める まずは会社の世界観を3つのキーワードで表現します。 例えば、 誠実・安心・上質 親しみ・温かい・分かりやすい 先進的・シンプル・信頼感 などです。 この3つの言葉が、写真の明るさや色味、表情、構図まで決める基準になります。 誰に向けた写真なのかを明確にする 同じ会社でも、 企業担当者向け 求職者向け 一般消費者向け では、必要な写真は変わります。 ターゲットが決まると、撮影内容も整理しやすくなります。 何を伝えたい写真なのかを決める ホームページに必要な写真は、大きく4種類あります。 人（代表・スタッフ） 現場（作業・接客・打ち合わせ） モノ（商品・設備・成果物） 空気感（オフィス・店舗・チームの雰囲気） これらをバランスよく撮影すると、会社の魅力が伝わりやすくなります。 写真全体のトーンを統一する 写真は、内容だけでなく統一感も重要です。 特に揃えたいのは、 明るさ 色味 の2点です。 撮影日や編集方法を揃えるだけでも、ホームページ全体の品質が大きく向上します。 写真の使い道を決めておく 撮影前に、どこで使う写真なのかを決めておきます。 例えば、 ファーストビュー サービス紹介 採用ページ 事例紹介 用途が決まれば、必要な構図や余白も自然と決まります。 ホームページで使いやすい写真の構図 「引き・中・寄り」を必ず撮る 同じ距離の写真ばかりでは、サイト全体が単調になります。 撮影では、 引き（全体） 中（人物＋作業） 寄り（手元・道具） の3種類を意識すると、さまざまなページで使いやすくなります。 手元や仕事の様子を撮る 仕事中の写真は、立ち姿だけでは魅力が伝わりません。 例えば、 打ち合わせ中の資料 作業している手元 専門的な道具 実際の仕事風景 などがあると、専門性や信頼感が伝わります。 自然な表情を意識する カメラ目線の写真だけでは、少し作られた印象になりがちです。 おすすめなのは、 作業に集中している様子 会話している様子 自然な笑顔 など、普段の雰囲気が伝わる写真です。 文字を載せる余白を作る ファーストビューやバナーでは、写真の上に文字を配置することが多くあります。 そのため、 人物を左右どちらかに配置する 背景をシンプルにする 空間を残す といった構図を意識すると使いやすくなります。 服装・身だしなみで信頼感を高める ブランドイメージに合わせて服装を揃える 例えば、 誠実・上質なら ジャケット シャツ 落ち着いた色 親しみやすさなら 柔らかい色 カジュアルすぎない服装 など、ブランドイメージに合わせて統一しましょう。 柄やロゴは控えめにする 派手な柄や大きなロゴは、写真全体の印象を散らしてしまいます。 基本は、 無地 シンプル 色数を抑える ことがおすすめです。 清潔感を最優先にする 高価な服を用意する必要はありません。 大切なのは、 シワのない服 整った髪型 清潔な靴 爪や身だしなみ など、清潔感です。 背景や小物もブランドの一部 背景はできるだけ整理する 背景に物が多いと、それだけで雑然とした印象になります。 撮影前に不要な物を片付け、必要な物だけを残しましょう。 実際の職場を活かす オフィスや店舗、現場などの実際の場所は、実在感を伝える大切な要素です。 ただし、整理整頓された状態で撮影することが前提です。 映り込みにも注意する 写真には思わぬ情報が写ることがあります。 例えば、 個人情報 書類 PC画面 他社ロゴ 電話番号や住所 などは事前に確認しておきましょう。 カメラマンへ依頼するときのポイント 「好きな写真」ではなく「目的」を伝える 参考写真だけでは、イメージが伝わらないことがあります。 カメラマンには、 ブランドを表す3つの言葉 ターゲット 写真で伝えたいこと まで共有すると、仕上がりのズレを防げます。 カットリストを作成する 事前に必要な写真を一覧化しておくと、撮り忘れを防げます。 例えば、 ファーストビュー 代表写真 スタッフ写真 作業風景 オフィス 商品・成果物 事例紹介 などをリスト化しておきましょう。 使用用途を共有する 写真はホームページでトリミングされることがほとんどです。 例えば、 横長で使う 丸く切り抜く 背景をぼかす など、用途まで伝えておくと使いやすい写真になります。 このまま使える撮影準備チェックリスト 撮影前 ブランドイメージ（3つのキーワード）が決まっている ターゲットが決まっている 撮影目的と使用ページが整理できている カットリストを作成した 服装や色味を統一した 撮影当日 身だしなみを整えた 背景を片付けた 個人情報が映らない状態にした 仕事道具を準備した 引き・中・寄りの写真を撮影した ファーストビュー用の余白がある写真を撮影した 自然な表情の写真が撮れている 撮影後 納品サイズを確認した レタッチ範囲を確認した 色味や明るさを統一した まとめ：写真の品質は撮影前の準備で決まる ホームページの写真は、撮影当日の技術だけでは決まりません。 事前に、 ブランドイメージ ターゲット 用途 構図 服装 背景 まで設計しておくことで、サイト全体の統一感と信頼感が大きく向上します。 自社らしい写真が揃うことで、ホームページ全体の説得力も自然と高まり、問い合わせや採用などの成果にもつながりやすくなります。 無料相談 Refuでは、ホームページで成果につながる写真撮影のために、撮影前のブランド設計からカットリスト作成、服装・背景のアドバイス、撮影ディレクションまで一貫してサポートしています。 「何を撮ればいいか分からない」「フリー素材中心のサイトから卒業したい」という方も、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら ブランドを言語化する「3語ルール」｜デザインがブレない軸の作り方 サイトの世界観を整えるための写真・動画活用術｜印象を決定づけるビジュアル戦略 写真選びで失敗しないためのポイント｜プロと素人の違いが一目でわかるチェック基準 “安っぽく見える”を脱却する質感づくり｜写真・色・文字の整え方 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方
2026/07/01
デザイン・ブランディング“信頼される文章”に見せるデザイン｜行間・段落・余白の文章レイアウト術
文章が読まれない原因は“内容”より「レイアウト（見せ方）」のことが多い 「文章はしっかり書いたのに読まれていない」「説明しているのに問い合わせにつながらない」 このような場合、内容そのものより先に見直すべきなのが文章レイアウトです。 ユーザーは文章を読む前に、まず見た目で判断しています。 パッと見て文字が詰まっている 長文が続いている 要点が分からない この状態では、内容が良くても読まれません。 つまり文章レイアウトは、読みやすさだけでなく信頼感にも直結する重要な要素です。 まず結論：文章レイアウトは「分ける・空ける・要点化」で信頼が上がる 文章を読みやすくするために、難しいテクニックは必要ありません。 大切なのは次の3つです。 分ける（段落や見出しで情報を小分けにする） 空ける（余白や行間で圧迫感を減らす） 要点化する（箇条書きや太字で拾い読みしやすくする） この3つを意識するだけで、同じ内容でも読みやすさと信頼感が大きく変わります。 文章が安っぽく見える・読まれない原因 行間が詰まっていて圧迫感がある 行間が狭い文章は、読む前から疲れそうな印象を与えます。 その結果、内容を読む前に離脱される可能性が高くなります。 1段落が長すぎる Webでは長い段落ほど読まれにくくなります。 1段落につき1つの内容に絞ることで、理解しやすくなります。 見出しだけで内容が分からない 「概要」「詳細」など抽象的な見出しは、拾い読みの邪魔になります。 見出しだけ読んでも内容が分かる状態が理想です。 強調が多すぎる 太字や色文字を使いすぎると、どこが重要なのか分からなくなります。 強調は本当に伝えたい部分だけに絞りましょう。 箇条書きがなく要点が埋もれている 特徴や条件、手順などを文章だけで説明すると、重要なポイントが埋もれてしまいます。 比較や列挙は箇条書きの方が伝わります。 余白がなく窮屈に見える 余白がないページは、安っぽく見えやすくなります。 余白はコストをかけずにサイトの品質を高められる要素です。 信頼を作る文章レイアウトの基本ルール 行間はゆとりを持たせる 文章を読んでもらいたいなら、行間は広めに確保しましょう。 行間に余裕があると視線が流れやすくなり、最後まで読みやすくなります。 1段落＝1メッセージを意識する 段落は話題を切り替える単位です。 1つの段落で複数の話題を扱わず、伝えたいことを絞ることで理解しやすくなります。 余白で情報を整理する 余白は次の3段階で考えると整理しやすくなります。 段落間の余白 ブロック内の余白 セクション間の余白 余白の大小にメリハリをつけることで、情報が自然に整理されます。 見出しを先に設計する 見出しはページ全体の地図です。 理想は、見出しだけ読んでも内容の8割が理解できる状態です。 強調ルールを決める おすすめのルールは次の通りです。 太字：1セクションにつき1〜3箇所 色文字：CTAや重要導線のみ 下線：基本的には使用しない 強調しすぎるほど、逆に重要な部分が伝わりにくくなります。 比較や条件は箇条書きにする 次のような内容は箇条書きに向いています。 特徴 条件 手順 メリット・デメリット 比較項目 文章で説明するよりも、理解が早くなります。 ページ別のおすすめ構成 サービス紹介ページ サービス紹介は次の順番が基本です。 構成例 結論 理由 具体例 FAQ CTA ユーザーの疑問に順番に答える構成にすると、離脱が減ります。 料金ページ 料金ページは次の流れが分かりやすいです。 構成例 料金の目安 内訳 条件 注意事項 CTA 条件や追加費用の可能性は、見つけやすい位置に配置しましょう。 代表挨拶・想いページ 想いを伝えるページは長文になりがちです。 読まれやすい構成 短い文章 具体的なエピソード 写真 を組み合わせると信頼感が高まります。 既存文章を読みやすくする5ステップ 1. 結論を冒頭に置く 最初に何を伝えたいのかを明確にします。 2. 見出しを言い切り型にする 内容が想像できる見出しに変更します。 3. 段落を分解する 1段落1メッセージを意識して整理します。 4. 箇条書きと太字で要点化する 重要な情報を視覚的に整理します。 5. 余白を増やす 文章を書き直す前に、まず余白を整えるだけでも効果があります。 このまま使えるチェックリスト レイアウトチェック 結論が冒頭にある 見出しだけで内容が理解できる 1段落が長すぎない 箇条書きが適切に使われている 太字が多すぎない 十分な余白がある CTAが文脈の最後に配置されている まとめ：文章は「内容」だけでなく「見せ方」で読まれる 文章が読まれるかどうかは、内容だけでは決まりません。 行間や余白、見出し、箇条書きなどのレイアウトを整えることで、 読みやすい 分かりやすい 信頼できる という印象を作ることができます。 まずは文章を書き直す前に、「分ける・空ける・要点化する」の3つを見直してみましょう。 無料相談 Refuでは、既存ページの文章を分析し、「どこで読みにくさが発生しているか」を整理したうえで、見出し設計・段落構成・余白設計・CTA改善まで一貫してサポートしています。 「文章はあるのに反応が薄い」「内容は良いはずなのに読まれない」とお悩みの方は、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら “なんとなく見づらい”を解決する情報設計｜見出し・箇条書き・図解の使い分け 信頼感を底上げする「余白・整列・視線誘導」レイアウト設計の基本 フォント選びで損しない｜和文・欧文の組み合わせと読みやすさの鉄則 料金ページのデザインで失注を防ぐ｜見せ方・不安解消・注意点まとめ 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方
2026/06/24
デザイン・ブランディングヘッダー・グロナビの正解は？迷わせないメニュー設計の基本
グロナビで迷わせると、良いコンテンツでも読まれない ヘッダーやグローバルナビゲーション（グロナビ）は、サイト全体の“案内板”です。 ここが分かりにくいと、ユーザーは次のような状態になります。 欲しい情報にたどり着けない どこを見ればいいか分からない 比較検討が進まず離脱する つまりグロナビは、デザインの問題ではなくUI/UXに直結する重要な要素です。 良いコンテンツがあっても、必要なページへ案内できなければ成果にはつながりません。 まず結論：メニューは「探す導線」ではなく“決める導線”として設計する よくある誤解が、「メニューはすべてのページへの入口を並べるもの」という考え方です。 しかし実際は違います。 本来のグロナビは、 ユーザーが迷わず判断できる 次に見るべきページが分かる 問い合わせや資料請求につながる ための導線です。 項目を増やすほど親切に見えますが、実際には選択肢が増え、迷いも増えてしまいます。 メニュー設計で押さえるべき3つの原則 ユーザーの目的別に並べる グロナビは社内都合ではなく、ユーザーの行動順で設計します。 多くのユーザーは次の流れで情報を探します。 何をしている会社か知りたい 信頼できるか確認したい 費用感を知りたい 自社に合うか判断したい 問い合わせしたい そのため、 サービス 事例 料金 FAQ 問い合わせ の順番が分かりやすいケースが多くなります。 迷う要素を減らす ユーザーが迷う原因は主に次の3つです。 項目数が多すぎる 言葉が抽象的 階層が深すぎる 改善の基本は「増やす」ではなく「減らす」です。 次の行動を見せ続ける グロナビの役割は回遊だけではありません。 問い合わせや資料請求など、行動につなげることも重要です。 そのため、 お問い合わせ 無料相談 資料請求 などのCTAは常に見える位置に配置しましょう。 スマホの場合は電話ボタンやLINE導線も有効です。 項目数の目安｜多すぎると迷い、少なすぎると不安になる PCは5〜7項目が基本 中小企業サイトの場合、グロナビは5〜7項目程度が最も見やすい傾向があります。 それ以上になる場合は、項目の統合を検討しましょう。 スマホは優先導線だけを表示する スマホでは画面が狭いため、優先度の高いページを中心に構成します。 優先度が高いページの例 サービス 事例 料金 FAQ お問い合わせ 会社概要や採用情報、ブログなどは下層に配置しても問題ありません。 サービスが多い場合は整理する サービスが多い場合は、そのまま並べないようにします。 目的別で整理する例 集客したい方へ 採用したい方へ ブランディングを強化したい方へ 対象別で整理する例 新規ホームページ制作 サイトリニューアル 運用改善サポート ユーザーが選びやすい軸で整理することが重要です。 並び順の正解｜ユーザーが探す順番で配置する 最初に置くべきはサービス ユーザーはまず、 「何をしてくれる会社なのか」 を確認します。 サービスが見つけにくいサイトは、それだけで不利になります。 次に置くべきは信頼情報 比較検討で重要なのは次の3つです。 事例 料金 FAQ これらは迷わず見つけられる位置に配置しましょう。 会社概要は後ろでも問題ない 会社概要は重要ですが、多くのユーザーは最後に確認します。 そのため、 サービス → 事例 → 料金 → FAQ → 会社概要 という流れが自然です。 ※採用サイトの場合は例外もあります。 ラベル（メニュー名）の付け方 抽象語は避ける 次のような表現は、何があるのか分かりにくくなります。 NG例 事業内容 特徴 こだわり 改善例 サービス 選ばれる理由 事例 ユーザーが見ただけで内容を想像できる言葉を選びましょう。 ユーザーが使う言葉に寄せる 社内用語ではなく、ユーザーが検索・利用する言葉を使います。 例えば、 制作実績 → 事例 サポート内容 → サービス のように、より分かりやすい表現へ置き換えます。 粒度を揃える メニュー内の表現は統一感が重要です。 良い例 サービス 事例 料金 FAQ 会社概要 悪い例 サービス 実績紹介 お問い合わせする 会社情報 名詞と動詞が混在すると読みにくくなります。 スマホのハンバーガーメニュー設計 1画面で全体像が見えるようにする メニューを開いた瞬間に主要導線が見える構成が理想です。 階層が深くなるほど離脱率は上がります。 タップしやすさを優先する スマホは指で操作するため、押しやすさが重要です。 確認したいポイント 文字が小さすぎない 項目同士が近すぎない 行間や余白が十分ある 問い合わせ導線を常に見せる スマホでは「今すぐ問い合わせたい」が起こりやすくなります。 そのため、 電話ボタン 問い合わせボタン LINE相談ボタン などを適切に配置しましょう。 よくあるNG例7つ 項目が10個以上ある 選択肢が多すぎて迷います。 抽象的なラベルばかり 内容が想像できずクリックされません。 サービスが整理されていない 何を提供している会社か分かりません。 会社情報が先頭にある サービスより先に会社概要を見せても成果につながりにくくなります。 CTAがない 次に何をすれば良いか分かりません。 スマホで押しづらい 小さすぎるボタンや狭い余白は離脱の原因になります。 重要ページへたどり着きにくい 料金・事例・FAQが見つけにくい状態は機会損失につながります。 改善の進め方｜最短で成果につなげる手順 ユーザーの目的を整理する まずはユーザーが何を探しているか整理します。 項目を5〜7個に絞る 不要な項目は統合します。 ラベルを見直す 抽象語をやめて具体的な表現へ変更します。 並び順を最適化する 次の順番を基本に考えます。 サービス → 信頼 → 不安解消 → 行動 スマホを最優先で確認する 余白・階層・CTA配置を見直します。 このまま使えるグロナビ構成テンプレ 制作会社・運用支援会社向け サービス 事例 料金 よくある質問 会社概要 お問い合わせ ※お問い合わせはボタン化がおすすめです。 サービスが多い場合 集客したい方へ 採用したい方へ ブランドを整えたい方へ 事例 料金 お問い合わせ 目的別に整理すると迷いにくくなります。 まとめ：グロナビは“会社案内”ではなく“導線設計” ヘッダーやグローバルナビゲーションは、単なるページ一覧ではありません。 成果につながるグロナビは、 項目数を絞る 分かりやすい言葉を使う ユーザーの行動順に並べる CTAを見える位置に置く という基本を押さえています。 サービス → 信頼 → 不安解消 → 行動 この流れで設計するだけでも、回遊率や問い合わせ率は改善しやすくなります。 無料相談 Refuでは、現状サイトの導線分析を行い、グロナビの整理・項目統合・ラベル改善・スマホ最適化まで含めて改善提案を行っています。 「メニューが増えすぎて整理できない」「ユーザーが迷っている気がする」など、お気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら スマホで差がつくUI改善｜押しやすさ・読みやすさのチェックポイント CTA（問い合わせ・資料請求）を押したくなるデザイン改善チェックリスト “なんとなく見づらい”を解決する情報設計｜見出し・箇条書き・図解の使い分け トップページで信頼を作る「会社の見せ方」テンプレ｜最短で整う構成例 信頼感を底上げする「余白・整列・視線誘導」レイアウト設計の基本
2026/06/17
デザイン・ブランディングスマホで差がつくUI改善｜押しやすさ・読みやすさのチェックポイント
スマホのUIが弱いと、内容が良くても成果が出ない 中小企業サイトのアクセスは、業種によって差はあるものの、スマホからの閲覧が大半を占めるケースが増えています。 にもかかわらず、スマホでサイトを見ると、 文字が小さくて読みにくい ボタンが押しづらい 問い合わせ導線が見つからない フォーム入力が面倒 といった状態になっていることは少なくありません。 どれだけ良いサービスや魅力的な実績があっても、スマホでストレスを感じればユーザーは離脱します。 スマホ改善はデザインの微調整ではなく、ユーザー体験（UI/UX）の改善です。 まず結論：スマホ改善は「押せる・読める・迷わない」の順で考える スマホで離脱が発生する原因は、ほぼ次の3つに集約されます。 押せない（タップしづらい） 読めない（文字が小さい・詰まっている） 迷う（次に何をすればいいか分からない） 改善も同じ順番で進めるのがおすすめです。 特に、 CTA（お問い合わせ導線） フォーム は成果に直結するため、最優先で見直したいポイントです。 スマホで起きる離脱の正体 押せない（タップしづらい） スマホはマウスではなく指で操作します。 そのため、 ボタンが小さい ボタン同士が近い テキストリンクだけで押しづらい といった状態は大きなストレスになります。 読めない（文字が小さい） スマホで本文が小さすぎると、読む前に離脱されます。 特に、 文字サイズが小さい 行間が狭い 文章が長すぎる 場合は注意が必要です。 迷う（導線が見えない） スマホは画面が小さいため、PC以上に導線設計が重要です。 次に何を読めばいいか分からない 問い合わせ先が見つからない 料金ページにたどり着けない といった状態になると成果につながりません。 チェックポイント① 押しやすさ（タップUI） ボタンのサイズと余白 まず確認したいのがボタンです。 チェック項目 ボタンが十分な大きさになっている ボタン同士が近すぎない テキストリンクだけに頼っていない 指で押しやすい位置に配置されている 重要な導線は、できるだけボタン形式にするのがおすすめです。 CTAは「納得した瞬間」に置く お問い合わせボタンがページ最下部だけでは不十分です。 おすすめの配置 ファーストビュー直下 強み紹介の後 料金説明の後 事例紹介の後 FAQの後 ページ最下部 ユーザーが「相談してみようかな」と思った瞬間に押せる状態が理想です。 下部固定CTAを活用する スマホでは下部固定CTAが有効です。 ただし、次の条件を満たす必要があります。 画面を占有しすぎない 行動が明確 ボタン数は1〜2個に絞る スクロール時の邪魔にならない 例えば、 無料相談 電話する 程度に絞ると迷いが減ります。 フォーム入力の負担を減らす フォームは離脱ポイントになりやすい場所です。 改善例 必須項目を減らす プルダウンを活用する 電話番号は電話キーボード表示 メールアドレスはメール入力用キーボード表示 入力補助を活用する 個人情報は必要最小限にし、入力負担を減らしましょう。 チェックポイント② 読みやすさ（可読性） 本文の文字サイズ スマホで成果が出ないサイトの多くは、文字が小さすぎます。 デザインのために小さくするよりも、 「読めること」 を優先する方が成果につながります。 行間・段落を整える スマホでは文章が詰まっているだけで読む気が失われます。 改善ポイント 1段落を短くする 行間を広げる 箇条書きを活用する 余白を十分に確保する 見出しを強化する スマホユーザーは拾い読みが基本です。 理想は、 見出しだけ読んでも内容が8割理解できる状態 です。 例 × 特徴 ○ 選ばれる3つの理由 × 料金 ○ ホームページ制作の料金目安 画像と文字のコントラスト ファーストビューでよく起きる問題です。 背景画像の上に文字を置く場合は、 読める色になっているか 背景に埋もれていないか スマホサイズでも視認できるか を確認しましょう。 チェックポイント③ 迷わない導線設計 メニューを整理する ハンバーガーメニューに項目を詰め込みすぎると機能しません。 おすすめは、 サービス 実績 料金 FAQ お問い合わせ など主要導線に絞ることです。 スクロール後も行動が見える状態にする スマホはスクロール量が増えるため、行動導線が見えなくなりがちです。 途中に配置したいもの 関連記事 事例 料金ページ CTA 内部リンクで次のページを案内する リンクを並べるだけでは回遊しません。 例えば、 「料金の目安はこちら」 「同じ課題を解決した事例を見る」 「よくある質問を確認する」 のように、次の行動を提案することが重要です。 重要情報への近道を作る 比較検討中のユーザーが探すのは、 実績 料金 FAQ です。 これらへどこからでも移動できる導線を用意しておくと成果につながりやすくなります。 改善の優先順位｜最短で成果を出す順番 ① CTA・フォーム 最優先です。 CTA位置 CTA文言 フォーム項目数 を見直します。 ② 可読性 次に、 文字サイズ 行間 見出し を改善します。 ③ 回遊・ナビゲーション 最後に、 メニュー整理 内部リンク改善 下部固定CTA最適化 を行います。 このまま使えるスマホUIチェックリスト CTAがファーストビューと本文中にある ボタンが押しやすいサイズになっている ボタン同士が近すぎない 下部固定CTAが邪魔になっていない フォームが長すぎない 必須項目が多すぎない 本文が小さすぎない 行間が詰まっていない 見出しだけで内容が理解できる 関連記事やCTAが途中にもある 実績・料金・FAQへ迷わず移動できる まとめ：スマホ最適化は「体験改善」が本質 スマホで成果が出ない原因は、見た目の問題ではなく、 押せない 読めない 迷う という体験上のストレスが積み重なっていることがほとんどです。 まずは、 CTA・フォーム → 可読性 → 導線 の順で改善することで、最短距離で成果につながりやすくなります。 スマホユーザーがストレスなく行動できる状態を作ることが、問い合わせや予約の増加につながります。 無料相談 Refuでは、スマホ画面を前提に「どこで離脱しているのか」を分析し、CTA・フォーム・導線・可読性まで含めた改善提案を行っています。 「スマホからの問い合わせが少ない」「アクセスはあるのに反応が弱い」など、お困りの方はお気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら CTA（問い合わせ・資料請求）を押したくなるデザイン改善チェックリスト ファーストビューで離脱させない｜コピー×デザインの最適バランス “なんとなく見づらい”を解決する情報設計｜見出し・箇条書き・図解の使い分け 料金ページのデザインで失注を防ぐ｜見せ方・不安解消・注意点まとめ 信頼感を底上げする「余白・整列・視線誘導」レイアウト設計の基本
2026/06/10
デザイン・ブランディング料金ページのデザインで失注を防ぐ｜見せ方・不安解消・注意点まとめ
料金ページで失注するのは「高いから」ではなく“不安が残るから” 料金ページは「値段を載せる場所」と思われがちですが、実務ではもっと重要です。 ユーザーが本当に見ているのは、“金額”そのものより不安が消えるかどうか。 何が含まれるのか分からない 追加費用が怖い 自社は対象なのか判断できない 問い合わせたら営業が強そう そもそも比較できない この状態だと、価格が妥当でも「やめておこう」になります。 つまり料金ページは、透明性＝信頼を作るページです。 まず結論：料金ページは「目安→内訳→条件→次の一手」で設計すると強い 受注につながる料金ページは、だいたいこの順番です。 目安（レンジ）：結局いくらかのイメージ 内訳：何に費用がかかるか 条件：追加費用が出るケース・対象範囲 次の一手：見積・相談へ進めるCTA 「細かい説明は相談で」より、先に言うほど信頼されます。 料金ページで必ず出る不安5つ（ここを潰す） 結局いくらかかるの？（総額が見えない） 最初に必要なのは、厳密な金額ではなくレンジです。 「◯◯万円〜」だけでなく、できれば どんなケースが下限か どんなケースが上限か もセットで示すと親切です。 何が含まれているの？（範囲が不明） 同じ“ホームページ制作”でも、 企画が含まれる？ 原稿は誰が？ 写真撮影は？ SEOは？ など範囲が違います。 含まれる範囲が明確だと比較されやすくなります。 追加費用は出る？（後出しが怖い） 追加費用が怖い人は多いです。 ここを濁すと、安く見えても逆に不信感が出ます。 出る可能性があるなら先に書く方が信頼されます。 うちは対象？（適用条件が分からない） 「このプランは誰向け？」が分からないと判断できません。 対象（業種・規模・目的）を短く添えると迷いが減ります。 相談したら営業されそう（心理的ハードル） 料金ページに来る人は、かなり前向きです。 だからこそ最後に 相談は無料か どんな流れか 強引な営業はしないか が書かれていると、一気に押されます。 受注につながる料金ページの構成テンプレ（王道7ブロック） まず結論：料金の目安（レンジ）を冒頭に出す 冒頭の見せ方がすべてです。 最初に「だいたいこれくらい」が見えると、読み進められます。 プラン表：比較できる形にする（項目は絞る） プラン表は、列や項目を増やしすぎると読めません。 比較軸を3〜6項目に絞ると見やすいです。 例： ページ数目安 原稿・写真の扱い デザイン範囲 CMS有無 公開後サポート 内訳：何にコストがかかるかを見える化 「高い」と言われる原因は、納得材料不足です。 内訳（工数）を見せると、価格に意味が出ます。 追加費用が出るケース：先に言うほど信頼される 例： ページ追加 撮影追加 機能追加（予約・会員など） 原稿制作の範囲外対応 ※ここは“誤認防止”のためにも重要です。 事例：料金と成果の関係を示す 可能なら、 目的 内容 料金レンジ 反応（定量／定性） を簡単に載せると強いです。 ※成果は言い切りすぎず、期間・条件を明記（誇大表現の回避） よくある質問：最後の不安を消す 料金ページのFAQは強いです。 特に効く質問： 追加費用が出るのはどんな時？ 原稿はどこまでやってくれる？ 修正回数は？ 納期は？ 支払い方法は？ CTA：見積・相談への“押す理由”を添える 「お問い合わせ」だけだと弱いので、 押したら何が分かるのかを添えます。 例： 30分で概算と進め方が分かる無料相談 要件が固まっていなくてもOK（課題整理から） 営業目的の連絡はしません（事実に合わせて） デザインのコツ｜料金ページで効く見せ方（UI） 数字の見せ方：目立たせすぎず、必ず読める 煽るように大きくしすぎると安っぽく見えます。 ただし小さすぎると読めません。 「読みやすいサイズ＋余白」で自然に目に入るのが正解です。 比較表の作法：列を増やしすぎない 列が増えるほど、スマホで破綻します。 プランは多くても3つまでが無難です。 注意書きの作法：小さすぎない／隠さない 注意書きが小さいと誤認を招き、信頼も落ちます。 見える位置に、読みやすく出しましょう。 スマホ最適：横スクロール地獄を回避する スマホでは 表を縦に並べる 重要項目だけ抜き出す など“スマホ用の見せ方”が必須です。 よくあるNG例7つ（失注する料金ページ） 「要見積り」だけで終わっている 安さアピールだけで根拠がない 範囲が不明で比較できない 追加費用の説明がなく不信感が出る 注意書きが小さすぎて誤認を招く CTAが弱く、次に何をすればいいか分からない 表現が強すぎて誤認リスク（景表法・誇大） 特に「最安」「必ず」「No.1」などは根拠がないと危険です。 安全に強くするなら、条件・範囲・期間を明記しましょう。 このまま使える料金ページ文例（コピペ用） 【料金の目安】 ライト：◯◯万円〜（対象：＿＿＿＿） スタンダード：◯◯〜◯◯万円（対象：＿＿＿＿） カスタム：要見積り（対象：＿＿＿＿） 【含まれる内容（例）】 企画・構成：＿＿＿＿ デザイン：＿＿＿＿ CMS：＿＿＿＿ 公開後サポート：＿＿＿＿ 【追加費用が発生する主なケース】 ＿＿＿＿ ＿＿＿＿ ＿＿＿＿ 【まずは無料でご相談ください】 30分で、概算と進め方が分かります 要件が固まっていなくてもOKです 👉 無料相談する（リンク挿入） ※「営業目的の連絡はしません」等は、運用実態に合わせて記載してください（誤認防止） まとめ：料金ページは“透明性”がそのまま受注率になる 料金ページで失注するのは、価格の問題というより不安が残る設計が原因です。 目安→内訳→条件→FAQ→CTAの順で透明性を出すと、信頼が積み上がり、相談につながります。 “見せない”より“先に言う”方が、結果的に選ばれやすくなります。 無料相談 Refuでは、料金ページを「不安の分解（総額・範囲・追加費用・対象・営業不安）」から設計し、見せ方（表・文章・導線）まで整える支援を行っています。 「料金を出したいが怖い」「要見積りでも納得感を出したい」など、まずは気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら CTA（問い合わせ・資料請求）を押したくなるデザイン改善チェックリスト ファーストビューで離脱させない｜コピー×デザインの最適バランス 導入事例ページの“見せ方”で受注率が変わる｜構成とデザインの型 “なんとなく見づらい”を解決する情報設計｜見出し・箇条書き・図解の使い分け 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方
2026/06/03
デザイン・ブランディングトップページで信頼を作る「会社の見せ方」テンプレ｜最短で整う構成例
トップページは“名刺”ではなく「比較検討の入口」 トップページを「会社の顔」と捉えるのは正しいのですが、実務上はそれだけでは足りません。ユーザーはトップページを見た瞬間に、こう判断しています。 この会社は何をしてくれる？（提供価値） 自分に関係ある？（対象・用途） 信用できる？（根拠） 次に何をすればいい？（導線） つまりトップページは“名刺”ではなく、比較検討の入口です。かっこよさより、信頼と理解を最短で作る構成が成果を左右します。 まず結論：信頼は「誰向けか／何ができるか／根拠」の3点で作れる トップページで最低限伝えるべきことは、実はシンプルです。 誰向けか（業種・規模・課題など） 何ができるか（提供価値・ベネフィット） 根拠（実績・事例・数字・お客様の声） この3つが揃うと、ユーザーは安心して下層ページに進みます。逆に、ここが欠けると離脱しやすくなります。 最短で整うトップページ構成テンプレ（王道8ブロック） ここからは、中小企業サイトで“整いやすく、成果につながりやすい”王道テンプレです。全部入れなくてもOKですが、優先度順に並べています。 ファーストビュー：誰向け／提供価値／CTA FVは3秒でこの3点が伝われば合格です。 誰向け：中小企業の◯◯担当者向け 提供価値：◯◯を解決して◯◯ができる CTA：無料相談／資料請求／お問い合わせ ポイント：画像より先に「何が得られるか」を言い切る 3つの強み：一言＋根拠で“選ぶ理由”を作る 強みは“3つ”が最も伝わりやすいです。さらに、一言＋根拠（数字・事例）をセットにすると信頼が上がります。 例： 迅速対応：最短◯営業日で初回提案 実務設計：導線・CV設計まで一貫対応 運用支援：公開後も改善サイクルを伴走 ※断定や優良誤認につながる表現は、根拠がない場合は避けましょう（景品表示法リスク） サービス一覧：迷わない導線（対象別・目的別） サービスが複数あるなら、ユーザーが迷います。おすすめは対象別／目的別のどちらかで整理すること。 目的別：集客／採用／ブランディング 対象別：初めて制作／リニューアル／運用改善 “選び方”を提示すると、下層ページへの遷移が増えます。 実績・事例：安心の根拠（数字／業種／成果） トップで見せるべきは「作品集」ではなく安心材料です。 実績件数（可能なら） 対応業種 成果（問い合わせ増、応募増など） 事例へのリンク 成果表現は、期間・条件を明記すると安全で強いです。 お客様の声・評価：第三者視点で不安を消す 第三者の声は、信頼形成に強い要素です。可能なら「嬉しいコメント」よりも、不安が消えた内容を選びます。 例： 進め方が分かりやすかった 料金の説明が明確だった 公開後の改善まで対応してくれた 料金の目安：最初の不安を先回りする 料金がまったく見えないと、最後まで進まずに離脱します。トップでは、詳細でなくてOKなので 料金の目安（レンジ） 何が含まれるか 見積の考え方 を示すと安心されます。 ご相談の流れ：次の行動のハードルを下げる 「問い合わせたら何が起きるか分からない」が不安の正体です。流れを見せると、問い合わせの心理障壁が下がります。 例： 無料相談（課題整理） ご提案・概算 ご契約・制作開始 会社情報・代表メッセージ：最後の信頼を固める 最後に「顔」を出すと、安心が固まります。トップでは長文より、短く“人となり”が見える情報が効きます。 どんな想いでやっているか（1〜2行） どんな会社を支援してきたか 地域・実績・対応体制 よくある失敗パターン7つ（信頼を落とすトップページ） 何の会社か分からない（抽象コピー） 写真がフリー素材感で嘘っぽい 強みが“当たり前”で差別化できない 事例が少なく、根拠が弱い 料金が不明で不安が残る CTAが弱い／押す理由がない 情報が詰まりすぎて読めない（余白不足） トップで大事なのは、情報の量より順番です。 制作の流れ｜トップページから作るべき情報の集め方 トップページは最後に作るより、先に“材料”を集めると早いです。 理想顧客（誰向け）を1行で 提供価値（何ができる）を1行で 強み3つ（根拠とセット） 実績・事例（出せる範囲で） 料金の目安（レンジでOK） 相談の流れ（3ステップでOK） これが揃うと、構成は自然に決まります。 このまま使えるテンプレ文（コピペ用） 【FV】 ◯◯でお悩みの◯◯業（中小企業）へ。◯◯を整え、◯◯につながるサイト設計を支援します。👉 無料相談する／事例を見る 【強み3つ】 強み①：＿＿＿＿（根拠：＿＿＿＿） 強み②：＿＿＿＿（根拠：＿＿＿＿） 強み③：＿＿＿＿（根拠：＿＿＿＿） 【実績】 対応業種：＿＿＿＿ 実績：＿＿＿＿ 事例：＿＿＿＿ 【料金目安】 目安：＿＿＿＿ 含まれる範囲：＿＿＿＿ 【流れ】 ①＿＿＿＿ → ②＿＿＿＿ → ③＿＿＿＿ まとめ：トップページは“信頼の順番”を設計すれば成果が出る トップページは、見た目以上に信頼と理解を作る順番が重要です。FVで「誰向け／何ができる／CTA」を提示し、強み・実績・料金・流れで不安を消していけば、自然と下層ページへ進み、問い合わせにつながります。 無料相談 Refuでは、トップページを「誰向け／提供価値／根拠」の3点から整理し、最短で成果につながる構成に落とし込む支援を行っています。「トップが弱い気がする」「情報が多いのに伝わらない」など、まずは気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら ファーストビューで離脱させない｜コピー×デザインの最適バランス 導入事例ページの“見せ方”で受注率が変わる｜構成とデザインの型 CTA（問い合わせ・資料請求）を押したくなるデザイン改善チェックリスト ブランドを言語化する「3語ルール」｜デザインがブレない軸の作り方 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方
2026/05/27
デザイン・ブランディング“なんとなく見づらい”を解決する情報設計｜見出し・箇条書き・図解の使い分け
見づらいサイトは“デザイン”ではなく「情報の順番と塊」が崩れている 「なんとなく見づらい」「読みにくい」と言われるサイトは、フォントや色より先に、だいたいここが崩れています。 情報の順番がバラバラ（結論が遅い／話が飛ぶ） 情報の塊が大きい（段落が切れていない／長文が続く） 拾い読みできない（見出しが弱い／要点が見えない） つまり、問題は“見た目の装飾”というより、情報の出し方（情報設計）です。情報設計が整うと、同じデザインでも「急に読みやすく」なります。 まず結論：情報設計は「結論→理由→具体→次の行動」で整えると読まれる 読まれるページは、だいたいこの順番でできています。 結論（何が言いたいか） 理由（なぜそう言えるか） 具体（例・手順・根拠） 次の行動（CTA／内部リンク） この順番を守るだけで、ユーザーのストレスが減り、理解が早くなります。特にスマホでは、結論が遅い＝戻るなので効果が大きいです。 “なんとなく見づらい”の正体｜よくある原因6つ 見出しが弱く、どこから読めばいいか分からない 見出しが「概要」「詳細」など抽象だと、拾い読みできません。見出しは内容そのものを言い切ると強くなります。 例： ×「特徴」 → ○「選ばれる理由は“3つの強み”」 ×「サービス内容」 → ○「できること／できないこと」 文章が長く、情報の塊が大きい（段落が切れていない） 1段落が長いほど、読む気が落ちます。Webは“読み物”ではなく“探し物”なので、短い段落＋小見出しが基本です。 箇条書きにすべき所が文章のまま 比較・列挙・条件が文章のままだと、脳が疲れます。次の内容は、文章にしない方が伝わります。 特徴の並列 メリット／デメリット 必要なもの（持ち物・準備） 条件（対象・料金・対応範囲） 手順（ステップ） 図解にすべき所が文章のまま（関係性が伝わらない） 文章が長いのに伝わらない時は、関係性が原因です。 流れ（A→B→C） 構造（全体→内訳） 比較（AとBの違い） 導線（入口→次のページ→問い合わせ） これらは文章より、図解・表・カードの方が一瞬で伝わります。 重要度の強弱がなく、全部同じに見える 見出しも本文も同じ見た目だと、何が重要かわかりません。強弱は次の順で作ると安全です。 見出し（階層）で強弱 箇条書きで要点化 太字は“要点のみ”（多用すると逆効果） 次に読むべきページ（導線）がない 「読んだのに、次に何をすればいいか分からない」と離脱します。各ページに、必ず “次の1ページ” を置きましょう。 例： サービスページ → 実績／料金／FAQ 記事 → 関連記事／サービス紹介 料金 → 見積／無料相談 使い分けのルール｜見出し・箇条書き・図解はこう決める 見出し：ページの“地図”を作る（拾い読み前提） 見出しは「読む順番」を作る役割です。目安として、ページをスクロールしたときに見出しだけ読んで内容が8割わかるくらいが理想です。 箇条書き：比較・列挙・手順は文章にしない 次の文章が出てきたら、箇条書きに変換します。 「〜は、AとBとCです」 「〜には、①②③があります」 「〜するには、まず…次に…」 箇条書きは、理解を早める“UI”です。 図解：関係性・流れ・構造は“見せた方が早い” 図解にする判断基準はシンプルです。 文章で説明すると長くなる 関係性が複雑 比較や流れがある → この場合は図解・表が勝ちます。 文章：背景・補足・ニュアンスは文章が向く 文章が向くのは、次のような“温度”のある情報です。 ストーリー 想い こだわり 注意事項の補足（条件など） ただし、文章にするなら 短く区切るが前提です。 ページ別テンプレ｜中小企業サイトで頻出の型 サービスページの型（おすすめ） 誰向けか（対象） 何が得られるか（結論） 強み（箇条書き＋アイコン） 流れ（ステップ図） 実績（事例カード） 料金目安／FAQ（不安解消） CTA 料金ページの型（おすすめ） まず結論（料金の目安・プラン） 内訳（表） 条件（箇条書き） よくある質問（不安解消） CTA ※誤認を避けるため、条件・範囲・追加費用の可能性は明記（景品表示法の観点でも安全） 実績・事例ページの型（おすすめ） 成果（サマリー） 課題（Before） 施策（What/How） 成果（After） お客様の声 導線（類似事例／CTA） 改善の進め方｜最短で見づらさを直す5ステップ ページの目的（1行）を決める（何をしてほしいページか） 結論を冒頭に置く（3秒で分かる） 見出しを“言い切り型”に直す（地図を作る） 箇条書き化・図解化で塊を分解（読む負担を減らす） 次の導線（内部リンク／CTA）を置く（離脱を防ぐ） このまま使えるチェックリスト 見出しだけで内容がだいたい分かる 結論が冒頭にある 1段落が長すぎない 比較・列挙・条件は箇条書きになっている 流れ・構造・比較は表や図解で見せている 太字は要点だけ（多用していない） 各ページに“次の1ページ”がある（導線がある） まとめ：情報設計を直すと、デザインを変えなくても読まれる “なんとなく見づらい”は、デザイン以前に情報の順番と塊の問題であることがほとんどです。見出し・箇条書き・図解を正しく使い分けて、結論→理由→具体→行動の順で整えると、同じデザインでも「伝わるページ」に変わります。 無料相談 Refuでは、既存ページを見ながら「どこが見づらさの原因か」を情報設計（見出し・構造・導線）で分解し、最短で直す優先順位まで整理する支援を行っています。「内容は良いのに読まれない」「ページが長いのに伝わらない」など、まずは気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら 信頼感を底上げする「余白・整列・視線誘導」レイアウト設計の基本 ファーストビューで離脱させない｜コピー×デザインの最適バランス CTA（問い合わせ・資料請求）を押したくなるデザイン改善チェックリスト 導入事例ページの“見せ方”で受注率が変わる｜構成とデザインの型 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方
2026/05/20
デザイン・ブランディング配色に迷わない｜メイン・サブ・アクセントの黄金比と運用ルール
配色はセンスではなく「配分」と「ルール」で決まる 配色で悩むとき、多くの人は「いい色を選ばなきゃ」と考えがちです。でも実務で起きている失敗は、色選びよりも “使い方がバラバラ” です。 ページごとに色の量が違う ボタン色が毎回変わる 背景色が増えて統一感が崩れる 更新のたびに色が足される つまり、配色はセンスではなく 「配分」と「運用ルール」で決まります。ここを決めると、サイトは一気に“ちゃんとして”見えます。 まず結論：色は“3色固定”＋“使う場所固定”で迷わなくなる 結論はこれです。 色は基本3色に固定する（メイン／サブ／アクセント） どこに何色を使うかを固定する（用途表を作る） この2つだけで、配色の迷いはほぼ消えます。逆に言うと、色を増やすほど運用で崩れます。 配色の基本｜メイン・サブ・アクセントとは？ メインカラー：ブランドの軸（使いどころが重要） メインカラーは「たくさん使う色」ではありません。“ブランドらしさを感じさせたい場所”に使う色です。 おすすめの使いどころ 見出しの一部（強調） セクションのタイトル周り 重要な図やラベル 注意：メインを面積で使いすぎると、くどくなりやすいです。 サブカラー：背景と区切り（世界観を整える） サブカラーは主張する色ではなく、整える色です。背景やカードの背景、区切りで使うと統一感が出ます。 おすすめの使いどころ 薄い背景（セクション区切り） カード背景 表の行背景 アクセントカラー：CTA専用（乱用禁止） アクセントは、“押してほしい・見てほしい”にだけ使う色です。特に中小企業サイトは、アクセントの運用が最重要です。 おすすめの使いどころ CTAボタン 重要な注意喚起（必要な場合のみ） 強調アイコン（限定的） 鉄則：アクセント色は増やさない。増えた瞬間、サイトはチープに見えやすくなります。 黄金比（配分）の考え方｜60-30-10を“Web向け”に調整する 基本は「メイン少なめ」が上品に見える よく言われる配色比率に 60-30-10（ベース-サブ-アクセント）がありますが、Webサイトはテキスト量が多く、ベースが“白”になりやすいので、考え方をこう置くと安定します。 ベース（白・薄い背景）を最も多く サブで区切りとリズム メインは“要所だけ” アクセントは“点”で効かせる 背景（サブ）で整えて、アクセントは“点”で効かせる 配色で失敗する人ほど、アクセントを面で使います。でもアクセントは 点（ボタン・小ラベル）で使う方が強いです。 例：コーポレートサイトでのおすすめ配分 実務的には、このイメージで十分です。 ベース（白〜薄いグレー）：70〜85% サブ（薄い色）：10〜25% メイン（見出し・要所）：3〜8% アクセント（CTA）：1〜3% ※数値はあくまで感覚の目安ですが、「アクセントは最小」が鉄則です。 迷わない運用ルール｜“どこに何色を使うか”を固定する ここからが一番大事です。色を決めても、運用で崩れる原因は「使いどころ」が曖昧なこと。だから 用途表 を作ります。 文字色（黒ではなく“濃いグレー”が基本） 真っ黒はコントラストが強すぎて、疲れやすいことがあります。本文は“濃いグレー”寄りにして、見出しで強弱を作ると読みやすくなります。 背景色（白＋薄いサブ色）で余白を活かす 背景に色を入れるなら、薄いサブ色で“区切り”として使うのが安全です。ベタ塗りの強い色を背景に使うと、途端に安っぽく見えがちです。 見出し・ライン・アイコンの色ルール 見出し：基本は文字色、強調だけメイン 区切り線：薄いグレー（主張させない） アイコン：基本1色（文字色 or メイン） 線やアイコンに色が増えるほど、雑多に見えます。 CTA（ボタン）の色ルール：原則アクセント1色 CTAは運用で増殖しやすいので、最初に固定します。 主要CTA：アクセント色で固定（例：無料相談） 補助CTA：枠線 or 薄い背景（例：事例を見る） ボタンを増やしても、種類は2種類までに抑えると崩れません。 写真と色を合わせる（色味がズレるとチープになる） 配色だけ整えても、写真の色味がバラバラだと世界観が崩れます。 暖色寄りの写真なら、色も暖色寄り 寒色寄りの写真なら、色も寒色寄り “写真の温度感”と配色を合わせるだけで質感が上がります。 よくある失敗パターン7つ（配色で損する典型） 色数が多くて統一感がない アクセント色を増やして“うるさい” コントラスト不足で読めない（薄い文字×薄い背景など） 背景に色を入れすぎて安っぽい 影・枠線が濃くてチープ 既製テーマのデフォルト色のまま 更新担当が勝手に色を足して崩れる とくに更新で色が増える問題は、用途表でほぼ防げます。 このまま使える配色テンプレ（3色＋用途表） 【配色（3色）】 メイン：＿＿＿＿（用途：見出し強調／ラベル） サブ：＿＿＿＿（用途：背景区切り／カード背景） アクセント：＿＿＿＿（用途：主要CTAのみ） 【用途表】 本文文字：＿＿＿＿（例：濃いグレー） 見出し文字：＿＿＿＿（例：本文文字＋一部メイン） 区切り線：＿＿＿＿（例：薄いグレー） 主要CTAボタン：＿＿＿＿（アクセント固定） 補助CTAボタン：＿＿＿＿（枠線／薄背景） アイコン：＿＿＿＿（基本1色） 注意喚起：＿＿＿＿（原則は使わない／使う場合の条件：＿＿＿＿） まとめ：配色は“選ぶ”より“固定する”と強くなる 配色の悩みは「いい色探し」ではなく、ルール不在が原因です。 メイン・サブ・アクセントの3色を固定し、用途表で「どこに何色」を決めるだけで、統一感と質感が上がり、更新しても世界観が崩れません。 無料相談 Refuでは、現状サイトを見ながら「配色の崩れポイント」を整理し、3色設計＋運用ルール（用途表）まで落とし込む支援を行っています。「更新で色が増えてしまう」「CTA色がバラバラ」など、まずは気軽にご相談ください。 ▶ 無料相談はこちらから その他おすすめ記事はこちら ブランドカラーの心理的効果とは？色で印象を操るデザイン戦略｜企業の魅力を最大化する色づかい 更新しても世界観が崩れない｜デザインガイドライン（簡易版）の作り方 “安っぽく見える”を脱却する質感づくり｜写真・色・文字の整え方 信頼感を底上げする「余白・整列・視線誘導」レイアウト設計の基本 ブランドを言語化する「3語ルール」｜デザインがブレない軸の作り方
