カード型レイアウトは、情報を四角い枠にまとめて並べる形式です。整理された印象になり、画面幅に応じて折り返せるため、多くのサイトで使われています。

ただし並べたものはすべて同じ重みに見えます。これは利点でもあり欠点でもあります。並列の選択肢を見せるには適していますが、優先順位を伝えたい場面では機能しません。

この記事では、向く場面と向かない場面、1枚に入れる情報の決め方、並べ方の判断、そして確認すべき箇所を整理します。

並べたものは同じ重みに見える

同じ形の枠に入れると、内容の重要度に関わらず対等に見えます。

主力サービスとそれ以外を同じ形で並べると、主力が伝わりません。差をつけたい場合は、大きさを変えるか、カード以外の形式にしてください。

差のつけ方はデザインのジャンプ率とは｜差をつける幅で印象と伝わり方が変わるを参照してください。

1枚に入れる情報は最小限にする

カードは面積が限られるため、入れる情報を絞る必要があります。

1. そのカードを選ぶかどうかの判断に必要な情報を挙げる
2. その中から、比較の軸になるものだけを残す
3. 残りは遷移先に置く
4. 全カードで同じ項目を、同じ順序で並べる
5. 項目が欠けるカードがある場合、表記を統一する

カードごとに項目が違うと、比較ができなくなります。価格が入っているものと入っていないものが混在すると、入っていないほうが避けられます。項目を揃えるか、揃えられないなら別の形式を検討してください。

枚数が増えると比較されなくなる

並べる数には実用的な上限があります。

枚数が多い場合、並べること自体より、絞り込む手段のほうが重要になります。一覧として大量に並べるなら、条件で絞れる仕組みを先に用意してください。

情報の整理は情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。

画面が狭いと縦に長く続く

画面幅に応じて折り返せる点が利点ですが、狭い画面では1列になり、縦に長く続きます。

狭い画面では、比較という利点が失われます。前のカードの内容を覚えていないと比べられないためです。スマートフォンでの利用が中心なら、カードを縦に並べるより、表形式や絞り込みのほうが機能することがあります。

狭い画面での設計はモバイルファーストデザインとは？重要視される理由と設計のコツを参照してください。

カードとして押せることを伝える

カード全体が押せるのか、中のリンクだけが押せるのかが分からない状態は避けてください。

• カード全体を押せるなら、カーソルを乗せたときに変化を付ける
• 中に複数のリンクを置くと、どこを押すか迷わせる
• 押せる範囲を、見た目の枠と一致させる
• スマートフォンでは、隣のカードとの間隔を確保する

カード内にボタンとリンクを複数置くと、選択肢が増えて判断が遅れます。主要な行動を1つに絞ってください。誤タップの防ぎ方はスマホで押しやすいボタンの設計｜大きさより間隔が誤タップを決めるを参照してください。

使わない選択肢もある

カード以外の形式が適している場面があります。目的から選んでください。

細かい条件を比較させたいなら、表のほうが正確に伝わります。カードは項目が横に散るため、同じ項目を見比べるのに視線が動きます。

確認すべき箇所

実装後、実際の内容で確認してください。

1. 最も長いタイトルで、カードの高さが崩れないか
2. 画像がないカードがある場合、空白が不自然にならないか
3. 項目が欠けるカードで、レイアウトがずれないか
4. 狭い画面で、1枚が縦に長くなりすぎないか
5. 枚数が少ないとき、右側が不自然に空かないか

見本の短いタイトルで作ると、実際の内容で高さが揃わなくなります。最も長いものと最も短いもので確認してください。

他の要素との順序

デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。

よくある失敗

優先順位があるものを同じ形で並べる

主力が伝わりません。大きさを変えるか、別の形式にしてください。

カードごとに項目が違う

比較ができず、項目が欠けたカードが避けられます。揃えてください。

枚数を絞らずに並べる

上から数枚しか見られません。絞り込む手段を用意してください。

カード内に複数の行動を置く

どこを押すか迷わせます。主要な行動を1つに絞ってください。

見本の短い文字列で確認する

実際の内容で高さが揃わなくなります。最も長いもので確認してください。

よくある質問

何枚までなら並べてよいですか

一度に把握できるのは6枚程度までが目安です。それ以上は分類するか、絞り込みを付けてください。ただし数より、比較の軸が揃っているかのほうが重要です。

画像は必須ですか

必須ではありません。ただし一部のカードだけ画像がある状態は、レイアウトが崩れて見えます。全てに入れるか、全て入れないかで揃えてください。

影を付けるべきですか

枠が分かれば必要ありません。影は要素の重なりを示す表現であり、並列のカードでは意味を持ちません。線や背景の差でも区別できます。

高さを揃えるべきですか

揃えると整いますが、内容が少ないカードに余白が生まれます。揃えない場合は、下端がばらつきます。どちらを許容するかを決めてください。内容量の差が大きい場合は、表示する文字数を制限する方法もあります。

価格を入れるべきですか

比較の軸になるなら入れてください。ただし全カードで揃える必要があります。一部だけ「要問い合わせ」となる場合、その表記でも揃っていれば比較は成立します。

まとめ

カード型レイアウトは情報を整理して見せられる形式ですが、並べたものはすべて同じ重みに見えます。これは並列の選択肢を示すには適している一方、優先順位を伝えたい場面では機能しません。主力サービスとそれ以外を同じ形で並べると、主力が伝わらなくなります。

1枚に入れる情報は、判断の軸になるものだけに絞ってください。そして全カードで同じ項目を同じ順序で並べる必要があります。カードごとに項目が違うと比較ができず、価格が入っているものと入っていないものが混在すれば、入っていないほうが避けられます。

また画面が狭いとカードは1列になり、縦に長く続きます。この状態では前のカードの内容を覚えていないと比べられず、比較という利点そのものが失われます。スマートフォンでの利用が中心なら、表形式や絞り込みのほうが機能することがあります。目的が細かい条件の比較であれば、そもそも表のほうが正確に伝わります。

当社ではデザイン制作において、目的に応じた見せ方をご提案しています。サイト全体の構成はホームページ制作とあわせてご相談ください。

スマートフォンでの購入率がパソコンより低い場合、原因はデザインの見た目ではなく、入力と確認の手間にあることがほとんどです。

画面が狭いため一度に見える情報が少なく、比較や確認のたびに移動が発生します。また文字の入力が負担になるため、項目が多いほど離脱します。この2つが購入までの各段階で効いてきます。

この記事では、探す、選ぶ、買うという段階ごとに起きる離脱、優先して直すべき箇所、そして確認の方法を整理します。

探す段階で起きる離脱

商品にたどり着けなければ、その先の設計は意味を持ちません。

一覧と詳細を往復させる構成が、最も負担になります。一覧の段階で判断に必要な情報を出せば、往復が減ります。

階層の設計は情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。

選ぶ段階で起きる離脱

商品ページでは、判断に必要な情報がどの順で出てくるかが効きます。

1. 商品の画像（何を買うのかが分かる）
2. 商品名と価格（判断の中心）
3. 在庫と配送の目安（いつ届くか）
4. 選択肢（サイズ、色など）
5. 購入ボタン
6. 詳細な説明、仕様
7. レビュー

詳しい説明を上に置くと、価格と購入ボタンまで到達しません。判断に必要な最小限を上に置き、詳細はその下に配置してください。

レビューの扱いは「お客様の声」の効果的な掲載方法｜信頼につながる集め方と見せ方を参照してください。

買う段階の入力が最大の要因

カートに入れた後の離脱は、ほとんどが入力の負担によるものです。

会員登録の必須化は、最も離脱を生む設計です。登録せずに購入できるようにし、購入後に登録を案内する順序が現実的です。

フォーム全体の設計は入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計、カート離脱の分析はカート離脱を防ぐデザインの工夫｜どの段階で、何を理由に離れているかを参照してください。

送料と総額を早い段階で示す

購入直前で離脱する原因として、想定外の費用が最も多くなります。

• 送料を、商品ページの段階で示す
• 無料になる条件があるなら、その金額を明示する
• 手数料が発生する支払い方法を、選択時に示す
• 総額を、確認画面より前に分かるようにする

最後の確認画面で総額が想定より高いと、そこで離脱します。早い段階で示すほうが、結果的な購入率は上がります。隠しても、確認画面で分かるだけです。

段階ごとに離脱率を分けて見る

全体の購入率だけを見ると、どこに問題があるか分かりません。

最も改善効果が大きいのは、数値が低く、かつ後段の段階です。後段ほど購入意思が強い人が残っているためです。手続きの完了率が低い場合、優先的に着手してください。

表示速度が購入率に影響する

商品画像が多いため、ECサイトは表示が重くなりやすい構造です。

移動しながら見る人は、待ち時間に敏感です。改善の順序はサイトの表示速度を改善する優先順位｜何から手をつけるかを参照してください。

確認は実機で実際に購入して行う

画面を見るだけでは、実際の負担は分かりません。

1. 実機で、実際に商品を探す
2. カートに入れ、購入手続きを最後まで進める
3. わざと入力を間違え、エラー時の挙動を確認する
4. 住所の自動補完が機能するか確認する
5. 複数の支払い方法を試す
6. 完了メールの内容を確認する

特にエラー時の挙動は、実際に試さないと分かりません。入力内容が消える、どこが誤りか分からないといった問題は、正常な操作では発見できません。

よくある失敗

見た目の改善から着手する

原因は入力と確認の手間にあることがほとんどです。段階ごとの離脱率を先に確認してください。

会員登録を必須にする

最も離脱を生む設計です。登録せずに購入できるようにしてください。

送料を確認画面まで示さない

そこで離脱します。早い段階で示すほうが購入率は上がります。

商品ページで説明を上に置く

価格と購入ボタンまで到達しません。判断に必要な最小限を上に置いてください。

正常な操作だけで確認する

エラー時の挙動が問題であることが多くなります。わざと間違えて確認してください。

よくある質問

パソコンとスマートフォンで同じ構成にすべきですか

情報は同じでも、順序と見せ方は変えてください。画面が狭いと一度に見える量が少ないため、パソコンで横に並ぶ情報が縦に長く続きます。優先度の低い情報は折りたたむなどの調整が必要です。

画像は何枚くらい必要ですか

判断に必要な角度と状態が揃っていることが基準です。枚数より、使用イメージやサイズ感が分かるかを確認してください。ただし読み込みの負荷も考慮が必要です。

レビューは上に置くべきですか

商材によります。判断でレビューを重視する商材では、要約を上部に出す方法があります。ただし詳細を上に置くと、価格と購入ボタンまで到達しにくくなります。

アプリを作るべきですか

繰り返し購入される商材では有効な場合があります。ただし開発と維持の費用がかかり、導入してもらう手間もあります。まずWebでの購入体験を整えるほうが、投資対効果が読みやすくなります。

デザインの費用はどのくらいかかりますか

規模と機能によって大きく変わります。既製の仕組みを使うか、独自に作るかでも変わります。判断の考え方はネットショップのデザイン費用はどう決まるか｜構築方法別の違いと判断を参照してください。

まとめ

スマートフォンでの購入率がパソコンより低い場合、原因はデザインの見た目ではなく入力と確認の手間にあることがほとんどです。画面が狭いため一度に見える情報が少なく、比較や確認のたびに移動が発生します。また文字の入力が負担になるため、項目が多いほど離脱します。

改善に着手する前に、段階ごとの離脱率を分けて確認してください。商品ページへの到達、カートへの投入、購入手続きの開始、完了という4段階に分けると、どこに問題があるかが特定できます。最も改善効果が大きいのは、数値が低くかつ後段の段階です。後段ほど購入意思が強い人が残っているためです。

個別の対策として効果が大きいのは、会員登録を必須にしないこと、送料と総額を早い段階で示すこと、そしてエラー時に入力内容を保持することです。特に会員登録の必須化は最も離脱を生む設計であり、購入後に登録を案内する順序のほうが結果的な購入数は増えます。確認は実機で最後まで購入し、わざと入力を間違えてエラー時の挙動まで試してください。正常な操作だけでは離脱の原因は見つかりません。

当社ではホームページ制作において、購入導線の設計と改善をご相談いただけます。デザイン面はデザイン制作とあわせてご検討ください。

スクロール率を見ると、訪問者がページのどこまで読んだかが分かります。特定の位置で急に減っていれば、そこで読むのをやめた人が多いということです。

ただし止まった場所が原因とは限りません。読むのをやめる判断は、その手前で読んだ内容によって起きています。急減した位置を直しても改善しないことがあるのは、このためです。

この記事では、数字の読み方、離脱が正常な箇所との見分け方、原因の切り分け、そして改善の順序を整理します。

急減した位置が原因とは限らない

読むのをやめる判断は、その位置ではなく、手前の内容によって起きています。

急減した位置の要素を消しても、改善しないことがあります。その位置は結果であり、判断は手前で起きています。

離脱が正常な箇所もある

すべての減少が問題ではありません。目的を達成した後の離脱は正常です。

ボタンを押して遷移した人は、スクロールを止めた人として記録されます。この分を問題として扱うと、誤った改善をします。ボタンのクリック数と併せて確認してください。

見るべきは到達率とその位置の内容

数字だけを見ても判断できません。その位置に何があるかとセットで確認してください。

1. ページを一定の区間に分け、各区間への到達率を出す
2. 急減している区間を特定する
3. その区間と、その手前の内容を実際に読む
4. 自分が読み手ならどこで判断を止めるかを考える
5. 仮説を立て、優先度をつける

数字を見た後に、実際にページを読む工程が必要です。この工程を省くと、何を直せばよいか決まりません。細かい挙動の確認はヒートマップ分析のやり方｜何を見て、どこを直すのかを参照してください。

スクロール率だけでは原因が分からない

他の情報と組み合わせることで、原因の切り分けができます。

スマートフォンだけ極端に到達率が低い場合、原因は内容ではなく表示にあります。この切り分けをせずに文章を直しても、改善しません。

流入の質は検索語句レポートの見方と除外キーワードの決め方でも確認できます。

改善は上から順に行う

複数箇所で減少していても、上から順に直してください。

• 上の区間で失った人は、下の区間には到達しない
• 下を直しても、そこまで来る人が増えなければ効果は小さい
• 上を直すと、下の数字も変わるため再測定が必要
• 同時に複数を直すと、何が効いたか分からない

最も上流の減少から着手するのが効率的です。特に最初の画面での減少は、それ以降のすべてに影響します。

冒頭の設計はファーストビュー設計の重要性｜離脱を防ぐ最初の3秒の作り方を参照してください。

長さそのものを疑う

到達率が全体的に低い場合、ページが長すぎる可能性があります。

読ませたい内容が下部にある場合、上に移せないかを検討してください。下まで読ませる努力より、順序を変えるほうが確実です。

情報量の判断はミニマルなWebデザインが成立する条件｜情報を減らして成果が上がる場合と、下がる場合を参照してください。

評価は到達率ではなく成果で行う

到達率を上げること自体は目的ではありません。

途中でボタンを押した人は、最下部に到達しません。この場合、到達率が低くても成果は出ています。到達率は診断のための指標であり、改善の目標ではありません。

よくある失敗

急減した位置の要素を消す

その位置は結果であり、判断は手前で起きています。手前の内容を確認してください。

ボタン直後の減少を問題として扱う

押して遷移した人が含まれます。クリック数と併せて確認してください。

数字だけを見て改善案を出す

その位置に何があるかを実際に読んでください。数字だけでは何を直すか決まりません。

下の区間から直す

そこまで来る人が増えなければ効果は小さくなります。上流から着手してください。

到達率を目標にする

途中で押した人は到達しません。成果で判断してください。

よくある質問

計測にはどのような設定が必要ですか

スクロールの深さを記録する設定が必要です。標準で取得できる場合と、追加の設定が必要な場合があります。仕様は変更されるため、公式の情報を確認してください。設定の考え方は店舗ビジネスのためのGA4×GTM計測設定ガイドを参照してください。

何割まで到達すればよいですか

基準となる割合はありません。ページの長さと目的によって変わります。他社の数値と比べるより、自社の改善前後で比較してください。

スマートフォンとパソコンで数字が違うのは問題ですか

画面の高さが違うため、同じ内容でもスクロール量が変わります。数値をそのまま比較せず、それぞれの中で急減している位置を見てください。

記事ページでも見るべきですか

有効です。読まれていない箇所が分かれば、構成の見直しに使えます。ただし記事は途中で目的を達成することもあるため、到達率の低さがそのまま問題とは限りません。

改善した後、どのくらいで判断できますか

判断できる件数が集まるまでです。訪問数が少ないページでは時間がかかります。件数が少ない段階での差は、偶然の可能性があります。

まとめ

スクロール率を見ると、訪問者がページのどこで読むのをやめたかが分かります。ただし止まった場所が原因とは限りません。読むのをやめる判断はその手前で読んだ内容によって起きているため、急減した位置の要素を消しても改善しないことがあります。

また、すべての減少が問題ではありません。ボタンを押して遷移した人は、スクロールを止めた人として記録されます。この分を問題として扱うと誤った改善につながるため、クリック数と併せて確認してください。料金の直後の減少も、予算が合わない層の離脱であれば一部は正常です。

改善に着手する順序は、上流からです。上の区間で失った人は下の区間に到達しないため、下を直しても効果は限定的になります。そして数字を見た後に、その位置の内容を実際に読む工程が必要です。この工程を省くと何を直せばよいか決まりません。到達率そのものは診断のための指標であり、上げること自体が目的ではないことにも注意してください。

当社ではホームページ制作において、データに基づくページ改善をご相談いただけます。計測の設計から進めたい場合はお問い合わせよりご連絡ください。

問い合わせや購入のボタンを改善するとき、最初に色を検討することが多くなります。しかし実際に成果を動かすのは、文言と配置と個数です。

押すかどうかを決めるのは、押した後に何が起きるかが分かるかどうかです。「送信」とだけ書かれたボタンは、その先で何を求められるか分かりません。営業電話が来るのではないかという懸念があれば、押されません。

この記事では、文言の作り方、置くべき位置、個数の考え方、周辺に必要な情報、そして検証の順序を整理します。

押した後に何が起きるか分かる文言にする

最も効果が大きいのは文言です。抽象的な言葉ほど、押した後が想像できません。

得られるものを書き、懸念になりそうな点を先に打ち消してください。特に費用が発生するかどうかは、押す前に最も気になる点です。

文言の設計はマイクロコピーとは？CVRを動かす短い文章の書き方も参照してください。

配置は判断が固まる位置に置く

ボタンは読み手の判断が固まった位置にある必要があります。早すぎても遅すぎても押されません。

最下部にしか置かないと、途中で判断が固まった人が探すことになります。長いページでは、判断が固まりうる箇所ごとに置いてください。

増やしすぎると判断できなくなる

選択肢が多いほど押されるとは限りません。

複数置く場合は、主要な1つを明確に目立たせてください。同じ見た目で並べると、どちらも選ばれにくくなります。検討段階が違う人向けに複数置くのは有効ですが、見た目の強弱で優先度を示す必要があります。

周辺情報が押しやすさを左右する

ボタン自体より、その周辺にある情報が判断を変えることがあります。

• 所要時間（入力にかかる時間の目安）
• 費用が発生しないこと
• その後の流れ（いつ返信が来るか）
• しつこい営業がないこと
• 個人情報の扱い

押した後の不確実性が、押さない理由になっています。この不確実性を、ボタンの直前で解消してください。フォームの手前で離脱する人には、この情報が効きます。

フォーム全体の設計は入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計を参照してください。

見た目で確認すべき点

色の前に、ボタンとして認識できるかを確認してください。

押せることが分からないボタンは、色を変えても押されません。スマートフォンでの操作性はスマホで押しやすいボタンの設計｜大きさより間隔が誤タップを決めるを参照してください。

色の検証は文言と配置の後

色は改善の余地としては小さい部類です。

1. 文言を、得られるものが分かる表現に変える
2. 配置を、判断が固まる位置に追加する
3. 周辺に、懸念を解消する情報を置く
4. ボタンとして認識できるかを確認する
5. ここまで行った後、色を検証する

順序を逆にすると、効果の小さい改善に時間を使うことになります。色の考え方はCVボタンの色で成果は変わるのか｜アクセントカラーの決め方を参照してください。

評価は押された数ではなく成果で行う

クリック率だけを追うと、誤解を招く文言に流れます。

実態より魅力的に見せると、クリック率は上がりますが商談化率は下がります。押した後に想定と違う内容が出ると、そこで離脱するためです。両方を見て判断してください。

よくある失敗

色から改善を始める

効果の小さい箇所から着手することになります。文言と配置が先です。

送信、お問い合わせという文言にする

押した後に何が起きるか分かりません。得られるものを書いてください。

最下部にしかボタンを置かない

途中で判断が固まった人が探すことになります。判断が固まる位置ごとに置いてください。

複数のボタンを同じ見た目で並べる

どちらも選ばれにくくなります。主要な1つを目立たせてください。

クリック率だけで評価する

誤認を招く文言でも上がります。商談化率まで見てください。

よくある質問

ボタンは何個まで置いてよいですか

個数より、主要な行動が1つに絞られているかが重要です。同じ行動を促すボタンを複数箇所に置くのは問題ありません。異なる行動を並べる場合は、見た目の強弱で優先度を示してください。

最初の画面にボタンを置くべきですか

商材が既に知られている場合や、単価が低くすぐ判断できる場合は有効です。説明が必要な商材では、判断材料を示す前に置いても押されません。ただし置くこと自体に害はないため、下部にも配置したうえで様子を見る方法があります。

電話番号もボタンにすべきですか

電話での問い合わせが多い業種では有効です。スマートフォンではタップで発信できるようにしてください。ただし電話とフォームを同じ強さで並べると、どちらを使うか迷わせます。主要な手段を決めてください。

ボタンの文言は長くてよいですか

分かりやすさを優先してください。ただし長すぎると読まれません。得られるものを1行で書き、補足はボタンの周辺に置く構成が現実的です。

検証はどのくらいの期間が必要ですか

判断できる件数が集まるまでです。件数が少ない状態で差が出ても、偶然の可能性があります。検証の設計はABテストの始め方｜やるべき条件と、できない場合の代替手段を参照してください。

まとめ

問い合わせや購入のボタンを改善する際、色から検討を始めると効果の小さい箇所に時間を使うことになります。実際に成果を動かすのは、文言と配置と個数です。押すかどうかを決めるのは、押した後に何が起きるかが分かるかどうかであり、「送信」とだけ書かれたボタンではその先が想像できません。

文言では、得られるものを書き、懸念になりそうな点を先に打ち消してください。特に費用が発生するかどうかは、押す前に最も気になる点です。配置については、判断が固まる位置ごとに置く必要があります。最下部にしかないと、途中で決めた人が探すことになり、そこで離脱します。

またボタン自体より、周辺にある情報が判断を変えることがあります。入力にかかる時間の目安、費用が発生しないこと、いつ返信が来るか。押した後の不確実性が押さない理由になっているため、この不確実性をボタンの直前で解消してください。そして評価はクリック率だけでなく商談化率まで見てください。実態より魅力的に見せるとクリック率は上がりますが、押した後で離脱します。

当社ではデザイン制作において、問い合わせ導線の設計をご相談いただけます。改善の進め方はお問い合わせよりご連絡ください。

スマートフォンで誤タップが起きるとき、原因はボタンが小さいことより、隣の要素との距離が近いことにあります。指はマウスカーソルと違い、接触する面積を持ちます。狙った位置の周囲も同時に触れるため、隣が近ければそちらが反応します。

もうひとつの要因が画面上の位置です。片手で持ったとき、指が自然に届く範囲は画面の一部に限られます。届きにくい位置にある要素は、持ち替えるか、無理な姿勢で押すことになります。

この記事では、押せる領域の考え方、隣接要素との距離、配置による押しやすさ、そして確認方法を整理します。

誤タップの主因は間隔

ボタンを大きくしても、隣接する要素との距離が近ければ誤タップは起きます。

特に問題になるのは、リンクが連続して並ぶ箇所です。一覧、メニュー、フッターのリンク群では、行間が詰まると隣の項目を押してしまいます。

見た目の大きさと押せる領域を分ける

視覚的に小さくても、押せる範囲は広く取れます。デザイン上の見え方と、操作の対象領域は別に設計できます。

• アイコンは小さくても、周囲を含めた範囲を押せるようにする
• テキストリンクは、行の高さを確保して領域を広げる
• チェックボックスは、ラベルの文字も押せるようにする
• 領域を広げても、隣と重ならないよう間隔を確保する

アイコンだけのボタンは、見た目を保ったまま領域を広げられます。ただし広げすぎると隣の領域と接触するため、間隔とセットで調整してください。

画面上の位置で押しやすさが変わる

片手で持ったとき、指が自然に届く範囲は限られます。

画面が大きい端末ほど、上部への到達が難しくなります。主要な操作を上部に置く設計は、持ち替えを強います。逆に、削除など取り消せない操作を届きにくい位置に置くのは、誤操作を防ぐ意味で合理的です。

取り消せない操作は特に離す

誤タップの影響は操作の種類によって大きく変わります。

確定とキャンセルを隣接して並べる構成は、誤タップの影響が大きくなります。間隔を空けるか、視覚的な差を明確にしてください。反応の設計はUIのフィードバック設計｜操作が伝わらないと、利用者は同じ操作を繰り返すを参照してください。

よくある問題箇所

実際に誤タップが起きやすいのは、次の箇所です。

1. フッターのリンク一覧（行間が詰まりやすい）
2. 記事内のテキストリンク（本文の行間のまま）
3. 一覧ページの各項目（間隔が均等で境界が曖昧）
4. フォームの選択肢（チェックボックスが小さい）
5. 画面下部に固定された要素（他の要素と重なる）

特に画面下部に固定した要素は、その下にあるコンテンツを隠します。スクロールしても最後まで読めない、最下部のリンクが押せないという問題が起きます。

フォームの選択肢については入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計、画面幅ごとの設計はモバイルファーストデザインとは？スマホ最適化の考え方を参照してください。

確認は実機で実際の持ち方で行う

画面上で縮小表示して確認しても、実際の押しやすさは分かりません。

必ず実機で、片手で持った状態で確認してください。両手で操作すると、届きにくさに気づけません。また指の大きさには個人差があるため、複数人で確認できると精度が上がります。

実際の操作の観察はユーザビリティテストのやり方｜低コストで始める実践手順を参照してください。

評価は誤操作の発生と離脱で見る

改善の効果は行動のデータで確認できます。

遷移した直後に戻る操作が多いページは、誤タップが起きている可能性があります。意図しない遷移をして、すぐ戻っているためです。離脱箇所の把握はヒートマップ分析のやり方｜何を見て、どこを直すのかを参照してください。

他の要素との順序

デザインの各要素には依存関係があり、決める順序が結果を左右します。この要素が全体のどこに位置するかはWebデザインの構成要素はどの順で決めるかを参照してください。

よくある失敗

ボタンを大きくするだけで解決しようとする

隣との距離が近ければ誤タップは起きます。間隔もあわせて調整してください。

主要な操作を画面上部に置く

片手では届きにくく、持ち替えを強います。下部に配置してください。

確定とキャンセルを隣接させる

誤タップの影響が大きくなります。間隔を空けるか、視覚的な差を明確にしてください。

本文の行間のままテキストリンクを並べる

行間が詰まっていると、隣の行を押してしまいます。リンクが連続する箇所は行間を広げてください。

画面上の縮小表示だけで確認する

押しやすさは分かりません。実機で片手操作を確認してください。

よくある質問

具体的な寸法の基準はありますか

各プラットフォームのガイドラインで推奨値が示されています。ただし数値は変更される可能性があるため、実装時に公式のドキュメントで確認してください。数値を満たしていても、隣接要素との間隔が狭ければ誤タップは起きます。

画面下部に固定するボタンは有効ですか

主要な操作が常に押せる利点があります。ただし下のコンテンツを隠すため、スクロール最下部まで読めるか、最後のリンクが押せるかを確認してください。また画面が狭い端末では、占有する割合が大きくなります。

テキストリンクは避けるべきですか

避ける必要はありませんが、押せる領域を確保してください。本文中の単発のリンクは問題になりにくく、連続して並ぶ箇所で問題が起きます。

タブレットでも同じ考え方ですか

画面が大きいため到達範囲の問題は変わりますが、指で操作する点は同じです。間隔の確保は同様に必要です。また持ち方が多様なため、片手操作を前提にした配置は当てはまりません。

既存サイトのどこから確認すべきですか

フォームの選択肢と送信ボタン、次にフッターのリンク一覧です。前者は成果に直結し、後者は誤タップが起きやすい典型的な箇所です。

まとめ

スマートフォンで誤タップが起きるとき、原因はボタンが小さいことより隣の要素との距離が近いことにあります。指はマウスカーソルと違って接触する面積を持つため、狙った位置の周囲も同時に触れます。ボタンを大きくしても、隙間がなければ境界付近での誤タップは解消しません。特にリンクが連続して並ぶ一覧やフッターで起きやすくなります。

また、見た目の大きさと押せる領域は分けて設計できます。アイコンは視覚的に小さくても、周囲を含めた範囲を押せるようにすれば操作しやすくなります。テキストリンクも行の高さを確保することで領域を広げられます。ただし広げるときは、隣と重ならないよう間隔もあわせて調整してください。

配置についても、片手で持ったときに指が届く範囲は画面の一部に限られます。主要な操作は下部に置き、削除など取り消せない操作は届きにくい位置に置くのが合理的です。そして確認は必ず実機で、片手で持った状態で行ってください。両手で操作すると届きにくさに気づけず、画面上の縮小表示では押しやすさそのものが分かりません。

当社ではデザイン制作において、スマートフォンでの操作性を含めた設計をご相談いただけます。既存サイトの点検はお問い合わせよりご連絡ください。

カスタマージャーニーマップは、顧客が認知から購入までにたどる過程を可視化する手法です。ただし、作ったものの一度も参照されないという結末になりやすい成果物でもあります。

使われない理由ははっきりしています。想像で埋めた内容は、誰も信じられないからです。実際の顧客がどこで悩み、何を調べたかを知らないまま作ると、作った人の思い込みを可視化しただけのものになります。

この記事では、作る価値がある条件、埋めるべき情報の集め方、Webサイトの改善に接続する方法、そして簡易版で足りる場合を整理します。

想像で埋めると思い込みの可視化になる

ジャーニーマップの各段階で顧客が何を考えているかを書く欄があります。ここを想像で埋めると、根拠のない内容が確定した情報のように扱われます。

完全に正確である必要はありませんが、根拠の有無は明示してください。想像で埋めた箇所と、記録に基づく箇所を区別しておくと、後の議論で扱いを変えられます。

作る価値があるのは認識がずれている場合

この手法が有効なのは、関係者の間で顧客像や購買過程の認識が食い違っている場合です。

• 営業と制作で、顧客が何に困っているかの認識が違う
• 経営層と現場で、購入の決め手についての理解が違う
• 部署ごとに顧客との接点があり、全体像を誰も持っていない
• 施策が個別最適になり、全体の流れが分断している

逆に、関係者が少なく認識が揃っている場合は、作る手間に見合いません。その時間を実際の改善に使うほうが成果につながります。

問い合わせが来ない原因の切り分けにはホームページから問い合わせが来ない原因の切り分け方｜5段階で診断するのほうが直接的です。

埋める情報は既存の記録から集められる

顧客調査を実施しなくても、多くの企業がすでに材料を持っています。

まず既存の記録から埋めてください。それでも埋まらない箇所が、調査すべき対象になります。最初から調査を計画すると、着手までに時間がかかります。

検索されている言葉の把握はSearch Consoleで最初に見る3つの画面｜順位が分かっても打ち手にならない理由を参照してください。

改善に接続しないと使われない

作った後、何をするかまで決めておかないと、成果物が保管されるだけで終わります。

1. 各段階で、顧客が離脱している箇所を特定する
2. その箇所が、自社のどの接点（ページ、資料、対応）に対応するか対応づける
3. 対応する接点で、何が不足しているかを書き出す
4. 影響の大きい箇所から改善の施策を決める
5. 実施後、離脱が減ったかを確認する

ジャーニーマップは現状を整理する道具であり、それ自体が改善案ではありません。接点との対応づけまで行って、初めて実務に接続します。

簡易版で足りる場合

詳細な形式で作らなくても、目的を果たせることがあります。

形式に凝ると作成の負担が増え、更新されなくなります。目的に必要な粒度で作ってください。多くの場合、段階と課題と接点の3列で足ります。

更新しないと実態と乖離する

顧客の行動は変わります。作った時点の内容が、数年後も正しいとは限りません。

• 情報を調べる手段が変われば、接点が変わる
• 競合が増えれば、比較の段階が長くなる
• 自社のサービスが変われば、検討の内容が変わる
• 更新しないマップを参照すると、判断を誤る

更新の予定が立たないなら、詳細に作り込む意味は薄くなります。簡易な形式で作り、定期的に見直すほうが実用的です。

ペルソナとの関係

ジャーニーマップは誰の旅かが決まっていないと作れません。

複数の顧客像を1枚にまとめると、どの段階の記述も曖昧になります。主要な対象から1つずつ作ってください。対象の定義はWebデザインにおけるペルソナ設計の考え方と作り方を参照してください。

顧客に直接聞く場合の手法はUXリサーチの手法の使い分け｜知りたいことが決まれば、方法は決まる、獲得後の歩留まり改善は問い合わせ後の歩留まりを改善する｜リード管理の始め方を参照してください。

工程全体の中で見る

この工程の前後には、情報の分類と構造の設計があります。全体の流れは情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。

よくある失敗

想像で全欄を埋める

根拠のない内容が確定情報のように扱われます。記録に基づく箇所と区別してください。

作ることが目的になる

現状の整理であって改善案ではありません。接点との対応づけまで行ってください。

形式に凝りすぎる

作成の負担が増え、更新されなくなります。目的に必要な粒度にしてください。

複数の顧客像を1枚にまとめる

記述が曖昧になります。主要な対象から1つずつ作ってください。

作った後に更新しない

顧客の行動は変わります。古いマップを参照すると判断を誤ります。

よくある質問

誰が作るべきですか

顧客との接点を持つ複数の部署から人を集めることを推奨します。1人で作ると、その人の視点に限定されます。ただし人数が多すぎると議論がまとまらないため、数名程度が現実的です。

BtoBでも有効ですか

有効です。むしろ検討期間が長く関与者が複数いるBtoBのほうが、全体像を持つ人がいない状態になりやすくなります。ただし意思決定者と利用者が違うため、それぞれの動きを分けて記述してください。

感情の起伏を書く欄は必要ですか

目的によります。関係者の認識を揃える目的なら、あったほうが伝わります。サイトの改善点を探す目的なら、感情より行動と接点の記述が重要です。

既存顧客の記録だけで作ってよいですか

注意が必要です。既存顧客は購入に至った人であり、途中で離脱した人の情報が含まれません。離脱の理由を知りたい場合は、問い合わせたが成約しなかった記録も併せて確認してください。

作成にどのくらい時間をかけるべきですか

目的によりますが、初回は数時間から1日程度で簡易版を作り、実際に使ってみることを推奨します。時間をかけて完成度を上げても、使われなければ意味がありません。使ってみて不足が分かってから、精度を上げてください。

まとめ

カスタマージャーニーマップは、作ったものの一度も参照されないという結末になりやすい成果物です。理由は明確で、想像で埋めた内容は誰も信じられないからです。実際の顧客がどこで悩み何を調べたかを知らないまま作ると、作った人の思い込みを可視化しただけのものになります。根拠のある箇所と想像の箇所は区別して記載してください。

この手法が有効なのは、関係者の間で顧客像や購買過程の認識が食い違っている場合です。営業と制作で顧客の困りごとの認識が違う、部署ごとに接点があって全体像を誰も持っていない。こうした状況では価値があります。逆に関係者が少なく認識が揃っているなら、作る手間を実際の改善に使うほうが成果につながります。

埋める情報は、顧客調査を実施しなくても既存の記録から多くを集められます。問い合わせの内容、商談記録、検索されている言葉、サイト内の行動データ。まずこれらから埋め、それでも埋まらない箇所が調査すべき対象になります。そして作った後は、各段階の課題を自社の接点と対応づけてください。この作業を経て、初めて実務の改善につながります。

当社ではホームページ制作において、顧客の検討過程を踏まえた導線設計をご相談いただけます。現状の整理から進めたい場合はお問い合わせよりご連絡ください。

ボタンを押したのに何も起きない。この状態が数秒続くと、利用者は押せていないと判断してもう一度押します。フォームであれば二重送信になり、決済であれば二重請求の問い合わせにつながります。

原因は処理が遅いことではなく、処理が始まったことを伝えていないことです。同じ待ち時間でも、進行中だと分かっていれば待てます。分からなければ、失敗したと判断されます。

この記事では、伝えるべき3つの状態、待ち時間の長さごとの見せ方、確認すべき箇所、そして過剰な演出との線引きを整理します。

伝えるべき3つの状態

操作に対する反応は、3つの段階に分けて考えると漏れがなくなります。

この3つのうち、最も抜けやすいのは処理中の表示です。開発環境では処理が速いため気づかず、実際の回線速度で問題が表面化します。

反応がないと同じ操作が繰り返される

反応の欠如は具体的な損失につながります。

特に決済と予約では、二重実行の影響が大きくなります。表示による対策に加えて、送信後にボタンを無効化する処理も併せて実装してください。

待ち時間の長さで見せ方が変わる

処理時間によって、適切な伝え方が変わります。

終わりが見えない待ち時間は、実際の時間より長く感じられます。進捗が分かる表示にすると、同じ時間でも離脱が減ります。

表示速度そのものの改善はサイトの表示速度を改善する優先順位｜何から手をつけるかを参照してください。

エラーも結果として伝える

処理が失敗した場合も、結果を伝える必要があります。何も表示されないのは、成功と区別がつきません。

• 何が起きたかを、利用者の言葉で説明する
• どこに問題があるかを、該当箇所で示す
• どうすれば解決するかを書く
• 入力した内容を消さない
• 再試行の方法を示す

入力内容が消えるエラー画面は、最も離脱を生みます。やり直す気力を失わせるためです。技術的な理由で保持できない場合でも、その旨を先に伝えてください。

エラー表示の設計は入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計も参考になります。

過剰な演出は操作を遅くする

反応を伝えることは重要ですが、演出が過剰になると操作の妨げになります。

動きは、状態が変わったことを伝えるためのものです。装飾として動かすと、利用者の注意が分散します。特に繰り返し行う操作では、短いほうが快適です。

動きの使い方はマイクロコピーとは？CVRを動かす短い文章の書き方と併せて設計すると効果的です。

確認は実際に操作して行う

設計上は考慮していても、実装で抜けていることがあります。

1. 実際の回線環境で、各操作を試す
2. 送信ボタンを押した直後の表示を確認する
3. わざと誤った入力をして、エラー表示を確認する
4. 処理に時間がかかる操作で、進行が分かるか確認する
5. スマートフォンでも同じ確認を行う

開発環境では処理が速いため、待ち時間の問題は表面化しません。実際の環境で確認してください。特に回線が遅い状況を想定した確認が必要です。

優先順位のつけ方

すべてを一度に整えるのが難しい場合、損失の大きい箇所から着手してください。

成果に直結する操作から順に確認してください。装飾的な演出の改善は、実害が小さいため後回しで構いません。

どこで離脱しているかの把握にはヒートマップ分析のやり方｜何を見て、どこを直すのかが使えます。操作の確認方法はユーザビリティテストのやり方｜低コストで始める実践手順を参照してください。

工程全体の中で見る

この工程の前後には、情報の分類と構造の設計があります。全体の流れは情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。

よくある失敗

処理中の表示を実装しない

開発環境では速いため気づきません。実際の回線速度で確認してください。

送信ボタンを無効化しない

表示だけでは二重送信を防げないことがあります。処理も併せて実装してください。

エラー時に入力内容を消す

やり直す気力を失わせます。最も離脱を生む設計です。

すべての要素に動きをつける

どこを見ればよいか分からなくなります。状態が変わる箇所に限定してください。

正常な操作しか確認しない

誤入力や通信の失敗も含めて確認してください。実際に多く起きるのはこちらです。

よくある質問

処理中の表示はどのくらいの時間から必要ですか

明確な基準はありませんが、押してから反応まで間があると感じる程度なら必要です。判断が難しい場合は、実際に操作してもらい、待たされたと感じるかを確認してください。

完了の表示は画面遷移でよいですか

遷移先で完了が明示されていれば問題ありません。ただし遷移に時間がかかる場合、その間の表示も必要です。また遷移後の画面で、何が完了したのかが分かる記述を入れてください。

動きはどのくらいの長さが適切ですか

短いほど操作は快適になります。長い動きは初回は印象に残りますが、繰り返し使う利用者にとっては待ち時間になります。頻繁に行う操作ほど短くしてください。

音や振動は使うべきですか

場面によります。公共の場で利用される可能性を考えると、音は慎重に扱うべきです。また利用者側で無効にしている場合があるため、音だけに頼らない設計にしてください。

既存サイトのどこから確認すべきですか

問い合わせフォームの送信直後から確認してください。最も成果に近く、二重送信の影響も出やすい箇所です。次に決済や予約があれば、そちらを確認します。

まとめ

ボタンを押しても何も起きない状態が続くと、利用者は押せていないと判断してもう一度押します。フォームであれば二重送信、決済であれば二重請求の問い合わせにつながります。原因は処理が遅いことではなく、処理が始まったことを伝えていないことです。同じ待ち時間でも、進行中だと分かっていれば人は待てます。

伝えるべき状態は、押したこと、処理中であること、終わったことの3つです。このうち最も抜けやすいのは処理中の表示で、開発環境では処理が速いため気づかず、実際の回線速度で問題が表面化します。また処理が失敗した場合も結果として伝える必要があり、特に入力内容が消えるエラー画面は最も離脱を生みます。

一方で、演出が過剰になると操作の妨げになります。動きは状態が変わったことを伝えるためのものであり、装飾として動かすと利用者の注意が分散します。特に繰り返し行う操作では短いほうが快適です。確認は実際の環境で、誤入力も含めて操作して行ってください。着手する順序は、二重実行の影響が大きい決済や予約からです。

当社ではホームページ制作において、フォームや操作導線の設計をご相談いただけます。既存サイトの点検はお問い合わせよりご連絡ください。

UIの一貫性は「見た目が整う」という文脈で語られがちですが、本質は判断にかかる時間の問題です。同じ意味の要素が同じ形をしていれば、利用者は一度覚えた法則を再利用できます。形が違えば、そのたびに何であるかを判断する必要があります。

この差は1回あたりでは小さくても、画面遷移のたびに積み重なります。結果として、目的にたどり着くまでの時間が延び、途中での離脱が増えます。

この記事では、一貫性が成果に効く理由、揃えるべき範囲、運用の中で崩れる原因、そして復旧の手順を整理します。

一貫性は判断時間を短縮する仕組み

利用者はサイトを訪れた最初の数画面で、この形はボタン、この色はリンクという法則を学習します。

崩れの影響は、1画面では気づきにくい程度です。そのため制作時のレビューでは問題視されず、利用者の離脱という形で後から現れます。

揃えるべきは意味と形の対応関係

揃えるとはすべてを同じにすることではなく、意味と形の対応を固定することです。

特に重要なのはボタンです。主要な行動と副次的な行動で見た目を分け、その対応を全画面で守ってください。逆に、同じ見た目のボタンが画面によって違う役割を持つと、誤操作が起きます。

ボタンの色の決め方はCVボタンの色で成果は変わるのか｜アクセントカラーの決め方を参照してください。

揃えなくてよい範囲もある

一貫性を追求しすぎると、画面ごとの目的に合わせた最適化ができなくなります。

• トップページと下層ページで、情報の密度が違ってよい
• キャンペーンページは、通常ページと構成が違ってよい
• コンテンツの内容に応じて、レイアウトが変わってよい
• ただし、ボタンやリンクの見た目は共通にする
• ヘッダーとフッターは全ページで統一する

操作に関わる要素は揃え、内容の見せ方は目的に合わせる。この線引きが実務的です。すべての画面を同じテンプレートに押し込むと、伝えるべきことが伝わらなくなります。

崩れるのは運用の途中

一貫性は公開時点では保たれていることが多く、運用の中で崩れます。

最も多い原因は、追加するときに既存を確認しないことです。新しいページを作るとき、既存のどのページを参考にするかを決めておくと崩れにくくなります。

崩れを検知する方法

崩れは徐々に進むため、意識的に確認しないと気づけません。

1. 主要なページのボタンを並べて比較する
2. 同じ役割の要素が、同じ形になっているか確認する
3. 見出しのサイズが階層ごとに揃っているか確認する
4. スマートフォンでも同じ確認を行う
5. 崩れている箇所を一覧にし、修正の優先度をつける

画面のキャプチャを並べて比較すると、崩れが見つかりやすくなります。1ページずつ見ていると、それぞれは自然に見えてしまいます。

復旧は使用頻度の高い要素から

すべてを一度に直すのは現実的でないため、影響の大きい要素から着手してください。

直した後は、同じ崩れが再発しない仕組みを作ってください。規定を文書化し、追加時に参照する手順を決めることが必要です。仕組み化の方法はデザインシステムとは？導入するメリットと作り方の基本を参照してください。

規模によって必要な仕組みが違う

一貫性を保つ仕組みは、サイトの規模と更新頻度によって変わります。

小規模なサイトで大がかりな仕組みを作ると、運用の負担が見合いません。規模に応じた方法を選んでください。

工程全体の中で見る

この工程の前後には、情報の分類と構造の設計があります。全体の流れは情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。

よくある失敗

すべての画面を同じテンプレートに押し込む

画面ごとの目的に合わせた最適化ができなくなります。操作要素だけ揃えてください。

追加時に既存を確認しない

崩れの最も多い原因です。参考にする既存ページを決めておいてください。

キャンペーン用の要素を撤去しない

臨時のものが残り続けると、全体の一貫性が崩れます。終了時に撤去してください。

1ページずつ確認する

それぞれは自然に見えてしまいます。並べて比較してください。

直すだけで仕組みを作らない

同じ崩れが再発します。規定と手順を残してください。

よくある質問

一貫性とデザインの独自性は両立しますか

両立します。一貫性は要素の対応関係を固定することであり、どのようなデザインにするかは別の問題です。独自性のあるデザインでも、その中で法則が守られていれば一貫性は保たれます。

複数のサービスを持つ場合はどうすべきですか

サービスごとに分けるか、共通にするかを決めてください。利用者が同じであれば共通にするほうが学習の再利用が効きます。対象が異なる場合は、分けたほうが目的に合わせられます。

既存サイトの崩れが大きい場合は作り直すべきですか

崩れの範囲によります。成果に直結する要素だけ揃えることで改善する場合もあります。全面的な作り直しの判断は、他の要因も含めて検討してください。判断はコーポレートサイトリニューアルの進め方｜失敗しない依頼手順を参照してください。

CMSで編集する場合、どう保てばよいですか

編集者が使える書式を制限するのが確実です。自由に装飾できる状態にすると、編集者ごとに書式が変わります。運用設計は更新しやすい企業サイトの作り方｜CMS選定と運用設計のポイントを参照してください。

一貫性が成果に効いたことをどう測りますか

直接測るのは困難です。ただし、ボタンの見た目を統一した後にクリック率が変化するかは確認できます。また、迷いによる離脱はヒートマップや行動データで間接的に把握できます。

まとめ

UIの一貫性は見た目の問題ではなく、判断にかかる時間の問題です。同じ意味の要素が同じ形をしていれば、利用者は最初の数画面で学習した法則を以降ずっと再利用できます。形が違えば、そのたびに何であるかを判断する必要があり、その差は画面遷移のたびに積み重なって離脱につながります。

揃えるべきなのは、すべてを同じにすることではなく、意味と形の対応関係を固定することです。ボタン、リンク、フォームといった操作に関わる要素は全画面で共通にし、コンテンツの見せ方は画面の目的に合わせて構いません。すべての画面を同じテンプレートに押し込むと、伝えるべきことが伝わらなくなります。

そして一貫性は公開時点では保たれていることが多く、運用の中で崩れていきます。最も多い原因は、ページを追加するときに既存を確認しないことです。新しいページを作る際に参考とする既存ページを決めておくだけでも、崩れは大きく減ります。復旧に着手する場合は、問い合わせや購入のボタンといった成果に直結する要素から優先してください。

当社ではデザイン制作において、既存サイトの点検と規定づくりをご相談いただけます。運用設計を含めた検討はホームページ制作とあわせてご相談ください。

ユーザビリティの10原則は、ヤコブ・ニールセンが1990年代に提唱した評価の枠組みです。30年近く経った今も使われ続けているのは、技術ではなく人の認知の仕組みに基づいているためです。画面の見た目が変わっても、人が迷う理由は変わりません。

この枠組みの実務的な価値は、専門家でなくても自社サイトを一定の観点で点検できることにあります。「なんとなく使いにくい」を、具体的な項目に分解できます。

この記事では、10の原則がWebサイトで何を指すのか、どう確認するのか、違反すると何が起きるのかを整理します。

状態の可視化と、現実世界との一致

最初の2つは、今どうなっているかが分かること、そして言葉が通じることです。

フォーム送信後に何も表示されないサイトは、いまだに存在します。利用者は送信できたか分からず、二重に送信するか離脱します。また、社内でしか通じない言葉をメニューに使うと、探している人が見つけられません。

フォームの設計は入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計を参照してください。

利用者の自由と、一貫性

次の2つは、やり直せること、そして同じものが同じ意味で使われることです。

入力途中で前の画面に戻れないフォームは、間違いに気づいても直せません。また、ページごとにボタンの色や形が違うと、それがボタンだと認識するまでに時間がかかります。

一貫性の設計はデザインシステムとは？導入するメリットと作り方の基本を参照してください。

エラーの防止と、記憶に頼らせない設計

この2つは、間違えさせないこと、そして覚えさせないことです。

電話番号の入力でハイフンの有無を指定しながら、入力欄が自由記述のままという設計は、エラーを誘発します。形式を限定するか、どちらでも受け付けるようにしてください。

また、確認画面で内容を修正しようとしたときに、前の画面の入力が消えるのは記憶に頼らせる設計です。

柔軟性と、無駄のないデザイン

この2つは、慣れた人が速く使えること、そして余計なものがないことです。

最小限とは、装飾を削ることではなく、その画面の目的に不要な情報を置かないことです。すべてを目立たせようとすると、何も目立たなくなります。

情報量の設計は余白のデザインが与える印象｜詰め込みが読みにくさを生む理由も参考になります。

エラーからの回復と、ヘルプ

最後の2つは、間違えたときに直せること、そして困ったときに助けがあることです。

「入力内容に誤りがあります」とだけ表示されるフォームは、どこを直せばよいか分かりません。該当箇所を示し、どう直せばよいかを書いてください。

実際に誤った入力をして、表示されるメッセージを確認する作業を推奨します。開発時に想定した内容と、実際の表示が違うことがあります。

すべてを満たす必要はない

10原則は点検の観点であり、達成すべき目標ではありません。

• サイトの目的によって、重要度の高い原則は変わる
• 問い合わせが主目的なら、エラー関連の原則が重い
• 情報提供が主目的なら、一貫性と最小限の原則が重い
• すべてを完璧にしようとすると、工数が見合わない
• 違反していても実害がない箇所は、優先度を下げてよい

点検した結果、修正の優先順位をつけてください。成果に影響する箇所から着手するのが基本です。

点検の後は実際の利用で検証する

この枠組みによる点検は問題の候補を洗い出すものであり、実際に問題かどうかは利用で確認します。

点検で見つかった候補のうち、実際に離脱が起きている箇所を優先してください。検証の方法はユーザビリティテストのやり方｜低コストで始める実践手順、離脱箇所の把握はヒートマップ分析のやり方｜何を見て、どこを直すのかを参照してください。

工程全体の中で見る

この工程の前後には、情報の分類と構造の設計があります。全体の流れは情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。

よくある失敗

すべての原則を完璧に満たそうとする

工数が見合いません。成果に影響する箇所から優先してください。

エラーメッセージを確認しない

実際に誤入力して表示を確認してください。想定と違うことがあります。

最小限を装飾の削減と誤解する

目的に不要な情報を置かないことです。必要な情報まで削ると判断できなくなります。

社内用語をそのままメニューに使う

探している人が見つけられません。利用者が使う言葉に置き換えてください。

点検だけで終わらせる

問題の候補が出るだけです。実際の利用や行動データで確認してください。

よくある質問

誰が点検すべきですか

複数名で行うことを推奨します。1人だと見落としが生じ、また自社サイトに慣れた人は迷わないため問題に気づけません。可能であれば、そのサイトを初めて見る人を含めてください。

どのくらいの頻度で行うべきですか

大きな変更を行った後と、定期的に年1回程度が目安です。ページを追加し続けると、一貫性が崩れていくためです。

スマートフォンでも同じ観点でよいですか

同じ観点ですが、確認すべき箇所が変わります。特にタップ領域の大きさ、入力のしやすさ、戻る操作の挙動は、スマートフォン特有の確認点になります。

競合サイトの点検にも使えますか

使えます。同じ観点で比較すると、自社の相対的な位置が分かります。ただし競合が優れている点をそのまま真似ると、自社の目的に合わないことがあります。分析の考え方は競合サイト分析のやり方｜何を見て、どう自社の判断に変えるかを参照してください。

この原則は古くないですか

提唱されたのは1990年代ですが、人の認知の仕組みに基づいているため、技術が変わっても有効性は保たれています。むしろ画面の形式が多様化した現在のほうが、共通の観点として使いやすい面があります。

まとめ

ユーザビリティの10原則は、30年近く前に提唱されたものですが今も使われ続けています。技術ではなく人の認知の仕組みに基づいているため、画面の見た目が変わっても人が迷う理由は変わらないからです。この枠組みの実務的な価値は、専門家でなくても自社サイトを一定の観点で点検できることにあります。

点検を通じて「なんとなく使いにくい」を具体的な項目に分解できます。フォーム送信後の状態が分からない、社内用語がメニューに使われている、エラーメッセージが場所を示していない。こうした問題は、指摘されれば誰でも理解できますが、観点がないと気づけません。

ただし10原則はすべてを満たすべき目標ではなく、点検の観点です。サイトの目的によって重要度の高い原則は変わり、違反していても実害がない箇所は優先度を下げて構いません。また点検で出るのは問題の候補であり、実際に問題かどうかは利用者の操作や行動データで確認する必要があります。離脱が実際に起きている箇所から優先して直してください。

当社ではホームページ制作において、既存サイトの点検と改善をご相談いただけます。デザイン面の見直しはデザイン制作とあわせてご検討ください。

UXデザインの5段階モデルは、体験の設計を5つの層に分けて考える枠組みです。理論として紹介されることが多いものですが、実務での価値は別のところにあります。制作で手戻りが起きる原因を、層の言葉で説明できることです。

サイト制作で「見た目の話をしていたはずが、根本から作り直しになった」という事態が起きます。これは下の層が決まらないまま上の層を作ったときに必ず起きる現象です。色やレイアウトを議論しているつもりが、実は誰に何を提供するかが決まっていなかった、という構造です。

この記事では、5つの層の内容、下から決めるべき理由、各段階で発注側が確認すべきこと、そして手戻りを防ぐ進め方を整理します。

5つの層は下から順に決める

モデルは抽象的な層から具体的な層へ、5段階で構成されます。

上の層は下の層に依存します。戦略が変われば要件が変わり、要件が変われば構造が変わります。逆に、表層だけを変えても下の層には影響しません。

構造の設計については情報設計（IA）とは？わかりやすいサイト構成の作り方、骨格についてはワイヤーフレームの作り方｜構成を固めてからデザインに進むを参照してください。

手戻りは下の層が未決定のまま上を作ると起きる

制作の途中で大きな変更が発生する場合、ほぼ例外なく下の層が固まっていません。

下にいくほど、修正の影響範囲が大きくなります。表層の修正は1画面で済みますが、戦略の変更は全工程に及びます。だからこそ、下の層ほど早い段階で合意しておく必要があります。

見た目の議論に見えて、実は下の層の問題

会議で出る意見の多くは表層の言葉で語られますが、本当の論点が下の層にあることがあります。

• 「もっと信頼感を出したい」→ 誰に何を信頼してほしいのか（戦略）
• 「情報が多くて見づらい」→ 何を載せると決めたのか（要件）
• 「どこに何があるか分からない」→ 分類の基準は何か（構造）
• 「このボタンが目立たない」→ この画面の目的は何か（骨格）
• 「色が好みでない」→ 表層の問題

最後の1つ以外は、表層をいじっても解決しません。意見が出たときに、それがどの層の話かを判別できると、議論が空回りしなくなります。

各段階で発注側が用意すべき情報

制作会社に任せきりにできない部分があります。特に下の2層は、事業側でしか決められません。

戦略の層を制作会社に丸投げすると、後から認識のずれが表面化します。誰に何を届けたいかは、事業の判断です。制作会社ができるのは、それを引き出して整理することまでです。

制作の進め方はサイト制作の進め方｜発注から公開までの工程と発注者側の作業を参照してください。

各層での確認事項

進行中に各段階で何を確認すれば手戻りを防げるかを整理します。

1. 戦略：このサイトで達成したいことを、数字で言えるか
2. 要件：載せる情報の優先順位が決まっているか
3. 構造：初めて訪れた人が、目的の情報にたどり着けるか
4. 骨格：各画面で最も見てほしい要素が明確か
5. 表層：ブランドとして一貫しているか

各段階で合意してから次へ進んでください。並行して進めると、後の工程で判明した問題が前の工程に戻り、作業が二重になります。

小規模なサイトでも順序は変わらない

ページ数が少ない場合でも、層の順序は同じです。ただし各層にかける時間は変わります。

小規模だから戦略を省いてよいわけではありません。むしろページ数が少ないほど、1ページに何を載せるかの判断が重要になります。載せられる量に限りがあるためです。

よくある失敗

デザインカンプから議論を始める

表層の話をしているつもりで、実は戦略が決まっていない状態が露呈します。順序を守ってください。

戦略の層を制作会社に任せる

誰に何を届けたいかは事業の判断です。制作側ができるのは整理の支援までです。

各層の合意を取らずに並行して進める

後の工程で判明した問題が前に戻り、作業が二重になります。

意見がどの層の話か判別しない

表層をいじっても解決しない問題を、表層で解決しようとすることになります。

小規模だからと戦略を省く

載せられる量に限りがあるほど、何を載せるかの判断は重要になります。

よくある質問

すべての層を厳密に文書化する必要がありますか

規模によります。小規模なサイトで大量の文書を作ると、作業が重くなります。重要なのは、各層で決めるべきことが決まっていて、関係者が同じ認識を持っていることです。形式は問いません。

途中で戦略が変わった場合はどうすべきですか

上の層をすべて見直す必要があります。影響範囲を明示したうえで、スケジュールと費用の再調整を行ってください。戦略の変更を表層の修正で吸収しようとすると、一貫性のないものになります。

リニューアルの場合も同じ順序ですか

同じです。既存サイトがあると表層から議論を始めがちですが、なぜリニューアルするのかという戦略の層から確認してください。手順はコーポレートサイトリニューアルの進め方｜失敗しない依頼手順を参照してください。

この5層とワイヤーフレームの関係は何ですか

ワイヤーフレームは骨格の層の成果物です。構造が決まっていない状態でワイヤーフレームを作ると、画面ごとの配置は決まっても全体の遷移が破綻します。

ユーザー調査はどの層で行いますか

戦略の層で行うのが基本ですが、各層で目的が変わります。戦略では課題の把握、構造では分類の妥当性、骨格では操作の確認です。手法の使い分けはUXリサーチの手法の使い分け｜知りたいことが決まれば、方法は決まるを参照してください。

まとめ

UXデザインの5段階モデルは、体験の設計を戦略、要件、構造、骨格、表層という5つの層に分ける枠組みです。理論としてよりも、制作で手戻りが起きる原因を説明できる道具として使うと実務的な価値があります。上の層は下の層に依存するため、下が決まらないまま上を作ると必ず作り直しが発生します。

重要なのは、下の層ほど修正の影響範囲が大きいという性質です。色を変えるのは1画面の修正で済みますが、誰に何を届けるかという戦略が変われば全工程に及びます。だからこそ下の層ほど早い段階で合意しておく必要があり、各段階で合意してから次へ進む進め方が結果的に速くなります。

また、会議で出る意見の多くは表層の言葉で語られますが、本当の論点が下の層にあることがあります。「もっと信頼感を出したい」は誰に何を信頼してほしいかという戦略の問題であり、「情報が多くて見づらい」は何を載せると決めたかという要件の問題です。意見がどの層の話かを判別できると、表層をいじっても解決しない議論に時間を使わずに済みます。

当社ではホームページ制作において、戦略の整理から表層のデザインまで一貫してご相談いただけます。進め方を検討したい場合はお問い合わせよりご連絡ください。