ウェブデザインB 第11回

前回の振り返り

前回は「Webページデザイン完全ガイドシリーズ」シリーズの第1弾である、
「ヘッダーからフッターまでの構築術」についてを学び、以下のWebページデザインにおけるすべての工程を紹介しました。

1. デザインのトーン&マナーを決定し「設計図」を描く
2. デザインルール定義のため参考デザインをリサーチする
3. 手書きラフからワイヤーフレームへの清書
4. Webページの一般的な構成要素
5. デザインを仕上げるコツ・・・一貫性のルール

Webページデザイン完全ガイドシリーズ ヘッダーからフッターまでの構築術

では今回も「Webページデザイン完全ガイド」シリーズの以下の工程の詳細を学んでいきましょう。

「02. デザインルール定義のため参考デザインをリサーチする」
「03. 手書きラフからワイヤーフレームへの清書」

早速記事を確認してみましょう。

Webページデザイン完全ガイド〜Pinterestを活用したWebデザインの参考サイトの探し方〜

Webページデザイン完全ガイド〜手書きラフからワイヤーフレームへの清書フロー〜

念のため手書きラフの課題用紙も作りました。
授業時間に余裕があれば印刷配布して後期のウェブデザイン演習の準備をしたいと思います。

ウェブデザインB 手書きラフ課題用紙

Webページデザインの工程のまとめ

今回はデザインルールの定義のために、「Pinterest」を使って理想に近いWebデザインをリサーチする工程、
また、ワイヤーフレームを作るための手書きラフからツールへの具体的な清書フローを解説しました。

Pinterestで参考サイトを探す実践5ステップ

Pinterestで参考サイトをリサーチする実践ステップは以下でした。

• STEP.01:アカウントを作成し、ビジネス(デザイン)用に最適化する
• STEP.02:目的の「キーワード」で検索する
• STEP.03:新規ボードを作成し、直感的に「ピン」していく
• STEP.04:関連ピンからさらに深く掘り下げる
• STEP.05:集めたピンを「言語化」して整理する

そして参考サイトから得た情報を、配色、書体、余白、一貫性の基本4ルールに落とし込み、デザインルールを決めていきましょう。

手書きラフからワイヤーフレームへの清書フロー

デザインルールが決まれば、次は「設計図(ワイヤーフレーム)」の作成に入りますが、
いきなりパソコンでデザインツールを動かず、手書きのラフで情報の優先順位決定などを決めましょう。

• STEP.01:アナログ:手書きで「情報配置のラフ」を描く
• STEP.02:デジタル:デザインツールでワイヤーフレームに清書する

直感的なアイデア(手書き)を、論理的な数値(ツール)へと落とし込むことが目的であり、
後々のデザイン工程で「やっぱり配置を変えたい」という手戻りを防ぐことができます。

次回はヘッダー、ヒーローセクションについて

次回からは各ブロックの作成のための解説を行います。
まずは「サイト全体のコントロールパネル」であるヘッダーの解説、
また「Webサイトの第一印象」を決めてしまうヒーローセクションの解説を行います。