新卒デザイナー研修物語　第5話「レイアウト指示」

こんにちは！
おでんが大好物の新卒デザイナーの笹嵜です（餅巾着が一番好きです）。

新卒デザイナー7人でお送りしている「新卒デザイナー研修物語」。私は第5話を担当します。

これまでのお話はこちら。

研修の概要

今回はレイアウト指示の研修についてお伝えします！
この研修の目的は、デザインの意図を理解し、エンジニアと正確に連携するための方法を学ぶことでした。

新卒デザイナー研修において、レイアウト指示は研修期間が最も長いステップです。
14日間で2つの課題を遂行します。1つ目の課題から順にお伝えします。

1つ目の課題　レイアウト指示

レイアウト指示とは、デザインしたものをエンジニアに形にしてもらうための設計指示のことです。

要素の位置や画面サイズの変化の仕方、スクロール時の挙動やボタンタップ時の変化などを記載します。
私は今回の座学研修で、レイアウト指示について初めて学びました。

レイアウト指示の方法

今回の研修では、SketchとAbstractという2つのツールを用いてレイアウト指示をしました。

まず、Sketchでボタンの種類や状態変化など全ページに共通して入る要素を「共通パーツ」とし、テンプレートごとに変更する共通の指示を作成します。次に、Abstractのコメント機能を使用して指示を記載します。どこに対してどのパーツが配置されるのかなど、完成見本のデザインだけでは分かりにくい部分を指示し、エンジニアと認識を合わせます。

研修を受けて

レイアウト指示の研修を通して3つのことを学びました。

1. 見れば分かる情報は記載しない

研修当初、どこまで指示を記載をしたらよいのか分からず、全ての情報を書いていました。
しかし、Abstractではカラーやサイズ、マージンの幅などをエンジニア自身で確認することができます。
細かく書きすぎても、逆にエンジニアの混乱を招くことがあるので、簡潔に分かりやすく記載すべきだと学びました。

2. もしもこうなったら？を考えて指示する

3. 指示を分かりやすく伝えるためのデザインや工夫

詳細を読まなくても見ただけで伝わるように、指示を伝えたい人のことを考慮する必要があります。要素ごとに場所をまとめたり、白のオブジェクトのときはどの要素に対しての指示なのかが明確になるように工夫したりと、デザイナーの意図を分かりやすく正確に伝えるための工夫や配慮が大切だと感じました。

2つ目の課題　アセット作成

アセットとは、アプリ／ウェブサイトを構成する際に必要な「パーツ」です。
アセット作成の課題では、ウェブ、iOS、Android、それぞれ異なる解像度でパーツを書き出します。また、案件ごとに必要なアセットの解像度も変わります。

• ウェブは1 倍／2 倍の2種類
• iOSは@1x／@2x／@3xの3種類（@1x はいらないこともある）
• Androidはhdpi／xhdpi／xxhdpiなど

これを学んだとき、「一番大きい画像を1つ書き出したらいいのでは？」と思いました。
しかし、画像が大きければそれだけ読み込みに時間と通信量がかかります。よって、スマホの性能や通信環境によっては起動しづらくなることもあります。画像のきれいさと操作の快適さを両立させるため、適切なアセットのサイズは一通りではないと学びました。
また、「9-patch」と呼ばれる特殊なアセットも作成しました。

Android では、9-patchという伸び縮みするパーツを使用できます。
パーツを伸び縮みさせることで、デザインは同じでもサイズが異なるボタンを1つのアセットで賄えます。Sketchでパーツを作成し、Android Studioで実際にどう変化するのか確認しました。

この研修で初めて9-patchを知り、なんでこれで伸縮するんじゃい、と思いましたが、原理を理解してからは使いこなせるようになりました。

「9-patchを使用した方がいい箇所」と「9-patchを使用するのに向いてない箇所」を素早く判断できるよう、特性をよく理解しておくべきだと思います。

振り返り

レイアウト指示について

研修課題を進める中で、気付いたことが2つあります。

1つは「エンジニアが知りたい内容とそうでない内容を知る必要がある」ということです。
これを達成するには、開発の知識をもっと身につけないといけないな、と思いました。

もう1つは、「画面から読み取れない情報は質問して解決する」です。
画面をデザインしたデザイナーとレイアウト指示を作成するデザイナーが異なる場合、レイアウトを指示するデザイナーも画面を見るだけでは意図が理解できず、指示ができない場合があります。研修の課題でも、可変の指示など分からないことが多かったので、レイアウト指示を書く上で分からない所は、質問して解決することの大切さを感じました。

アセット作成について

「データを確認することが大事」だと思いました。

アセットを書き出すと、サイズが1px大きい・透過されていない／されている・アセットの重複・命名規則が統一されていない・解像度違いなど、時折データの不備があります。研修でも、データ名に誤字がありました。

書き出して終わりではなく、データに不備がないか確認したりアセットの名を考えたりと、どんなデザインデータにすれば伝わりやすく、ほかの人が作業しやすいかを考えます。

最後に

初めて学ぶことが多い研修だったので、分からないところや理解するのが難しいところも多々ありましたが、研修担当の先輩社員から新卒それぞれに丁寧なフィードバックがあり、疑問もすぐに解決することができました。

レイアウト指示の研修については以上です。最後までご覧いただきありがとうございました。

次回は第6話「デザインテスト」です。ぜひご覧ください！