デザインパターン基礎

  • このエントリーをはてなブックマークに追加
デザインパターン基礎 -Web制作におけるデザインの全体像をつかむ-
第1回:2016年8月1日公開 01:00:00

デザインパターン基礎 -Web制作におけるデザインの全体像をつかむ-

受講する

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

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

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

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

授業一覧
デザインパターン基礎 -Web制作におけるデザインの全体像をつかむ-
2016年8月1日公開
01:00:00

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

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

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

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

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

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

■授業のアジェンダ(予定)

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

  • 自己紹介
  • 02:02
  • 全体の流れ
  • 00:22
  • 今日の流れ
  • 00:58
  • WEB制作におけるデザインの意義
  • 00:10
  • 質問:みなさんにとってデザインとは何ですか?
  • 02:21
  • 一般的に言われているデザインと本来のデザインの意味を学ぼう
  • 02:17
  • WEB制作の流れを確認しよう
  • 01:40
  • フロントエンドにおけるWEBデザインの意義を学ぼう
  • 03:24
  • PCデザインとスマートフォンデザインの関わり方
  • 00:58
  • PCサイトとスマートフォンサイトのそれぞれの特徴を学ぼう
  • 04:58
  • 質問:みなさんはハンバーガーメニューは好きですか?
  • 07:53
  • 最近のWEBデザイントレンドの傾向
  • 00:29
  • フラットデザインとは何かを学ぼう
  • 04:46
  • マテリアルデザインとは何かを学ぼう
  • 06:25
  • リッチデザインとは何かを学ぼう
  • 06:05
  • まとめ
  • 01:44
  • Q,現在コーダーのみの求人がほぼない状態ですが、コーディングを主とした仕事をしたい未経験者はマークアップエンジニアから入ってフロントエンドエンジニアに就くのがよいでしょうか?
  • 01:14
  • Q,レスポンシブデザインで、スマホとタブレットを分けることはよくありますか?
  • 00:49
  • Q,先生はデザインも出来てプログラミングも出来ますが、どのようにプログラミングを勉強(学び)しましたか?デザイナーでプログラミングも出来る人は、なかなかいないと思うので。
  • 02:03
  • Q,jQueryで実装する時に、どのような学び方をした方がいいですか?イベント系やメソッドなどを自分で考えてサイトなどに実装する事が出来ません。jQueryを使うのに、あたって考え方や使い方のコツなどありますか?
  • 01:12
  • Q,ゴーストボタンは、フラットデザインとマテリアルデザイン、どちらに分類されるものでしょうか?
  • 00:38
  • Q,最近作ったレスポンシブのサイトがあれば参考にしいたいので、教えてください(^^)
  • 00:44
  • Q,ゴーストボタンは、フラットデザインとマテリアルデザイン、どちらに分類されるものでしょうか?(続き)
  • 00:47
  • Q,正しい考え方と間違った考え方の違いってどういうところでしょう
  • 01:35
  • Q,スマホ用のデザインカンプの参考例などはありますか?
  • 01:05
  • 次回の予告
  • 00:49
  • スクーからのお知らせ
デザインパターン基礎 -CSSのみで実装できるデザインテクニック-
2016年8月8日公開
01:00:00

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

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

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

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

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

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

 

■授業のアジェンダ(予定)

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

デザインパターン基礎 -CSSとjQueryを使ったハンバーガーメニューの実装-
2016年8月22日公開
01:00:00

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

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

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

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

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

■授業のアジェンダ(予定)

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

  • 授業の流れ
  • 01:19
  • ハンバーガーボタンとは何か学ぼう
  • 01:19
  • 質問:レスポンシブ対応ってどのように実装 しているかご存知ですか?
  • 02:56
  • レスポンシブ対応とは何か学ぼう
  • 06:04
  • ハンバーガーボタンのCSS設計
  • 04:48
  • 質問:なぜ.toggleのなかのspanに display:blockをつけるのでしょうか。
  • 06:51
  • 実装結果をみてみよう
  • 04:06
  • jQueryを導入したボタンの実装
  • 02:50
  • jQueryも含めたhtmlとcssの動きを確認してみよう
  • 05:54
  • Q.レスポンシブではサイズだけでなくiOSとAndloidのようにOSごとに切り分ける事は出来ますか?それともOSごとに分ける場合、別々にサイトを作成する事になるのでしょうか?
  • 00:57
  • Q.サンプルファイルにprepros.cfgというファイルがありますが何のファイルでしょうか?
  • 00:58
  • media screenが指定値以下の際のhtmlとcssの動きを確認してみよう
  • 08:54
  • まとめ
  • 01:14
  • Q.今回は二つで切り分けてましたが、先生はMedia Queriesを何ピクセルで切り分けますか?PC、タブレット、スマートフォンで切り分ける場合のpx数を教えていただけると助かります。
  • 02:22
  • Q.WordPressでjQueryをスムーズに動かす方法はあります?
  • 01:32
  • Q.WordPressでjQueryをスムーズに動かす方法はありますか?いつもこのハンバーガーメニューがwordpressで動かないことがよくあります。
  • 01:06
  • Q.メニューが表示される速さの調整は、.open .nav に指定ではないのですか?
  • 01:56
  • Q.HTMLでのjQuery(Javascript)の記述は、最後にまとめて書いた方が良いのでしょうか?
  • 00:57
  • Q.メディアクエリーではなく、.htaccessでのユーザーエージェントで区別することはよくありますか?
  • 01:17
  • Q.jQueryを使わず、CSSのみでハンバーガーメニューをするのとjQueryでハンバーガーメニューをするのは、どちらがいいですか。何か違いはありますか?
  • 01:43
  • お知らせ
デザインパターン基礎 -CSSとjQueryを使ったプルダウンの実装-
2016年8月29日公開
01:00:00

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

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

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

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

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

■授業のアジェンダ(予定)

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

デザインパターン基礎 -カルーセルスライダーslickを用いたスライドの実装-
2016年9月5日公開
01:00:00

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

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

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

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

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

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

  • 授業の流れ
  • 01:29
  • jQueryのプラグインslickについての理解
  • 00:55
  • 質問:皆さんはslickを用いたことがありますか?
  • 03:48
  • slickをダウンロードしてみよう。
  • 12:10
  • ダウンロードしたslickの中身を見てみよう
  • 05:50
  • サンプルファイル内のindex.htmlの確認
  • 02:43
  • slick(プラグイン)のインポートをしてみよう
  • 01:52
  • slick.jsの中身も見てみよう
  • 03:19
  • cssの部分を見てみよう
  • 02:52
  • 画像を1スライドずつ表示出来るように設定しよう
  • 01:04
  • 画像の位置を設定しよう
  • 04:43
  • スライドを実装してみよう
  • 03:08
  • 自動的に写真が送られる設定をしよう
  • 00:44
  • 切り替えスピードを設定しよう
  • 00:19
  • スライド下のドットを表示しよう
  • 00:30
  • jQueryのプラグインであるslickの記述部分を見てみよう
  • 03:49
  • まとめ
  • 00:57
  • Q.先生がこれはJQueryのプラグインを使うかJQueryにコードをゴリゴリ書くかを見極めるポイントはどこですか?どういうときコードを書こうと考えますか??
  • 01:16
  • Q.スライダー、以前はやっていたのですが、ファイルサイズが大きくなるのでやめました。どのくらいのサイズまでなら適正と考えられますか?また、画像ファイルのサイズを小さくするツールでオススメがあったら教えてください。
  • 01:23
  • Q.slickはwordpressに導入することはできますか?
  • 01:26
  • Q.slickは制作の現場で、よく使われていますか?今は、どれが支流ですか?
  • 00:42
  • Q..cat-in { width: 480px; height: 330px; overflow: hidden;がスライド画面の大きさだとしたら、縦横の数値を変えると画面サイズが変えられるんですか?
  • 02:04
  • Q.超初歩的な質問ですみません。HTMLの38行と39行はjqueryを使う時に必須の記述なのでしょうか?特に38行にあるURLのリンク先のプログラムとかがチンプンカンプンです。出来れば詳細を教えて欲しいです
  • 00:53
  • お知らせ
デザインパターン基礎 -動作に合わせてデザインを変化させるパララックス(視差効果)の実装-
2016年9月12日公開
01:00:00

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

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

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

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

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

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

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

デザインパターン基礎 -スクロール時にTOPを固定させる実装-
2016年9月19日公開
01:00:00

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

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

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

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

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

  • 授業の流れ
  • 01:21
  • 事前準備
  • 00:49
  • トップ固定の実装の説明
  • 00:51
  • サンプルファイルを見てみよう
  • 01:43
  • 質問:トップ固定の実装のメリットはなんでしょうか?
  • 02:05
  • トップ付け実装のメリット
  • 03:17
  • HTMLファイルのコードを見てみよう
  • 03:53
  • レスポンシブ対応を確認してみよう
  • 02:20
  • 各要素のサイズの設定を確認しよう
  • 03:38
  • jQueryがどういった働きをしているか
  • 05:31
  • HTMLファイルのjQueryの実装を見てみよう
  • 02:00
  • Q.jqueryにはバージョンが最近、1.0系と2.0系、3.0系とあると思うんですが、どれを使うのがいいですか?
  • 05:37
  • jQueryの変数の働きを見てみよう
  • 03:06
  • jQueryの実装を図で見てみよう
  • 07:15
  • Q.jQueryの記述にある「var」が今まであやふやだったんですが、複雑な記述を分かりやすいキーワードに置き換えるものという認識で間違いないでしょうか?
  • 00:59
  • 実際に動きを確認しよう
  • 08:53
  • まとめ
  • 01:24
  • Q.jqueryの上の部分ではvar top = $('.header').offset().top;下の部分ではvar topBtn = $('#area03Menu'); なんですが、.offset().topはなんですか?変数に入れるという処理はわかるのですが、この二つの違いはなんでしょうか?
  • 02:14
  • Q.HTMLでmainArea__articleの用にアンダーバーを2つ書いてるのは何か意味がありますか、また、先生はlessやscssを使いますか?
  • 03:05
  • Q.jqueryのエラーチェックはchromeのデベロッパーツールで行えばいいのでしょうか?他にいいツールはありますか?
  • 00:38
  • お知らせ
デザインパターン基礎 -情報量が多い時に役立つ切り替えタブの実装-
2016年9月26日公開
01:00:00

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

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

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

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

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

  • 【前半】授業
  • 00:22
  • 本日の授業の流れ
  • 01:48
  • 切り替えタブの実装について
  • 02:31
  • 切り替えタブとは?
  • 03:13
  • htmlとcssの解説
  • 00:22
  • サンプルファイルのhtmlを見てみよう
  • 03:07
  • Q.li要素改行しないのはなぜでしょうか?
  • 05:59
  • li要素周辺の構造を学ぼう
  • 08:49
  • jQueryの解説
  • 01:56
  • jQueryの動き
  • 02:28
  • jQueryとhtmlの関連した動き
  • 01:06
  • 1番目からじゃないのはなんででしょうか?
  • 02:29
  • jQueryとhtmlの関連した動き(続き)
  • 08:36
  • まとめ
  • 01:43
  • Q.もし、タブを3つある場合は、JQueryの部分はいじる必要はないんじゃないでしょうか??<ul class=
  • 01:19
  • Q.今回jqueryのバージョンが1.8.3ですが、選定理由というのはあるのでしょうか?
  • 00:45
  • Q.普通のアトムとかのテキストエディタでは、なかなかJQueryの関係性は分かりにくいのですが、なにかお勧めのエディタはありませんか??
  • 02:22
  • Q.もし、タブを3つある場合は、JQueryの部分はいじる必要はないんじゃないでしょうか??<ul class=
  • 01:52
  • Q.太田さんの質問の続きなのですが、width:100%;を三つにわけるときっちり分けられないケースがあると思うのですが、その場合は「33%、33%、34%」とプログラムしても問題ないのでしょうか?
  • 01:10
  • Q.ajaxみたいに、ボタンを押されたときにサーバから記事を動的に取ってくるというのはどうなんでしょうか?
  • 00:56
  • Q.お知らせやニュースを縦項目でレイアウトしたい場合は記述はガラッと変わるのでしょうか?
  • 01:21
  • Q.先生の、サブライムで、おすすめなプラグインはありますか?
  • 01:43
  • Q.最終回なのでお伺いしたのですが、先生が行ってたJavaScript、jqueryの勉強法を教えて頂ければと思います。
  • 02:03
  • 受講者の皆さんへのメッセージ
  • 01:15
  • お知らせ
こんな人にオススメ
全般

実践的に使えるデザインパターンを学びたいWebデザイナー

タグ
担当の先生
受講生代表
  • 新井 利佳

    新井 利佳

    スクー放送部

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

この授業を受けたい(705人)
その他 625人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×