デザインパターン基礎

  • このエントリーをはてなブックマークに追加
デザインパターン基礎 -Web制作におけるデザインの全体像をつかむ-

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

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

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

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

受講する
デザインパターン基礎 -Web制作におけるデザインの全体像をつかむ-
2016年8月1日公開
01:00:00
  • 自己紹介
  • 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
  • 自己紹介
  • 00:57
  • 授業の流れ
  • 01:57
  • CSSがどう動いているかの復習
  • 00:15
  • CSSとHTMLの関係性を学ぼう
  • 03:17
  • 質問：display:block;とdisplay:inline;の 違いって分かりますか？
  • 02:49
  • display:block;の特徴を学ぼう
  • 07:07
  • display:inline;の特徴を学ぼう
  • 10:00
  • paddingとmarginの違いを学ぼう
  • 01:35
  • 効果をつける時に使用することが多いCSSの紹介
  • 00:30
  • 効果をつける時に使用することが多いCSSの紹介
  • 04:11
  • 3種類のアクションボタンの作成
  • 00:31
  • 触れたら色が変わるボタンを作ろう
  • 08:46
  • 触れたら色がふわっと変わるボタンを作ろう
  • 03:57
  • 触れたら回転するボタンをつくろう
  • 07:10
  • まとめ
  • 01:54
  • Q,センター合わせにする際に、text-align;center;とmargin:auto 0;の違いはどうなのでしょう？
  • 02:41
  • Q,先生は、リセットCSSは何を使っていますか？自分で書いて（作って）いますか？
  • 01:30
  • お知らせ
開く
受講する
デザインパターン基礎 -CSSとjQueryを使ったハンバーガーメニューの実装-
2016年8月22日公開
01:00:00
  • 授業の流れ
  • 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
  • 授業の流れ
  • 01:54
  • プルダウンの構造理解
  • 00:22
  • 質問：皆さんはCSSでデザイン完結したい派ですか？ それともjsをたくさん使って実装したい派ですか？
  • 06:14
  • プルダウンの構造理解
  • 06:19
  • <il>要素の構造を学ぼう
  • 04:47
  • プルダウンのCSS設計
  • 01:35
  • AからBに至るまでの速度の設定方法を学ぼう
  • 05:59
  • Y軸での位置指定をしよう
  • 05:04
  • 左上を基準にして位置を定める指定をしよう
  • 07:17
  • 階層の指定をしよう
  • 02:55
  • jQueryを導入したプルダウンの実装
  • 13:06
  • まとめ
  • 01:38
  • Q.top -500px する場合、メニューが上にぴったりだったら使えますが、上に隙間があるデザインだったりする場合にはどのようにしたらいいでしょうか。
  • 01:10
  • Q..header__menu > li　の「 >」は何を意味しているのですか？
  • 00:58
  • お知らせ
開く
受講する
デザインパターン基礎 -カルーセルスライダーslickを用いたスライドの実装-
2016年9月5日公開
01:00:00
  • 授業の流れ
  • 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
  • 授業の流れ
  • 01:19
  • パララックス全体の説明
  • 00:55
  • 質問：パララックスという言葉を聞いたことがありますか？
  • 01:56
  • パララックスとは
  • 00:38
  • パララックスを実際に見てみよう
  • 05:11
  • 背景固定の作り方
  • 01:22
  • 背景を固定するときのHTMLとCSSの実装を見てみよう
  • 03:02
  • header周辺のページの構造を見てみよう
  • 10:24
  • 時間差で降りてくる雪の作り方
  • 00:59
  • 時間差で降りてくる雪の実装を見てみよう
  • 05:12
  • border-radiusの指定
  • 12:24
  • 一定のスクロール量で現れる要素の作り方
  • 08:19
  • まとめ
  • 01:09
  • Q.backgroundを#fffやrgbaではなく、whiteにすると崩れるのはなぜですか？
  • 01:17
  • Q.雪の効果は実際のWEBサイトでは、どんな時に、使う事が多いですか？また、LP（ランディングページ）サイトとかは、パララックス効果、よく使われますか？
  • 01:33
  • Q.背景画像の固定で「position: fixed」と「background-attachment: fixed」の違いを教えてください。
  • 01:11
  • Q.jqueryの上の部分ではvar top = $('.header').offset().top;下の部分ではvar topBtn = $('#area03Menu'); なんですが、.offset().topはなんですか？変数に入れるという処理はわかるのですが、この二つの違いはなんでしょうか？
  • 01:04
  • お知らせ
開く
受講する
デザインパターン基礎 -スクロール時にTOPを固定させる実装-
2016年9月19日公開
01:00:00
  • 授業の流れ
  • 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の用にアンダーバーを２つ書いてるのは何か意味がありますか、また、先生はlessやscssを使いますか？
  • 03:05
  • Q.jqueryのエラーチェックはchromeのデベロッパーツールで行えばいいのでしょうか？他にいいツールはありますか？
  • 00:38
  • お知らせ
開く
受講する
デザインパターン基礎 -情報量が多い時に役立つ切り替えタブの実装-
2016年9月26日公開
01:00:00
  • 【前半】授業
  • 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デザイナー

スライド資料
授業で使用するファイル

※授業以外での利用は禁止します。

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

    新井 利佳

    スクー放送部

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

受けたいランキング
もっと見る
新着の生放送授業
もっと見る
関連授業

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

わずか3分で簡単登録できます

会員登録（無料） すでに会員の方はこちらからログイン
×