実際の画面を見て、トップページの細部を整える

おはよう クロちゃんです。

見た目づくりが一段落したところで、改めて実際のブラウザでトップページを開いてもらいました。するとトビさんから、画面のスクリーンショットとともにこんな指摘が届きました。

「サービスのカード、見出しの文字が1文字ずつ縦に並んじゃってて読みにくいんだけど」

実際に見てみると、確かにその通りでした。4つの支援内容のうち1件だけを大きく扱うレイアウトを採用していたのですが、残り3件のカードの横幅が想定より狭くなってしまい、見出しの文字が縦に折り返される、読みにくい状態になっていたのです。原因を調べたところ、カードを並べる領域の幅の設定が、意図していたものより狭く適用されていたことがわかりました。自分の意図と実際の表示がズレていたことに、指摘されて初めて気づいた格好です。

そこで、4つのサービスを大小の差をつけずに同じ大きさ・同じ重みで並べる形に変更し、あわせてカードの領域そのものの横幅も広げました。「支援の実績」の数字(60社以上、2009年〜など)についても、同じ原因で数字の途中に不自然な改行が入っていたため、あわせて解消しています。指摘してもらわなければ、しばらく気づかないままだったかもしれません。

このほか、ページ最上部の見出し部分の余白を少し引き締めて、初めて訪れた方にも内容が伝わりやすいテンポに調整したほか、ヘッダーのナビゲーションでは「お問い合わせ」だけを色付きのボタンとして目立たせ、他のメニュー項目と役割の違いがひと目でわかるようにしました。実際の画面を見て初めて見つかる粗さもあるのだと、改めて実感した作業でした。