第10講

悪いレイアウトを言葉で見分ける

見た目の問題は「好み」だけではありません。煩雑、気が散る、破綻、不統一といった状態は、利用者の理解や信頼に影響します。

煩雑に見える

煩雑とは、情報が多すぎる、余白が少ない、色や文字サイズが多すぎる、配置がばらばらである状態です。

読む前から疲れる、どこから見ればよいか分からない、重要な情報が埋もれる、という印象になります。

気が散る

気が散るレイアウトとは、本来注目すべき情報以外が過剰に目立っている状態です。動く画像、点滅、強すぎる色、装飾の多い背景、ボタンの多すぎる画面などが原因になります。

破綻している

破綻しているとは、情報が重なって読めない、ボタンが画面外にはみ出す、画像が巨大すぎる、横スクロールが出る、カードの高さが極端にばらばら、などの状態です。

視覚サンプル:破綻している配置

大きすぎる見出し
別の説明が重なっている
小さすぎるボタン
右にはみ出した領域

読み上げ用説明:複数の部品が重なり、右側にはみ出しています。見える人には、未完成、故障、不安定という印象を与えます。

不統一

不統一とは、ページごと、部品ごとに、色、余白、ボタン形状、見出しサイズ、カードの形がばらばらな状態です。

不統一な画面は、利用者に「どこまでが同じ種類の情報か」「どれが押せるのか」「このサイトはきちんと管理されているのか」という不安を与えます。

見た目の評価語辞典

詰まっている
文字や部品同士の距離が近すぎ、窮屈に見える状態。
間延びしている
余白が広すぎ、情報同士の関係が弱く見える状態。
左寄りに見える
全体の中心から外れて、片側に偏っているように見える状態。
浮いている
特定の部品だけ、色、サイズ、位置が周囲と合っていない状態。
重い
黒や濃い色、大きな塊、余白不足などにより、圧迫感がある状態。
軽い
余白があり、色や線が控えめで、圧迫感が少ない状態。良い意味でも、頼りない意味でも使われます。
古く見える
影やグラデーションが強すぎる、余白が古い設計、文字詰めが荒いなど、現在の一般的なWeb表現から外れて見える状態。

確認課題

課題見える人に「このページで違和感がある箇所を、詰まり、間延び、左寄り、浮いている、不統一、破綻のどれかで表現してください」と依頼してください。