計算によるデザイン実装

グリッドシステム、CSS設計講座

読みやすいデザインを数値で設計

グリッドシステム、CSS設計講座

レイアウトは、ユーザーに情報を伝えやすくするための手法の1つで、要素を美しく揃えることでウェブサイトの情報をより的確に伝えたりサイトのブランド力を高めることができます。

特にウェブサイトにおいては感覚で実装せず数値で実装することで、ソースが短縮されパフォーマンスにも優れた実装が可能になります。

思い通りのレイアウトの習得とユーザーに伝えるためのデザインを学びます。

グリッドシステムの3つのポイント

Point 1

ユーザーにわかりやすく情報を伝えることができる

レイアウトが整い、サイトが美しくなる

グリッドシステムを利用すると情報が整理されるためレイアウトが美しくなります。

レイアウトを整えることでシンメトリー(対称性)が生まれ、デザインに統一感を生み出すことができます。サイトが美しければユーザーはそのサイトを好きになります。結果、サイトを通じて企業のブランド力が高まります。

また、情報が整理されることでユーザーはいち早く欲しい情報を得ることができます。つまり、ユーザーに伝えたい内容を伝えることができます。

Point 2

計算と理論でデザインできる

計算と理論でデザインできる

グリッドシステムは黄金比、プラチナ比などを用いて作成します。Webサイトはデバイスや環境によって見え方が異なります。

操作性が重要とされるWebデザインではグリッドシステムのデザインがポイントになります。

Point 3

ソースがきれいになりパフォーマンスにも良く、更新性も高い

パフォーマンスにも良く、更新性も高い

同じページのデザインでもCSSの記述量は開発者によって異なる場合があります。ソースが短ければ可読性も増し、パフォーマンスにも優れています。

サイトによってはガイドラインが存在しないものもありますが、シンプルでわかりやすいコードであれば運営側でも更新しやすくなります。

特徴

  • 計算値で用いたシンメトリーデザインが実装できる
  • パフォーマンス設計を考えたCSS設計ができる
  • パフォーマンスを考慮したCSSプロパティの使い方が勉強できる
  • ソースがきれいになりパフォーマンスにも良く、更新性も高い
  • きれいなCSS設計方法が学べる

カリキュラム

  1. Web標準の理解を深める
  2. グリッドレイアウト/グリッドシステムとは?
  3. レイアウトで利用する際のfloatとposition
  4. デザインとUI
  5. ブラウザ表示相違の理解と対策
  6. 実習:CSSレイアウトでのページ制作

受講前提と目標

受講前提

  • HTML5での正しいマークアップが可能レベル
  • CSSでサイトをコーディングできるレベル

到達目標

  • グリッドを数値で計算して割り出す方法を身につける
  • 余白が整った美しいデザイン実装ができるようになる
  • 文字サイズから考えるサイト設計ができるようになる
  • CSSレイアウトでの実装ができるようになる