Webデザインの骨組み「ワイヤーフレーム」設計

  • このエントリーをはてなブックマークに追加
Webデザインの骨組み「ワイヤーフレーム」を学ぼう
第1回:2014年5月7日公開 01:00:00

Webデザインの骨組み「ワイヤーフレーム」を学ぼう

受講する

WEBデザインに必要なワイヤーフレーム全3回】の1回目です。

「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。
この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトをデザインの準備をする」という事柄について学んでいければと思っています。

この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。
(※ このシリーズは3回受講する事が前提になっています。)

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)

この演習では、3番のサイト設計を行います。

受講にあたって準備するもの

1)adobe Illusrorator
下記のurlより、ダウンロードしてください。
https://creative.adobe.com/ja/products/illustrator
Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。
このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。

・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。

【Illustrator CC とは何ですか】
https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html

【独学でWebデザイン Illustrator 使い方 1回〜9回】
Illustrator CC 使い方講座(イラストレーターCC)中巻 第1章 パスの基本操作【動学.tv】
独学でWebデザイン Illustrator 使い方 第1回目 Illustratorの基本操作
独学でWebデザイン Illustrator 使い方 第2回目 図形の移動・複製、色の設定、線の設定
独学でWebデザイン Illustrator 使い方 第3回目 オブジェクトの前後関係
独学でWebデザイン Illustrator 使い方 第4回目 ペンツール・ベジェ曲線の引き方
独学でWebデザイン Illustrator 使い方 第5回目 イラストをトレースする
独学でWebデザイン Illustrator 使い方 第6回目 線種の設定 破線や地図などで使う線
独学でWebデザイン Illustrator 使い方 第7回目 パスのアウトラインで簡単な地図作成
独学でWebデザイン Illustrator 使い方 第8回目 パスの連結で簡単イラスト
独学でWebデザイン Illustrator 使い方 第9回目 グラデーションパレットとグラデーションツール

2)960 Grid System
http://960.gs/
ダウンロードしたzipファイルを解凍しておきます。

また、このシリーズでは、ダウンロード・圧縮ファイルの解凍、文字入力などのPCの基本操作ができる事が前提です。
また、ファイル名に拡張子が表示されている事が前提ですので、表示されていない方は以下のurlにて拡張子の表示を行ってください。

■ windows 全てのヴァージョンの拡張子の表示法
http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=8702-9695
■ Macの場合 拡張子の表示法
http://hamachan.info/mac/kihon/kakutyosi.html

授業一覧
Webデザインの骨組み「ワイヤーフレーム」を学ぼう
2014年5月7日公開
01:00:00

WEBデザインに必要なワイヤーフレーム全3回】の1回目です。

「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。
この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトをデザインの準備をする」という事柄について学んでいければと思っています。

この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。
(※ このシリーズは3回受講する事が前提になっています。)

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)

この演習では、3番のサイト設計を行います。

受講にあたって準備するもの

1)adobe Illusrorator
下記のurlより、ダウンロードしてください。
https://creative.adobe.com/ja/products/illustrator
Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。
このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。

・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。

【Illustrator CC とは何ですか】
https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html

【独学でWebデザイン Illustrator 使い方 1回〜9回】
Illustrator CC 使い方講座(イラストレーターCC)中巻 第1章 パスの基本操作【動学.tv】
独学でWebデザイン Illustrator 使い方 第1回目 Illustratorの基本操作
独学でWebデザイン Illustrator 使い方 第2回目 図形の移動・複製、色の設定、線の設定
独学でWebデザイン Illustrator 使い方 第3回目 オブジェクトの前後関係
独学でWebデザイン Illustrator 使い方 第4回目 ペンツール・ベジェ曲線の引き方
独学でWebデザイン Illustrator 使い方 第5回目 イラストをトレースする
独学でWebデザイン Illustrator 使い方 第6回目 線種の設定 破線や地図などで使う線
独学でWebデザイン Illustrator 使い方 第7回目 パスのアウトラインで簡単な地図作成
独学でWebデザイン Illustrator 使い方 第8回目 パスの連結で簡単イラスト
独学でWebデザイン Illustrator 使い方 第9回目 グラデーションパレットとグラデーションツール

2)960 Grid System
http://960.gs/
ダウンロードしたzipファイルを解凍しておきます。

また、このシリーズでは、ダウンロード・圧縮ファイルの解凍、文字入力などのPCの基本操作ができる事が前提です。
また、ファイル名に拡張子が表示されている事が前提ですので、表示されていない方は以下のurlにて拡張子の表示を行ってください。

■ windows 全てのヴァージョンの拡張子の表示法
http://www.fmworld.net/cs/azbyclub/qanavi/jsp/qacontents.jsp?PID=8702-9695
■ Macの場合 拡張子の表示法
http://hamachan.info/mac/kihon/kakutyosi.html

  • webサイト制作のワークフローは家造りと同じ?
  • 01:32
  • お客様へのヒアリングシートについて
  • 02:21
  • サイトの構成の考え方について
  • 00:38
  • サイト構成を手書きでラフスケッチを書く
  • 00:24
  • サイト設計における3つの鉄則
  • 01:30
  • 手書きのラフスケッチからワイヤーフレームを作る
  • 01:09
  • ワイヤーフレームを描くときに使う「フルードグリッド」(960グリッドシステム)について
  • 01:17
  • ワイヤーフレームに画像を埋め込み「カンプ」を制作する
  • 01:02
  • ワイヤーフレーム通りにコーディングする
  • 00:45
  • コーディングしたものを、サーバーへアップロードしてリリースする
  • 01:17
  • フルードグリッド(960グリッドシステム)について
  • 00:46
  • なぜワイヤーフレームを描くときに960グリッドシステムを使うと良いのか?
  • 01:28
  • ワイヤーフレームを描く際には、たくさんの同一業種のサイトをチェックして参考にする
  • 02:10
  • 検索エンジン(Google/Yahoo)に嫌われないサイトデザインについて
  • 02:18
  • ますます重要になっているモバイルファーストという考え方について
  • 00:57
  • 【演習課題について】女性向けファッションサイトのペーパープロトタイピングを制作し、ワイヤーフレームを作る(お客様の要望を元に制作する)
  • 05:43
  • プロトタイピングとワイヤフレームについてのサンプルのご紹介
  • 01:05
  • 【演習】Adobe Illustratorを起動して960グリッドシステムのファイルを開く
  • 14:32
  • 質疑応答Adobe Illustratorに代わるアプリケーションはありますか?(cacooについて)
  • 05:43
  • アクセシビリティについて、音声ブラウザ・色覚特性への配慮は実務ではどのように実施されていますか?
  • 02:31
  • ワイヤーフレーム、今回イラストレーターで作っていますが、Adobe Photoshopでも可能ですか?
  • 01:24
  • PowerPointで制作してもいいですか?
Webデザインの骨組み「ワイヤーフレーム」を学ぼう【制作編】
2014年5月17日公開
01:00:00

WEBデザインに必要なワイヤーフレーム全3回】の2回目です。

「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。
この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトのデザインが始められる準備をする」という事柄について学んでいければと思っています。

この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。

この3回連続授業は、3回の授業を順番に受講していくことで「ワイヤーフレーム」の作り方を習得していきます。

サイト制作の大まかな流れは、下記の様な物になります。

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)

この演習では、3番のサイト設計を行います。

受講にあたって準備するもの

1)adobe Illusrorator
下記のurlより、ダウンロードしてください。
https://creative.adobe.com/ja/products/illustrator
Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。
このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。

・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。

・windowsXPをお使いの方はサービスパック3(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。

【Illustrator CC とは何ですか】
https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html

【独学でWebデザイン Illustrator 使い方 1回〜9回】
Illustrator CC 使い方講座(イラストレーターCC)中巻 第1章 パスの基本操作【動学.tv】
独学でWebデザイン Illustrator 使い方 第1回目 Illustratorの基本操作
独学でWebデザイン Illustrator 使い方 第2回目 図形の移動・複製、色の設定、線の設定
独学でWebデザイン Illustrator 使い方 第3回目 オブジェクトの前後関係
独学でWebデザイン Illustrator 使い方 第4回目 ペンツール・ベジェ曲線の引き方
独学でWebデザイン Illustrator 使い方 第5回目 イラストをトレースする
独学でWebデザイン Illustrator 使い方 第6回目 線種の設定 破線や地図などで使う線
独学でWebデザイン Illustrator 使い方 第7回目 パスのアウトラインで簡単な地図作成
独学でWebデザイン Illustrator 使い方 第8回目 パスの連結で簡単イラスト
独学でWebデザイン Illustrator 使い方 第9回目 グラデーションパレットとグラデーションツール

※この授業は1回目の受講と課題を制作していると、より理解が深まります。
第一回の授業を受講されていない方は、録画授業で受講されてから受講することをお勧めします。

  • 自己紹介&アジェンダ
  • 01:53
  • サイト設計の流れ
  • 00:27
  • サイト開発の流れ
  • 01:24
  • フルードグリッドって何?
  • 02:27
  • ワイヤーフレームを作るIllustratorは
  • 01:19
  • ワイヤーフレームに適したフォントって?
  • 00:33
  • 画像と文字、文字ブロック同士の間隔は指定するべきか?
  • 01:35
  • YouTubeが入る画像はIllustratorで作るのか?
  • 01:43
  • ブートストラップって何?
  • 04:27
  • ワイヤーフレームにおけるガイドの修正方法
  • 03:00
  • 「ガイドをロック」からガイド位置を変更する
  • 02:40
  • ピクセル単位の修正をしやすくする方法
  • 01:40
  • 画像の枠線の位置を変える方法
  • 02:16
  • 画像と画像の適当な間隔はどれくらい?
  • 04:24
  • Illustratorは体験版から試してみる
  • 04:27
  • まとめ
  • 02:49
  • Q:Webデザインの「ワイヤーフレーム」で役に立つ書籍はありますか?
  • 04:16
  • Q:ワイヤーフレームが早く、正確に作成するための練習って、どんなことをするのがオススメですか?
  • 02:28
  • Q:先生はデザインカンプを作る時に、デッサンなどしてした絵を描いてからしますか?
  • 02:34
  • Q:授業の電子書籍は発売しないのでしょうか?
  • 01:48
  • Q:ボックスとボックスのマージンはどのように計るのが正確で簡単でしょうか?
  • 02:19
  • Q:先生はイラストレーターとPhotoshop、どちらでカンプを作りますか?
  • 01:33
  • Q:とある携帯ショップの面接を受けることになったのですがA4でPOPを作って持ってくださいって言われましたが、POPでも、ワイヤーフレームを作ったほうがよいですか?
  • 02:32
  • Q:紙とWebでイラストレーターの使い方は違ったりしますか?
  • 02:30
  • レポート課題発表
Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】
2014年5月18日公開
01:00:00

WEBデザインに必要なワイヤーフレーム全3回】の3回目です。

「ワイヤーフレーム」とは、Webサイトを作成する前に制作する、コンテンツやレイアウト(配置)を確認して、整理するための構成図です。
この授業では、そんなWebサイトをデザインしていく際のとっかかりとしてワイヤーフレームを作成しながら、「Webサイトにはどのような要素が必要なのか」「Webサイトのデザインが始められる準備をする」という事柄について学んでいければと思っています。

この授業で学べる事は、adobe Illusroratorを使用して、webページの設計図であるワイヤーフレームを設計する方法です。

この最終回では、

1回目の「Webデザインの骨組み「ワイヤーフレーム」を学ぼう」で課題を制作し、2回目の「ワイヤーフレーム演習(提出課題の添削&先生の実演)」で修正したワイヤーフレームを、実際にコーディングや画像制作を実行してフロントエンドを開発していく設計図として完成させます。

 

1)クライアント(お客様)へのヒヤリング
2)ターゲット設定
3)サイト設計(ワイヤーフレーム)
4)制作仕様書策定(デザインルール、コーディングルール策定)
5)開発(デザイン&コーディング)
6)ローカルテスト
7)テストサーバーレビュー(クライアントチェック)
8)リリース(本サーバーアップ)
9)ランニング(SEO解析)

この演習では、3番のサイト設計を行います。

この3回連続授業は、3回の授業を順番に受講していくことで「ワイヤーフレーム」の作り方を習得していきます。

受講にあたって準備するもの

1)adobe Illusrorator
下記のurlより、ダウンロードしてください。
https://creative.adobe.com/ja/products/illustrator
Illusroratorを使うにはまず、Adobe Creative Stationをインストールします。上記のurlから案内に従ってインストールしてください。
体験版は1ヶ月無料で使用できます。
このシリーズの「WEBデザインのためのPhotoshop」まで無料体験版を使用する為には、5月4日以降にインストールをして下さい。

・容量が大きいのでダウンロードにかなり時間がかかります。
・wiondowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入っている事が望ましいです。
・初めてに触れる人は、以下のトレーニングビデオを全て見てIllustoratorの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Illustoratorではどんな事ができるか知っておきましょう。

・windowsXPをお使いの方はサービスパック3(SP3)までをインストールする事によって、adove CC Illustoratorをインストールできます。各ヴァージョンのwindowsの対応状況に付いては下記をご覧下さい。

【Illustrator CC とは何ですか】
https://helpx.adobe.com/jp/creative-cloud/tutorials/video/what-is-illustrator.html

【独学でWebデザイン Illustrator 使い方 1回〜9回】
Illustrator CC 使い方講座(イラストレーターCC)中巻 第1章 パスの基本操作【動学.tv】
独学でWebデザイン Illustrator 使い方 第1回目 Illustratorの基本操作
独学でWebデザイン Illustrator 使い方 第2回目 図形の移動・複製、色の設定、線の設定
独学でWebデザイン Illustrator 使い方 第3回目 オブジェクトの前後関係
独学でWebデザイン Illustrator 使い方 第4回目 ペンツール・ベジェ曲線の引き方
独学でWebデザイン Illustrator 使い方 第5回目 イラストをトレースする
独学でWebデザイン Illustrator 使い方 第6回目 線種の設定 破線や地図などで使う線
独学でWebデザイン Illustrator 使い方 第7回目 パスのアウトラインで簡単な地図作成
独学でWebデザイン Illustrator 使い方 第8回目 パスの連結で簡単イラスト
独学でWebデザイン Illustrator 使い方 第9回目 グラデーションパレットとグラデーションツール

※この授業は1〜2目の受講と課題を制作していると、より理解が深まります。
第一回の授業を受講されていない方は、録画授業で受講されてから受講することをお勧めします。

  • 自己紹介&アジェンダ
  • 01:40
  • 1ピクセルの狂いもないワイヤーフレームを制作するには?
  • 00:51
  • イラストレーターの使い方はどこで学べるか?
  • 02:52
  • 制作仕様書を書く前に準備すること
  • 01:19
  • HTMLにおける<header></header>って何?
  • 04:27
  • HTMLにおける「.btn{clear:both;}」って何?
  • 04:38
  • ワイヤーフレームを元に制作仕様書を作る方法
  • 00:44
  • ドキュメントサイズの変更方法
  • 02:16
  • レイヤーパレットはどう使えばいいか?
  • 05:19
  • Q:CS6でワイヤーフレームを1pxのずれもなく作ろうとしたのですが、拡大して、ガイド線に合わせても、1pxずれてしまいます。別のバージョンのイラレでやったら、普通に出来ました。、 何か設定があるのでしょうか?
  • 12:08
  • Q:今後、ワイヤーフレーム作成ではインブラウザデザインとAi&PS作成とどちらのケースが増えていきますか?
  • 04:44
  • Q:adobe creative cloudの会員になったら、aiとps以外にも色々便利そうなツールが使えるみたいなんですが(museとか)これいいよみたいなのありますか?
  • 09:47
  • Q:コーディングの苦手意識を克服するには、数と経験でしょうか?
  • 02:26
  • Q:WEB業界で働くのに、最低限身につけていないと、いけないスキルはありますか?
  • 02:28
  • Q:Ai Ps FW でデザインを作って画像を書き出すのは便利ですが、Dwは非常に使いにくく感じます(個人の感想)。Sublimeの方が便利かと思いますが、どの辺に注意すればDwに馴染めますか?
  • 02:04
  • レポート課題発表
こんな人にオススメ
WEBデザイナー(初心者)

Webサイトがどのように作られているのかをこれから勉強する方

タグ
授業で使用するファイル

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

担当の先生
受講生代表
  • 鈴木 満里乃

    鈴木 満里乃

    スクー放送部

この授業を受けたい(2257人)
その他 2178人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×