初心者のためのWebデザイン学習3/デザインデータの作り方(実践編)

ワイヤーフレームからデザインを起こしていく場合、どんな手順で進めれば良いのか?どこに気をつければ良いのか?そのポイントを解説していきます!

案件の受注〜デザインの方向性決定、デザインデータ制作の準備までを解説した過去の記事はこちらです。

本記事では「初心者のためのWebデザイン講座1」に記載の架空案件を例にしてデザイン制作の流れを追っていきます。

ワイヤーフレームの読み解き方

こちらのワイヤーフレームをもとにデザインを進めていきます。

Webデザイナー自身がワイヤーフレーム作成も行うこともありますが、別の人が担当している場合もあります。いずれの場合でも、しっかりとワイヤーフレームの意図を再確認したり、読み解くことが重要です。
今回の例は割とあっさりしたワイヤーフレームですが、担当者や案件によってはもっと詳細なイメージや指示が書かれていることもあります。担当者と打ち合わせを行い、認識にズレがないか確認しておくと良いですね。

ここでおさえておくと良いポイントは、下記3つのポイントです。

  • 情報の重要度が高い箇所はどこか
  • 全体のリズム、コンバージョンに向けた導線
  • 共通パーツが使えそうな箇所はどこか

さらに、ここはどんなHTMLタグで実装するのか?といったマークアップの想定もできると、より成果につながりやすいWebサイトが制作できると思います。

ワイヤーフレームを自分で作っていない場合、もらったワイヤーフレーム通りにした方が良い部分と、柔軟に変更しても良い部分の区別がつきづらく、困ることがあると思います。
例えばこのワイヤーフレームの場合…

  • 「KROWLウォーターの特徴」「こんなシーンにおすすめ」は3つのBOXが横並びになっているレイアウトにしないといけないの?
  • 段落スタイル(左寄せ、中央揃え、右寄せ)はワイヤー通りにしないといけないの?
  • 画像は四角で入れないといけないの?

など。このようなレイアウトや画像の扱いに関する部分は、柔軟に変更して良いケースが多いと思いますが、しっかりと担当者とコミュニケーションをとって認識を合わせた方がよいです。
目指すWebサイト像にあわせて、変更すべきところは変更し、ときにはワイヤーフレームにはない要素やレイアウトを提案することで「ワイヤーを清書したようなデザイン」から一歩抜け出せるのではないかと思います。

Webデザインのルールを作る

トンマナやデザインの方向性も決まって、ワイヤーフレームの作成や読み解きもできたら、いよいよデザインデータ作成です!
トンマナのポイントは以下の3つでした。作業に入る前に、再確認しておきましょう。
(参照:初心者のためのWebデザイン講座1

  • フォント(タイトルや本文など、どんなフォントを使うのか)
  • 配色(ベース、メイン、アクセント)
  • 画像(使用するイラストや写真のテイスト)

それに加え、デザインルールも決めます。デザインルールは、特にこのようなポイントを意識すると良いと思います。

  • フォントのルール(大見出し・中見出し・本文それぞれの文字サイズ、太さ、行間)
  • レイアウトのルール(余白、配置)
  • あしらいのルール(見出し、ボタンなど)

上記を意識しながらデザインデータを作っていきます。

Webデザインのサンプル

では先ほどのワイヤーフレームをベースに制作したサンプルのデザインを見てみましょう!
これが正解というわけではなく、こんな展開のしかたもあるんだ、というパターンの参考として見ていただければと思います。
ぜひワイヤーフレームと見比べてみて、どのようなデザインルールが作られているのかチェックしてみてください。

まとめ

ワイヤーフレームからデザインを起こしていく際のポイントは以下の3つでした。

  • ワイヤーフレームをしっかりと読み解く
  • トンマナを確認する
  • デザインルールを作る

また、デザインを作っていると「点線はどうやって描くのだろう?」「影はどうやってつけるんだろう?」というような疑問点がたくさん出てくると思います。
そんな時はどんどん検索しましょう!検索力の高さは、成長スピードを大幅にアップさせてくれます。
検索に慣れることで疑問点を言語化する癖がつくので、先輩や周囲の人に相談する際にも的確な質問ができて、ぴったりのアドバイスをもらいやすくなる、というメリットもあります。

さて、今回の架空案件「KROWLウォーター」のデザインを作ってみた!ワイヤーフレームを引いてみた!という方はいらっしゃいますでしょうか?
ぜひそのキャプチャを見せてください!いろんなバリエーションを見てみたいです。
#KROWL をつけてツイッターでつぶやいていただければ、すかさず見つけます。
また、KROWLではほぼ毎週木曜日に勉強会を開催していますので、進め方を迷っている・途中段階という方も、ぜひ相談に来てください!

▼前の記事を見る

Webデザインの学習をしている方に向けて無料のデザイン課題をKROWLサイトで公開中!
AdobeのIllustratorやPhotoshop、XDの操作を学びながら難易度別に用意してあるデザイン課題に取り組もう!

関連記事