デザインデータはどこまで制作すべきなのか

池田 彩華のプロフィール画像
デザイナー 池田 彩華

1,686 view

ベイジが手がけるwebサイトは、PC利用のユーザーが多く、PCファーストで制作している。しかし、割合として少ないが、スマホやタブレット利用も一定数いるので、必要に応じて、スマホ版のデザインや可変イメージを作成し、エンジニアと認識合わせを行う。

1人でデザインから開発まで担当するなら問題ないが、ベイジは分業のスタイル。なので、実装に必要な最低限のスマホ版のデザインを作成している。

しかし、最近新しい人も増えてきて、複雑な画面の場合、スマホ版のデザインデータだけを渡すのはよくないと感じたことがあった。その際、事前にどこまでデザインを制作すべきなのか?依頼方法は他になかったかのか?と考えた。

結果、誰と一緒に仕事をするかで、デザインの制作範囲や依頼方法、コミュニケーションの取り方を変えることが大事だという考えになった。判断軸としては「キャリアの長さ」と「組む回数」があるかなと思う。

1. キャリアの長さ

大きくわけると以下の4パターンがある。
※キャリアが長い=ある程度経験があり、近年の知識もあるという前提の話です

ともにキャリアが長いエンジニアとデザイナーの組み合わせ

PCのデザインカンプに加え、最低限のスマホ版パーツと可変指示があれば、クオリティーが担保できるパターン。エンジニアは、長年の経験から事前に確認しておいた方がいい箇所を把握しており、デザイナーもどのように実装されるかある程度理解しているので、的確な指示ができる。モックを見て、微調整をするだけでいいことも。

キャリアが長いエンジニアとキャリアが短いデザイナーの組み合わせ

同様に、最低限のスマホ版パーツ、可変指示があれば問題ないパターン。ただ、デザイナーは、実装を考慮できていない制作をすることもあり、指示が曖昧で、コーディング後の調整に時間がかかることも。不足箇所は、エンジニアが実装でいい感じに対応することもある。デザイナーは、モックを見て、どのように組まれるのか学び、的確な指示の仕方などを学ぶ必要がある。

キャリアが短いエンジニアとキャリアが長いデザイナーの組み合わせ

スマホ版のデザインや可変指示に加え、可変イメージなどを制作するパターン。キャリアが短いエンジニアの場合は、デザインデータを渡すだけでは不十分で、仕上がりイメージの粒度を細かく伝えることで、実装の手戻りが少なくなる。また、参考サイトやサンプルがあると認識合わせをしやすい。品質を担保する上では、デザイナーが相手を理解して、的確な指示が必要になる。

ともにキャリアが短いエンジニアとデザイナーの組み合わせ

もちろんスマホ版のデザインや可変指示必要だが、お互いに配慮や予測ができていない領域があり、クオリティの担保は難しいかもしれないパターン。企業であれば、どちらかの職域にキャリアの長い人いると思うので、先輩のサポートを受けて制作をすることになるだろう。互いに、他の人がどのように制作するか学ぶ姿勢が大事だと思う。

2. 組む回数

何回も一緒に仕事をしている場合は、お互いのやり方を知っており、注意するポイントも理解しているため、コミュニケーションコストが下がる。そのため、スマホ版のデザイン制作もかなり最低限で済むこともあり、可変対応も指示書を簡単に作るだけでいいことも。

初めて一緒に仕事をする場合は、お互いの経験値や考え方の違いがあり、認識のズレが発生する可能性があるので、事前のすり合わせは必要だ。

まとめ

品質を担保していくためには、「キャリア」と「組む回数」この2つを踏まえ、相手のスキルや状況に応じた対応が求められるのかなと思う。特に分業の場合は、独りよがりな仕事の進め方をするとうまく進まなくなる。

このような考えになったきっかけとして、あるデザイナーさんに「エンジニアさんにモーション指示ってどうやってますか?」と聞いたことがあった。その際に、相手のエンジニアのキャリアやスキルに応じて依頼内容を変えているということがあったからだ。

例えば、モーションを初めてやる人や苦手な人の場合。

  • なるべく大きく動きのところのみ指示する(細かく動かすようにし出すと、調整に時間がかかってしまうため)
  • 1つの動きに対して、1つのサンプルを見せる(事前にイメージを共有ができ、実装後の手戻りが少ないため)
  • 指示書を送付した後に必ず電話やオンラインMTGなどでフォローする(直接話さないと認識にずれができて、コミュニケーションロスが発生するため)

モーション指示に限らずだが、当時の私は、相手の得意/不得意やスキルという判断軸がなかった。プロは、相手がどんな状況か判断して、適宜対応を変えているのかと学んだ。目先の自分の仕事だけではなく、プロジェクト全体で見たときに、どうすればうまく進行できるか考えられる人でありたい。

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,591 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,227 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,543 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    ベイジディレクターのリアル

    2,627 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
    BtoBサイトにおける「ファーストビュー攻略法」

    2,935 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
上に戻る