Tue5分でわかる!webサイトのレイアウト方法7つBY.小野#中小企業のホームページ運用HOME中小企業のホームページ運用5分でわかる!webサイトのレイアウト方法7つ皆さんこんにちは、小野です。9月も後半になりだんだん朝夜が寒くなりはじめましたね。秋といえば読書の秋・食欲の秋・スポーツの秋...などいろいろありますが、私は「食欲の秋」です!夏はアクティブに運動していましたが、最近カフェ巡りと写真撮影にはまっているので秋はゆっくりとした時間を過ごしていこうと思っています。今回の記事の内容は「webサイトのレイアウト方法」です。webデザインのレイアウトはスマートフォンやタブレットの使用者増加に伴って日々新しいものがでてきています。最新のトレンドもご紹介しつつ、定番のレイアウト方法を7つ厳選してご紹介していこうと思います。目次/このページでわかること1.グリッドレイアウト2.カード・タイル型のレイアウト3.1カラムのレイアウト4.2カラムのレイアウト5.フルスクリーンレイアウト6.ブロークングリッドレイアウト7.フリーレイアウト1.グリッドレイアウト雑誌や新聞などの印刷物でもよく使われており、縦横の見えない線や格子状のブロックに合わせてブロック内の要素の大きさや配置を決定していく手法のことをいいます。文章や画像、余白などグリッドラインに合うように配置することで整然とした安定感のある印象を与えます。余白感を持たせて情報を区切っているので情報を整理して見せたい的にも効果的です。グリッドレイアウトの列や幅は「8の倍数」をベースにして作成するとまとまってみえるといわれています。2.カード・タイル型のレイアウト名前の通りカードのように四角形を並べた方法で各要素の中に画像やテキストを配置します。このレイアウトはグリッドレイアウトの1種で、情報が区切られていて探しやすくレスポンシブとも相性が良いのが特徴的です。小さなデバイスから大きなデバイスまで使用出来る万能なレイアウトで一度に多くの情報を見せるブログやECサイトでよく使用されています。3.1カラムのレイアウト1カラムのレイアウトは視線の誘導が少ないためサイトの掲載内容に集中できるレイアウトです。そのためゴールに導くランディングページなどによく使用されます。複数の要素を横並びにせず上から下に向かって並べるため、ディスプレイの横幅似合わせてコンテンツ幅を可変できるメリットがあります。4.2カラムのレイアウトグリッドレイアウトの一種で1カラムレイアウトと違ってサイドバーを配置できるので、メニューや他のページを見てもらいやすいというメリットがあります。メインコンテンツがあってサイドにサブコンテンツがあるレイアウト昔からあるレイアウト手法ですが最近ではサブエリアを固定してメインエリアのみスクロールした形や中央で分割してみせる2カラム(スプリットスクリーン)の形がトレンドとなってきています。5.フルスクリーンレイアウトこのレイアウトは2013年のトレンドとなり現在もよく使用されている手法で、画面全体を使って写真や動画などを見せる1カラムのレイアウトです。通常の画面スクロールだけではなく、スクロールでコンテンツを切り替えたり動的に遷移させることでユーザーの目を引きインパクトを与えることができます。ビジュアル要素が全面的に押し出されるのでサイト全体にインパクトをもたせたり、ブランディングを強調させたい時に使用すると効果的です。6.ブロークングリッドレイアウトこのレイアウトは従来のグリッドレイアウトを継承しながらも遊び心や個性をもたせてあえてルールからはみ出す手法です。ランダムに配置するのではなく縦横に見えないグリッドラインを引いて整えたり揃えたりしつつ、写真にテキストを重ねたり、ボックスや模様を重ねたりして、余白を生かしてランダムに要素を配置します。スクロールするとアニメーションが連動するパララックスとも相性が良いです。7.フリーレイアウトフリーレイアウトはキャンパスに絵を描いていくようにグリッドにとらわれず自由に要素を配置するレイアウトです。要素間のバランスや配置にセンスが必要となってきます。パララックスを使い、スクロールに合わせてアニメーションを行うサイトも多く見られます。今回紹介したのは押さえておきたいレイアウト7つですがこの他にもいろいろなレイアウト方法があります。ECサイトやランディングページ、ブランディングサイトなどサイトの種類やコンテンツ内容によって変わってくるので、デザインのバランスとユーザーのサイトを見る目的を考えて適切なレイアウトを決めていくことが大切です。参考にしてみてください。宮崎オフィスで主にデザインを担当させていただいてます。宮崎オフィスで主にデザインを担当させていただいてます。DOWNLOAD顧客獲得に成功した24社の成功事例を1冊にまとめました。顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。中小企業のweb集客、知らないと損する5つの方法#中小企業のホームページ運用いま依頼している「ホームページ制作会社」に不満がある方へ#中小企業のホームページ運用ホームページ制作会社を選ぶコツは?選び方や比較するポイントをまとめましたFACEBOOKCOMPANYジーニアスウェブは大阪、東京、宮崎に拠点をおく新規客獲得に強いホームページ制作会社です。2006年4月の設立以来、全国1400社以上のお客様にサービスを提供しています。お客様がより高いパフォーマンスを達成できるよう、その実現に向けてお客様とともに取り組んでいます。