リニューアル前はこういったものが無かったので、コンセプトがぶれたり、使うかどうかわからない機能が増えたりなどの問題が発生していました。ステートメントシートを作ることで作業効率化、ストレス減少、決定時間の短縮、全員が共通した認識で作業ができる。こういったメリットが非常に大きく、作らずに作業したらと思うと…今は考えられないですね。

ステートメントシートの存在はfladdictさんのこの記事で知りました。

アプリ製作のための定義ステートメント共有シート | fladdict

アプリでやりたいことを明確にし、アプリの強みって何だろうと考え、やらないことを決める。なんだか意思表示というか決意表明みたいな感じだと思います。

3.カスタマージャーニーマップ作成

ユーザーはどういった行動からアプリをダウンロードして、どのようにアプリを使うのかを予測・検証するためのマップを作りました。エクセルで簡単なフォーマットを作り、そこにユーザーがするであろう行動を具体的に書いていきます。

カスタマージャーニーマップの詳しい説明が載っています。

Web戦略の策定にも役立つ「カスタマージャーニーマップ」 | コラム・研究会 - 株式会社マイクロウェーブ

4.付箋でワイヤーフレーム作成

まず、僕ともう一人のデザイナーでアイデアを出し合いました。そして、出たアイデアをステートメントシートとカスタマージャーニーマップで確認しながら、ある程度の形にまとめます。まとめたら付箋に書き込みホワイトボードに貼りました。全ページを貼り、デザイン・ページ推移・UIUX・機能などを確認します。こうやって全体のバランスを取りながら細部を詰めていきました。

【ポイント】

広いスペースを確保する
大き目の付箋だと書き込みやすい
付箋の枚数は多めに用意しておく
あんまり丁寧に書かない
スピード感が大切

【メリット】

付箋なので、追加/修正が簡単にできる
アプリ全体を複数人で確認し、把握できる
ページ遷移がわかりやすい

【デメリット】

付箋の数が増えるので、広いスペースが必要
数日はスペースを占領してしまう

まとめ

作るって本当に奥が深いなと改めて思います。これだけの下準備をして、情報の共有をしてもやっぱり「ブレ」ます。ブレた時に戻れる場所があるというのは、ホッとします。戻って客観的にブレた箇所を見直すことができます。そこで判断をすればいいと思います。

2016-04-22

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

アプリ開発

f:id:kaminobu:20160422124707j:plain

自己紹介

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

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

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

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

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

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

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

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

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

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

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

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

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

①誰のためのデザイン？

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

作者: D. A.ノーマン,岡本明,安村通晃,伊賀聡一郎,野島久雄
出版社/メーカー: 新曜社
発売日: 2015/04/23
メディア: 単行本
この商品を含むブログ (4件) を見る

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

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

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

作者: Susan Weinschenk,武舎広幸,武舎るみ,阿部和也
出版社/メーカー: オライリージャパン
発売日: 2012/07/14
メディア: 大型本
購入: 36人クリック: 751回
この商品を含むブログ (28件) を見る

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

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

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

harahara BLOG

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

MICRO WAVE

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

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

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

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

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

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

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

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

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

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

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

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

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

使用したツール

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

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

まとめ

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

父さんはデザイナー

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

ビジネス用語で気になる3つのアルファベット3文字

1.OGP

2.MVP

3.OJT

まとめ

導入して良かった3つのWEBサービス

Slack

asana

Prott

まとめ

アラフォーデザイナーの転職日記2--ポートフォリオ作り--

Web上にポートフォリオを作る

作品集め

いざ、tumblerでポートフォリオ作成

思い通りのポートフォリオは果てしなく遠い

ポートフォリオの完成

作って終わりじゃない、始まりなんだ

初めてのアプリ開発で、ブレないために行った4つのこと

1.リニューアル内容確認（仕様やスケジュール）

2.ステートメントシート作成