デザインパターン基礎

この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけていきましょう。

第一回目の授業はWebサイトのデザインに取り組むまでの流れから、今のデザイントレンドまでの総復習をしていきます。

デザインパターンを学ぶ上で最低限必要な知識になりますので、しっかりと再認識していきましょう。

■授業のアジェンダ（予定）

・自己紹介
・Web制作におけるデザインの意義
・PCデザインとスマホデザインの関わり方
・最近のWebデザイントレンドの傾向

この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

第2回目の授業では、前回の授業での知識を踏まえ、CSSのみで実装することができるデザインテクニックを学んでいきましょう。例として幾つかアクションボタンを作成していきます。

jquery実装においてCSSの知識は必須となりますので、しっかりと学んでいきましょう。

■授業のアジェンダ（予定）

・CSSがどう動いているかの復習
・効果をつける時に使用することが多いCSSの紹介
・3種類のアクションボタンの作成

この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

第3回目の授業は、前回の授業での知識を踏まえ、Webサイトやアプリなどのメニューアイコンとして用いられるハンバーガーメニューを実装していきます。jQueryを使用しての実装になりますがライブラリは用いません。構造とメニューの動きの仕組みをしっかりと理解してください。
 

■授業のアジェンダ（予定）

・ハンバーガーメニューがどのようにできているのか
・とりあえずCSSだけ作ってみる
・jQueryを導入して実際に動かしてみる
・実装したボタンが動くかどうかの確認

この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

第4回目の授業は、クリックやタップをするとメニュー一覧が登場するプルダウンについて学びます。3回目で学んだハンバーガーボタンを応用して実装していきましょう。

■授業のアジェンダ（予定）

・とりあえずCSSだけ作ってみる
・jQueryを導入して実際に動かしてみる
・動作の確認

この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

第5回目の授業は、WebサイトやアプリのTOPで画像を切り替えるスライドデザインの実装を学んでいきます。今回はjQueryのプラグインで高機能かつ実装も簡単なカルーセルスライダーslickを用いてスライドを作っていきます。

slickには様々なカスタマイズ機能が用意されているので、自分のサイトにあったスライドが作成できるよう、きっちり学んでいきましょう。

この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

第6回目の授業は、Webサイトデザインの定番となりつつある、ページスクロールなどの動作に合わせてデザインを変化させるパララックスの実装を学んでいきます。

近年クリエイティブが単純化した影響で、Webサイトは動きでデザインを表現する機会がとても多くなってきました。そんな時によく用いられるようになったのがパララックスです。パララックスとは“視差効果”を用いたデザイン手法の一つになります。

いくつかパターンのあるパララックス表現ですが、今回は主要なものだけ抜粋して学習していきましょう。

この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

第7回目の授業では、スクロール時にTOP部分を固定させるための実装を学習していきます。縦スクロールが長いサイトなどによく用いられる手法です。ユーザビリティーを考えると欠かせない実装になりますので、しっかり理解しましょう。

この授業では、Web制作におけるPCサイト及びスマートフォン（スマホ）サイトのデザインパターンとコーディングテクニックを学びます。

CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
「jQueryの実装の仕組みがいまいちよくわからない」

今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

最後の授業では、切り替えタブの実装を学習していきます。情報量の多いサイトではよく用いられる手法です。この実装を学習するとよりモバイルアプリケーションライクなWebサイトを作成することができます。