ミライクチセで覚えられる三つのレイアウトについて

レイアウトとはWEBサイトにおいて文章や画像などを効果的に配置することが目的になります。

ミライクチセのWEBコースでは定番な三つのレイアウトを覚えることができますので、今回そちらについてご紹介させていただきます。
基本的に教材を元に学習を進めていくのですが、一人での学習となると挫折してしまうことも多いかと思われます。
しかし、チセで勉強する場合はスタッフがついてるのでご安心ください！ 自分のペースで一緒に学習を進めていきましょう！！

レイアウトについて

前述させていただいたように画像や文章、そしてWebサイトに必要なヘッダーやフッターといった様々なパーツを効果的に配置していくのがレイアウトの目的となるのですが、
Webサイトのパーツについてはこちらの記事で解説しておりますので、これらの言葉になじみの無い方は下記の記事もぜひ読んでみてください。

※先ほどのヘッダーやフッターを始めとしたWEBサイトのパーツについてご紹介した記事となります。

※HTML＆CSSについてまだご存じでない方は上記の記事もオススメです。

シングルカラム

各要素が一列に段組みで並んでいく縦長のレイアウトのことをシングルカラムレイアウトと呼びます。
小さな画面でもスッキリしていて見やすい為、スマートフォンの普及により近年ではこのシングルカラムのレイアウトが増えてきております。
スマートフォンの画面は小さいので、各コンテンツを大きく表示することができるこのレイアウトが好まれています。

また、PCやタブレットPCにスマートフォンなど各デバイス毎にあわせて表示方法を変える、レスポンシブデザインにおいても文字サイズの調整など最低限の変更で済むというのが魅力です。

2カラム

2カラムレイアウトはコンテンツ(メインとなる文章など)の隣にサイドバーを設置したレイアウトです。
各ページへ誘導するナビゲーションメニューなどをサイドバーを設置することで、ポータルサイトやニュースサイトなど情報量の多いサイトがこのレイアウトにする傾向にあります。

ユーザーがサイト内を巡回して情報を調べやすくなる為、回遊率のアップを図れます。
チセのサイトのように、各コースの紹介やサービス内容の詳細など、右にあるサイドバーから飛んでいけると便利ですよね。
余談になりますが、コンテンツの左右にサイドバーを置いた3カラムレイアウトというものもあり、こういったレイアウトのことを包括してマルチカラムレイアウトと呼びます。

グリッドレイアウト

グリッドレイアウトとはページを格子状に分割した方眼のように設定して組み合わせ、要素の大きさを均等にデザインしていくレイアウトです。
長方形や正方形にズラッとコンテンツが並んでいくことになります。
雑誌や新聞によく見られるレイアウトをWEBサイトに応用したもので、複数の要素を配置してもスッキリ見やすく仕上がります。

まとめ

• レイアウトは画像や文章を視覚的に効果的に配置することが目的。
• ミライクチセのWEBコースではオーソドックスな三つのレイアウトを勉強できる。
• サイトの目的によっては適しているレイアウトと適していないモノがある。

もしWEB制作にご興味をお持ちの方はミライクチセでは無料体験会を行っておりますので、ぜひこちらにお問い合わせください！