Webデザインの全行程

Webデザイン入門 ワークフロー編

第1回:2015年4月4日公開

45min

Webデザイン入門 ワークフロー編

おためし受講する(5分)

コース概要

この授業では合計8回で一通りのWebデザイン制作方法を学びます。

Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

こんな人にオススメ

Webデザインを身に付けたい方・初めてサイト制作に取り組む方

担当の先生

パーソナリティ

  • 青島 莉子

    青島 莉子

    スクー放送部

参加したい受講生 : 3915

カテゴリー

タグ

サンプルファイル

授業で使用するファイル

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

月額980円で、4,600本以上の授業が見放題

授業リスト

Webデザイン入門 ワークフロー編

2015年4月4日公開

45min.

このコースでは全8回の授業で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

今回は一般的なWeb制作のワークフロー確認と、そのスタート地点となるヒアリングシートの重要項目について学んでいきます。

スライド資料

Webデザイン入門 サイト設計編

2015年4月4日公開

45min.

このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

今回は1限で紹介したワークフローの「1.ヒヤリングを元にユーザー設定」を学びます。

アジェンダ
・Webデザイナーの守備範囲
チームを組んでWeb開発しよう(役割分担)
サイト構造設計
制作仕様書作成: デザインガイドライン
制作仕様書作成: コーディングガイドライン

スライド資料

Webデザイン入門 工程表とワイヤーフレーム

2015年4月11日公開

45min.

このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

今回は1限目で取り上げたワークフローの「2.予算・伝えたいボリュームを元に構造設計」を学びます。

アジェンダ

  • 期限を決めたら逆算して工程を組み立てていこと
  • ガントチャートを作って期間を管理すること
  • 無料で使えるすぐれた工程表のご紹介
  • etc...

 

資料p8の、ガントチャートはこちらのページです。

スライド資料

Webデザイン入門 デザインモック制作編

2015年4月11日公開

45min.

このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

今回は、1限で紹介したワークフローの「3.伝えたい事が伝わるサイトデザイン」「4.各ページのデザイン」について学んでいきます。

アジェンダ

  • ターゲット層に刺さるデザイン策定
  • ワイヤーフレームのとテイストのマッピング
  • ビジターのお目当て以上をデザインで表現する

スライド資料

Webデザイン入門 Webフォント使用編

2015年4月18日公開

45min.

このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

今回は1限で紹介したワークフローの「5.素材集め(原稿・画像など)」「6.開発フロー」を学びます。

アジェンダ

  • cssで実装するgoogle Webフォントをデザインモックで使用する方法
  • デザインモック上で使用している日本語フォントをcssで実装する方法

スライド資料

Webデザイン入門 マッシュアップでUX編

2015年4月18日公開

45min.

このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

今回は、1限で紹介したワークフローの「5.素材集め(原稿・画像など)」「6.開発フロー」を学びます。

アジェンダ

1.コンテンツの中には実績として数値を表示するページがあります。それが退屈な物であれば離脱されてしまいます。数値表現を人の目を惹き付けるグラフィカルで動きのある物にする手法を学びます。

2.お申し込み方法、登録方法など、成果につながるページに親切なガイドは必須です。ところが、ここが一番離脱率を招く鬼門でもあるのです。退屈させない引き込まれるように、ガイドに沿ってユーザーに申し込みや登録を完了させるサイトの制作手法を学びます。

スライド資料

Webデザイン入門 動くデザイン制作編

2015年4月25日公開

45min.

このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

1限で紹介したワークフローの「6.開発フロー」を学びます。

スマホでのサイト閲覧数がPCでのサイト閲覧数を超えた今、マウスオーバーで変わるデザインから、「表示されたら動く」「スクロールされたら動く」サイトへとデザインが変化しています。
そんな時代に求めらえる「動くデザイン」をカッコよくハイセンスに作ってユーザーの心を引き付けましょう。ただし、IE対策をお忘れなく!この授業はスマホでカッコよく動くデザイン+レガシーブラウザ対応もしっかり学んで行きます。

スライド資料

Webデザイン入門 オリジナルアニメーションアイコン制作編

2015年4月25日公開

45min.

このコースでは合計8回で一通りのWebデザイン制作方法を学びます。Webサイトを制作する流れを知り、全行程を把握する授業で、Web制作の全てを理解することができます。

フロントエンド開発もいよいよ大詰めです。デザイナーは最後まで「操作性」「スタイリッシュさ」を追求してブラッシュアップを続ける必要があり、隅々までデザインポリシーが行き届いていると良質なサイトになります。

今回は、画像の細部までこだわりたい際に有効なSVGと呼ばれる技術、ファイル形式について学んでいきます。

アジェンダ
1.制作したロゴやマークをSVGコードで書き出す
2.SVGコード担ったロゴマークをメタモルフォーゼさせる

スライド資料

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ