レイアウトの改善とフィードバックとは?「見づらい」の原因を見つけて直す方法

レイアウトの改善とフィードバックの基本

まずは、レイアウトの改善とフィードバックとは何を指すのか、そしてなぜ必要なのかを押さえましょう。

レイアウトの改善とフィードバックとは

レイアウトの改善とフィードバックとは、自分で作ったレイアウトを客観的に見直し、「見づらい」という感覚を具体的な配置の問題に置き換えて直していく取り組みのことです。

レイアウトとは、文字・画像・ボタンなどの要素を、画面のどこに、どんな大きさで、どんな順番で置くかを決めることです。

フィードバックとは、自分の作ったものに対して、ほかの人から意見や感想をもらうことです。

つまりこの取り組みは、自分での見直しと人の目を組み合わせて、「見づらい」の原因を見つけて直していくものです。

なぜ改善とフィードバックが必要なのか

改善とフィードバックが必要なのは、作った本人ほど、自分のレイアウトの問題に気づきにくいからです。

作っている間に何度も同じ画面を見ていると目が慣れてしまい、初めて見る人が迷う場所が分からなくなります。

また、作った本人は「どこに何があるか」を知っているので、ボタンが目立っていなくても、自分では迷わず見つけられてしまいます。

さらに、レイアウトの問題は「探しやすさ」「視線の流れ」「スマホでの見え方」など観点がいくつもあるため、感覚だけで見直すと確認漏れが起きやすくなります。

だからこそ、見直す観点を決めておくことと、第三者の目を借りることの両方が大切なのです。

優れたデザインを分解して真似る練習(レイアウトの分析・模写とは?)が「お手本から学ぶ」段階だとすれば、この記事で扱うのは「自分のレイアウトを直す」段階です。

レイアウトを改善する方法

レイアウトの改善は、「違和感をレイアウトの問題に置き換える→問題ごとに直す→チェックリストで確かめる→人に見てもらう→直す前と比べる」という流れで進めます。

まずは、よくある違和感と、その原因になりやすいレイアウトの問題の対応を見てみましょう。

「見づらい」をレイアウトの問題に置き換える

改善の第一歩は、「なんとなく見づらい」という感覚を、どのレイアウトの問題が原因なのかに置き換えることです。

原因が分からないまま色を変えたり飾りを足したりすると、問題が解決しないどころか、かえって情報が増えて見づらくなることがあるからです。

感じる違和感	疑うべきレイアウトの問題	直し方の方向
どれとどれがセットなのか分からない	グループが不明確	関係のある要素を近づけ、別のグループとは離す
なんとなくガタガタして雑に見える	要素が揃っていない	要素の端を、少ない本数の線にそろえる
どこから見ればいいか迷う	主役が埋もれている	一番伝えたい要素を1つ決め、大きさや位置で差をつける
スマホで見ると読みにくい	スマホでレイアウトが崩れている	横並びを縦並びに組み替える
ページごとに印象が違って落ち着かない	同じ役割の要素の見た目がそろっていない	見出しやボタンなど、同じ役割の要素は同じ形・同じ位置にする

ここからは、表の上から4つの問題について、見本で直し方を見ていきます(5つめの、同じ役割の要素の見た目をそろえる方法はレイアウトの一貫性とは?で解説しています)。

よくある問題1:グループが不明確

「どれとどれがセットなのか分からない」と感じたら、グループが不明確になっていないかを疑いましょう。

人は、近くにあるもの同士をひとまとまりとして見る傾向があるため、すべての要素を同じ間隔で並べると、どこからどこまでが1つの情報なのかが伝わらなくなります。

NGの見本では、2つめの商品名と1つめの商品の説明文が同じ間隔で並んでいるため、商品の区切りが見えません。

OKの見本では、1つの商品の情報を詰めて、商品同士の間を広げただけで、2つの商品が別々のまとまりとして読めるようになります。

この「近くにあるものはセットに見える」という性質は近接の原則と呼ばれ、近接の原則とは?で詳しく解説しています。

よくある問題2:要素が揃っていない

「なんとなくガタガタして雑に見える」と感じたら、要素の端がそろっているかを確かめましょう。

見出しは中央、本文は少しずつずれた位置、ボタンは右端、というように要素ごとに基準がばらばらだと、見る人は無意識に「整っていない」と感じます。

NGの見本は、内容は同じなのに、揃えの基準が4つもあるため、まとまりのない印象になっています。

OKの見本では、すべての要素の左端を同じ線にそろえたことで、視線が上から下へまっすぐ流れます。

直すときは、「この画面には、そろえる線が何本あるか」を数え、なるべく少ない本数に減らすのがコツです(揃えの考え方は整列の原則とは?で解説しています)。

文章を左揃えにするか中央揃えにするかの判断は、文字の揃え方の記事を参考にしてください。

よくある問題3:主役が埋もれている

「どこから見ればいいか迷う」と感じたら、主役が埋もれていないかを疑いましょう。

主役とは、そのページやセクションで一番伝えたい要素のことで、ほかの要素と同じ大きさ・同じ扱いで並んでいると、見る人はどれが大事なのか判断できません(主役の決め方は主役と脇役とは?で解説しています)。

NGの見本では、一番伝えたいはずのキャッチコピー(サービスの魅力をひと目で伝える短い言葉)が、「お知らせ」や「料金」と同じ大きさの箱に並んでいるため、目に留まりません。

OKの見本では、キャッチコピーとボタンを大きくして先に目に入る位置に置き、ほかの項目は小さくまとめたことで、見る順番がはっきりしました(申し込みボタンをページのどこに置くかはCTAの配置とは?で解説しています)。

主役を目立たせたいときに、色を派手にしたり飾りを足したりする前に、まず大きさと位置で差がついているかを確かめましょう。

位置で差をつけるとは、主役を画面の上の方や、見る人の目が最初に向かいやすい左上・中央に置き、ほかの要素より先に目に入るようにすることです。

さらに、主役のすぐ周りにはほかの要素を置かずに空き(余白)をとると、主役だけがぽつんと浮き上がって見えます。

置く位置による優先順位は重要な情報はどこに置く?で解説しています。

大きさの差で情報の重要度を伝える考え方は情報の階層、目立たせたい要素の周りを空ける考え方は要素を目立たせる余白とは?で解説しています。

よくある問題4:スマホでレイアウトが崩れている

パソコンの画面では問題がなくても、スマートフォンで見ると読みにくくなっていないかを必ず確かめましょう。

パソコン向けに横に並べた要素を、そのまま幅の狭いスマホの画面に押し込むと、1行に入る文字が極端に少なくなり、読みにくくなるからです。

NGの見本では、3つの料金プランを横に並べたまま縮めたため、文字が細かく折り返され、プランの違いを読み取るのに苦労します。

OKの見本では、プランを縦に1列で並べ直したことで、それぞれの内容を落ち着いて読めるようになりました(スマホで列を縦に積む考え方は2カラムとは?、スマホの画面から先に並び順を決める進め方はモバイルファーストとは?で解説しています)。

スマホでの見え方は、Google Chromeの検証ツール(ページを右クリックして「検証」で開ける機能)にある「デバイス ツールバーの切り替え」ボタンで、スマホの画面幅を再現して確かめられます(Device Mode でモバイル デバイスをシミュレートする – Chrome DevTools)。

検証ツールを開くと、画面の横や下にコードがたくさん並んだ欄が出てきますが、コードは読んだり触ったりしなくて大丈夫です。

検証ツールの欄の上部にある、スマホとタブレットが重なった形のアイコンが「デバイス ツールバーの切り替え」ボタンで、これを押すとページがスマホの画面幅で表示されます。

確認が終わったら、もう一度同じアイコンを押すか、検証ツールの欄を閉じれば元の表示に戻ります。

ただし、この機能は見え方を近づけて再現するもので、実際のスマホそのものではないと公式ドキュメントにも書かれているので、最後は自分のスマホで開いて確かめましょう。

スマホとパソコンで余白をどう変えるかはPCとスマホの余白、文字の大きさをどう変えるかはレスポンシブタイポグラフィの記事で解説しています。

チェックリストで1項目ずつ確認する

問題ごとの直し方が分かったら、チェックリストを使って、ページ全体を1項目ずつ見直しましょう。

感覚だけで全体を眺めると、気になった箇所ばかり直して、スマホでの見え方のような確認を忘れがちだからです。

• 情報が探しやすいか
  知りたい情報(料金・問い合わせ先など)が、どこにあるかすぐ分かるか。
• 視線の流れが自然か
  上から下、左から右へ、伝えたい順番どおりに目が動くか。
• グループが分かるか
  セットの要素は近く、別の話題は離れているか。
• 揃えるべきものが揃っているか
  要素の端が、少ない本数の線にそろっているか。
• 主役が目立っているか
  一番伝えたい要素が、最初に目に入るか。
• 詰まりすぎていないか
  要素同士がくっつき、息苦しく見える場所はないか。
• スマホでも成立するか
  実際のスマホで開いて、文字が読めるか、ボタンが押しやすいか。

チェックするときは、写真や文章を灰色の箱に置き換えたつもりで見るのもおすすめです。

スクリーンショットを撮り、要素の上に四角を描いて塗りつぶしてみると、中身に気を取られず、配置とまとまりだけを確認できます。

文字や写真が見えていると、つい書いてある内容や写真の良し悪しに目が向き、配置のずれには気づきにくくなります。

灰色の四角で隠して「ただの箱の集まり」として見ると、箱同士の間隔や端のそろい方だけに集中できるのです。

見る人の目を、伝えたい順番どおりに動かす工夫を視線誘導と呼び、視線の流れの確かめ方は視線誘導とは?で詳しく解説しています。

「詰まりすぎていないか」のような余白の違和感の直し方は、余白の改善とフィードバックとは?で解説しています。

第三者からフィードバックをもらう

自分でのチェックが終わったら、ほかの人に見てもらいましょう。

フィードバックを有効に活かすコツは、「どう?」と感想を聞くのではなく、レイアウトの問題につながる具体的な質問をすることです。

「見やすいと思う」「なんか微妙」のような感想だけでは、どこを直せばよいかにつながらないからです。

質問の例	分かること
最初に目に入ったのはどこ?	主役が埋もれていないか
料金(問い合わせ先など)はどこにあると思う?探してみて	情報が探しやすいか
この文章とこの画像は、セットに見える?	グループが伝わっているか
スマホで見て、読みにくい・押しにくい場所はある?	スマホで崩れていないか

特に、「〇〇を探してみて」と頼んで、相手がどこを見て迷ったかを横で観察する方法は、レイアウトの問題を見つけるのに役立ちます。

相手が迷った場所は、作った本人には見えていなかった「探しにくさ」そのものだからです。

相手から「なんか見づらい」という答えが返ってきたら、「どのあたりで?」「何を探していたとき?」と聞き返して、配置のどこがそう感じさせたのかを掘り下げましょう。

具体的な場所が分かれば、記事の前半で紹介した違和感と問題の対応表と照らし合わせて、どの問題にあたるのかを判断できます。

直したら、直す前と並べて比べる

直したら、直す前のレイアウトと並べて比べ、本当に良くなったかを確かめましょう。

1つのレイアウトだけを見ていると良し悪しを判断しにくいですが、並べると違いがはっきり分かるからです。

このとき、1回に直す問題は1つにしぼると、どの直しが効いたのかが分かります。

グループと揃えと主役を一度に直してしまうと、良くなった理由が分からず、次の制作に活かせません。

直した内容は「料金表はスマホで縦並びにした」「ボタンの左端を本文にそろえた」のようにメモしておくと、自分の癖や、よく使う直し方が見えてきます。

複数の案を実際の利用者に見せて、クリックされた数で比べる方法(A/Bテスト)は、文字組みの改善とフィードバックとは?で紹介しています。

実践のポイント

レイアウトの改善とフィードバックで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• フィードバックを「自分を否定された」と受け止めてしまい、改善に活かせないことがあります。
  フィードバックは、あなた自身ではなくレイアウトに向けられた、より良くするための情報です。
  まずは受け取り、取り入れるかどうかは後で落ち着いて判断しましょう。
• チェックする観点を決めず、感覚だけで見直してしまうことがあります。
  特にスマホでの見え方は確認から漏れやすいので、チェックリストに入れておきましょう。
• 主役が埋もれているのに、色を派手にしたり飾りを足したりして解決しようとすることがあります。
  要素が増えるとさらに見づらくなることもあるので、先に大きさ・位置・まとまりを見直しましょう。
• 「見づらい」と言われた箇所だけを直して、ページ全体の揃えやまとまりが崩れてしまうことがあります。
  直したあとは、もう一度ページ全体をチェックリストで確かめましょう。

よくある質問

• Q. どの問題から直せばいい?
  A. 大きな構造から細かい部分へ、の順番がおすすめです。
  ①主役とグループ(何を一番伝え、何と何がセットか、どの順番で並べるか)を決める
  ②要素の端をそろえる
  ③スマホでの見え方を確かめる
  の順に進めましょう。
  大きな構造を後から変えると、細かく整えた部分をやり直すことになるからです。
• Q. フィードバックをくれる人が周りにいない。
  A. まずはこの記事のチェックリストで、自分で見直すことから始めましょう。
  一晩置いてから見直すと、初めて見る人に近い目で確認できます。
  家族や友人など、デザインに詳しくない人に「〇〇を探してみて」と頼むだけでも、十分なフィードバックになります。
• Q. 人によって意見がバラバラで、どれに従えばいいか分からない。
  A. そのページの目的とターゲットに立ち返って判断しましょう。
  「誰に、何を一番伝えたいか」に照らして、その目的に近づく意見を優先します。
  複数の人が同じ場所で迷っている場合は、そこに問題がある可能性が高いと考えましょう。

まとめ

レイアウトの改善とフィードバックとは、「見づらい」という感覚を具体的な配置の問題に置き換え、自分の見直しと人の目を組み合わせてレイアウトを良くしていく取り組みです。

グループが不明確・揃っていない・主役が埋もれている・スマホで崩れている、といった問題に当てはめて直し、チェックリストと具体的な質問で確かめ、直す前と並べて比べることがポイントです。

まずは最近作ったページやバナーを1つ選び、この記事のチェックリストを上から順に当てはめて、引っかかった項目を1つだけ直してみてください。