Webデザインの全行程

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

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

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

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

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

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

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

アジェンダ

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

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

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

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

アジェンダ

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

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

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

アジェンダ

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

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

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

アジェンダ

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

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

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

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

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

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

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

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

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