収入UPの転職を目指す方へ

ホームページのデザインはどう作る?Webサイトのレイアウトパターン

スマートフォンやタブレットといったWebサイトを閲覧できるデバイスが増えたことにより、従来のパソコンとは異なるレイアウトデザインが用いられるようになりました。スマートフォンの普及率が高まるにつれ、レスポンシブ化に伴うグリッド・レイアウトカラム・レイアウトが主流となり、狭いディスプレイでもWebサイトの内容が十分に伝わるような工夫がされています。

今回はWebサイトの完成度を決めるレイアウトのパターンとそのデザイン方法についてご紹介します。

AIちゃん
AIちゃん

Webサイトをイチからつくるのって難しいです…。

有村先生

レイアウトパターンを覚えておくと良いですよ。使い勝手がよくデザイン性も高いWebサイトを制作しやすくなります。重要なレイアウトパターンをご紹介しますね。

目次

ホームページの記事一覧

カラム・レイアウト

カラム・レイアウト

Webサイトを表示するデバイスのディスプレイサイズの多様化に伴い、それに応じた理想的なレイアウトパターンが考案されています。

カラム・レイアウト」は、垂直方向にコンテンツエリアを区切る手法です。メニューやコンテンツなどが横並びになるタイプは2カラム・レイアウトと呼ばれます。他にも3カラムと呼ばれるコンテンツの両脇にナビゲーションとメニューを配置するタイプがあり、これらはマルチカラム・レイアウトとして分類されています。

カラム・レイアウトの中でも、スマートフォンの普及によって採用するWebサイトが増えつつあるデザインが、1カラム・レイアウトです。1カラム・レイアウトは、複数の要素を横並びにせず上から下に向かって並べるため、ディスプレイの横幅に合わせてコンテンツ幅を可変できるメリットがあります。Flashを用いたフルスクリーン・レイアウトも現在よく見られる1カラム・レイアウトの1つです。

フリー・レイアウト

フリー・レイアウト

フリー・レイアウト」は、基本的にブラウザやディスプレイのサイズを考慮せず、固定した幅で自由にコンテンツを配置していくパターンです。

そのため、多くの情報を好きなようにレイアウトでき、他のWebサイトとは異なるオリジナリティを意識したレイアウトを作り出せるという強みを持ちます。一方で、デバイス環境によってはページが切れてしまうという欠点もあるため、注意が必要です。

このような欠点を解消するために取られる方法が、パソコンやスマートフォン、タブレットなどデバイスに合わせたWebサイトを制作する手法です。 デバイスごとにWebサイトを用意することになるためコストはかかりますが、各デバイスに最適化されたWebサイトを制作できることから、こだわりやオリジナリティを演出したいときに採用されます。

グリッド・レイアウト

グリッド・レイアウト

さまざまなデバイスの表示領域に柔軟に対応できるレイアウトが、「グリッド・レイアウト」です。常に横幅いっぱいにコンテンツを表示するリキッド・レイアウトは、画像幅に合わせて伸縮することで各コンテンツが適切な配置に収まります。

その応用として生まれたフレキシブル・レイアウトはコンテンツ幅の最大値と最小値をあらかじめ指定することで、意図せず起こるWebサイトの崩れを防げるレイアウトパターンです。基本的にはリキッド・レイアウトと同様ではありますが、可変幅を指定している点が異なります。

最後にご紹介するのが、可変グリッド・レイアウトです。別名カード・レイアウトとも呼ばれるこの方法は、マルチカラムになりがちなコンテンツ領域を格子状に分割していき、ウィンドウ幅に合わせて各コンテンツを再配置します。メディアサイトなどでよく採用されていますが、コンテンツが細かく仕切られていることから、人によっては見づらさを感じることもあるようです。

[PR] Webデザイナーの仕事の魅力とは? 先輩Webデザイナーに聞いた仕事の魅力

おわりに

Webサイトのレイアウトデザインには、その時々のトレンドがあります。最新トレンドのレイアウトパターンを積極的に取り入れることにより、ユーザーに新鮮さを感じさせましょう。 インターネット・アカデミーを始めとするWebが学べるスクールでは、Webデザインのスキルだけでなく、このようなWebトレンドも学べます。業界に合ったレイアウトパターンや現在のトレンドに関する最新の情報は、無料体験レッスンでも発信していますので、ぜひお気軽にご参加ください。

成果が出るWebサイトの設計やデザインの手法を学ぶ

UI/UX講座

UI/UX講座では、ユーザーの設定や情報設計、インターフェースデザインやユーザビリティなどの概念を学びます。デザイン初心者も基礎から学べるので安心です。

Web・ITのスキルをつけて副業・就転職・キャリアアップを成功させたい方へ
1995年開校のリーディングスクールインターネット・アカデミー

自分にぴったりのコースが見つかる

日本初のインターネット専門校、インターネット・アカデミーでは、Web・ITのスキルを身につけて、自分が望むキャリアを手に入れたいという方に向けて、多彩なコースとサポートをご用意しています。

Webデザインを学びたい方

Webマーケティングを学びたい方

自宅でも校舎でも!自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料カウンセリングを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

相談してコースを選びたい方はカウンセラーに無料で相談

カウンセラーに無料で相談

※無理な勧誘は一切ありません

無料で相談してみる
【9月~新サービス開始!】詳しくは無料カウンセリングへ給付金で受講料の最大70%支給! 2020年度新入社員研修 早期割引キャンペーン法人向けIT研修のご相談