おためし受講中

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

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

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

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

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

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

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

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

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

学生代表

  • 新井 利佳

    新井 利佳

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    02:02  (00:30 ~ )
    全体の流れ
    00:22  (02:32 ~ )
    今日の流れ
    00:58  (02:54 ~ )
    WEB制作におけるデザインの意義
    00:10  (03:52 ~ )
    質問:みなさんにとってデザインとは何ですか?
    02:21  (04:02 ~ )
    一般的に言われているデザインと本来のデザインの意味を学ぼう
    02:17  (06:23 ~ )
    WEB制作の流れを確認しよう
    01:40  (08:40 ~ )
    フロントエンドにおけるWEBデザインの意義を学ぼう
    03:24  (10:20 ~ )
    PCデザインとスマートフォンデザインの関わり方
    00:58  (13:44 ~ )
    PCサイトとスマートフォンサイトのそれぞれの特徴を学ぼう
    04:58  (14:42 ~ )
    質問:みなさんはハンバーガーメニューは好きですか?
    07:53  (19:40 ~ )
    最近のWEBデザイントレンドの傾向
    00:29  (27:33 ~ )
    フラットデザインとは何かを学ぼう
    04:46  (28:02 ~ )
    マテリアルデザインとは何かを学ぼう
    06:25  (32:48 ~ )
    リッチデザインとは何かを学ぼう
    06:05  (39:13 ~ )
    まとめ
    01:44  (45:18 ~ )
    【後半】質疑応答
    Q,現在コーダーのみの求人がほぼない状態ですが、コーディングを主とした仕事をしたい未経験者はマークアップエンジニアから入ってフロントエンドエンジニアに就くのがよいでしょうか?
    01:14  (47:15 ~ )
    Q,レスポンシブデザインで、スマホとタブレットを分けることはよくありますか?
    00:49  (48:29 ~ )
    Q,先生はデザインも出来てプログラミングも出来ますが、どのようにプログラミングを勉強(学び)しましたか?デザイナーでプログラミングも出来る人は、なかなかいないと思うので。
    02:03  (49:18 ~ )
    Q,jQueryで実装する時に、どのような学び方をした方がいいですか?イベント系やメソッドなどを自分で考えてサイトなどに実装する事が出来ません。jQueryを使うのに、あたって考え方や使い方のコツなどありますか?
    01:12  (51:21 ~ )
    Q,ゴーストボタンは、フラットデザインとマテリアルデザイン、どちらに分類されるものでしょうか?
    00:38  (52:33 ~ )
    Q,最近作ったレスポンシブのサイトがあれば参考にしいたいので、教えてください(^^)
    00:44  (53:11 ~ )
    Q,ゴーストボタンは、フラットデザインとマテリアルデザイン、どちらに分類されるものでしょうか?(続き)
    00:47  (53:55 ~ )
    Q,正しい考え方と間違った考え方の違いってどういうところでしょう
    01:35  (54:42 ~ )
    Q,スマホ用のデザインカンプの参考例などはありますか?
    01:05  (56:17 ~ )
    次回の予告
    00:49  (57:22 ~ )
    スクーからのお知らせ
      (58:11 ~ )