他のデザイナーの制作手順に興味はあるでしょうか？
Webデザインに携わって10年以上の経験がありますが、始めた当初と比べると取り組み方は変わって来ているように思います。需要があるかはわかりませんが、私の制作手順をご紹介してみようと思います。
なお、ここではPC用のWebデザインの制作を想定して解説します。PhotoshopでもXDでも手順は基本的には変わりません。（場合によってはスマートフォン用のデザインから着手する場合もあります）
0.デザインの着手前に
デザイン着手前も大切で、やることは以下の記事でまとめています。よかったら合わせてご覧ください。
１.アートボードを作り、コンテンツ幅を決める
アートボード、コンテンツ幅の決め方は過去記事で説明していますので、サイズ決めに悩む方は以下の記事をご参考にどうぞ。
２.ガイドをひく
Adobe Photoshopの場合
コンテンツサイズの両端、中央にガイドをひきます。
さらにグリッドを作っておきたいので、コンテンツ内にカラム数12こ、それぞれの間に余白を作る計算をして、12この矩形をアートボードの高さで計算どおりに配置していきます。
※ グリッドの計算はGridpx を使わせてもらっています。
派手な色で20%程度の不透明度に設定し、あとはレイヤーを結合するなりフォルダに入れるなりしてロックをかけてレイヤーパネル内でわかりやすいようにおいておきます。
Adobe XDの場合
ウインドウ右の「グリッド」の「レイアウト」にチェックを入れ、各数値を入力。
更に自分の場合はコンテンツの両端にガイドもひきます。
※XDではアートボードの左端からドラッグして離すとガイドがひけます。できない場合は「表示」からガイドを隠す設定になっていないか確認してみてください。
設定するグリッドの一例
最近の仕事で使った一例だと1200pxのコンテンツ幅で、列幅78px、その間隔24pxで用意しました。いつもこれというわけではありません。
３.必要なテキストを入力していく
ワイヤーフレーム上のテキストをアートボード上に全て移植していきます。
このタイミングではフォントの種類やサイズ、色は全て均一にしており、配置もおおまかにWFと同じにする程度。
とにかくざくざく配置していきます。誤記を防ぐため手入力はせずに、できるだけコピー＆ペーストで対応します。
テキストの色とサイズは、作るページのデフォルトとしたいものにしておくと後で楽です。（後で変えることも多々あります）
文字のほか、ロゴやSNSアイコンなど形状が決まっているものがあるのなら合わせて配置します。
状況によってはデザイン制作時ダミーテキストを入れざるをえない場合もあると思いますが、そんなときも「ダミーテキスト」の連続にはせず、できるだけ実際に近いそれっぽい文章を冒頭だけでも仮としていれておくようにします。
なお大量にコピペしなければいけない場合、お好みでクリップボード拡張ツールを使うと便利かもしれません。
私の場合はClipy（mac用）を使ったり使わなかったりしています。
ただ、XDで作られたワイヤーフレームを使ってXDでデザインしていくなら、この工程はいらないですね。
４.画像配置箇所に矩形を置く
画像を配置する予定の箇所に矩形を配置して、あたりをつけておきます。
完成イメージに近いサイズのグレーのオブジェクトを配置します。後でサイズを変更することになるのがほとんどですが…
５.タイトルとなるテキストの見た目を調整
見出しとなるテキストを内容の重要度に合わせて、太くしたりサイズを変更していきます。（タイトルのレベル付け）この時点では細かい装飾はしていません。
もしこの時点で使うフォントの種類を決めているのなら検討、反映していきます。
６.必要な枠を作る
ここから徐々にデザイン制作に入っていきます。
背景や、枠や背景色が必要になりそうな箇所にグレーの矩形を置き、その中に入るテキストの位置やサイズも調整します。
サイズは計測して配置していきますが、この時点では色はまだ使わず無彩色（適当なグレー）で構成しています。
７.デザインの作り込み
自分の中でデザインの方針が決まっていたり、ある程度完成形が頭に浮かんでいる箇所、つまりは作りやすいところから着手していきます。色やサイズ、あしらいを検討しながら完成イメージに近づけていく作業です。
行き詰まったり、だいたいの完成の見通しがたったら他の箇所を着手。
一部分だけきっちり完成させても、他のエリア次第で全体バランスを見て再調整することが多いので、最初のうちは「いい感じ」程度で次に移る。
上記をひたすら繰り返し、全体をまんべんなくじわじわと完成に近づけていきます。
なお、デザイン的に細かいトリミングが必要な画像を配置したい、自作アイコンを配置したいなど工数がかかりそうなところは、その作業にいきなり着手することはしません。
ざっくり雑に用意したものや、イメージに近いフリーアイコンなどを、まずは代用品として配置し様子を見ます。
それで問題なさそうであれば、実際の作業に移るようにしています。
丁寧に作りこんだものの、配置してみたら思った感じにならなかったなど、ただ時間を浪費して終わるような事態を防ぐためです。
デザインをどうしていいか迷って手を進められないときどうしてる？
他にもデザインしなければいけない箇所が多くある場合は、悩むのは早めに切り上げます。
とりあえず簡単にそれなりに形を整えられそうなヘッダーやフッターから着手してみます。
それも済んでいるのなら、あしらいや着色等は後回しにして、モノクロ状態でよさそうな感じになるまでねばって作り進めてみます。いけそうなら着彩や作り込みを試してみるといった感じです。
Webデザインは時間にさほど余裕がない状態で作ることも多いですよね。
一箇所にとどまって悩んでいると、そこを乗り越えたとしても他の箇所のデザイン検討や作り込みのための作業時間が足りなくなり、全体的にクオリティが低く見えてしまいがちです。
また、なかなか手を動かせない状態が長くなると、精神的にも追い詰められてくる、そういった経験はないでしょうか？
少しでも手を動かせるところを進めていくことで、その後の作業に勢いをつけられることもあります。
それでもどうしても煮詰まってしまったときは、何か自分なりの気分転換で作業から離れてみたり、可能であれば一晩置いて翌日見てみることもおすすめです。違う発想が生まれることもありますよ。
作業中も客観的にデザインを見るために
私の作業環境はデュアルディスプレイなのですが、デザインの作り込みの段階に入ると、作業ファイルを開いているメインのモニタとは別に、サブモニタで実寸のプレビューを同時表示しておきます。
サブモニタのプレビューで見た目を確認すると、編集画面で見るよりは客観視しやすいように感じています。
また作業中は拡大表示していることが多いですが、その作業中ファイルの縮尺を変えずに、プレビュー表示の方で周囲とのバランスを見ることもできるので便利です。
Adobe Photoshopで1つのファイルを２窓表示する方法
画面上部ツールバーの「ウインドウ」→「アレンジ」→「〇〇の新規ウインドウ」をクリック
※〇〇はアクティブ状態のPSDファイル名がはいる
こうすることで、同じPSDファイルを２つ同時に表示できます。ひとつをプレビュー用として、サブモニタに移動、表示倍率を原寸になるようにしておきます。表示の移動や倍率は連動しません。
Adobe XDでプレビューを表示する方法
右上の「デスクトッププレビュー」アイコンをクリックして、プレビューを表示できます。
プレビューをサブモニタに移動させておきます。
8.デザインがひととおり完成したら
ワイヤーフレームと完成したデザインを見比べて、抜け落ちている要素や誤字脱字がないか確認します。
また、ワイヤーフレームとデザインで異なる意味合いになってしまっている箇所がないかもチェックします。
例えば、強調すべきでない箇所が強調されているなど。
掲載テキストが同じであっても、デザインの見せ方次第で異なる意図をもたせてしまうことが可能なためです。
デザイン制作の過程で、誤って要素を削除してしまったり、意図のずれが生じていることがあり得るので注意します。
その他にチェックすること
- メガメニューなど、初期状態では見えていないが、デザインの用意が必要なものの制作を忘れていないか？
- マウスがあたったときのデザインを用意する必要はないか？（これは初回で見せないときもある）
完成後、可能であれば一晩置く
締め切りまでに余裕があるのであれば作業完了後、提出せずに翌日もう一度見てみます。
違和感に気がつくことがあります。ずっと同じ画面を見ていると、だんだん客観視ができなくなっている場合があるのです。
時間的に一晩寝かせるのが無理な場合、他の仕事をした後にもう一度見てみるというのもおすすめです。
さいごに
以上が自分の場合のWebデザインの作り方の流れです。
スマートフォン用のデザインを作るときは、PCのアートボードを複製してそれを元に作業しています。
私の場合じわじわと全体を作り進めて完成へと近づけていくやり方ですが、デザイナーによってこのあたりは変わってくると思います。
もしかすると、最初にかなり精密な完成イメージが頭に浮かぶデザイナーなら、このようなちまちまと進める方法はとらないかもしれません。
ただ、制作中いろいろとと思い悩んで手を動かせない時間が発生してしまう方には、この方法が向いているのではないかと思います。
話がそれますが、自分の制作物に納得いかないまま提出することが多い、時間がいつも足りなくなってしまうという方は、制作が辛く感じられる時もあるのではないでしょうか。
ある程度の制作数がないと、どうしても手詰まりになりがちというのはよくあることです。
しかし制作経験は仕事以外の作業でも積み重ねることが可能です。
こういったときは「デザイン模写」に取り組むことがおすすめです。過去の記事でやり方をご紹介していますのでご参考していただければと思います。
デザイン模写に取り組んでいると、デザインスキルも徐々に身についてくると思いますので、お悩みの方がいたらぜひ根気強く取り組んでみてください。数ヶ月後に徐々に変わってくると思いますよ。
