vol.51

より柔軟でパフォーマンスに強いレスポンシブWebデザイン講座(基礎)

開催日 11月19日(土) 10:00〜18:00
定員 10名
*定員に達し次第募集終了
開催状況 未決定:あと2名で開催
申込期限 2016年11月10日(木)
受講料 50,000 円

講座の特徴

昨今のスマートフォン市場は、デバイスの増加に伴いOSとスクリーンサイズが多様化し、対応するウェブサイトの構築は困難になっています。

対応するスマートフォンサイト制作のアプローチは大きく2つあります。
1つ目はサーバーサイドでデバイス(UA:ユーザーエージェント)ごとに振り分け、複数のHTMLとCSSを作成する手法。
2つ目は、CSS3の Media Queries(メディアクエリ)でウィンドウサイズを基準にCSSを設計するレスポンシブWebデザインという方法です。この手法は、メンテナンスの手間が少なくクライアントへの運用コストを低く抑えることができます。allWebクリエイター塾のウェブサイトもレスポンシブWebデザインで作成されています。ウィンドウのサイズを可変させるとレイアウトが変化します。

本講座は、正しいResponsive Web Design(レスポンシブWebデザイン)を学習します。講師は日本で最初にレスポンシブWebデザインを紹介し実践した菊池崇氏です。

Curriculums

カリキュラム

  1. デスクトップとモバイルの違い
  2. モバイルファーストとレスポンシブWebデザイン
  3. モバイルブラウザの概要
  4. レスポンシブWebデザインの正解
  5. RWDの3大要素
  6. フルードイメージ
  7. CSS2のメディアタイプとCSS3のメディアクエリ
  8. ブレークポイントの設定
  9. フルードグリッド
  10. ボックスモデル最適化
  11. 背景画像の配置と拡大縮小
  12. 高解像度ディスプレイ(HiDPI)への対応
  13. パフォーマンス最適化
  14. 画像の最適化とツール

学べる内容

レスポンシブWebデザインの正しいグリットやCSSの設計方法を学べます。また原理原則から教えますので、フレームワークやテンプレートのカスタマイズ能力を高まります。

  • 基本的なソースコードと表示されているイメージ
    見切れない本当のレスポンシブWebデザインの基本が学べます
  • パソコン、タブレット、スマートフォン対応のイメージ
    よく議論になるブレイクポイントの設定の考え方を学びます
  • 高解像度デバイスのイメージ
    高解像度ディスプレイのための画像処理方法をご紹介いたします

こんな方におすすめです

授業スタイル

  1. ハンズオンでの学習スタイル

    ひとり一台のパソコンを利用し、手を動かし実習を通して学べます。

  2. ブラウザについて

    CSSのサポートが良いブラウザで、正しいCSSの挙動を通して勉強します。

  3. 開発環境

    秀丸(win)、mi、Sublime2(mac)などのテキストエディタを利用します。

授業風景

担当講師

菊池 聡[肖像]

菊池 (きくち さとし)

レスポンシブWebデザインの実装は日本でも進んできていますが、レスポンシブWebデザインではないものも紛れているのが実情です。
特に日本ではグリットシステムの理解が浅い方が多く、DTPで利用しているガイドラインをグリットと誤解している方がいるようです。正しいグリットシステムの計算方法を学び、正しいレスポンシブWebデザインを設計できるようになりましょう。この講座では、沢山のエクササイズを通して少しずつメディアクエリなどの理解を深めていきます。

受講特典

  1. スライド・サンプルのプレゼント

    授業中に利用したスライド、サンプルコードを受講後にプレゼントします。

  2. テストで学びきれなかった内容を確認

    受講後テストで学びきれなかった内容を、確認と復習できます。

  3. 再受講制度で分からないところも確実に

    受講後半年間は、同じ講座を無料で受講できます。

受講生の声

小森洋昌さん

Webデザイナー

レスポンシブWebデザインについて、 ネットや雑誌などで得た情報で、大枠は把握しているつもいましたが、実際触れてみて、自分で思ったほど理解していなかった事に驚きました。 今後、勉強していく上での弾みにしていきたいです。

山田 優子さん

元Sler

現在、現場で直面しているトピックなので、非常に興味をもって講座に臨みました。詳しいご説明で理解できました。 全て解りやすかったです! 何よりも「レスポンシブとは?」という根本的なお話を聞けたことが、制作の上でのスタンスがブレることなく取り組めそうで、大変意義ある講座だったと思います。 今回実習したコードを、すぐに復習して実践に役立てていきたいと思います。

大久保龍史さん

Web担当者、システムエンジニア

事前に、HTML5の基礎および、CSSレイアウト講座を受講していたために、CSSの記載順や、min-widthの理屈など、非常に理解しやすかったです。最後の演習で、ソースコードを一気に書いていきましたが、菊池さんのソースコードの書き方を見ながら、CSSのまとめ方のコツが理解できました。

犬飼浩子さん

Webデザイナー

まずはモバイルファーストの考え方を学び、制作の仕方を勉強出来ました。allWebの講座を受けるといつも思うのですが、「原理、原則」から学ぶ事で、なぜそうするのか?そうなったのか?ということに、一つ一つ理由がある事に気づきます。HTML5基礎講座から順にレベルアップとして最後に受講しましたが、それまでの勉強した事が基盤となっていて、基礎をきちんと学んでいないと理解出来ない内容なんだと思いました。

戸田かなえさん

「RWDがデバイス依存ではない」というところがまず基本で、これを踏まえずに間違ったことを教えている方が結構いるということに気付きます。たまたま見た有名な会社の動画でもそうだったので、菊池さんにその辺りを伺うと、それが間違いであることがよくわかります。後半の文字の大きさと行間については、計算がいかに速くできるか、比率の計算力が問われる部分で、考え方の訓練が必要だと思いました。

福田悟さん

今までのWEBデザインとは基本の考え方から違うモノだったので、全て比率で考えるという部分に引っ掛かりがありましたが、そこが理解できると後の内容はスムーズに理解できました。前段の話とツールの情報は結構知らない情報もあり、非常にためになりました。

白幡里絵さん

講師の方が、話術に富んで魅力的でした。現場の話がきけたことが収穫でした。受講する前から、難しいことは把握しておりましたので、挑戦するつもりで受講しました。講座を受けてわからないことが多々ありますが、これから復習して、分かるまで、進めて行こうと思います。

この講座が含まれるコース

レスポンシブWebデザイン講座(基礎)が入ったコースです。コースでお申し込みされると割引されます。

Page Top