＜随時更新＞ デザイナー業務で気づいた学び,注意事項。

こんにちは、去年の９月より未経験からWebデザイナーとして働いているワタナベです。

デザイナーとして入ってはいますが、デザイン業務だけではなく、制作の進行管理やクライアントと直接やりとりするなどディレクション業務を兼用する機会も多い環境にあります。

今回はそこで気づいた学びを備忘録として投稿しました。
読ませる記事というよりは、自分のためのメモに近いですね。
気づきがあるたびに随時更新予定。
書いていて気づいたのですが、ここに書かれているはすべて失敗を通して気づいた学びであり、そういう意味では去年９月から今日までの「しくじり集」といっても過言ではないですね。
まあ、今でも完璧ではないのですけどね…。

ワイヤーフレームを作るときに気をつけないといけない事

デザインの作り込みに時間をかけない。
ワイヤーはあくまで情報設計。サイトマップの構成や、ページごとに載せるコンテンツの取捨・整理といった部分に時間を掛ける。

情報の優先順位、ページの目的を明確にする。
感覚や曖昧な理由でのコンテンツ配置はサイトの目的がブレる上に、クライアントからの納得が得られない。載せる情報の優先順位を考え、目立たせる箇所、ページが達成したい目的を明確にする。

ページ前後の流れを意識する。
ページの繋がりが矛盾しているとユーザーに戸惑いを与えてしまう上に、狙ったページまで誘導が出来ない。どこから来て、どこに向かって欲しいのか導線を明確にしておく。

同じカテゴリーはグルーピングをする。
情報が全てフラットであると見辛く、ユーザーに正確な情報を届けづらくなる。主従関係を明確にしてカテゴライズする。

UIは既存の構成を参考にする。
オリジナリティが高すぎると、ユーザーにとって馴染みがないため使いづらなってしまう。他社や競合が多く取り入れている既存の構成を参考にする。

・課題に対して「何故？」の回数を多くぶつけて、どうなっていれば良いかの結論が出るまで検討する。この回数が少ないと良いもにならない。

・ヒアリング内容以外でも独自に調査して提案しても良い。クラインアントも想像していないサプライズ感が重要。

・お客様にデザインの意図を説明するさい、ロジックばかりを語っても納得感が得づらい。大手企業サイトを参考の引き合いに出して他社でも採用している事例であることを強調する。

クライアントとやりとりをするときに気をつけないといけない事

曖昧な表現をしない。（かもしれません、多分〜だと思います等）
自信がないと思われ、任せても良いのかと不安を与えてしまう。発言は言い切ることを心掛ける。

クッション言葉を入れて柔らかい印象にする。（大変お手数ですが、突然のお願いで恐縮ですが）
箇条書き、用件だけの内容は直線的で冷たい印象を持たれてしまう。間に労い、考慮の言葉を挟み温かみのある印象にすることを心掛ける。

相手への指摘は「おしゃる通りです〜しかし」などいったん受け止めてから自分の考えを述べる。
直接的な否定は相手に不快な印象を与えてしまう。一度相手の意見を肯定した上で発言することで、こちらの内容がソフトになるため、受け止めることを意識する。

気遣いや感謝の言葉をまめに挟む。
気遣いの言葉が少ないと相手に対して興味ないがないという印象を持たれてしまう。感謝の言葉を挟むことで相手に対する敬意や思いやりを感じさせるため、こまめに挟むことを意識する。

ネガティブな表現を避け、ポジティブな言い回しにする。（分かりづらい。やめたほうがいい→こうした方が御社にとってメリットが生まれます）
ネガティブな言い方は相手への不快、不安を煽る要因になる。こうした方が御社にとってメリットがあるといったポジティブな言い方に変えることで、前向きな会話である印象を与える。

結論から先に伝える。
話のゴールがわからないと、「結局、何が言いたいの？」という印象を持たれるため、まずは結論から先に話をする。そのあとで結論に至った「理由」、「根拠」を伝える。

・ヒアリングはただ質問の項目を聞くだけでなく、さらに内容を掘り下げて行かないとお客様の狙いや、真意まで汲み取れない。些細な内容でも質問すること

お客様のフィードバックの中には表現優先のズレた指摘をしている場合もある。その場合はページの達成したい目的に立ち返り、再度すり合わせを行う、こちらからデザインの意図を説明をして納得してもらうことも重要。

デザインの説明をする時に気をつけないといけない事

目的や問題解決といった部分に絡めて説明を行うこと。
見た目がオシャレだから、かっこいいからといった感覚的な部分ばかりで説明をしてしまうと考えが浅く、ユーザーを考慮していないと思われる。
このデザインがユーザにどうのようなメリットを与えるのか、サイトの目的にどう沿っているのか、という観点で伝える。

説明には専門的な用語を使いすぎないこと。
理解に時間が掛かり、認識のズレを生む可能性が高い。また、「不親切」「それっぽい用語で煙に巻こうとしているのでは？」といった不信感にも繋がる。遠回しな表現になってもクライアントには分かる用語を使うこと。

参考、実際に使われている事例やデータも提示すること。
そのデザインが有効あるかどうか文章や口頭の説明だけは弱い場合もある。
実際に使われている他サイトの事例やデータを引き合いに出す。
効果的な成果を上げている前例を見せることで提案に説得力を持たせることができる。

デザイナー都合での修正案は出さない
お客さんの要望、実装の負担も考慮して最適な答えを考える

エンジニアとのやりとり、実装で気をつけないといけない事

五月雨式に依頼を投げず、なるべくまとめて送ること。
バラバラに送ると修正内容の把握がしづらく、次々に依頼が来るため作業者への不満にも繋がる。先方、上司からのフィードバックなども早い段階からまとめて少ない回数で送ることを意識する。

情報が多くなったらツールで一元化する。
修正内容等、情報が多くなってきたらバックログ等で細かなタスクを振る、スプレッドシートで一元化するなど情報をまとめること。自分やエンジニアの記憶だけに頼らず、記録もつける。

お客さんからの情報はこまめに共有する。
情報違いによる認識のズレなどはトラブルの原因となるため、
先方からの決定、情報はエンジニアにも逐一共有すること。

時間の掛かる工数、出来ない用件などは事前に確認すること。
予定外の工数増加や無理な実装による仕様の見直しは、納期に大きな影響を与えるため、デザインが固まった段階で実現可能か、納期内で走りきれるか等の確認を行なっていく。

分かりづらい依頼は資料の作成、電話で再度伝えるなどフォローを入れる。
ニュアンスが分かりづらい修正や依頼は、実装者との認識ズレに繋がり余計な修正が起こる可能性がある。
文章だけではなく、補足として説明資料や参考事例も添える。場合によっては電話で再度伝えるなどして、内容の擦り合わせを行う。

リギッドレイアウトの挙動、ブラウザが可変したときの要素の状態なども説明する。
可変を意識していないと、ブラウザのサイズごとに見え方が大きく変わってしまう。可変する要素はどこまで拡大、縮小するのか、カラムの切り替わりはインナー何pxからを想定しているのか資料にまとめること。

本番環境をいきなり変更しない。テスト環境で試すこと
本番とテストは常に同じ状態にしておくこと。JS等の専門性が高く、サイト全体に影響を与えるファイルを修正する必要がある時は要相談

実装が上がってきた後、チェックする事
・キャッシュをクリアしてから確認はしたか
・各種（IEも含む）ブラウザの表示崩れはないか
・ブラウザサイズを変えて、確認はしたか
・IOS。アンドロイドでの表示崩れはないか
・読み込みの遅延がないか
・デザインカンプとのズレはないか
・リンクは全て繋がっているか。ページ先は合っているか
・マウスホバー、インタラクションが指定した場所に付いているか？また正常に作動しているか
・要素間に不自然な隙間が空いていないか
・画像の解像度は足りているか。見切れや、不要な線などのが入っていないか。
・英文の大文字、小文字のルールが統一されているか。
・（文字が画像の場合）文字の不自然な空き、約物は小さくするなどの処理がされているか
・動作が重い、動きの軽快さに欠ける箇所はないか（スクロール、ロールオーバー）
下記の仕様は挙動が不安定になることが多いため特に留意する。
1. Pjax
2. スムーススクロール
3. 視差
4. 動画
・視差効果は奥行きを出すための演出。奥の要素ほどゆっくりになるのが定石。一歩遅れて動くなど、レスポンスが悪くないか確認する。
・ボタン、クリックは押した後にレスポンスがないといけない。押した後に不要な間が空いていないか気にすること。
・デザイン状宜しくない文字の使用（２バイト文字）がされていないか
・番号をクリックすると電話に繋がる、住所クリックでグーグルマップに飛ぶなどの配慮がされているか

働く上で気をつけないといけない事

メールの返答は早く返すこと。
返信が早いことで対応力が高く、相談がしやすいといった好印象を与えることができる。逆に後回しにすると返信忘れのミスや「メールを見てもらえたのか？」という不安を与えてしまう恐れがある。
メールの返信は基本３時間以内を心掛ける。

受け身にならない。連絡、相談は自分から早急に行っていく。
相手待ちの作業でも、こちらから積極的に声かけを行う。
スケジュールを守るのは大切だが、早い段階で相談すれば、意外とリスケなども対応してもらえたりする。連絡相談は早急に行うこと。

難しい、無理な用件はしっかりと伝える。できる条件、代案なども提案する。
背伸びアピールは誰も得をしない。難しい、無理な用件は、正直に伝える。ただし、無理とだけ伝えるのではなく、どうすれば可能であるか条件や代案も伝える。

時間が掛からない作業から取り組む。
優先順位が同じ作業の場合は時間が掛からない作業から優先する。重いタスクを最後に残すことで残りの工数から、作業終了までの逆算がしやすくなる。日程が見えてくることで調整、リスケの相談が行いやすくなる。

報告は定期なタイミングを作る。
仕事の進歩予定、結果は始業、就業時など定期的なタイミングで報告する。
始業時には今日進めるタスクと見込みの時間を、就業時には始業時の内容をなぞって、どこまで進んだか、何故その時間にってしまったのかを報告する。

お客様から具体的な日程を引き出す
日程が不明確だと返答が遅かったり、急な対応を要求されてりする可能性が高い。こちらからプッシュぢて明確な日程を引き出すこと

デザインで気を付けなればいけないこと

・じぶんの手癖でデザインをしない。自分の手癖は限界がある。必ず今回の条件にあう参考を探して、それらを研究すること。

・参考を調べるときは、今回の目的を解決してくれる表現やデザインであるかという目線で見ること。この表現がカッコいいから使いたいという手法優先の考えが先に来てはいけない。

・H1〜5まで塊を意識して配置しているか

文字サイズ、余白はメリハリを持たせる。中半端なサイズ感は野暮ったくなるだけ。思い切ってサイズ差や余白を大きくつけるとデザインがキマりやすい。

・フォントサイズ、行間、要素が滲んでいないか（小数点で設定していないか）

・レイアウトは大まかに配置したのちグリッドに合わせるように配置する。
インナー幅は1100px,900,700px,500px、リキッドは3、4分割を基本として組み立てる。

・何を目立たせたいのか優先順位を決めてデザインをしているか

・数字文字は欧文フォントを使う。

・線やあしらいは多すぎと見辛くなるが、少ないとグルーピングに支障が出る場合もあるケースバイケースで考える

・参考はコンテンツ部分、デザイン部分で切り分けて探す。５つ探してそれらを組み合わせていくと良い

・参考は今回の

・参考にするものが間違っていると後のクオリティに影響が出る。そもそも見ている参考のクオリティや方向性があっているか注意する。

・情報設計やコンテンツの見せ方は日本のサイトから参考にする。海外はあくまでデザイン部分のみ。

・初心者はあしらいを過剰に盛りがち。良いデザインは意外とシンプル。

・デザインがシンプルでもインタラクションで斬新さを出すことも可能。レイアウトを崩すこだけに囚われない。

・H1〜5まで塊を意識して配置しているか

・海外のデザインで参考にするのは「大胆さ」。フォントサイズや余白など。このメリハリが効いているとデザインがキマりやすい。

・「〜のサイトっぽい」と思われてしまうようなデザインは避ける。既存のものでも２つ以上組み合わせることで、オリジナリティのあるデザインが出来る。

・PCからスマホに要素を持ってきただけのデザインは避ける。モバイル用に最適化された見せ方やデザインを提案すること。

・インタラクションは大袈裟につけると派手でポップな印象にはなるが、やり過ぎるとダサくなってしまう。イージングは自然の動きに準じると違和感のない動きが出来る。最初が早くて後が遅い、という動きを意識する

・センター揃えと左揃えが不自然に混在していないか確認する

・ビジュアルの上下の比率は合っているか

・デザインしたページは単体で見るのではなく他のページの兼ね合いや、前後関係も必ず確認すること。

・本文1行30～35文字程度で折り返す文字サイズおよび文字幅にする。

・中途半端なメリハリは野暮ったい印象になりやすい。ジャンプ率を思っ切り高くする。余白広めにとるなど思い切ったメリハリを付ける。

・お客さまの修正依頼が手法の話になっている場合は、何故それにしたのか、目的が何であるか確認する。

・余白感は既存ページを踏襲しているか
・ベンチマークにしているもの、参考など明確なイメージを引き出す。こちらの予想だけではデザイン当てクイズになって工数がかさむ。

・別のビジュアルが入っても見易さが変わらないか考慮すること

・ある程度ブラウザの伸縮で崩れないように、余白等の「遊び部分」を作ることを考える

・下層ページを同じフォーマットで全て展開しているパターンも良く見られるが、本来コンテンツによって見せたい要素は変わってくるはず。コンテンツによってファーストビューのデザインを変えるなどの工夫もするべき。

・デザインの検討時にはとにかくトライ&エラーを多く回す。煮詰まったらデザインを大胆に変えてみる。

・レンポジや過剰にエフェクトが掛かった写真は安っぽさ嘘っぽい印象を与えかねないため、メインビジュアルでの使用は避ける。

・重心に違和感がないかを意識する。上下、左右数値ピッタリに要素を置けば良い訳ではない。目で見て違和感があったら調整する。

・視差は奥行きを感じさせたい時に有効な手法。
手前が早くて奥になると遅くなる。止まる時は両方とも同時。
どちらかが遅いと画像がズレているだけの印象になってしまう。

・サイトルールから外れたデザインをしていないか（見出しやボタンなどは既存ページから踏襲したものを使っているか

・要素を重ねたり、ズラすなど複雑性を加えるとサイトに奥行き感がでる。（３層ほどに重ねると良い）

写真はグラフィックデザインの大事な一要素である。邪魔な部分は消す、主役の部分は位置を細かく調整するなど加工することも意識する。

要素や機能は不用意に足し過ぎると目立たせたいものが目立たなくなる。

ページ１つ１つには個別に達成したい目的が存在する。デザインをするときは、どの見せ方をするのが一番目的を達成できるのかという観点で考える。

・デザインしたページは単体で見るのではなく他のページの兼ね合いや、前後関係も必ず確認すること。
つじつまが合わないようなら他のページごとデザインを変更するといった判断も行う。

・デザイナー目線でルールやレイアウトを踏襲したからと言って見やすくなると限らない。素人が見たときに感じる違和感をデザイン都合で作らないようにする。

・コンテンツ事にインナーやリキッドの可変は想定しておく。また、可変も想定して遊びの部分となる余白を持たせることも考慮する。

自分のデザインを客観的に見れるように、一度寝かせてキャプチャをスマホに入れるなどしてこまめに確認できるようにしておく。

自分が良い思った、かっこいいと感じた等、好みの土俵でデザインや説明をしない。達成したい目的に合っているかどうかで考える。

・アイディアの５ヶ条
→前提：アイディアとは既存の要素の新しい組み合わせである

１：情報収集（特殊、専門的な資料と一般）　
２：組み合わせを要検討
３：一度忘れて、リラックスする。無意識に身を任せる
４：日常のふとした瞬間にアイディア生まれる
５：他の人の意見を聞いてみる