エモーショナルデザインでユーザーの心を掴む

CSS3講座

ブラウザ間のデザインを確認して自由なデザイン実装を実現する

CSS3講座

スマートフォンから流入が増え、FlashサイトはiOSで見えない、画像でのデザインは文字が読めなくなってしまうなどの理由でHTMLとCSSによるWeb標準でのサイト実装が一層進むようになりました。

モバイルデバイスの中では4K以上の解像度を持つものも誕生し、画像でのデザイン実装に限界がでてきています。

CSS3はスケーラブルなデザインが実装可能なためどこまでも綺麗なデザインを実現することができます。

CSS3でのデザイン実装3つのポイント

Point 1

エモーショナルデザインの実装が可能になる

エモーショナルデザインの実装が可能

CSS3を習得することでアニメーション、エフェクトなどが実現できるため、動きやより広い世界観をCSSで表現することができます。 デザインに動きを加えることで、ユーザーの心をとらえサイトにスパイスを加えることができます。

CSS3は、CSS2ではできなかったエモーショナルなデザイン実装が可能になります。

Point 2

どのデバイスでもくっきり見えるデザインが実現可能

どのデバイスでもくっきり見えるデザインが実現可能

スマートフォンの中には4K以上の高解像度ディスプレイ(HiDPI)が存在します。このようなHiDPIに対応するためには、通常の画像サイズの数倍のサイズの画像を読み込ませなくてはなりません。

通常の解像度の写真は高解像度ディスプレイで閲覧するとボケてしまいます。ボケた画像はユーザーにピンチイン、ピンチアウト(拡大、縮小)の行動を起させるため、UIにも悪い影響を与えてしまいます。

Point 3

パフォーマンスに良いデザインの実装が可能に!

パフォーマンスに良いデザインの実装が可能に

高解像度ディスプレイで画像ベースで作られたサイトを綺麗に見せるには、無駄に大きい画像を読み込ませないといけません。当然、Webサイトは重くなってしまいます。

今後でてくるエマージングデバイスはより高解像度になる可能性もあり、それらの解像度に合わせた画像でなければぼけてしまうため、CSSによるデザイン実装が求められています。

また、メニューや動きの実装でJavaScriptを利用することがありますが、JSを何個も使用するとパフォーマンスに大きな影響がでてしまいます。パソコンでしかWebを見ない時代はJSをたくさん入れてもそれほど気にならなかったのですが、モバイルユーザーが増えた現在、JSの使用数には注意が必要です。その点、CSSでの実装はJSより優れています。

特徴

  • 全てを覚えるのではなく、CSS3を実装する上で知っておくべきポイントを取得できる
  • ブラウザごとの対応方法や考え方が勉強できる
  • 正しいプログレッシブエンハンスメントのもと、実装方法を学ぶことができる
  • パフォーマンスを考えた書き方でCSS3を学ぶことができる
  • CSS3の使いどころが理解できる
  • デザインニングインザブラウザ実現のためのノウハウが勉強できる
  • デザイン実装はCSSで行うWeb標準の基本理念をベースに学ぶことができる

カリキュラム

CSS3のデザインはブラウザのサポート状況で実装が異なってしまいます。 プログレッシブ エンハンスメントの考えのものとポリフィルを利用して古いブラウザにも対応させる方法などを学びます。

  1. CSS3のプロパティの理解
  2. アニメーション
  3. アグレッシブデグレデーション
  4. CSS3ブラウザサポートの確認方法
  5. CSS3の色のプロパティ
  6. colorとディベロッパーツール
  7. text-shadowの基礎1
  8. transformプロパティの基礎
  9. transitionプロパティの基礎
  10. Webフォントと生成ツール
  11. マルチコラムレイアウト
  12. CSS3のボックスモデルの変更
  13. modernizrの実装によるCSS3の適用
  14. プログレッシブエンハンスメントとIE

受講前提と目標

受講前提

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

到達目標

  • CSSでのスケーラブルなデザイン実装ができるようになる
  • デザインニングインザブラウザができるようになる
  • CSSで思い通りのデザイン実装が可能になる
  • よりパフォーマンスによい実装方法を学ぶことができる