#Excel方眼紙芸 UI仕様検討芸

ようてん @youten_redo

今からUI仕様を書く練習をしようと思うので誰かスマホアプリのテーマください #Excel方眼紙

ようてん @youten_redo

アイディアこないから自分でかんがえるか

ようてん @youten_redo

飲料記録アプリ：コンビニや自販機でつい清涼飲料水を飲んでしまうので地味にカロリーに効いてる疑惑があるので記録 ・基本は写真＋記録 ・写真からカロリーを含む商品情報とAmazonリンクを取得できるAPIを仮定 ・定番飲料はプリインでカロリー情報あり #Excel方眼紙芸

ようてん @youten_redo

最初は紙 #Excel方眼紙芸 pic.twitter.com/H9GACcQn5Y

拡大

ようてん @youten_redo

まずトップを書く。起動画面をホームと書くとホームアプリ/ホーム画面と混ざってややこしいのでトップと書く。 ステータスバーはフルスクリーンかどうかを示すのに必須なので書く。 pic.twitter.com/mQeFo7BKEJ

拡大

ようてん @youten_redo

割込が入ってしまったけど再開、iOSもちょっとだけ書いて、ミニマム4画面で済みそうなので他まで書く。さすがにデブ飲は仮のアプリ名としてもアレだったので飲dexに変更。紙プロトおしまい。 #Excel方眼紙芸 pic.twitter.com/c6LqWvhuLR

拡大

ようてん @youten_redo

ではExcelへ。 ・更新履歴は最初につける ・もちろんファイル名に日付を入れます ・Sheet1,2,3も適切にリネーム ・グリッド吸着ON ・列幅1.8の8x14マス（Excelのver.により適正が違う） #Excel方眼紙芸 pic.twitter.com/gJB8mFTk07

拡大

拡大

拡大

ようてん @youten_redo

最低限のシャドウとマージンでMaterial的にイメージがつくように素材を作成。Status BarとApp Barの太さが違うのは必須。本当は境界線は薄くしたい。 #Excel方眼紙芸 pic.twitter.com/C8m6SZHiRw

拡大

ようてん @youten_redo

全てオブジェクトで作成し、不定形素材はマスにあわせて外側を空の四角で覆ったオブジェクトとグルーピングしておくと、コピペとキーボード移動耐性がグンとアップする。罫線とセル結合はダメ、絶対。 #Excel方眼紙芸 pic.twitter.com/MAL9awgoEJ

拡大

拡大

ようてん @youten_redo

簡単な図形は書いてもだいたいなんとかなる、アイコン類はAndroid/sdk/配下から拝借するのが楽。デザインよりは要素数と配置イメージを守るようにして記載。このレベルの記載でも課題が何個も浮かび上がる。 #Excel方眼紙芸 pic.twitter.com/P6iABjBER1

拡大

ようてん @youten_redo

コネクタで画面遷移を記載する。必ず赤アンカーで結ぶように、仲間外れのオブジェクトがないようにグルーピングすると、移動時に壊れにくくなる。Ctrl+Aで全選択した際に、二枚目の様にスッキリしてたらOK。 #Excel方眼紙芸 pic.twitter.com/Fw3251lyQK

拡大

拡大

かっしー @Andriders @kassy_kz

@youten_redo アンカーで結合しようとしたらオブジェクトの辺の中央にしか結合できないことないです？

ようてん @youten_redo

. @kassy_kz 都合のいいコネクタ折れしてくれるように、空オブジェクトを足してグループに混ぜておく pic.twitter.com/eT7aj0J2Lu

拡大

ようてん @youten_redo

この程度まで書いてQAフォーマット付きでレビュー依頼を投げると、「A. 機能仕様のステークスホルダ（≒顧客）によるチェック」「B. デザイン班詳細化」「C. 実装班の紙プロトタイプと実装実現性の難易度・可否検討」の3チームぐらいに分業がキックできる。 #Excel方眼紙芸

ようてん @youten_redo

特に何も言わない「いいように作ってくれよ、動くものが見たいわ」みたいな要望が強ければモックプロトタイピングに移る。 #Excel方眼紙芸

ようてん @youten_redo

○○"画面"とつけたくなるが、"画面"という文字列がなくとも意味が伝わるネーミングが望ましい。一覧－詳細やCRUDを意識する。 また、"（△△状態）""（□□中）"とカッコでバリエを書きたくなるがそれはネーミング力が不足しているだけ。なるべくカッコを外す。 #Excel方眼紙芸

ザバイオーネ @z_zabaglione

@youten_redo そのままPPTファイルを起こしてSliderShareにアップしてもいい内容かも。あ、Excelで資料を起こさないとダメかw

ようてん @youten_redo

@z_zabaglione Webとは相性が悪い話ですなぁｗどれもイマイチになるｗ

かず@vaccinated(💉💉) @Kazzz

ようてんさんのExcel芸凄いんだけど、これを作るのにどれだけの手間x苦労 = 時間が掛かったんだろう。

ようてん @youten_redo

@Kazzz 今日TLでネタ募集して、目の前のTRIPLESSOのカロリーが妙に高かったのでアプリアイディア決めてから書いたので、Twitterに流しながら2Hちょいとかですよ twitter.com/youten_redo/st…

かず@vaccinated(💉💉) @Kazzz

@youten_redo 思ったよりかかってないーw しかし、ようてんさんが2時間で描き上げるとすると、それほどでもない人だとその倍から3倍はかかりそうですね。

ようてん @youten_redo

@Kazzz 部品手元に揃ってればもっちょいいけますけどきっとそんなもんですね。

ようてん @youten_redo

このへん本当はみんなスキル高かったら全くdoc起こししなくてホワイトボード→即プロトタイピング→動いてから2イテレーション目で考える、で済むんですけどね…

ようてん @youten_redo

drive.google.com/file/d/0BybSp1… #Excel方眼紙芸 これでupできてるかな