1/26(Tue)
第1回:2015年4月4日公開
45min
この授業では合計8回で一通りのWebデザイン制作方法を学びます。
Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。
スクー放送部
※授業以外での利用は禁止します。
2015年4月4日公開
45min.
このコースでは全8回の授業で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。
今回は一般的なWeb制作のワークフロー確認と、そのスタート地点となるヒアリングシートの重要項目について学んでいきます。
スライド資料
2015年4月4日公開
45min.
このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。
今回は1限で紹介したワークフローの「1.ヒヤリングを元にユーザー設定」を学びます。
アジェンダ
・Webデザイナーの守備範囲
・チームを組んでWeb開発しよう(役割分担)
・サイト構造設計
・制作仕様書作成: デザインガイドライン
・制作仕様書作成: コーディングガイドライン
スライド資料
2015年4月11日公開
45min.
このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。
今回は1限目で取り上げたワークフローの「2.予算・伝えたいボリュームを元に構造設計」を学びます。
アジェンダ
資料p8の、ガントチャートはこちらのページです。
スライド資料
2015年4月11日公開
45min.
このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。
今回は、1限で紹介したワークフローの「3.伝えたい事が伝わるサイトデザイン」「4.各ページのデザイン」について学んでいきます。
アジェンダ
スライド資料
2015年4月18日公開
45min.
このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。
今回は1限で紹介したワークフローの「5.素材集め(原稿・画像など)」「6.開発フロー」を学びます。
アジェンダ
スライド資料
2015年4月18日公開
45min.
このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。
今回は、1限で紹介したワークフローの「5.素材集め(原稿・画像など)」「6.開発フロー」を学びます。
アジェンダ
1.コンテンツの中には実績として数値を表示するページがあります。それが退屈な物であれば離脱されてしまいます。数値表現を人の目を惹き付けるグラフィカルで動きのある物にする手法を学びます。
2.お申し込み方法、登録方法など、成果につながるページに親切なガイドは必須です。ところが、ここが一番離脱率を招く鬼門でもあるのです。退屈させない引き込まれるように、ガイドに沿ってユーザーに申し込みや登録を完了させるサイトの制作手法を学びます。
スライド資料
2015年4月25日公開
45min.
このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。
1限で紹介したワークフローの「6.開発フロー」を学びます。
スマホでのサイト閲覧数がPCでのサイト閲覧数を超えた今、マウスオーバーで変わるデザインから、「表示されたら動く」「スクロールされたら動く」サイトへとデザインが変化しています。
そんな時代に求めらえる「動くデザイン」をカッコよくハイセンスに作ってユーザーの心を引き付けましょう。ただし、IE対策をお忘れなく!この授業はスマホでカッコよく動くデザイン+レガシーブラウザ対応もしっかり学んで行きます。
スライド資料
2015年4月25日公開
45min.
このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。
フロントエンド開発もいよいよ大詰めです。デザイナーは最後まで「操作性」「スタイリッシュさ」を追求してブラッシュアップを続ける必要があり、隅々までデザインポリシーが行き届いていると良質なサイトになります。
今回は、画像の細部までこだわりたい際に有効なSVGと呼ばれる技術、ファイル形式について学んでいきます。
アジェンダ
1.制作したロゴやマークをSVGコードで書き出す
2.SVGコード担ったロゴマークをメタモルフォーゼさせる
スライド資料