父さんはデザイナー

デザイン、モーショングラフィック、アプリ開発などを中心に自分がインプットしたものを吐き出していきます

動画デザイナーだった僕が、アプリ開発に携わるようになってから実践した3つのこと

f:id:kaminobu:20160422124707j:plain

自己紹介

北の大地で、主にモーショングラフィックスなどの動画制作をしている動画デザイナーです。最近は医療系アプリの開発(企画・スケジュール管理・プロトタイプ制作)やWEBサービスの仕組みや企画なども何故か担当してます。1児の父です。

急にアプリ開発担当に任命される

医療系アプリをリニューアルするにあたり、担当ディレクターがいなかったので「やったことないけどやるかい?」と聞いてみたところ即任命されました。

という訳で、早速現状のアプリを確認。

テストで触ったことがあるので、何となく機能はわかっていたがリニューアルのことを考えると、どこから手を付けていいのかさっぱりわかりませんでした。

そこで自分の復習の意味も込めて、アプリ開発に携わるようになってから実践したことを3つ紹介したいと思います。

その前に…現行verのアプリを知り尽くす

情報が無いとリニューアルできないので、仕様・ターゲットユーザー・デザイン・OS・スケジュール・リニューアルの目的などを確認してアプリの情報を集めます。

【実践1】書籍やWEBからアプリ開発に関するあらゆる情報を集める

一番最初に始めたことはアプリに関する知識がほとんど無く、身近に詳しい人もいなかったので書籍やWEBで情報を集めることにしました。

 WEBで調べようにも何を調べたらいいのかが、わからないレベルでした。そこで「こういう時は本だろう!」ってことで「アプリデザイン デザイナーおすすめ 書籍」で検索!

すると「最前線IT企業のデザイナーたちが参考にしてきたUI・UXの良書とは」という記事を見つけ熟読。ここにはUI・UXを学ぶ上でおすすめの書籍が紹介されていました。

その中で僕は2冊の本を選びました。

①誰のためのデザイン?

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

誰のためのデザイン? 増補・改訂版 ―認知科学者のデザイン原論

 

人間が使う全ての「物」に対するデザイン理論が書かれています。この本でアプリ開発に役立ったのは「人が触れる物に対するデザインの考え方」です。

 ②インターフェイスデザインの心理学

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

 

 人間の行動原理を様々な視点から解説しています。今までは見やすいであろう、使いやすいであろうという考えでデザインしていましたが、この本と出会ってからは行動学を意識して作ることができていると思います。

 

 アマゾンで買った上の2冊を読み漁り、デザインに対する考え方を「動画」から「アプリ」へとシフトさせていきました。

本を読みながら、少しずつWEBでも情報を集めました。

 harahara BLOG 

プロトタイプの種類や作り方、ワークフローへの落とし込み方をここで勉強した。  

 MICRO WAVE 

web戦略の策定にも役立つ「※カスタマージャーニーマップ」の作り方を学習。ユーザーがアプリを知り、ダウンロードして実際に使うまでの行動をマップで作成しました。※人の行動を旅に例えて図式化したもの

 ブレないアプリデザインのすすめかた

開発を進めていくとターゲット・デザイン・UIUXなどいろんなことが"ブレ"ていきます。そんな"ブレ"がでないように「ステートメント(コンセプト)を共有する」が大切だと書いてあります。このステートメントが後々、僕を助けてくれるとは思いませんでした。

【実践2】自分のスマホに入っているアプリを研究する

情報を集めているときに、自分が普段使っているアプリはどんなデザインでUIUXは何を意識しているのか?というのが気になり研究を始めました。

スマホに入っていたのは(OSはAndroid6.0です)

ここからテキストサイズ・レイアウト・枠のサイズ・ボタンサイズ・アイコンサイズ・色味・アニメーション・ページ構成・何故、意識せずに使えるのか?などを洗い出しました。

上記のアプリは「機能の簡潔さ」と「主張し過ぎない色使い」「わかりやすいボタン配置」「押しやすいサイズのアイコン」がポイントになっていると思いました。

わかりにくかった現行verのアプリを、こういった所に重点を置いてリニューアルを進めることにしました。

【実践3】プロトタイプを作る

色んな書籍やWEBなどから「とりあえず作るのが一番早い」ということでプロトタイプを作ることにしました。

プロトタイプ完成までの道のり

  1. ステートメントシートを作成
  2. カスタマージャーニーマップを作成
  3. harahara BLOG さんの記事を元に最初は付箋でワイヤーフレームを作成
  4. 作成したワイヤーフレームをPOPを使ってデバイスで確認
  5. 手順3と4を繰り返して、機能やUIUXの検証を行う
  6. ワイヤーフレームが完成したらProttでプロトタイプ作成
  7. プロトタイプ検証
  8. プロトタイプ修正
  9. 手順7と8を繰り返し、完成したプロトタイプでユーザーテスト
  10. ユーザーテストを元に修正

使用したツール

上記の工程を踏むことで実装しなくてもよい機能を省くことができます。使うかもしれないから、とりあえず付けておくか!を無くせます。

余分な作業を減らすというのもありますが、一番大きいのはプロトタイプを通して「情報をスタッフ間で共有をする」ということです。アプリを作り上げるには必要かつ重要な工程だなと思いました。

まとめ

まだ、アプリは開発途中ですが(実装作業中)自分が実践した3つのことを書いてみました。モーショングラフィックス担当とアプリのディレクターを兼任して5ヶ月が経ちました。まぁ、大変だけど面白いのでこれからも色んなことに挑戦して、このブログで紹介できたらなと思います。