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

Excel方眼紙(Excel2010)でスマホアプリのUI仕様検討をしてみる芸のご紹介です。
UI Excel方眼紙
57
ようてん @youten_redo
今からUI仕様を書く練習をしようと思うので誰かスマホアプリのテーマください #Excel方眼紙
ようてん @youten_redo
アイディアこないから自分でかんがえるか
ようてん @youten_redo
飲料記録アプリ:コンビニや自販機でつい清涼飲料水を飲んでしまうので地味にカロリーに効いてる疑惑があるので記録 ・基本は写真+記録 ・写真からカロリーを含む商品情報とAmazonリンクを取得できるAPIを仮定 ・定番飲料はプリインでカロリー情報あり #Excel方眼紙芸
ようてん @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とは相性が悪い話ですなぁwどれもイマイチになるw
かず@今年はフロントエンドやるマン @Kazzz
ようてんさんのExcel芸凄いんだけど、これを作るのにどれだけの手間x苦労 = 時間が掛かったんだろう。
ようてん @youten_redo
@Kazzz 今日TLでネタ募集して、目の前のTRIPLESSOのカロリーが妙に高かったのでアプリアイディア決めてから書いたので、Twitterに流しながら2Hちょいとかですよ twitter.com/youten_redo/st…
かず@今年はフロントエンドやるマン @Kazzz
@youten_redo 思ったよりかかってないーw しかし、ようてんさんが2時間で描き上げるとすると、それほどでもない人だとその倍から3倍はかかりそうですね。
ようてん @youten_redo
@Kazzz 部品手元に揃ってればもっちょいいけますけどきっとそんなもんですね。
ようてん @youten_redo
このへん本当はみんなスキル高かったら全くdoc起こししなくてホワイトボード→即プロトタイピング→動いてから2イテレーション目で考える、で済むんですけどね…

コメント

smw @Shi_MeiWo 2015年8月10日
表計算ソフトをなんちゅう用途で使ってるんだ…。いや、Excelが日本人の琴線に触れてしまったせいなのか。
trycatch777 @trycatch777 2015年8月10日
前に読んだことありますが、こういう本もあるんで、ちっとも目新しくないし珍しくもない話です。http://www.oreilly.co.jp/books/9784873114415/
Naruhito Ootaki @_Nekojarashi_ 2015年8月10日
Excel方眼はオブジェクトをAltキーを押しながら移動させるとセルに位置づくからグリッドとして使えて、台紙としてはWordより便利。Wordより便利なオブジェクトもそろってるしね。文章主体のドキュメントならもちろんWordなんだけど。
smw @Shi_MeiWo 2015年8月10日
Excelに代わる図表ドキュメントソフトって出ないのかしらん。海外だってUMLとかシーケンス図とかを文書の中で手軽に描きたいって需要はあると思うんだが。
頭文字爺 @initial_g3 2015年8月10日
Visioだとオブジェクト間の関係を上下左右入れ替えてもコネクタを再接続する必用が無いし、ステンシルの作り方を覚えれば、凝ったギミックを持つパーツもほぼプログラム無しで自作できる。のでUI設計だったらまだVisioのがお勧め。
taka @Vietnum 2015年8月10日
Excel方眼もExcel文章も、なぜか文句を言う人が現れる…(;ω;)
まどちん● @madscient 2015年8月10日
なんでVisio使わないのか逆に聞きたい。
双馬 凜 @rin_souma 2015年8月10日
SEに貸与されるPCにVisioが入っているものを見たことがないんだがわざわざ安くないコストをかけてまで入れる価値があるのか?←使ったことがないのでわからない
trycatch777 @trycatch777 2015年8月10日
このまとめで触れられている程度の画面プロトであれば、Excel方眼なんか使わなくても、フリーソフトのツールで充分です。自分はpencilを使ってます。
汝、翼を与える@ばってん先に翼ばくれんね イベント・・(出た、出たが最初から居るとまでは・・・) @ryunosinfx 2015年8月10日
Visioは永遠の謎やね。Excelのこのぐらい仕様わかってるならソフトも出せそうだが、現実は・・・・
Zephyr @Zephyr0d22 2015年8月11日
ドキュメンテーションを考えると、Excelの導入済み率がアドバンテージとして圧倒的すぎる
まどちん● @madscient 2015年8月11日
rin_souma Visio無しでSEに設計やらせるとかどんだけブラックなのよと言う話。
まどちん● @madscient 2015年8月11日
オープンソース系システムのソフトウェア開発でEclipse使用禁止とかに匹敵する>SEのPCにVisio入ってない
シャイニングメタボ改九拾八式 @macoairhead 2015年8月11日
古より伝承されたExcel帳票職人の技が今ここに新たな息吹を受け復活している件
marumushi @marumushi2 2015年8月11日
これよりここをExcel警察の駐屯地とする
鎌玉 大 @kamatamadai 2015年8月11日
.@youten_redo さんの「#Excel方眼紙芸 UI仕様検討芸」をお気に入りにしました。
みなか@9月30日アカウント閉鎖 @minaka_saikyo 2015年8月11日
見事なExcel方眼紙芸だ。IT業界ではこのスキルだけに長けているESSE(エセシステムエンジニア)が多い
きゃっつ(Kats)⊿6/23欅坂京都個握 @grayengineer 2015年8月11日
rin_souma 自分は職場でVisio指定だったことがあります。数としては少数派だと思いますけど、ないこともないですね
Kenrow ?! @KenrowY 2015年8月11日
慣れの関係もあるんだろうけど、この手のプロトタイプUIはVBがお勧めですよ。 とゆうか、最初にVBが注目されたのもこの手の用途に向いていたからであって・・・ (Version1とか2の時代)
Kenrow ?! @KenrowY 2015年8月11日
VISIO?はははは!中小のSEにそんな予算割り当てられるわけないじゃないですかー。開発用PCも社内でも底辺のが与えられるってのに
うにら @riafeed 2015年8月11日
VISIOが4万数千円(or月1700円)を出す価値のあるものなら出してでも導入すればいいし、価値がないならほかのツールで代用すればいいのであって、まとめに載ってる人は後者でかつ代用にExcel使ってるだけの話でしょうよ。別に他人にそうしろといってるわけでも無し。
Kenrow ?! @KenrowY 2015年8月11日
EXCEL方眼紙もメリット無くは無いですよ。第一に使い慣れている人が多い事。作業が面倒でも思考しながら手が半自動で動いて作画出来ちゃう人も多いしね。第二に仕様書とかマニュアルを作成する場合にそのまま流用が出来る事。最終的にはPDF化しちゃうとは思いますが。最終的にコスト少なく済めば何でもいいんですわ。
Kenrow ?! @KenrowY 2015年8月11日
VBをGUIプロトタイプツールとして使うメリットは、GUIのデザイナーそのもので作画出来る事。ちょっとコードを追加すればコントロール同士の連動の確認も出来る事。VisualStudioのライセンスがあればオマケで付いている事(オマケとゆうか本体の1つだけどw)
Kenrow ?! @KenrowY 2015年8月11日
デメリットはWindows標準のコントロール以外を使うとなるととても手軽とは言えない事。VisualStudioとゆうソフトウェアパッケージがかなり巨大な事・・・辺りかな?
Kenrow ?! @KenrowY 2015年8月11日
しかし、ツールがどう進化しようが、まずはラフ案を裏紙に書き出さないと方向性がまとまらないのは古今東西変わらない気がするw
頭文字爺 @initial_g3 2015年8月11日
Visio買う予算のない方にはDynamicDrawでも勧めてみる。操作性に癖があるけど、慣れるとサクサク作図出来る。凝ったパーツ(形だけでなく挙動もカスタム可)をGUIで自作するも事も可能。
狼吼 @wolf_howling 2015年8月11日
これだとパワポでグリッドとか、Eclipseでパーツレイアウトしてスクショとって貼り付けてと大差ないんじゃない?逆にExcelでやった後レイアウト変更とかあると面倒そう
ITDOREIKUN @wtpgjmwtpgjm 2015年8月15日
方眼紙エクセルは一度使うと手放せないね。なんでもできる感がやばい
ようてん @youten_redo 2015年8月21日
補足1. Visioを採用しない理由 1. ライセンス調達とインストールの手間により閲覧コスト大 2. 知名度に基づく平均編集スキルの低さにより編集・管理コスト大 3. その割にメリットは図の書きやすさアップしかない ので、「ExcelをVisio風に使うノウハウ」の方がメリットが大きいです。 まだPowerPointの方が順位が上だと思います。
ようてん @youten_redo 2015年8月21日
補足2. WYSIWYGなIDEのGUIエディタを採用しない理由 編集できるメンバが限定的になると成果物が手離れしなくなるためです。 MS OfficeでUI仕様書出さなきゃいけないような世界で「コードを書けばいい」というのは「ユーザ企業がシステム開発をすればいい」みたいなものだと思っています。
うにら @riafeed 2015年8月22日
KenrowY そもそもExcel持ってたらGUIデザイナ付きのVBプログラミングツールがついてくるのでそんなことでわざわざVSを買う(入れる)ような人は…
いいえ手 @teracy 2015年10月19日
ようてんさんハイスキル
ログインして広告を非表示にする
ログインして広告を非表示にする