デザインは訪問者が必要な情報を読める順序で作る
ホームページの基本デザインは、訪問者が内容を読み、必要な情報へ進める順序から考えます。文字、余白、配色を、その順序が伝わるように調整します。
装飾を増やす前に、サービス、料金、連絡先が見つかるかを点検しましょう。スマートフォンでも説明と操作が読めることが必要です。
ホームページの基本デザイン｜見出しと余白と配色で情報を伝える
概要
ホームページの基本デザインは、訪問者が内容を読み、必要な情報へ進める順序から考えます。この記事では、見出しと余白による情報の関係、配色と写真の役割、スマートフォンでの原稿とリンクの点検を解説します。
公開日
更新日
見出しと余白で内容の関係を示す
見出しには節の内容を記し、同じ話題の文章と写真を近くに置きます。すべてを同じ文字サイズにすると、どこから読むかが伝わりません。
W3Cは内容を表す見出しを勧めています。（W3C: Writing for web accessibility） 本文の論点も見出しに合わせてください。
配色と写真は説明に必要な役割で選ぶ
本文、背景、操作ボタンの色を決め、文字が読める組み合わせを使います。写真は実際の場所や商品を伝えるものを選び、飾りだけの画像で案内を押し下げないようにします。
写真だけで料金や重要な情報を伝えず、文章でも記載してください。
テンプレートへ入れた原稿を点検する
テンプレートを使う場合も、長い文章や写真の切り抜きで伝わり方が変わります。スマートフォンで料金を読み、問い合わせ先へ進む流れを試します。
日程やメニューを変更する作業も試し、表示を点検できる担当者を決めて公開します。
SpreadSite は、Googleスプレッドシートで内容を管理し、テンプレートを使ってホームページを作成・公開・更新できるノーコードツールです。
案内の順序をテンプレートで表すホームページの作成に、ぜひ使ってみてください！
よくある質問
Q: 色やフォントは多い方がよいですか？
A: 情報の役割が伝わる数にします。装飾の種類だけを増やさないでください。
Q: 余白を多く取れば読めますか？
A: 関連する情報が離れすぎない配置にし、実際の文章で点検します。
Q: 写真は必須ですか？
A: 場所や商品の説明に役立つ写真を使います。重要な案内は文章でも記載します。
Q: 公開前は何を試しますか？
A: サービス、料金、連絡先を読み、スマートフォンでリンクを操作します。
