WEBサイト
シンプルなレイアウト

WEBデザインにおける基本的、汎用性の高い

レイアウトをまとめています。

理想のデザインを考える際にぜひ参考にしてください。

※あくまでPCサイト向けのレイアウトを扱っています。

はじまるよ

START !

1カラム、
画面いっぱいに

掲載内容に集中できるレイアウト

ビジュアル要素を
大きく見せたい時に。

小さいモバイルサイト
との相性も良き。

  • 単調なレイアウトでは、カルーセル(スライダー)みたいな動き、アニメーションが光るよね。
  • 単調なレイアウトでは、カルーセル(スライダー)みたいな動き、アニメーションが光るよね。

ここから2カラム

画面を半分に分割

右側を大きく

右側を小さく

少しずらすのもあり

文章と画像を並べて表示

片方に画像や映像を、
もう片方に解説文を載せることで
1ページ内で多くの情報を見せることができる。
視認性とビジュアルの良さを両立させる、
非常に使い勝手の良いレイアウト。

近接と整理

要素同士の繋がりを直感的に理解できる。

スッキリと見せる

一定のルールに沿った配置は見やすい。

ここから

更にカラムが

増えるよ

3カラムレイアウト

より多くの情報を

綺麗に見せる配置を

考えることが大事

PCの大きな画面向け

グリッドレイアウト

カード・タイル型
レイアウト