見出し画像

<随時更新> デザイナーがディレクション業務で気づいた学び

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

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

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


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

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

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

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

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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
17
webデザイナー1年生のボーイ。 ツイッター https://twitter.com/ws0606
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。