インターン生がほぼ一人でギフトECアプリ「TANP」のデザインをした話

はじめまして、大学4年生の伊藤達也(@itotatun)です。
現在は株式会社GraciaでUIデザイナーインターン生として働いていて、主にオンラインギフトサイト「TANP」tanp.jp のUIデザインをしています。

今回、TANPのiOSアプリ「 TANP(タンプ)ギフトが見つかるアプリ」をリリースことになり、アプリのデザインの知見がない中どうやってデザインしていったのかについてお話していこうと思います。

🧑‍💻なぜほぼ一人でデザインすることに？

スタートアップあるあるなのかもしれないのですが、当時デザイナーでフルコミットできているのが僕と上司の二人だけで、会社のフェーズとして人事に力を入れることになり、上司が人事部とデザイン部署を兼任することになりました。その後、新規プロジェクトでアプリをリリースすることになり、すごくありがたいことにそのデザイナーとして白羽の矢がたったのが僕でした。アプリの構造の大枠をCTOのたくみんさんが進めていき、僕がそれを元にデザインしていくこととなりました。

🚀まず始めたこと

・社内のデザインツールをSketch/Xd＋Zeplin→Figmaへ！
・調査（アプリの構造/配色）
・Figmaの使い方とアプリデザインの基礎を学ぶ

 ” 社内のデザインツールを変える ”

元々使用していたツールはデザイナーごとに異なっており、SketchとAdobeXDを使用していました。エンジニアへの共有はZeplinを使っていました。そのため、デザイナー間で共通して使うコンポーネントを共有をよりスムーズにするかつ、エンジニアとのデザインの認識をより共通させるためにFigmaの導入をこのときに主導しました。Figmaのページ内にはCTOが描いたペーパープロトのページを作り、そこにコメントを追加することで打ち合わせで話した内容の認識を合わせられるようにしました。

” めっちゃ調査（アプリ構造）"

様々なEC関連のアプリの構造を調査しました。どのページがネイティブでどのページがウェブビューで作られているかや、売り切れ時のステータス、検索結果が見つからない場合、商品購入履歴、ポイント履歴等々を調べまくりました。

” めっちゃ調査（配色）”

配色に関しては、ウェブサイトのTANPの方でもグレーが混在しているというところもあって、アプリの方ではグレーの色を絞って統一させようと思い、MaterialDesignのグレーや有名な人が書いた記事を参考に作成していきました。ただ、その後ダークモードに対応できるように、Appleが推奨しているグレーに変更することになりました。

” Figma使い方とアプリデザインの基礎 ”

Figmaでのデザインしていく上でのページの分け方、コンポーネント管理、作業の進め方とアプリとして推奨されているデザインを調査しました。

以下のリンクが参考にさせていただいた記事になります。（投稿してくださった皆さんほんとうにありがとうございます！インターネットって素晴らしい！）

デザインは8の倍数でできている
Figmaの使い方、全力でまとめました
Atomicデザインをわかったつもりになる
Figmaで使える！スタイルガイドテンプレートのつくりかた (テンプレートのみ有料)
Figma FAQ 、 よくある質問 #01
Figma FAQ 、 よくある質問 #02
Human Interface Guidelines
Material Design

⛈大変だったこと

汎用性の高いコンポーネントの作成と管理（Figma）

当初、Atomicデザインの構造を目指してコンポーネントを管理していました。そのため、バックグラウンドもマスターコンポーネントで作成したりしていました。しかし、増えすぎるかつ、どこに何があるのかがわかりづらく整理するのが大変で結局Atomicデザインに関して多少は残しつつも断念しました。

また、マスターコンポーネントをどのような単位で作っていけばいいのかいまいちわかっておらず、インスタンスにさらに要素を加えてそれをマスターコンポーネントにするというのを繰り返していて、大量のマスターコンポーネントだらけになってしまいました、、、😰

ただ使っていくうちに構造をだんだんと理解していき、そもそもインスタンスがどの程度可変なのかを理解していくことで汎用性の高いコンポーネントを作成していくことができるようになりました。

マスターコンポーネント（紫に塗り潰されたこれ→❖）
・全てにおいて可変
・表示非表示はマスターコンポーネントの状態がデフォになる

インスタンス（紫の縁のこれ→◇）
・色、文字、オプジェクトにおいて可変
・表示非表示はマスターコンポーネントと異なる物を表示できる
・マスターコンポーネントの時点でインスタンスのコンポーネントがある場合、そのオブジェクトは不変

これを理解することで、

例えば、ナビゲーションバー文字だけの場合とシェアアイコンがついている場合とを１つのマスターコンポーネントで管理することができます。

マスターコンポーネント

インスタンス

複数種類のナビゲーションバーを表示非表示などを使うことでいくつかのマスターコンポーネントだけで管理することができます。

” リデザインもすることに ”

当時ウェブサイトにおいてもリデザインしていきたいという話があり、どう進めていくか確定していない段階でアプリのデザインが始まりました。ECなので商品がいかに目立たせるかという部分が大事です。

背景色はその商品の印象にも左右しCVRにも関わってくるということがウェブでのA/Bテストでわかり、なるべく背景色にはブランドカラーのオレンジを使わないようにしました。（かっこいい雰囲気の商品でも背景がオレンジだと少し可愛らしい印象を与えてしまう）

ナビゲーションバーはウェブ版ではアクセントカラーに紺色を使用していましたが、この紺色はVIガイドラインにはない色であるという点と、商品を目立たせる点で気が散ってしまうという点で、よりシンプルながらもブランドが伝わる見た目に変更しました。

TANP 旧ウェブVer

TANP 旧ウェブ デザイン継承Ver

TANP リデザインVer

” 何がどうダメかわからない ”

これは作りながらずっと思っていたことなのですが、自分正しい方に向かって進んでいるのかという不安が常にありました。自分が作っているデザインの正しさを測り方としては、世の中で良しとされているデザインのルールを集めて、それとの整合性で進めていきました。また、いろんな人に聞いてFBをもらうなどもして何がどうダメで何がどう良いのかをわかっていけるようになりました。

💡こうやって解決

” 何で困っているのかを明確にする ”

「どうやって進めたらいいかわからない」ではなく「フレームを広げると中のオブジェクトまで多くなって歪んでしまう」「インスタンスの中身の変更できる範囲がわからない」といった具合で、困っていることを明確化することで検索しやすく、答えにたどり着きやすくなります。

” いろんな人に聞く ”

とはいえ、間違いなく”いろんな人に聞く”がすごく大事です。ただ、聞く時も自分の中で何が知りたいのかを整理、わからないことを明確化できていないと、聞き手も何が聞きたいのかわからないだけでなく、貴重な時間を無駄にしてしまい、人生相談のような抽象的な話で終わってしまうかもしれないです。（それはそれで大事ですが）

dely株式会社のCXO、坪田さんに話を聞く機会があったときはFigmaの画面を見せながらFBをいただきました。

デザインするときは隅々まで本物に近い内容で作る
どれだけユーザーが使っている状態に近づけるかが大事で、imgとか、商品名とか仮のオブジェクトやテキストテキスト...とかでおいても実際の内容を置いたときに全然雰囲気が変わってしまう。

日本のFigmaコミュニティに入る！

Figmaのツールを理解する上で入って損はありません（無料です）
Figmaのツール自体英語かつ、機能がたくさんありすぎて何ができるのか全てを把握することは全然できていないですが、「〇〇できそう、、、」みたいな感じでFigmaコミュニティのSlack内で検索することで自分の知らない機能を見つけることができました。Googleで検索するよりも早く辿り着けると思います。また、Slack内で質問しても優しく返信してくれます！

🙇‍♂️終わりに

以上がインターン生がアプリデザインをした話になるのですが、実はだいぶ割愛しました、、、
僕自身もまだ駆け出しデザイナーですが、同じようにFigmaの使い方やアプリのデザインの進め方がわからない方がいましたらいつでも相談に乗ります！Twitterだと返信を早く返せるかと思います。

拙い文章ですが、最後まで読んでくださり、ありがとうございます！

TANPを運営するGraciaってどんな会社？

UIデザインを学ぶ学生同士のコミュニティーとかないの？