デザイナー⇔エンジニアでやりとりする時のこんな時どうする？チェックシート #デザイン

　デザイナー⇔エンジニアでデザインデータのやりとりをする時に困ったことはないでしょうか？僕は過去に困ったことがありDXELというイベントでこんなSketch(Zeplin)はイヤだ #dxelと言う発表をしたこともありました。あれから1年以上の時が経ちましたが、今でもまだまだ都度確認しないといけないことが発生します。その時々で聞いたり確認するのも大変なので、ある程度忖度をして実装することもありますが、中にはデザイナーが想定していなかった結果になることもあります。逆に実装を進める中でUIが崩れたり、見辛いUIになってしまう可能性もあります。なるべくプロダクトがユーザーの手元に届く前にそういった問題は潰しておきたいですよね。本記事ではUIを固める上で擦り合わせが必要だろうと思う項目を挙げてみました。（他にも考慮するべきポイントがあれば教えていただければ追記していきます）

☑️画面サイズが小さい端末ではどうなる？

　iOSであればiPhone SEやiPod touchなど、横幅が320ptで表示される端末は今でも現役で利用されています。こういった端末で表示させる場合に文字や画像が切れてしまってはせっかく綺麗に作ったデザインがもったいないですね。できれば事前に想定してデザインを作る、もしくは、回答を用意しておくのが良いでしょう。文字を２つ以上横に並べるようなUIの場合は、改行や縮小してもいいもの、絶対固定で見せたいものなどが分かると良いですね。また、iPadでもスプリットビューで表示された場合に想定以上に狭い画面になることがありますので注意が必要です。

☑️画面サイズが大きい端末ではどうなる？

　先ほどとは逆にiOSであればiPadなどのタブレットを利用された場合にどのようなデザインになるのが良いでしょうか？例えば写真をたくさん表示したい場合に、普段は3分割で表示するがiPadでも3分割のままで良いでしょうか？iPhone向けの画面をiPadで表示すると余白がとても多くなってしまうことがあるので、そういった場合に、どうするかの想定や回答を用意しておいてもらえると開発が少しスムーズになるかもしれません。画面サイズに関してだと、縦表示、横表示もどうなるのか気にしておきたいですね。

☑️英語など他の言語のユーザーが見たときはどうなる？

　日本向けに提供しているプロダクトの場合、文言を日本語固定で作ってしまいがちかと思います。そういった場合に、英語の文言を入れた場合に文字が長くなって切れてしまうことがあります。また、ここではチェックマークにしてないですが、アラビア語など右から左に読む言語のことも考慮はしておきたいですね。ちなみにAndroidには架空言語と言うものがありテストがしやすくなっているようです。iOSにも欲しい機能の１つです。

☑️ダークモード（テーマ）の場合はどうなる？

　2019年はスマートフォンにおけるDark Mode元年と言っても過言では無いです。iOS 13からDark Modeが、AndroidではDark Themeが利用できるようになりました。これらの機能を有効にすると、UIの概念が覆ってしまうこともあるので、なるべく想定を忘れないようにしたいです。

☑️機能が利用できないユーザーへの表現はどうする？

　最新の端末を利用している場合は問題無いかもしれないですが、少し古い端末を利用している場合に、開発する機能自体が利用できないことがあるかもしれません。そういう場合に、そもそも導線を削除するのか、ユーザーに利用できないことを教えてあげるのか、どうしたいのかが事前にエンジニアに伝わるといいと思います。

☑️読み込み中の表現はどうする？

　既に読み込み中の表現のガイドラインがある場合は良いですが、無い場合は気にしておきたいUXですね。また、連続でボタンがタップされたら困る場合もあるので、そういった場合にどのように防ぐのか指針があるといいですね。

☑️データが無いときはどうなる？

　動的にデータが表示されるような画面などは通常モックなどダミーのテキストでUIを作ることが多いと思いますが、全くデータが無い場合にどのようなUIになるのかが先にあると開発がスムーズになります。

☑️データが多すぎるときはどうなる？

　先ほどとは逆にデータが大量にある場合にどうしたいでしょうか？アプリによっては< >などのボタンを設置するかもしれませんし、スクロールイベントによって取得するようにしたいかもしれません。そういったことが事前に想定されていると開発するときにとても助かります。

☑️エラーが発生したときはどうなる？

　ユーザーが誤った行動をしたり、サーバーの一時的なエラーだったり、電波状況だったりとスマートフォンやウェブにおけるエラーパターンは大量にあります。大事なエラーはなるべくユーザーに気付いて欲しいですが、そうでも無いエラーもあるかもしれません。そういったエラーに関する表示をどのようにしたいのかが分かると開発する際にスムーズに進むかもしれません。

全部デザインデータ作るの？

　できればあるに越したことはないですが、全てを用意するのは大変なので、例えば画面の外にメモ書きとして残しておくだけでもいいと思います。都度声をかけたりSlackなどでやりとりする時間ももったいないので、伝えようとする意思があるかどうかでも開発の進め方は随分変わると思います。以下に例を表示します。

画面サイズが小さい場合
　文字のサイズは変えたくないので改行するようにしてください
画面サイズが大きい場合
　このままだと画像が小さすぎるので1.5倍で表示してください
縦画面の場合
　文字と画像を縦に並べたいです
横画面の場合
　文字と画像を横に並べたいです
英語の場合
　文字がはみ出た場合は改行してください
右から読む言語の場合
　ボタンの位置を左右逆にしてください
Dark Modeの場合
　見づらくなるのでこっちの画像に差し替えてください
機能が利用できない場合
　遷移元のボタンをトルツメでお願いします
読み込み中の場合
　背景を白で75%で透過してしてその上にローディングアニメーションを追加した画面を表示してください
データが無いとき
　画面が真っ白になると意味が不明なのでこのアイコンを真ん中に表示してデータを追加したくなるようにしてください
データ量が多いとき
　画面のスクロール量が少なくなったら新しくデータが下に追加される想定です
エラーが発生したとき
　入力フォームの上に赤文字でテキストを表示してください。エラーの文言についてはPMに確認してください。

もちろん全てを表示する必要があるわけではなくて、必要な箇所に必要なメモを残しておけば良いと思います。

まとめ

　マイノリティでもプロダクトを使う人の気持ちは変わらないはずなので、なるべくいろんな人が使うことを想定したいですね。デザイナーもエンジニアも共に協力しながら価値のあるプロダクトをなるべく早く世の中に提供していきましょう。

P.S.
　うちではこうやって解決してるよ！と言う案があれば是非教えてください！