Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8589

主なWebサイト構造設計

$
0
0

サイト構造設計の種類

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

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

image.png

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

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

image.png

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

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

image.png

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

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

image.png

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

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

image.png

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


Viewing all articles
Browse latest Browse all 8589

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>