企画から実際にサービスを設計するところまで進んできた本連載。今回はサービス設計からUI設計へと進んでいきます。
1. 必要な機能を掘り下げてみよう
前回は「犬の写真共有サービス」の機能を「写真をとってアップする」「他の人の犬の写真が見られる」というところまで一旦しぼったんだよね。
そう、大枠の機能が決まったら、その機能を実現するにはどのような機能が必要か書き出してみましょう。このような感じになります。
＜写真をとってアップする＞
- 写真撮影機能（カメラ）
- 写真のアップロード
＜他の人の犬の写真が見られる＞
- 犬の写真が流れてくるタイムライン
- お気に入り（写真 / ユーザ）
- 検索（写真 / ユーザ）
＜その他にコミュニティサービスとして必要そうな機能＞
- 新規登録 / 退会
- ログイン / ログアウト
- マイページ
- 設定機能
おぉ、だいぶイメージがわいてきた！
ここまできたら、主要な画面のワイヤーフレームを書いて、さらにイメージを深めていきましょう。
2. まず、ペンと紙でワイヤーを書いてみよう
ワイヤーフレームというのは、サイトやアプリのUIの骨組みを作ることだよね。UI設計なんて初めてだけれど、そんなこと自分にできるかしら？
そう、ワイヤーフレームを描く能力は、サービスを考える上で重要なスキルなので、ぜひ身につけたいところです。デザイナーでなくても臆せず、まずは主要な画面を紙とペンで描いてみましょう。
こんな感じかな？
▲オリジナリティを追求したワイヤー
これは、だいぶ独創的だね…。「iPhoneを振るとシャッター」ってブレた写真しか撮れない気がするけど…。
新しいサービスには、常識を打ち破ったオリジナリティが必要だからね。
オリジナリティと分かりやすさのバランスについては議論の余地があるけれど、まずオリジナリティという前に、一般的なUIの基本を知るといいんじゃないかな？
たしかに。
まずはAndroidならMaterial Design、iOSならiOS Human Interface Guidelinesを読んで、そのプラットフォームでの流儀を確かめてみましょう。理想を言うと、どちらもとても役に立つので両方読んでみることをオススメします。その上でオリジナリティを追求してみてはいかがでしょうか。
3. ワイヤー作成に便利なツールを使おう
いろいろ勉強した結果。こんな感じになりました。
▲手描きのワイヤーフレーム
独創性が一気に影を薄めたね。
正攻法を知ってからオリジナリティを追求することにしたので。
初めて作るサービスとしては良い判断だと思います。せっかくなので今回はもう一歩踏み込んで、ツールでワイヤーフレームを綺麗に描いてみましょうか。
SketchはテンプレートとしてiOSやWeb、Androidの基本的なデザインも入っていてなかなか便利です。残念ながらMacでしか動かないけれど、動作も軽く、気軽に扱えるデザインソフトとしては今のところ一番オススメです。
▲「Sketch」はUIを書くのに便利なテンプレートがそろっています
その他にも調べたけど、Sketchのような気軽さでかつMac/Windows両方で動くデザインツール「Affinity Designer」、UIデザインのみならず動くモックまでつくることのできるFacebookの「Origami Studio」や、まだベータ版だけれど「Adobe XD」、さらにWeb上で使えるツールだったら「Cacoo」とかも気になるね。このあたりのサービスやソフトは日進月歩なので、そのときどき自分に合うものを使うと良さそう。
意外と詳しいね…。もちろん、まずは使い慣れたパワーポイントやkeynoteで描くというのでも良いでしょう。ちなみにSketchはUIデザインの現場でよく使われている印象があるのと（筆者主観）、いろいろと便利なプラグインが充実しているので選んでみました。とりあえず体験版で試してみると良いと思います。
ところで、デザイナーじゃない人が楽してワイヤーをかっこよく描く方法を教えてほしいんだけど。
まずアイコン。GoogleのMaterial DesignのIconは数が多く、CC BY 4.0ライセンスで利用できるので便利です。
配色についてはどうすればいいのかな？
配色を考えたいなら同じくMaterial DesignのColorガイドや、AdobeのサービスAdobe Colorを利用してみるのも良いでしょう。ただ最近の流行として、あまり色を使わない方向に向かっているところもありますね。
- ベースカラー
- 目立たせたい色
- あまり目立たせない色
- エラーの表示
くらいの分類で、意味をもたせて色を使うと良いでしょう。
うーん、さすがにこのあたりは自分では決められない気がしてきたぞ。
デザイナーがワイヤーフレームの配色にとらわれないように、ワイヤーフレームはモノクロで書いた方が良いという意見もあるので、そういうときは迷わずモノクロで描きましょう。
なるほど！さっそく用意してみました。
▲Sketchで描いたワイヤーフレーム
なかなか良い感じです。アイコンはMaterial Designのものを使っているんだね。次回は描いてみたワイヤーフレームをベースにプロトタイプツールを使って、モックアップを作ってみましょう！
盛り上がってきた！
次回予告 最終回 : モックアップで検証してみよう。
⇒ エンジニアのための企画書講座シリーズ一覧はこちら！
瀬尾 浩二郎（セオ商事）
大手SIerを経て、2005年に面白法人カヤック入社。Webやモバイルアプリの制作を主に、エンジニア、クリエイティブディレクターとして勤務。自社サービスから、クライアントワークとしてGoogleをはじめ様々な企業のキャンペーンや、サービスの企画制作を担当。
2014年4月よりセオ商事として独立。「企画とエンジニアリングの総合商社」をモットーに、ひねりの効いた企画制作からUI設計、開発までを担当しています。
Twitter: @theodoorjp
ホームページ: http://theodoor.jp/
※本記事は「CodeIQ MAGAZINE」掲載の記事を転載しております。
8,568通り、あなたはどのタイプ？
グッドポイント診断で、あなたの隠れた強みを診断してみましょう。
診断結果は8,568通り。あなたはどのタイプ？
