ワイヤーフレーム作成

WEBサイト制作の流れ

ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング

以上を意識してワイヤーフレームを作成

感想

レイアウト9割ということが衝撃的だった。

ファーストビュー
連絡先・などそのページの目的に達するものがちゃんとページの中に盛り込むことが大切。

レイアウトのパターンを選び、作成できる技術を残りの2か月訓練していくのだが、どこまでできるのか、今の自分の力で何がどれだけ足りないのか、考えた。

1・画像作成ソフト  バナーなどもう1度おさらいする

2.デザインについての復習 レイアウトの事がよく理解できてないので   

時間を見つけて復習をする必要があると感じた。

20240423-本日のアジェンダ-

【オンライン】

1限目
学科 ユーザーインターフェイス基礎③
デザインラフについて

2限目
学科 ユーザーインターフェイス基礎③
HTML/CSSをイメージしたレイアウト考案について

3限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

4限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

5限目
学科 ユーザーインターフェイス基礎③
制作に向けての準備

本日のテーマ

コーディングの準備をしましょう

WEBサイト制作の流れ

ヒアリング、ワイヤーフレーム制作
↓↓↓
◆デザインラフ制作◆
↓↓↓
コーディング

デザインラフとは?

Webサイトの完成見本のことを指します。
ワイヤーフレームで作った骨組みに画像やテキストを挿入したり、色やフォントサイズを指定したりして具体的にデザインしていきます。

ワイヤーフレーム製作前の手書きスケッチ(ラフ)とは別もので、デザインカンプと呼ばれることもあります。

ワンポイントアドバイス

ワイヤーフレームの次はデザインラフを提出する事がよくある制作の流れです。サイトの完成イメージを画像でお客様に見せる為です。
ここでOKが出たらコーディングに進みます。
コーディングでは「デザインラフ通りに再現する事」が求められます。
HTML/CSSをしっかりと意識して作成しましょう。
逆を言えば、デザインラフはしっかりと完成形をイメージして制作する必要があります。