こんにちは！おぐらです。

 

少しだけ昨日の出来事を…（おしゃべりなもんで）

昨夜地元のバーに一杯だけ飲みに行ったんですが、

一杯飲んでいるうちに、小さなお店なんですが、僕を含め4人もWeb関係の業種の人が集まりました。

皆さん初めましてですよ。

 

 

Webディレクター、SEO対策担当者、フリーランスWebデザイナー、そして私。

 

案の定話は盛り上がり、色んな話を聞かせていただきました。

帰りながら、すごい偶然の出会いだなと思い、なんだか気合が入りました。（笑）

 

はい！すみません。本題です。

 

 

 

Webデザインのレイアウト

 

レイアウトについてなんですが、前回ワイヤーフレームのお話の際、

詳しく解説していなかったので、基本的な事やレイアウトの種類についてご紹介します。

 

 

おさらいですが、

 

まずワイヤーフレームのときに、情報を洗い出して次にレイアウトを決めます。

掲載したい情報をどこに配置するかを決めます。

そのために、サイトのレイアウトを決定します。

レイアウトは「画面をどう分割するか」、分割方法のことです。

先にまとめた情報の量と質にあわせて適切なレイアウトを選びます。

年々見せ方が変わったり、流行りがあったり、

そのサイトの業種によっても、合う合わないがありますよ。

飲食関係、ファッション、病院、などなど。

 

業種によって、それに見合うレイアウト選びも重要です。

 

 

 

 

 

レイアウトの種類

 

 

 

レイアウトもいくつか種類があり、定番なものから、遊び心があるもの、いろいろあります。

少しご紹介しますね。

 

 

 

今回は下記の4つを詳しくみていきましょう。

 

・　マルチカラム

・　シングル

・　フルスクリーン

・　タイル

 

 

 

 

マルチカラム

 

これは定番のレイアウトで、カラムが複数あります。（カラム＝列）

カラムが2つ存在する「2カラム」、カラムが3つの場合は「3カラム」と呼びます。

2カラムの場合、最上部にヘッダー、最下部にフッター、その間の左側がコンテンツエリアで、

右側にはサイドバーがあるような形が基本かな。

3カラムになれば、両サイドにサイドバーがあるイメージですね。

 

ブログに多く見られます。

 

 

 

 

シングル

 

カラムが一つしかないレイアウトです。

 

サイドバーを取っ払った分、画面幅を目一杯コンテンツの領域に使えます。

スマホのような小さな画面でもコンテンツに集中してもらいやすいレイアウトです。

画面を縦にスクロールする動きに合わせて、

商品やサービスの特徴を語りかけるように訴え、

成約へ結びつけるタイプのページ（＝ランディングページ）によく使われます。

 

 

難しいのは、ナビゲーションです。

縦にページが長くなりがちなので、スクロールが深くなるほどグローバルナビゲーションが遠くなります。

 

ナビゲーションを配置するサイドバーもありません。

ページ数が多く階層が深いホームページには不向きと言えます。

 

 

 

 

フルスクリーン

 

画面全体を一枚のキャンバスと見立ててコンテンツを表示するレイアウトです。

 

フルスクリーンといえば、スクロールなしの一枚画面で完結するページが多いですが、

縦長の一枚ものも最近増えてきています。

見せ方によっては、おしゃれで見やすいと思います。

ただ、掲載できる情報が少ない分、作り手のセンスが完成度をかなり左右するレイアウトです。

 

 

 

 

タイル

 

画面をタイル状に分割したレイアウトです。

 

参考ページを見ると、敷き詰められた各タイルはカラフルで丸みを帯び、

「賑やか」「柔らかい」「楽しい」雰囲気が伝わってきますね。

 

タイル状のレイアウトはパッと見の一覧性が高く、

フルスクリーンとは対照的に多くの情報を一度に提供できます。

ネットショップの商品一覧やメディアサイトの新着ニュース一覧などに向いてます。

 

 

以上が代表的なレイアウトです。（私が知っている範囲ですが）

ホームページのコンセプトやターゲットを意識し、

掲載する情報の質と量に合わせて適切なレイアウトを選ぶことがポイントになります。

 

 

 

これから先も新しいレイアウトや工夫した見せ方がたくさん発信されると思うので、

日々チェックすることが必要ですね。

 

 

 

 

ogura takuya