LoginSignup
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@riku05(riku)

主なWebサイト構造設計

Last updated at Posted at 2021-03-23

サイト構造設計の種類

  1. レスポンシブWebデザイン
  2. シングルページ・レイアウト
  3. アダプティブ・デザイン
  4. ワンカラム・レイアウト
  5. マテリアル・デザイン

1. レスポンシブWebデザイン

機種の画面サイズ、ウィンドウのサイズに応じてレイアウトを最適化するWebデザイン。
PC用画面の設計を行った後、タブレット・モバイル用画面を設計するのが主流だったが、現在ではモバイル用画面を先に設計する「モバイルファースト」の傾向がある。
image.png

2. シングルページ・レイアウト

スクロール型の1項ページ内にすべてを記述し、表示遅延をなくす。
特にモバイルを配慮した設計。
image.png

3. アダプティブ・デザイン

ユーザーのプロファイルや状態・状況に応じて表示内容を動的に最適化するデザイン手法
image.png

4. ワンカラム・レイアウト

ユーザーの導線を解りやすくするために画面枠内の情報量を絞った単純化レイアウト
image.png

5. マテリアル・デザイン

Googleの定義するデザイン・システム
image.png

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?