ウェブデザインB 第12回

前回の振り返り

前回は「Webページデザイン完全ガイドシリーズ」シリーズの第2弾である、
「Pinterestでの参考デザインのリサーチ方法」と「ラフからワイヤーフレームの清書フロー」についてを学び、
以下の工程を紹介しました。

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

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

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

上記ステップで得た情報を、基本4ルールに落とし込み、デザインルールを決める、ということでした。

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

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

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

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

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

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

「04. Webページの一般的な構成要素」ののデザイン手順を、「経験者からのアドバイス」で伝えた、
「ヘッダー」「フッター」「ヒーローセクション」「メインコンテンツ」の順番でレクチャーします。
今回は「ヘッダー」「フッター」「ヒーローセクション」に関してです。

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

ヘッダーデザイン完全ガイド 〜ユーザーを迷わせないWebサイトの入口設計〜

フッターデザイン完全ガイド 〜見落とされがちな「サイトの締めくくり」を設計する〜

ヒーローセクション完全ガイド〜Webサイトの第一印象を決める最重要エリア〜

次回はメインコンテンツについて

次回は主に記事や画像、ビデオなどのコンテンツが表示されるメインコンテンツの解説を行います。