スマホアプリ開発でデザイン担当と認識合わせしておくポイント(iPhone編)

こんにちは！おおはしりきたけです！スマホアプリ開発が盛り上がっていますね。クラスメソッドでもスマホアプリ開発が増えてきております。今日はスマホのデザインで最初に認識合わせしておくべきことを書かせていただきます。

はじめに

クラスメソッドでは、昔から社内にデザイナーがおり同じチームとしてプロジェクトにかかわってもらうことが多いのですが、デザインは、お客様のデザインチームでとか、デザインは別会社でということもあります。社内メンバーがデザインを行う場合は、認識ずれなどが出ることは少ないのですが、デザイン担当が別(別チーム、別会社、別の場所)の場合しっかりと認識を合わせておく必要があります。スマホアプリ開発で、デザイン作業は以下に分ける事ができます。

1. デザインを全て行う場合
2. デザインは別、パーツの切り出し、デザイン適用は自社
3. デザインとパーツの切り出しは別、デザイン適用は自社

今回は、3のデザインとパーツの切り出しは別、デザイン適用は自社の場合について書かせていただきます。

パーツの切り出しをどうするか決めましょう

「デザインは別に依頼しています」と言われたときに、まず確認するのは、上記の2の場合のパーツ作成までなのかと、3の場合のパーツの切り出しまでやってもらうのとでは、メンバーのアサインや、作業内容が変わってきます。まず確認しておくべきポイントはデザインパーツの作業分担について明確にしておきましょう。

提供される拡張子を決めましょう

iOSで一般的に利用するパーツはPNGを利用することが多いです。「当たり前でしょ」ということで認識合わせなんて必要ないと思う方もいるかもしれませんが、開発側の当たり前がデザイン側の当たり前とは限りません。しっかりと提供されるパーツの拡張子も決めておきましょう。

パーツの命名規約を決めましょう

パーツのファイル名がアプリ内で一意になるように、ファイルの命名規約についても決めておいた方が良いです。アプリでは、フォルダ構成で管理もできますが、ファイルで一意に判断できた方が楽なので、パーツのファイル名は、アプリで一意にしておく方が良いです。[画面名]と[パーツ名]と[状態]と分ければ一意になるので、以下のようなファイル名になります。

例：メニュー画面のボタンがタップされた時：menu_btn_active.png

※あくまで一例ですので、上記を参考にアプリ作成側で決めた方が良いです。

パーツの作成ルールも決めましょう

RetinaとNonRetinaでファイル名もサイズも違います。基本的にはRetina版のパーツを作成してから、縮小させることが多いと思います。Retina版でパーツを奇数で作ってしまうと、NonRetinaでは端数が出てしまうため、Retina版で奇数でパーツを作らないというルールも必要です。またRetinaは@2Xが必要なので、パーツ作成の時に必ず依頼しておきましょう。

• NonRetina版 ：[画面名]_[パーツ名]_[状態].png
• Retina版 　　：[画面名]_[パーツ名]_[状態]@2x.png

全体レイアウトも必ずもらいましょう

パーツのみ提供されても、全体のレイアウトが分からないと困りますので、元データでも、画像でも良いので、必ず全体のレイアウトが分かるファイルももらいましょう。

パーツはしっかりと管理しておきましょう

デザインが1回目で提供されて完了することは、まずありえません。また、素材は五月雨で提供されてくることがほとんどです。どの画面の、どのパーツが提供されているか、お互いの認識を合わせるためにパーツの管理をしっかりしておきましょう。特にプロジェクト後半は、デザインの差し替えが多発しますし、パーツの提供漏れや差し替え漏れ等もあり得ます。カオスな状態になってしまう前に、どのように管理するかをお互いで決めて、漏れのないパーツ作成と適応を行っていきましょう。

まとめ

素材適用だから工数がかからないと思いがちですが、デザインが別のチームの場合は上記の作業を明確にしても、やり取りする工数というのはかかります。これらを加味してしっかり見積もりを行う必要があります。プロジェクトがスタートした後に、慌てて決めてバタバタするよりも、最初に認識合わせてデザイン側、アプリ側双方が気持ちよく仕事できる環境を整える必要がありますね。