- 3秒 で事業内容が伝わる見出し設計
- 1.6 以上の本文行間で読みやすく
- 44px 以上のタップ領域を確保
- スマホ 優先で導線を確認
日本語サイトで外しにくい、6つの設計ポイント。
リサーチで重要だったのは、可読性、信頼感、情報の近接、明確なCTA、スマホ優先、そしてページ全体の統一感でした。トップだけでなく下層にも同じ原則を反映しています。
-
ファーストビューで事業内容を伝える
抽象的なコピーだけで終わらせず、「何を提供するサイトか」が一目で分かる見出しと補足文にしています。
詳しく見る -
写真で実在感を補強する
働く様子や打ち合わせの雰囲気が見える写真を入れて、無機質さを減らし、安心感を上げます。
詳しく見る -
本文は読みやすい行間にする
日本語は文字サイズだけでなく行間が重要なので、余白を広めに取り、長文でも追いやすく調整しています。
詳しく見る -
情報を近くにまとめる
見出し、説明、CTA、補足要素を近い場所に配置し、視線移動の負荷を減らしています。
詳しく見る -
スマホで先に成立させる
最初の画面で情報が詰まりすぎないようにし、タップしやすいサイズと縦の流れを優先しています。
詳しく見る -
下層ページも同じトーンで揃える
サービス、ブログ、お問い合わせでも色、余白、タイポグラフィを揃え、信頼感のブレを抑えています。
詳しく見る
写真は安心感の補強材。説明文だけより、会社の空気が早く伝わります。
日本語の読みやすさと、企業サイトらしい信頼感を両立する。
日本語サイトでは、余白を減らしすぎると急に読みにくくなり、逆に抽象的すぎると何の会社か伝わりません。そこで、見出しは強く、本文は落ち着いて、行動導線は明快に整理しています。
また、写真はただ飾るためではなく、働く人の表情や打ち合わせの空気感が伝わるものを選び、テキストだけでは不足しがちな実在感を補います。
- 本文は 20px ベース、行間は 1.6 で可読性を確保
- 不自然な強制改行を避け、自然な折り返しに修正
- 写真、要点、CTA を近接配置して迷いを減らす
- 可読性
- 本文サイズと行間を確保し、長文でも追いやすく。
- 信頼感
- 人物や仕事風景の写真で実在感を補強。
- 導線
- CTA を近くに置き、次の行動を迷わせない。
使いやすさと印象の両立を目指した声
-
「文字が大きくて読みやすく、相談ボタンの位置もわかりやすいので、初めて見る人にも伝わりやすいデザインでした。」
A社 ご担当者様
コーポレートサイト
-
「オレンジのアクセントが効いていて、シンプルなのに埋もれない印象です。ブランド感を出しやすいと感じました。」
B社 マーケティング担当
サービス紹介ページ
-
「ブログやお問い合わせページまで最初から揃っているので、公開後の運用イメージまで持ちやすかったです。」
C社 ディレクター
テンプレート評価
写真とやわらかい演出で、最初の印象を整える。
人物や会話のある写真を中心に選びつつ、カードや吹き出し風の演出で親しみやすさを足しています。日本語サイトで重く見えすぎないよう、余白も広めに保っています。
打ち合わせ風景で実在感を伝えるヒーロー写真
会話のあるチーム写真で安心感を補強する構成
ノートPCと会話のあるビジュアルでサービス理解を促す
数字や要点をカードで近接配置した情報設計
シンプルな余白と大きな見出しを両立したページ例
親しみやすさを感じる明るい空間写真