webサイトのデザインプロセスをまとめてみた


こんにちは!
プロダクトデザイン部のYです。

普段は、Webやアプリなどのデザイン作成 / リニューアルなどを担当しております。

今回はとあるサイトのデザインリニューアルを行った際の
デザインの作業工程についてお話させていただきます。


目次


00. はじめに

いきなりデザイン作成!ではなく その前に色々な準備が必要です✋

社内メンバーでミーティングを行い案件の内容をすり合わせたり
お客様とスケジュールの確認などを行います。


01. 画面の洗い出し

準備が完了したら、次に画面の洗い出しを行います。

既存サイトを見ながら作成が必要 / 不要な画面の選別を行い
一画面ずつスクショしてFigmaにて画面遷移図を作っていきます。

この時プラグインを使うと簡単 + 今後デザインを作成する際に作業を進めやすくなります。

www.figma.com

www.figma.com


02. デザインのパターン出し

主用な画面を2画面程ピックアップしデザインのパターンを作っていきます。
見比べられるように、全く違うパターンを最低でも2、3パターンは用意すると良いです◎

また私の場合、一括でデザインを変えられるように、ここの時点で
「ボタン、ヘッダー、フッター」などは一度コンポーネント化してしまいます。


03. 残りの画面作成

お客様にパターンを確認していただき、デザインの方向が固まったら
決まったパターンを元に残りの画面を作成していきます。


ここでは複数の画面で使用されるパーツは全てコンポーネントでまとめます。
(以前マスターコンポーネントが迷子になった事があったので、
パターン出しの時とは別に作り直すようにしています...


また、Figmaにはオートレイアウトと呼ばれる
”コンテンツの大きさによってフレームを可変させる機能”があります。
これをうまく使うと、作業効率が爆上がりするのでオススメです💣💥

詳しい使い方は、下記の動画や詳しくまとめている記事が沢山あるので是非調べてみてください。

youtu.be


04. スタイルガイドの作成

スタイルガイドと呼ばれるデザインのガイドラインを作成します。

03で作成したマスターコンポーネントに、フォントのサイズやカラー
細かいパーツのマージンなどの記載と、コンポーネント名の整理を行います。

⚠️下記はあくまでも例なので、どこまで作成すべきかはメンバー内で確認が必要です。

・フォント:サイズ、line-height、font-weight
・カラー:Hex、RGB
・フォーム:未入力時、通常時、エラー時
・ボタン(差分あればまとめる)
・アイコン
・イラスト
・ヘッダー
・フッター
・一部マージン(使用頻度が高いタイトル部分やカード型など)


また、スタイルガイド作成時に合わせてコンポーネント名の整理を行います。

Master - 種類 ( Button、Formなど ) - デザインの詳細 ( カラー、サイズ等...)


これらをまとめることで、追加の作業が発生した際にデザインのずれを防ぐことができます📝 www.adobe.com


05. エンジニアへお渡し

作成したデザインデータをエンジニアへお渡ししたらデザイン作業は完了です✨
この後、エンジニアチームとの連携を取りデザインを元に画面を作っていただきます。


最後に

以上、Webサイトのデザインプロセスを紹介させていただきました。

いかに効率良く作業を進められるか?どうしたら開発しやすいデータになるのか?
試行錯誤しながら日々奮闘しています🔥

今回紹介した内容で少しでもデザイナーの業務について知っていただけたら嬉しいです。
ここまで読んでいただきありがとうございました!




現在アドグローブではUIデザイナーを含め、さまざまなポジションで一緒に働く仲間を募集しています。
詳細については下記からご確認ください。みなさまからのご応募お待ちしております。

hrmos.co