aircolor memolog

Web制作・テクノロジー、たまに旅行記

コスパを重視した、モバイルアプリ(サイト)のデザイン制作フロー

しばらくデザイナーらしい記事を書いていなかったので、久しぶりにそれっぽい記事を投稿してみました。タイトルではコスパ重視と強く謳っておりますが、単純にお金があんまりかからない、おすすめのワークフローの紹介となります。

あと、UI Design Advent Calendar 2013とからめてみました。

 

はじめに

最近弊社ではWebサイトだけではなく、スマホアプリやスマートフォンサイトの発注がすごく増えてきています。WEBサイトと同じく、スマートフォンサイトやモバイルアプリも、ワイヤーフレーム(設計図)をデザイン作成前に作るのですが、サイト以上に使いやすさや使い勝手を考えなくてはならないものです。

ワイヤーフレームを作るためには極端な話、紙に書いて作成するでもよいです。
ExcelやWordといったドキュメントツールでもいいし、PhotoShopFireworksといったデザインツールでもいいです。ようはクライアントや開発者とすり合わせるために必要な設計図みたいなものです。

ただ、スマートフォンタブレットに表示されるサイトやアプリの場合、より詳細な、動作のすり合わせが必要になってきます。なぜならマウス操作を軸としたPCと比べると、様々な形のバイス、まちまちな解像度、多様な利用シーンが考えられるからです。

そのために、要素の配置を示したワイヤーフレームとは別に、機能はしませんが完成品に近い動きをシュミレートできる、モックアップ(プロトタイプ)の作成が必要になってきます。

モックアップ作成用ツールは、すでに数多くリリースされており、下記サイトなどで紹介されています。
 

UIデザインの動きまで共有できるモックアップ作成ツールまとめ | MEMOPATCH

そんな、すでに大量にリリースされているソフトやツールの中で、僕がベストと考えた組み合わせは以下。

SketchとPOPの組み合わせ

SketchやPOPの説明については、他の方々が良い感じにまとめているので説明を省きますが、要約すると Sketchはワイヤー兼デザイン制作ツール、POPがモックアップ作成ツールです。

Sketch

f:id:kgsi:20131208160259p:plain

Fireworksユーザーに朗報?海外で話題の新しいWeb制作ツールSketch.app | MEMOPATCH

 

Sketch

Sketch

  • Bohemian Coding
  • グラフィック&デザイン
  • ¥6,800
Sketch Mirror

Sketch Mirror

  • Bohemian Coding
  • ユーティリティ
  • ¥500

 

POP

f:id:kgsi:20131208155812p:plain

iPhoneアプリの画面遷移をイメージしやすくするペーパープロトタイピング用アプリ「POP」 | sense of medium

POP - Prototyping on Paper

POP - Prototyping on Paper

  • Woomoo
  • 仕事効率化
  • 無料

 

会社では、というか僕はSketchでワイヤーフレーム・デザインを作成し、POPでモックアップを作成、表示をテストするワークフローを採用しています。 選んだポイントとしては以下の通り。

1.パーツの設定が容易

POPでは、用意された画像上に動作(タップエリアなど)を設定する、という仕組みなので、画面とは別にパーツを用意する必要もなく、表面的にはリリース時と同じような見栄えを設定できます。
Briefなどのアプリでは、パーツを画面上に配置し、設定していく方式をとっていますが、詳細に設定できる分時間がかかり、標準で用意されているパーツでは足りない場合も多く、実際の動きを再現できない場合もあります。
時間コスト、デザインの再現度、下記で述べていますがアプリも無料だということを考えると、現時点ではもっともよい選択肢だと考えました。

2.実機(実際に表示させる端末)での動作確認がカンタンにできる

Sketchでは、最近iPhoneアプリとしてリリースされたSketch mirrorを使うことで、 実機でのデザイン確認作業が容易です。
POPのモックアップの設定の仕方も簡単で、画像をPOPアプリにアップロードし、リンクエリアを設定するだけで実際の画面遷移を確認できます。
また、簡易的ですがメールを介して第三者へ作成したモックアップ画面を送り、動作を試させることも可能です。

3.可能な限りお金をかけない

POPは基本無料です。 類似ソフトのBriefは199$(約2万円)、WEBサービスのflintoは月額制です。「大人だし、社会人なんだから割り切れよ、会社に申請しろよ!と思う方は思うかと(汗
が、アプリやスマホサイト一本で仕事をしているわけでもない人たちには、
コストがかかること自体が、導入の大きな障壁だと思います。

Sketchについては、ぶっちゃけPhotoshopFireworksなどのグラフィックツールを持っていれば代用できるので、使用は必須ではありません。 ただ、上記で説明したSketch mirrorの使い勝手の良さ、Retina用のパーツ書き出しが容易なことを 考えた場合、選択肢として存在しても良いかと。なんといっても安いですし(笑

 

ワークフロー図

f:id:kgsi:20131208160723p:plain

 

デメリット

メリットばかり書きましたが、当然デメリットもあります。
完全無比、オールマイティーな制作フローなど存在しないのです。
基本的に小規模な開発・制作を想定したフローです。 大規模な開発(5人10人以上?)には合わないかと思います。
また、「POP」は大まかなアプリの挙動を確認するには最高に良いツールですが、 詳細な動作を再現するには向いていません(画面遷移以外の、細かい設定ができません。)
トドメにSketchを使う場合、ソフトを所有していないデザイナーが編集したり複製したりするのが難しい、というネックがあります(学習コストがかかります)。

 

以上になります。デメリットも踏まえて長々と説明しましたが、
小規模なグループでのデザイン・開発をしている方におすすめのフローです。

モバイルアプリやサイトのワークフローでうまくいかない、悩んでいる方は、ひとつ試してみてはいかがでしょうか。