CodeIQ MAGAZINECodeIQ MAGAZINE

はじめてサービス設計をするときの進め方(中編)──エンジニアのための企画書講座vol.9

2016.12.22 Category:【連載】エンジニアのための企画書講座 Tag: ,

  • 11
  • このエントリーをはてなブックマークに追加

企画から実際にサービスを設計するところまで進んできた本連載。今回はサービス設計からUI設計へと進んでいきます。 by 瀬尾 浩二郎

1. 必要な機能を掘り下げてみよう


前回は「犬の写真共有サービス」の機能を「写真をとってアップする」「他の人の犬の写真が見られる」というところまで一旦しぼったんだよね。


そう、大枠の機能が決まったら、その機能を実現するにはどのような機能が必要か書き出してみましょう。このような感じになります。

<写真をとってアップする>

  • 写真撮影機能(カメラ)
  • 写真のアップロード

<他の人の犬の写真が見られる>

  • 犬の写真が流れてくるタイムライン
  • お気に入り(写真 / ユーザ)
  • 検索(写真 / ユーザ)

<その他にコミュニティサービスとして必要そうな機能>

  • 新規登録 / 退会
  • ログイン / ログアウト
  • マイページ
  • 設定機能


おぉ、だいぶイメージがわいてきた!


ここまで来たら、主要な画面のワイヤーフレームを書いて、さらにイメージを深めていきましょう。


2. まず、ペンと紙でワイヤーを書いてみよう


ワイヤーフレームというのは、サイトやアプリのUIの骨組みを作ることだよね。UI設計なんて初めてだけれど、そんなこと自分にできるかしら?


そう、ワイヤーフレームを描く能力は、サービスを考える上で重要なスキルなので、ぜひ身につけたいところです。デザイナーでなくても臆せず、まずは主要な画面を紙とペンで描いてみましょう。


こんな感じかな?

オリジナリティを追求したワイヤー

▲ オリジナリティを追求したワイヤー


これは、だいぶ独創的だね…。「iPhoneを振るとシャッター」ってブレた写真しか撮れない気がするけど…。


新しいサービスには、常識を打ち破ったオリジナリティが必要だからね。


オリジナリティと分かりやすさのバランスについては議論の余地があるけれど、まずオリジナリティという前に、一般的なUIの基本を知るといいんじゃないかな?


たしかに。


まずはAndroidならMaterial Design、iOSならiOS Human Interface Guidelinesを読んで、そのプラットフォームでの流儀を確かめてみましょう。理想を言うと、どちらもとても役に立つので両方読んでみることをオススメします。その上でオリジナリティを追求してみてはいかがでしょうか。


3. ワイヤー作成に便利なツールを使おう


いろいろ勉強した結果。こんな感じになりました。

手描きのワイヤーフレーム

手描きのワイヤーフレーム


独創性が一気に影を薄めたね。


正攻法を知ってからオリジナリティを追求することにしたので。


初めて作るサービスとしては良い判断だと思います。せっかくなので今回はもう一歩踏み込んで、ツールでワイヤーフレームを綺麗に描いてみましょうか。

SketchはテンプレートとしてiOSやWeb、Androidの基本的なデザインも入っていてなかなか便利です。残念ながらMacでしか動かないけれど、動作も軽く、気軽に扱えるデザインソフトとしては今のところ一番オススメです。

SketchだとUIを書くのに便利なテンプレートがそろっています

▲「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で描いたワイヤーフレーム

Sketchで描いたワイヤーフレーム


なかなか良い感じです。アイコンはMaterial Designのものを使っているんだね。次回は描いてみたワイヤーフレームをベースにプロトタイプツールを使って、モックアップを作ってみましょう!


盛り上がってきた!


(イラスト : Shiori Clark

次回予告 最終回 : モックアップで検証してみよう。

⇒「エンジニアのための企画書講座」バックナンバーを読む


瀬尾 浩二郎(セオ商事)
大手SIerを経て、2005年に面白法人カヤック入社。Webやモバイルアプリの制作を主に、エンジニア、クリエイティブディレクターとして勤務。自社サービスから、クライアントワークとしてGoogleをはじめ様々な企業のキャンペーンや、サービスの企画制作を担当。
2014年4月よりセオ商事として独立。「企画とエンジニアリングの総合商社」をモットーに、ひねりの効いた企画制作からUI設計、開発までを担当しています。
Twitter: @theodoorjp ホームページ: http://theodoor.jp/

  • 11
  • このエントリーをはてなブックマークに追加

■関連記事

最終回 : はじめてサービス設計をするときの進め方(後編)──エンジニアのための企画書講座vol.1... 1. 動くモックアップをつくろう 前回はトップ画面のワイヤーを作ってみたんだよね。 そう、それで他の画面も作ってみました。 ▲ホーム / 検索 / プロフィール 画面 おぉ、すごい。この調子で主要な画面のワイヤーがそろったら、一旦モックアップを作ってみるとよいでしょう。 ついに!...
はじめてサービス設計をするときの進め方(前編)──エンジニアのための企画書講座vol.8... 1. サービス設計をすることになったぞ ブレインストーミングをして生まれた「犬の写真共有サービス」の企画。上司に「面白そうだから、作ってみよう」と言われまして...。 おぉ、それはスゴイ! でも、よくよく考えたらサービスを作るのって、何から手をつければ良いのかさっぱり分からないのですよ。 そ...
苦手克服!ブレインストーミングの方法(後編)──エンジニアのための企画書講座vol.7... 1.アイスブレイク 今回はブレインストーミングで使える様々なアイデア出しの方法と、アジェンダの作り方だよね! そう!その前に少し間が空いてしまったので、前回の復習を少しすると「効率的なブレインストーミングを行うコツ」とは…? "考える時間と話す時間を分ける" こと。 そのとおり!今回はその「...
苦手克服!ブレインストーミングの方法(前編)──エンジニアのための企画書講座vol.6... 1. ブレインストーミングの基本 「ブレインストーミングでアイデアを出してほしい」と社長に言われたけれど、何をどうすればよいのやら…。人と話すのが苦手でエンジニアになったようなものなのに困った。 まずはメンバー集めだね。人数は大体4〜6人くらいがベスト。人が少ないと盛り上がらないこともあるし、逆...
UX(ユーザ体験)から企画を考えてみよう──エンジニアのための企画書講座vol.5... 1. UXってなんだろう? 部長が「もっとUXを導入して製品のレベルを上げていこう」と言っているんだけど、最近よく耳にするUI/UXって…何!? UXポリスだ。UIとUX混同罪で逮捕する! ひゃあ! というのは冗談で、実際にUI/UXという表現があるように、UXというのはなんとなく良いUIを...
読みやすい企画書の書き方(後編)──エンジニアのための企画書講座vol.4... 1.分かりやすいイラストを活用しよう 企画書に画像を入れるとき、ついついありものの画像をイメージ画像として使いがちですが、手描きだと程よい抽象度でアイデアを伝えられるので、イメージにとらわれず便利です。身の回りに絵の上手い人がいたら描いてもらうのも一つの手です。 海外のスタートアップの企画書を見...

今週のPickUPレポート

新着記事

週間ランキング

CodeIQとは

CodeIQ(コードアイキュー)とは、自分の実力を知りたいITエンジニア向けの、実務スキル評価サービスです。

CodeIQご利用にあたって
関連サイト
codeiq

リクルートグループサイトへ