【レクチャー用】自分流Webデザイン制作の流れ

自分の考える範囲を定義しない

スタンスとして結構大事になってくるのは「作業範囲を決めない」ことです。もちろん企業やチームで効率化しているシーンでは当てはまらないですが、重宝されるデザイナーは、なんなら経営者目線で考えてデザインできるデザイナーです。「相手も事業を理解し仕切っていない」「手段があっているか分からない」という前提に立って、一緒に考えることができると、キャッチコピー案やどんな要素が必要かなどが溢れ出てくるはずです。

デザインはあくまで「何かを達成するための手段」なので、常に「この内容とデザインで目的は達成できそうか？」を自問しながらデザインを進めましょう💪

1.Webワイヤーフレーム作り

やはり初期の情報整理が一番大事。ここで整理しきれていないと、デザインをなんども作り直すことになります。

例えば「会社のHPのデザインをお願いします！」と言われた時に、あなたがまずやらなければならないことは「先方の目的や事業内容を理解すること」です。そうすると、必ず近い業態やビジョンを持った会社があるので「参考を探せる」ようになります。参考サイトと、先方からもらったテキスト情報をみながら、まずは上から順番に白黒で四角とテキストを置いてレイアウトや順番を検討していきます。

WFのイメージです。相手によりますが、厳密にこの段階でほぼ内容やレイアウトを決めることもあれば、あくまで情報整理として、デザイン段階でガッツリ変わることも多々あり

2.デザインの方向性を掴む

何となく情報の整理とラフ作りを終えたら「情報や業界が近いWebサイト」「色味の近いWebサイト」「部分的なあしらいの参考サイト(新発見系)」の軸で、Pinterest、Google検索、io3000などのまとめサイトから参考を見つけて、スクショをFigmaに並べていきます。

近い業界のWebサイトから、コピー案や素材の使い方、構成のヒントを得れます。色味の近いWebサイトから、色の使い方(白の割合とか)や、ボタンの配色、色味に合ったデザイン表現のヒントを得れます。

ぶわーっと集めちゃって、改めて良いものだけ残して絞り込んでいく！

3.デザインを作る

情報の整理と参考集めが一通りおわったら、ワイヤーフレームを横に置きながらデザインに着手します。上記の様なクオリティのワイヤーフレームからいじってしまうと、そのレイアウトやデザインから抜け出せなくなってしまうので、真っ白な状態からスタートするのがおすすめです。

 1セクションずつ参考を見つけてデザインしていくと、速さとクオリティを高い状態で進められます。たとえば「プロダクト紹介」部分のデザインをする際に、Saas系や電化製品などもかならず商品紹介するセクションがあります。「料金説明」「お客様の声」なども同様で、セクション毎に探すと思っているより「参考対象が多い」ので、デザインパターンの引き出しを広げることができます。

4.自分のデザインをリデザインする

ほとんどの場合「できた！」となった時点でのデザインは「ダサい」はずです。絵とかもそうですが、次の日みたら「全然上手くねぇ…」みたいなのがよくあり、作ってる最中は良いと思っても、もう一度客観的にみると微妙なことが多いです。

なので、一度完成したデザインを、新たな自分がリニューアルしていくと明らかに完成度が上がります。完成した時点で、改めて参考サイトをみながら自分のデザインのどこが悪いのかを言語化して、1つ1つ解消していく作業です。

ここで「何が良くて何が悪いかわからない」と成りがちなので、やはり誰かにレビューしてもらるのは大事です🥺 ( 辛いけど )
先輩デザイナーもそうですが、家族とかだとより純粋な意見が出てハッとなったりします🤯

5.パターンを作成する

案件や状況によって異なりますが、基本的に「選んでもらう」ことが結構重要で、こだわりの強い案件などは特にですが「デザインに正解がない」ので先方もどんなデザインが良いのかイメージがついていません。それを探る作業として参考サイトを使うのもありですが、パターンを作っておくと自分の勉強にもなるし、方針が決まりやすくすんなりとOKが出ることも多くなります。

パターンを作る時は、できるだけ大きくデザインを変えます。(特にキービジュアル付近 )色や素材が少し変わった様なのは「差分」なので、イラストを使ってみたり、文字だけにして言葉の訴求をつよめたり、言葉を変えてみたりなどで大きく違って見える状態でデザインします。

同じ目的だけど、伝える手段を変えたパターン

デザインのQ&A

Q：デザインのバランスが掴めない…
A：定義と真似が重要です！Webのコンテンツ幅はいつも1000px ~ 800pxくらいで、font-sizeは最小14px、読みやすいのは16px。このあたりは最低限ルールを設けて、あとは参考サイトのタイトルのサイズ感やビジュアルの大きさ、余白などをしっかり真似して感覚をつかんでいきましょい💪

なし

Q：デザイン詰みました。正解がわかりません…
A：一旦見てもらうのが手っ取り早いですが、なぜ進まないのかを言語化しましょう。良いKVが作れないのか、素材が見つからないのか、サイズ感が掴めないのか。出来ていないところを把握して1つ1つ参考を見ながら解消しましょう💪

なし

Q：普段はどう勉強したら良いの？
A：やはりインプットとアウトプットをバランスよくが必要で、Pinterestやデザインまとめ系サイトを普段から眺めましょう。ただ、絵と一緒で作らないと上手くならないので、課題が必要です。

一番早く成長できるのは「実践」なので、どうしても今しっかりしたサイトデザインをしなければいけない！みたいな状態に持っていくことが重要です。デザインは「目的」に対しての「手段」なので！

なし