6/20(Thu)

今日の生放送

ワイヤーフレーム・デザインカンプ入門

ワイヤーフレーム・デザインカンプ入門 -概要と役割-

第1回:2015年9月3日公開

60min

ワイヤーフレーム・デザインカンプ入門 -概要と役割-

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

コース概要

WEB制作で仕事をしたい人に向けた、ワイヤーフレームとデザインカンプ入門の授業です。ワイヤーフレームはサイトの設計図、デザインカンプは完成イメージに相当するものであり、クライアントやチームと制作をする際に無くてはならない知識です。制作方法はもちろん、その活用方法を、現場のデザイナーを交えながら学びます。

こんな人にオススメ

WEB制作入門者の方・Webデザイナーを目指す方

担当の先生

パーソナリティ

  • 青島 莉子

    青島 莉子

    スクー放送部

  • 江川 みどり

    江川 みどり

    スクー放送部

参加したい受講生 : 2072

カテゴリー

タグ

サンプルファイル

授業で使用するファイル

先生が授業中に作成したデザインカンプを資料として提供して下さいました。ぜひダウンロードしてみて下さい。

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

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

授業リスト

ワイヤーフレーム・デザインカンプ入門 -概要と役割-

2015年9月3日公開

60min.

WEB制作で仕事をしたい人に向けた、ワイヤーフレームとデザインカンプ入門の授業です。ワイヤーフレームはサイトの設計図、デザインカンプは完成イメージに相当するものであり、クライアントやチームと制作をする際に無くてはならない知識です。制作方法はもちろん、その活用方法を、現場のデザイナーを交えながら学びます。

1限目の今回は、ワイヤーフレームやデザインカンプがなぜ必要なのか、どんなシーンで使われるのかについて学びます。

今回の授業で学べること
・ワイヤーフレームはどういうものか
・ワイヤーフレームを利用することで内外とのコミュニケーションをシンプルにできる
・ワイヤーフレームを必要とする人、しない人
・デザインカンプとはどういうものか
・伝わりにくいデザインこそ、カンプが重要
・デザインカンプを必要とする人、しない人

スライド資料

ワイヤーフレーム・デザインカンプ入門 -ワイヤーフレームの作り方-

2015年9月10日公開

60min.

WEB制作で仕事をしたい人に向けた、ワイヤーフレームとデザインカンプ入門の授業です。ワイヤーフレームはサイトの設計図、デザインカンプは完成イメージに相当するものであり、クライアントやチームと制作をする際に無くてはならない知識です。制作方法はもちろん、その活用方法を、現場のデザイナーを交えながら学びます。

2限目の今回は、ワイヤーフレームの作り方について学びます。簡単なワイヤーフレームを作ったり、実際のWEBサイトを例にしてワイヤーフレームを作ってみましょう。

今回の授業で学べること
・ワイヤーフレームを構成する要素
・ワイヤーフレームの考え方
※ 内容は放送迄に更新される場合がございます。予めご了承下さい。

スライド資料

ワイヤーフレーム・デザインカンプ入門 -デザインカンプの作り方-

2015年9月17日公開

60min.

WEB制作で仕事をしたい人に向けた、ワイヤーフレームとデザインカンプ入門の授業です。ワイヤーフレームはサイトの設計図、デザインカンプは完成イメージに相当するものであり、クライアントやチームと制作をする際に無くてはならない知識です。制作方法はもちろん、その活用方法を、現場のデザイナーを交えながら学びます。

3限目の今回は、デザインカンプの作り方を学習します。

■ 事前準備

Photoshop(講習ではCC2015で解説)
※インストールされたPCをご用意いただくか、下記URLから無料体験版をインストールしてください。
https://creative.adobe.com/ja/products/download/photoshop

Brackets (テキストエディタ 無料)
http://brackets.io/

スライド資料

ワイヤーフレーム・デザインカンプ入門 -制作実演-

2015年9月24日公開

60min.

WEB制作で仕事をしたい人に向けた、ワイヤーフレームとデザインカンプ入門の授業です。ワイヤーフレームはサイトの設計図、デザインカンプは完成イメージに相当するものであり、クライアントやチームと制作をする際に無くてはならない知識です。制作方法はもちろん、その活用方法を、現場のデザイナーを交えながら学びます。

4限目の今回は、架空の案件を題材にして、クライアントにワイヤーフレームとデザインカンプを用いた提案をしてみましょう。

今回の授業で学べること
・ワイヤーフレーム・デザインカンプの制作方法
・ワイヤーフレームやデザインカンプを用いた提案のポイント

  • 自己紹介&アジェンダ
  • 03:49
  • 実際の案件で起こりがちなことを考える
  • 11:59
  • hatte Inc.の作業フローはどうなっているのか
  • 06:11
  • 架空案件を例にもう少し突っ込んでみる
  • 04:10
  • ワイヤーフレームにして確認してみる
  • 03:20
  • ワイヤーフレームは想定されるタイプのレイアウトすべての分を作っておく
  • 06:01
  • スマホ用のワイヤーフレーム
  • 03:02
  • まとめ
  • 01:44
  • Q:各フェーズ毎に確認書などをかわすことはしないのですか?
  • 00:36
  • Q:今回の架空案件はどのくらいの期間で製作できますか?
  • 01:01
  • Q:スマホ用はjquery mobileで作成ですか?
  • 00:35
  • Q:レスポンシブデザインでコーディングするときメディアクエリ使いますか?js使いますか?
  • 00:40
  • Q:今回のワイヤーフレームのフォントは、何か工夫されていますか?
  • 00:58
  • Q:やはり、デザインもコーディングもできると良いですか?それとも分業の方がやりやすいですか?
  • 01:03
  • Q:お客さんからの修正や注文が多い、なかなか決まらないなど、予算や納期の都合で困る時が多々あります。 提案力やディレクターの取り仕切りの問題かと思いますが、どのような対応をしているのか、是非教えてください。
  • 00:58
  • Q:フレームワークやツールなどをどのような基準で選ばれていますか?
  • 01:01
  • Q:実際作る時は、PCファーストですか?モバイルファーストですか?
  • 00:44
  • Q:先生は一人でコーディングされるとの事ですが、どうしても一人では無理となった場合はどういう対応をされますか?
  • 00:47
  • Q:WEB制作での修正は何回まで可能にしていますか?
  • 01:04
  • Q:一人でコーディングしていて、バグの原因が見つからない時、どうされていますか?
  • 01:02
  • Q:クライアントが原稿を書き下ろしされる事になっていて、半年~1年くらい、なかなかコンテンツが出揃ってこない場合、どのように対応したら良いでしょうか。
  • 01:39
  • Q:小規模事業者が、Webサイト製作を受注するためのコツを教えてください。
  • 01:40
  • Q:今回の架空案件の予算計算方法を教えて下さい
  • 01:17
  • Q:新しい技術が出た時は、色々試した上で実践投入ですか?
  • 01:11
  • Q:WEBサイトを作って納品した後の更新や、メンテナンスは、どのようにしていますか?

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ