第10講
悪いレイアウトを言葉で見分ける
見た目の問題は「好み」だけではありません。煩雑、気が散る、破綻、不統一といった状態は、利用者の理解や信頼に影響します。
煩雑に見える
煩雑とは、情報が多すぎる、余白が少ない、色や文字サイズが多すぎる、配置がばらばらである状態です。
読む前から疲れる、どこから見ればよいか分からない、重要な情報が埋もれる、という印象になります。
気が散る
気が散るレイアウトとは、本来注目すべき情報以外が過剰に目立っている状態です。動く画像、点滅、強すぎる色、装飾の多い背景、ボタンの多すぎる画面などが原因になります。
破綻している
破綻しているとは、情報が重なって読めない、ボタンが画面外にはみ出す、画像が巨大すぎる、横スクロールが出る、カードの高さが極端にばらばら、などの状態です。
視覚サンプル:破綻している配置
大きすぎる見出し
別の説明が重なっている
小さすぎるボタン
右にはみ出した領域
読み上げ用説明:複数の部品が重なり、右側にはみ出しています。見える人には、未完成、故障、不安定という印象を与えます。
不統一
不統一とは、ページごと、部品ごとに、色、余白、ボタン形状、見出しサイズ、カードの形がばらばらな状態です。
不統一な画面は、利用者に「どこまでが同じ種類の情報か」「どれが押せるのか」「このサイトはきちんと管理されているのか」という不安を与えます。
見た目の評価語辞典
- 詰まっている
- 文字や部品同士の距離が近すぎ、窮屈に見える状態。
- 間延びしている
- 余白が広すぎ、情報同士の関係が弱く見える状態。
- 左寄りに見える
- 全体の中心から外れて、片側に偏っているように見える状態。
- 浮いている
- 特定の部品だけ、色、サイズ、位置が周囲と合っていない状態。
- 重い
- 黒や濃い色、大きな塊、余白不足などにより、圧迫感がある状態。
- 軽い
- 余白があり、色や線が控えめで、圧迫感が少ない状態。良い意味でも、頼りない意味でも使われます。
- 古く見える
- 影やグラデーションが強すぎる、余白が古い設計、文字詰めが荒いなど、現在の一般的なWeb表現から外れて見える状態。
確認課題
課題見える人に「このページで違和感がある箇所を、詰まり、間延び、左寄り、浮いている、不統一、破綻のどれかで表現してください」と依頼してください。