Ladybird

お問い合わせフォーム

集客・集患をあげるブログBlog

レイアウトを考えてホームページを見やすくしよう

こんにちは。ホームページ制作ディレクターの斉藤です。

集客・集患力を上げるホームページ制作「デザイン編」3回目は、レイアウト。

ホームページを制作する上で、レイアウトをきちんと考えることはとても重要なことです。ウェブディレクターはまず、「ワイヤーフレーム」という、何を・どこに・どう配置するかを示したサイト設計図面を作るのですが、その際にレイアウトが見やすいものになっているかも踏まえてホームページを設計していきます。

第1回のおさらい

画像やテキスト、バナーやリンクなど様々なものを配置することを「レイアウトする」といいます。

ウェブについてよく分からない方からすると、このレイアウトをするということがいまいちピンと来ないという方も多いでしょう。自由に配置するのと、レイアウトをすることで何が変わるかも良く分かりませんよね。

しかし、レイアウトをどう組み合わせて伝えたいことを表現するかによって、情報を整理することができたり、適切な位置にお問い合わせや資料請求などのボタンやエリアを置くことによって、集客・集患へのつながりやすさが変わってくるのです。

チラシやハガキなどの紙媒体とホームページのレイアウトの違い

レイアウトは、チラシやハガキのデザインなどとウェブデザインでは大きく変わってくる部分になります。印刷物は、見たときに1枚全体が視界に入ってきますが、それに対してホームページなどのウェブデザインはスクロールやリンクなど上下したりページを遷移して視界に入れていきます。
そのため、流れに沿った情報設計や配置をしないと、読み手側は非常に見づらくなるのです。

また、これは制作に関してのことなのですが、自由に描いたものをそのまま印刷する紙媒体に対して、ウェブではデザインしたものをコーディングするという行程が発生します。コーディングでは、デザインを再現するのに「HTML」や「CSS」という言語を使っていくのですが、めちゃくちゃなデザインだと、文書構造などに矛盾が生じてしまうのです。

そして、弊社のようにレスポンシブウェブデザインでサイトを制作している場合は、閲覧者のウェブブラウザ・画面サイズに応じてレイアウトも見やすく変化しますので、PCで見た際にどう見えるかとスマホで見たときにどう見えるかも考慮して考えないといけません。

このように、紙媒体とホームページなどのウェブでは大きな違いが生まれてくるのです。

ページの流れに沿ったレイアウトをしよう

先ほど、ホームページなどのウェブデザインはスクロールやリンクなどをしていくので、ページの遷移に沿った情報設計や配置をしましょうとお伝えしました。そこで、移管に沿った情報設計や配置はどんなものなのかを考えてみましょう。

例えば、縦方向のレイアウトであれば自然な視線の流れは、上から下へ遷移し、さらに左から右へ遷移していきます。この流れの中で画像や文字を配置することによって、見やすいレイアウトとなるのです。

例えば、このような形ですね。赤い矢印が視点の流れになります。自然と文章が読みやすいようなレイアウトになっています。

そしてこちら。これは極端にやっていますが、緑の枠がモニターに映る範囲として、視線がいったりきたり上に下に上下しないといけない、レイアウトになってます。み…見づらい( ^)o(^ )

こんなものはないと思いますが、こんなレイアウトだったら即効で見るの、やめますよね(笑)ここまでではないにしろ、見づらいレイアウトをしてしまっているサイトは多くあります。

まとめ

ホームページのウェブのレイアウト、少しわかっていただけましたでしょうか?色々なサイトのレイアウトを見やすい?見づらい?の視点で見てみると、面白いですよ。やはり、しっかりとしたサイトはコンバージョンにつながるような情報設計をしっかり行っていると思います。

弊社も他社の格安サイト様に負けないように、集客・集患につながるホームページを制作していきます!

Pocket
LINEで送る

強引な営業・勧誘は致しません!
安心してお気軽にお問い合わせください!