【新人Webデザイナー必読！】サイトデザインワークフロー虎の巻
これまでの制作でデザイナーの先輩に教えてもらったことや制作時に学んだこと、普段デザインする時に意識していることについて簡単にまとめました。
基本的なことを中心にまとめてあるので、新人からのステップアップや再確認用としてご一読ください。
目次
まず初めに、WF (ワイヤーフレーム)を作成する
1/43）コンテンツを精査する
サイトの目的(認知度アップ、売上向上、リード獲得、ブランディング等)、ターゲットなどをディレクターだけでなく、デザイナー自身でもきちんと理解、考慮した上で、クライアントからの要望に加え、サイトの目的達成につながるコンテンツ案はWFの段階で追加しておきます。その後、追加したコンテンツも含め、デザイン着手後のコンテンツ変更を防ぐため、WFの段階でクライアントとしっかりコンセンサスを取っておきましょう。
デザインについて
2/43）ユーザー(ターゲット)が使いやすいかどうかを考える
Webデザインにおいて重要なのが、ユーザービリティです。
フォントサイズや構成も含め、ターゲットに合わせたUI設計を行いましょう。
3/43）基本はスマホファースト
スマホが一人１台の今、MFI(モバイルファーストインデックス)によるSEOも考慮し、スマホに最適化したデザインを作成します。
4/43）デザインのルールを決める
デザイン着手の際、スタートの段階でフォントサイズや余白の間隔なども含め、サイト全体のルールを細かく決めておきましょう。
5/43）配色について
目的に沿った効果的な配色にしましょう。
取り扱っている商品や持たせたいイメージなどを考慮して色を選びます。なぜこの配色にしたのかもクライアントに説明しましょう。
例）暖色系：柔らかい、ほっこりとした、温かみのある印象 寒色系）スタイリッシュ、高級な印象
目立たせたい箇所にコーポレートカラーを使うのもおすすめです。
6/43）フォントサイズ
ターゲットの年齢が高い場合、本文のフォントサイズはある程度読みやすいサイズでデザインしましょう。
併せてボタンのサイズも少し大きめにしておくと押しやすくなり、親切です。
7/43）ジャンプ率を意識する
ターゲットに合わせた本文のフォントサイズを決める際には、見出しのフォントサイズも決めましょう。
見出しと本文のフォントサイズが近いと、どこが見出しなのかが分かりにくくなってしまうので注意が必要です。
8/43）見出しに色やあしらいをつける
1つ前の項目でジャンプ率についてお伝えしましたが、作るデザインによっては高級感を持たせたいなどの理由から、見出しのフォントサイズを控えめにする場合があります。
その際には、見出しということが分かりやすくなるよう、本文と別の色を使用したり、アイコンや下線などのあしらいをつけることで差別化することができます。
9/43）詳細テキストのフォント選び
見出しに明朝体を使用する場合、詳細テキストも明朝体にすることで和の雰囲気がより感じられるデザインになります。
詳細テキストが長い場合などには、馴染みのあるゴシック体を使うことで読みやすさがアップします。(コーディング時のfont famiryで指定可能か、Web fontとして表示させるのか、画像にするのかによっても選択肢が変わります)
10/43）グローバルナビゲーションやメニューを追従にする
メニューを追従(常時表示)させることでユーザーがサイト内で迷いにくくなり、目的の情報に素早く辿り着けるようになります。
逆に、あえてGナビを目立たせないことで、動画や写真のイメージを邪魔することなく直感的なブランディングに繋げることも可能です。
11/43）お申し込みやご購入、お問い合わせボタンを設置する
こちらもメニューと併せて追従(常時表示)させることで、ユーザーがアクションを起こしたい時にすぐボタンを押すことができ機会損失を抑えられます。他の要素よりも目立つ色にすると目に入りやすいです。
12/43）ドロワーメニューに入れる要素
ドロワーメニューにはサイトマップの要素を全て盛り込むことをオススメします。
お申し込みやご購入、お問い合わせボタンなどをドロワーメニューに設置することで、ユーザーの動線がよりスムーズになります。
13/43）OGP画像
Webデザインを作成する際にはOGP画像も作成します。
OGP画像は横型で作成しますが、正方形で表示される場合もありますので、ロゴやコピーなどの見切れて欲しくない要素は中央に配置しましょう。
14/43）ファビコン
こちらもWebデザインを作成する際に作成します。
ファビコンはwebサイトを開いた際、タブに表示されます。
サイズがとても小さいため、テキストを配置すると見えづらくなるので注意しましょう。
シンボルマークを選ぶのもおすすめです。
15/43）ローディングアニメーション
webサイトを開く際にアニメーションが表示されるとわくわくしますよね。
少し重たいページの場合、ページ遷移の際の離脱を最小限に抑えるためにも、サイトデザインに合わせた動きのあるローディングアニメーションを作ってみてはいかがでしょうか。
スマホ版デザイン
16/43）テキストのセンター合わせ
PC版のデザインを作成する際に、見出しや詳細テキストをセンター合わせにすることがありますが、スマホ版のデザインを作成する際には、デバイスサイズにより意図しない箇所での改行を避けるため、長めの詳細テキストは左揃えにすることをおすすめします。スマホでの読みやすさもアップします。
17/43）改行位置に注意
PC版のデザインを作成する際にテキストの改行位置を指定することがありますが、スマホ版で改行位置を指定すると、デバイスサイズによっては文字が意図しない箇所で落ちてしまいますので、スマホ版では極力改行指定しない方がいいでしょう。
ボタンデザイン
18/43）マウスオーバー時の動きを考える
ボタンにカーソルを合わせた際、透過になったり、色が反転したり、長方形が角丸になったりなど、マウスオーバー時の動きにはたくさんの種類があります。
ボタンにカーソルを合わせた際のデザインやどんな動きをするのかも考慮し、コーディング時にフロントエンドエンジニアに伝えましょう。
19/43）アイコンをつける
PDFをダウンロードするためのボタンにはダウンロードアイコンを、別タブが開くボタンの場合には別タブで開くアイコンをつけることで、ユーザーが戸惑うことなく快適にサイトの閲覧を続けることができます。
意図せず重たいPDFをダウンロードしたため、速度制限がかかっちゃった！なんて事態を避けるためにも心遣いは大切です。
20/43）アイコン選び
どんなアイコンがユーザーとって伝わりやすいかを考慮して選びます。
小さいサイズで使用した際に「潰れて見えにくい」とならないような配慮も必要です。
XDで作成する際におすすめの機能
21/43）スクロール時に位置を固定
グローバルナビゲーションなどを追従にする場合には、XDで固定しておくことでクライアントへの説明がスムーズになります。
XDで要素を固定するには、該当の要素を選択し、画面右側のプロパティインスペクターにある ” スクロール時に位置を固定 ” にチェックを入れるだけで簡単に位置を固定することができます。
要素はファーストビュー内に配置し、スクロールした際に他の要素に隠れてしまわないよう最前面のレイヤーに配置するようにしましょう。
22/43）ガイドラインを引く
デザインを作成する際にルール決めをしますが、その際に余白などのルールも決めてガイドラインを引いておきましょう。
ガイドラインを引くことで余白のサイズを確認する手間が減るので作成がよりスムーズになり、整頓された綺麗な見た目に仕上がります。
23/43）リピートグリッド
同じ形が複数並ぶ場合にはリピートグリッドの使用がおすすめです。
リピートグリッドで作成した要素のうちの1つを選択してフォントサイズや色を変更すると、リピートグリッドで作成された項目全てで自動的に反映されます。
24/43）スタック機能
スタック機能は余白を調整するのに便利な機能です。
要素を選択し、右側にあるプロパティインスペクターの中にある”スタック”にチェックを入れることで、スタック機能を使えるようになります。
25/43）パディング機能
パディング機能は例えばボタンを作成する際などに、ボタンの形とボタン内のテキストの余白を簡単に調整することができる機能です。
要素を選択し、右側にあるプロパティインスペクターの中にある”パディング”にチェックを入れることで、パディング機能が使えるようになります。
情報が多いサイトの工夫
ブランドサイトやリクルートサイトでは、” どんな会社なのか ” 、” どんな取り組みをしているのか ”、 ” 伝えたいことはなんなのか ” などクライアントの思いをユーザーに分かりやすく伝えたいですよね。
入れたい情報が多い場合はそのままページに入れることでスクロールが多くなり、スマホ版だと縦に長くなるためユーザーが離脱してしまう可能性があります。
そんな時はこちらの方法がおすすめです。
26/43）トップページのテキスト量を少なくする
トップページで各セクションの詳細テキストが多いと、ユーザーにとって知りたい情報までの道のりが遠く感じ、離脱してしまう可能性があります。
トップページに掲載する詳細テキストは少なめにして、読みたい人はセカンドページで詳しく読めるような作りにするのがおすすめです。
27/43）アニメーションを使用する
アニメーションやイラスト使用することで内容のイメージがしやすくなったり、直感的・視覚的に情報を分かりやすく伝えることができます。
28/43）アンカーリンクを用意する
ページ上部にアンカーリンクを配置することでユーザーが目的の情報へ素早く辿り着くことができます。
29/43）アコーディオンで畳んでおく
項目ごとに分けてアコーディオンで畳んでおくことで、読まない人はページを進んでいくことができ、スマホ版でもスクロールが減るというメリットがあります。
30/43）モーダルウィンドウを使用する
画像やボタンをクリックすることで、画面上に詳細が表示されます。
モーダルウィンドウを作成する際には、閉じるボタンを設置しておくことでユーザーが操作を迷うことがないため親切です。
31/43）タブ
情報をタブ切り替えにすることでユーザーが気になった項目をすぐに見ることができます。
ただ、スマホ版にした時に横幅が小さくなるため、要素が多い時やテキストが長い時には別の方法を試しましょう。
32/43）ページトップへ戻るボタンの設置
27〜30の項目でお伝えした方法を使うことでユーザーが欲しい情報まで素早く辿り着くことができるのですが、ページの下まで進んだ場合、別の項目を見たい際にはスクロールしてページトップまで戻ることになってしまうため、ページトップへ戻るボタンも設置しておくと親切です。
制作時の注意点
33/43）QRコードのサイズなど
QRコードは読み込みやすいサイズで掲載しましょう。
また、複数のQRコードを並べる際には、間隔が狭いと読み込みたいQRコードとは別のコードを読み込んでしまうことがあるため、間隔に注意が必要です。
34/43）描画モードは使わない
WEBデザインを作成する際、乗算やオーバーレイなどの描画モードはコーディングでの再現が難しいので画像として切り出さない場合はできるだけ使わないようにしましょう。透明度の変更は可能です。
デザイン制作が上手く進まなくなったら
35/43）いろんなサイトを見る
たくさんのWebデザインをまとめてあるサイトなどもありますので、目的に合ったサイトを見てヒントを得ることも◎。
たまには自分好みのWebサイトを見るのも気分転換になりますよ。
36/43）作り直す
何度も調整しているのに思うようにデザインが決まらない時は、一旦作成中のデザインはそのまま残しておいて、別のアートボードで初めから作り直す場合があります。一度作ったデザインを捨てる、という行為ですが、そうすることで再度レイアウトや配色などを考えることができ、上手く進むことがあります。
37/43）迷って時間がかかったら早めに相談
いろんなサイトを見たり、作り直したりしても上手く進まない時もあると思います。
筆者は自分で出来ることはやってみて、それでも上手く行かない時にはデザイナーの先輩に相談します。
そうすることで自分では思いつかなかったアイデアやアドバイスをもらうことができ、デザインを完成させることができます。
アドバイスをもらった後に修正するための時間も必要なので、スケジュール内に完成させることができるよう、余裕を持って先輩に相談するのがおすすめです。
コーディングの際の指示・テストアップ確認
38/43）指示書を作成する
フロントエンドエンジニア(場合によってはバックエンドエンジニアも)にデザインを共有する際には、一緒に指示書をお渡しします。
CMS設置箇所やアニメーション、動的な箇所などをデザインの段階で細かくXDに記載しておくことで、指示書を作成する際に伝え忘れを防ぐことができます。
39/43）テストアップ確認
テストアップ確認は、PC版はWindows、Macの主要ブラウザ(Chrome、Safari、Firefox、Edge等)、スマホ版はiPhone、Androidの主要ブラウザにて入念にチェックしましょう。
保守範囲、例えばOSのバージョン等は事前にクライアントと擦り合わせておくことが重要です。
修正箇所についてテキストで書くと伝わりにくい場合がありますので、face to faceで修正依頼をすると認識のずれが生じにくくスムーズです。
個人的には画像にまとめることで修正後のテストアップ確認の際、どの箇所にどんな修正依頼をしたか見落とすことなく確認できるため、こちらの方法を用いています。
WEBデザインをもとに印刷物を制作する時の注意点
作成したLPなどのデザインをもとにチラシを制作してほしいといったご依頼を頂くこともあると思います。
その際には以下の点に注意しましょう。
40/43）画像のカラーモード・解像度を変更するのを忘れずに
画像はRGBからCMYKに、解像度も印刷物に適した解像度にします。
使用しているQRコードがベクターではなく画像の場合もあるので、こちらも忘れずに変更しましょう。
41/43）コピー&ペースト
XDからIllustratorにデザインをコピー&ペーストすることは可能です。
ですが、XDで作成したテキストをコピーしてIllustratorにペーストすると、見た目は変わっていないように見えてもダイレクト選択ツールで選択すると3行だったテキストが1行ずつ分かれてペーストされているため、調整が必要になります。
42/43）予想よりも時間がかかる
筆者は以前LPをもとにチラシを作成した際、「すでに完成しているLPのデザインをもとにチラシを作成するのでそんなに時間はかからなさそう」と思っていたのですが、実際に作ってみると、LPで作成しているサイズとチラシに入れるサイズが違ったり、調整やリサイズするのに思っていた以上に時間がかかってしまいました。
スケジュールを立てる際は少し余裕を持っておくと安心です。
43/43）リンク切れを防ぐ
チラシを作成後、入稿用データとしてaiデータが必要な場合があります。
その際には画像のリンクが切れないようにするため、Illustratorのパッケージ機能を使うのがおすすめです。
aiデータにアウトラインをかけるのも忘れないようにしましょう。
まとめ
今回は新人Webデザイナー向けに、Webデザインを制作する際に抑えておきたいワークフローについてご紹介しました。
当たり前のことですが、都度意識して作成することで、より良いデザインを作ることができるのではないでしょうか。
