初心者のためのWebデザイン学習1/受注からデザインの方向性決定まで

この記事では、クライアントからWebサイト制作依頼があったと仮定してWebデザイン制作の進めかたを解説します。
Webデザインの学習課題として使いやすいように、実務に近しい架空案件を設定しました。自主制作用の課題としてご自由にご利用ください。(ポートフォリオに掲載もOKです!)

初心者の方が学習用に制作することが多いWebデザインとして、ご自身の趣味をベースにしたサイトを多く見かけます。もちろん、しっかりと取り組めばスキルアップに繋がります。
しかし、転職や独立を視野に入れてスキルアップを目指す場合には、たとえ架空であっても「実務っぽい」課題に取り組むことをおすすめします。

なぜなら実際の現場では、Webサイトの目的やターゲットをビジネス的な目線を持って捉えることや、デザインの意図を論理的に説明することが求められたり、デザインのガイドラインや制約があったりするからです。そのため、自分の好みが思い通りに反映できる趣味サイトとは、デザインの組み立て方が根本的に違ってしまいます。
ですので、ぜひ実務を想定したWebデザインに取り組みましょう!

依頼の意図をつかむ

▼案件概要
———————-
クライアント:飲料メーカー
依頼:LP(ランディングページ)の新規制作
目的:新商品(名称:KROWLウォーター、国産の天然水を詰めた500mlのペットボトル飲料)のプロモーション
ターゲット:20代の男女
サイトのイメージ:安心感がある、親しみやすい
仕様・要件等:SP(スマートフォン)対応が必要
———————-

今回の課題ではこの概要をもとにデザインをすすめていきますが、実際の案件では、ここからさらに制作の目的やターゲット像、要件などを深掘りしていきます。
例えば…

  • この商品の立ち位置や競合はどこだろう?
  • ターゲットはどんな人?どんな属性を持っているんだろう?
  • ターゲットはどんなシーンでこの商品やWebサイトを利用するのだろう?

などなど。Webサイトを自主制作する際には、このあたりを自分なりにしっかり設定して取り組むと、より実務に近しい作り方ができると思います。
ビジュアル制作をするだけではなく、依頼の意図を汲み取ったり整理したりして、クライアントとイメージをすり合わせていくこともWebデザインをつくるうえで重要な仕事のひとつです。

デザインの方向性を決める

「安心感がある」「20代の男女」というようなビジュアル面での指針になりそうなキーワードがいくつか出ていましたので、それを手がかりにデザインの方向性やトンマナを決定します。
この段階で留意しておきたいのが、クライアントがビジュアル表現に対して持っている認識(例:安心感をあらわす色といえば○○、というようなイメージ)とデザイナーの認識が必ずしも一致しているとは限らないということです。

ですので、デザインデータを作り込む前にヒアリングをしたり、いくつかサンプルを見ていただくなどの工夫をして認識をすり合わせておく必要があります。
また、クライアント自身がWebデザインのプロではない場合は、方向性に迷っていることもあります。制作したWebサイトがクライアントにとってよりよい結果をもたらすことができるように、自ら提案することも大切です。

参考サイトのピックアップ

まずは参考になりそうなサイトを探します。ピックアップの基準としてはこんな感じです。

  • 同じ商材を扱っているサイト
  • 同じターゲットを想定している(と思われる)サイト
    「安心感」「親しみ」などキーとなるイメージを実現できているサイト
  • その他マスト要件がある場合、それを満たしているサイト(例:会員限定コンテンツがある、SNS連携させている…など)

Webデザインのまとめサイト(参考記事:https://magazine.krowl.jp/1434/ )から探したり、インターネット検索で探したりします。
ピックアップしたサイトはGoogleスプレッドシートなどを利用してまとめておきます。

カテゴリーごとにわけたり、特に参考になりそうなポイントをメモしておくと方向性を絞りやすいです。

また、Pinterest( https://www.pinterest.jp/ )もおすすめです。Webデザイン以外にも、グラフィックデザインやタイポグラフィ、イラスト、プロダクトデザインなど、雰囲気の参考になりそうなデザインが見つかります。

トンマナの決定

トンマナとはトーン&マナーの略で、デザインルールのことです。
参考サイトやデザインのピックアップができたら、どんなデザインなら競合との差別化がはかれるのか?どんな工夫を取り入れたほうが良いのか?といった視点から精査し、今回の案件に最適なトンマナを考えます。
ポイントはこの3つです。

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

迷うことの多い配色を考える際には、配色の参考サイトやツールの利用もおすすめです。
下記の記事にまとめているので参考にしてみてください!

トンマナの例

今回の架空案件では、例としてこんなトンマナをつくってみました。

デザインの方向性を提案する

クライアントへは複数の方向性を提案してすり合わせることが多いです。
提案の仕方としては、デザインの方向性をまとめた資料(デザインの狙いや色、参考サイトなどを記載したもの)を提出したり、簡単なモックアップやプロトタイプを作って見せることもあります。

提案パターン数や、提案段階でどの程度まで作りこむのかといった温度感、提案の仕方についてはプロジェクトの規模や予算・納期との兼ね合いもありますので、迷ったらまず現場の先輩に聞いてみると良いと思います。

ワイヤーフレーム(構成)を作る

Webサイトの大きな方向性が決まったら、ワイヤーフレーム(構成)を作ります。
実際の現場では、「デザインの方向性を決める」ことと「ワイヤーフレーム(構成)を作る」ことの順番が前後したり、平行して進める場合もあります。案件規模や要件、アサインされたメンバーのスキルセットによってプロジェクトの進め方が変わりますので、柔軟に対応していく必要があります。

ワイヤーフレームとはWebサイトの設計図のようなものです。詳しくはこちらの記事 をご覧ください!

今回はこのようなワイヤーフレームになりました。このワイヤーを元に、デザインを進めてみましょう。もちろん、ご自身で用意していただいても構いません。

次回の記事では、デザインデータを作り始める前段階、ツールの初期設定や画面幅の考え方を解説していきます!

▼次の記事

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

関連記事