Sponsored Link
この記事の目次
前回の振り返り
前回はオリジナル演習Web02の情報ビジネス学科Instagramバナートレースを最後まで行い、
以下のPhotoshopスキルを習得しました。
- 縦書き文字と横書きの文字の切替。
- Illustratorとのデータ連携の方法。
Webページデザイン完全ガイドシリーズ ヘッダーからフッターまでの構築術
本科目「ウェブデザインB」では、デザインツールを使った実際の制作方法の紹介をしていますが、
全ては後期開講科目「ウェブデザイン演習」でのオリジナルWebデザイン作品制作のための内容です。
そこで今回より、Webページデザインの手順を全て紹介する「Webページデザイン完全ガイド」シリーズを行います。
初回はまず全体の流れを把握し、次回以降に各工程の詳細を学んでいきましょう。早速記事を確認してみましょう。
Webページデザインの工程のまとめ
01. デザインのトーン&マナーを決定し「設計図」を描く
まずは、全体のコンセプトを決めることから始めます。
「配色(色の設計)」「タイポグラフィ(フォントの設計)」「余白(ホワイトスペース)」のルールを決めましょう。
02. デザインルール定義のため参考デザインをリサーチする
デザインルールを決めるにも、参考とするWebデザインが必要です。
その際に有効となるのが、WebデザインアーカイブサイトやPinterestなどのサービスです。
これらを有効活用し、まずは理想に近い参考のデザインを探すことから始めましょう。
03. 手書きラフからワイヤーフレームへの清書
いきなりデザインツールで各ブロックのデザインをする前に、手書きで直感的にアイデアを書き出しましょう。
それをデザインツールで「論理的な数値」へと清書し、ワイヤーフレーム(構成案)を作りましょう。
04. Webページの一般的な構成要素
ワイヤーフレーム(構成案)が出来上がったら、デザインする必要のあるブロックを把握しましょう。
- ヘッダー
- ヒーローセクション
- コンテンツエリア
- フッター
経験者からのアドバイス
参考となるデザインを分析した情報を元に、制作するWebデザインのデザインルールが固まったら、
ブロックごとにデザインを行っていきますが、私がおすすめしている各ブロックのデザイン制作の順番は以下です。
- ヘッダー
- フッター
- ヒーローセクション
- メインコンテンツ
最も避けるべきはデザインルールの崩壊ですが、ページの最も上部(ヘッダー)と最も下部(フッター)を連続して作ることで、
ある程度それを回避することができます。
05. デザインを仕上げるコツ・・・一貫性のルール
最後に、別々ではなく一貫性のあるデザインルールを適用した細部を作り込みます。
- ボタンのホバー(マウスオーバー)
- アイコンのトンマナ
- 画像解像度
- アクセシビリティ
- 角丸の統一
- ドロップシャドウの方向
- アイコンの線幅
経験者からのアドバイス
Webデザインで重要なのは、ユーザーに違和感を持たせないことであり、
実現のために重要なのは、デザイン制作時に決めた全体のデザインルールを守ることです。
細部から作りこんでしまうと、これを簡単に崩壊させてしまうため、「全体のルール→ブロックごと→パーツ」と、
ボタンやアイコンなど、上述したような細かいパーツは必ず最後に作りましょう。
デザイン制作の順番は思っている以上に重要です。
次回はリサーチおよびラフ&構成案の作成
次回はデザインルールの定義のために、Pinterestを使って理想に近いWebデザインをリサーチする工程、
また、ワイヤーフレームを作るための手書きラフからツールへの具体的な清書フローを解説します。
