ぬんびりぶろぐ

アイロンビーズをはじめ、すきなものについて書いてるブログです。ゆっくりしていってね。

UIデザイン・プロトタイピングのセミナー交流会に行ってきました #popapp

f:id:nunchaku:20140925011341j:plain

2014年9月10日、渋谷ヒカリエのDeNAさんで開催された UIデザイン・プロトタイピングのセミナー交流会 行ってきました

100名定員のところ268名参加希望が来ちゃうという人気ぶり!

はじめて見たときに、iPhoneだけでプロトタイピングできちゃうスゴイ!!と衝撃だったプロトタイピング用アプリ「POP」を開発したBenさんのお話と、あの凄腕デザイナーでデベロッパーな深津さん(@fladdict)が登壇するのだから、この人気も納得です

 

スケジュール

17:30 開場
18:00 – 18:10 オープニングトーク
18:10 – 18:40 POPとUS式のアプリデザインについて by Ben Lin
18:40 – 19:25 ペーパープロトタイピング入門 by fladdict
19:25 – 19:40 会社および事例説明 by DeNA
19:40 – 21:00 交流会 

 

POPとは

プロトタイピングをつくれるアプリです

紙にスケッチを描く→スマホのカメラで写真をとってPOPに取り込む→ボタンなどにリンクをつけて画面遷移をつける という流れで使います 

POP - Prototyping on Paper

POP - Prototyping on Paper

  • Woomoo
  • 仕事効率化
  • 無料

POPはiPhoneだけでなくAndroidなどでも使えます

詳しくはこちら:POP - Prototyping on Paper | Mobile App Prototyping Made Easy

 

POPとUS式のアプリデザインについて

POPのCEO Benさんより

Benさんのスライド:Move fast with POP

http://www.slideshare.net/BenLin2/dena-sharing

リサーチとユーザーテストをとにかくたくさんするのがとても大事!

スライドの中で、Design references を紹介くださっているのでリストにしました

ガイドライン

iOS Human Interface Guidelines: Designing for iOS 

Design | Android Developers

Design for Windows Runtime apps – Windows app development

ショーケース

Mobile Patterns http://www.mobile-patterns.com/ 

Pttrns - Mobile User Interface Patterns http://www.pttrns.com/

Android Patterns http://androidpttrns.com/

lovely ui http://www.lovelyui.com/

CAPPTIVATE.co | iOS UI Animations http://capptivate.co/

 

ペーパープロトタイピング入門

深津さん(@fladdict)より

問題解決のためのプロトタイピング

なぜプロトタイピング?

トレンドの変化スピードに対応するにはウォーターフォールでは間に合わない
評価と検品が最後だと危険すぎる

よいプロトタイピング
  • 早期にリスク検証
  • 問題を分割 … 課題ごとにプロトタイピングしたりできる
  • 本質に特化 … コンセプトや重要なところをつくる
わるいプロトタイピング
  • 一球入魂 … 可能性の模索ができないからダメ
  • モニタ上で作業が完結 … スマホだと指が届かなかったりするし、チームで行いにくいのでダメ
  • スーパーゴージャス … アニメ、エフェクトばりばりなもの 本質からはずれなければOK
だいじなこと

みんなでやる … みんなで良いところ、悪いところをシェアする

アプリ開発のメソッド

プロコンリスト:長所と短所を並列にすることで客観的評価の機会をつくる

疑似プレスリリース:作成してユーザーにテストすると、商品なしに商品の需要を測れる

フィッシュボーン図:あいまいな問題が具体的な問題になる 複数のアプローチを探せることも

ペーパープロトタイピングのかき方

深津さん(@fladdict)のブログの連載がわかりやすいです

ペーパープロトタイピング入門 – 第0回 | fladdict

だいじなこと

必ず複数のパターンをつくる

 フィッシュボーン図のアプローチごとにつくり、長所と短所を比較する

できないこと

手触りの確認

モーションやジェスチャ

 コンセプトモデルに必要な要素はKeynoteやXcodeを使う

  • Keynote:トランジションを使ってモーション
  • Xcode:ドラッグとかピンチ等のジェスチャ

まとめ:プロトタイピングの目的

最初に可能性を模索してリスクを最小化

みんなで共有してベストを模索する

 

もっと知りたいときは

詳しくは深津さんの書籍で!Kindle版もあります 

書籍
プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

  • 作者: 深津貴之,荻野博章,丸山弘詩
  • 出版社/メーカー: インプレス
  • 発売日: 2014/07/11
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る
 
Kindle版 
プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法

 

ここでちょっと読めます


プロトタイピング実践ガイド スマホアプリの効率的なデザイン手法 - 深津 貴之, 荻野 博章 - Google ブックス

参考

チームで読みたいプロトタイピング本『プロトタイピング実践ガイド』 - ninjinkun's diary

当日、会場にもきていたにんじんくんのブログ

みんなでプロトタイピングの大切さを知って、実践していこうというすてきな内容 なんて前向きな日記なんだろう すごい

 

デザインはエンジニアリングだ−−THE GUILD深津氏が語る「デザインを考えるために必要なメソッドとプロトタイピング」 - THE BRIDGE(ザ・ブリッジ)

検索していて見つけた記事 アプリ開発の4つのメソッドやデザインを学ぶためのことがさくっと書いてあります とてもわかりやすいです!

 

感想

アプリ開発のときに、プロトタイピングを行なうことで、アプリの目的と機能をみんなで理解することができるのすばらしいと思いました

目的達成のための仕様を決定するとき、デザイナーからの提案とエンジニアからの提案を出し合って、よりスマートな仕様にする手助けとしてすごく良いです

いまチームでアプリ開発の仕事してないのですが、なんだかまたやりたくなりました!

アイコンデザインをやったりはしてます

あなたのアプリアイコンのラフを描きます!タイムチケットを発行しました - ぬんびりぶろぐ 

 

ひととおりお話が終わった後、DeNAさんから食べものと飲みものをごちそうになりました ありがとうございます!

そのとき、Benさんが挨拶にきてくださったのですが、わたしのTwitterのアカウント名(@nun_)を見て、短いアカウント名!COOLだね!と褒めてくれました 嬉しかったです とてもキュートな方でした !

そしてこの日はAppleからiPhone 6/6 PlusとApple Watchが発表された日でもあって、みんなではやくApple Watchが欲しいだの、iPhoneどっちを買うだのワイワイしました 楽しかった!

すてきな機会をありがとうございました

【勉強会】iphone_dev_jp 東京 feat. Ben Zotto (Penultimate開発者) に行ってきました #idevjp

iphone_dev_jp 東京 feat. Ben Zotto (Penultimate開発者) - connpass

勉強会にいってきました!

 
 
さっそくまとめ!と行きたいとこなんですが、
Benさんのお話のあいだ、受付しておりましたー!
会場に着いたときはBenさんへの質問タイムでした。質問がたくさん出ていて、とても充実した時間になっていました。
 

LT

スライドは見つけられたものだけ貼りますね
頭蓋骨の中からこんにちは

実際にOculus Riftを持って来てくださっていたので、試したい!!!!
と思っていたら時間切れでした。 背骨にダイブしてみたかった〜〜〜 また次回ぜひ!
 
64bit化してみた話

sonsonさんの話はいっつも聞いてておもしろいんですよね
文章もテンポがあって読みやすくて好きです。今回も楽しく聞けました!
2tch

2tch

  • sonson
  • エンターテインメント
  • 無料

 

StoryBoard + AutoLayout バッドノウハウ
 

yoshinori.imajo (@yimajo) さんのiPhone開発者モテる!?のお話おもしろかったです。

Benさんが「そんなことないよ」というシーンがあってwww

実際はどうなんだろう、とりあえず今回の勉強会に女性の参加者はひとりもいませんでしたよ(関係者除く・受付より)

 

Masayuki Iwai (@myb) さん

AppBank Gamesからリリースされるトキノラビリンスのお話!公式サイトをみてるだけでワクワクしちゃうゲームなんですけど…!事前登録でプレゼントがもらえます!

 トキノラビリンス 公式サイト

 

会場について

会場は株式会社ドコモ・イノベーションベンチャーズさん
f:id:nunchaku:20140427132639j:plain
良い眺め〜(o^^o) 人がゴ○のようだ!
 
f:id:nunchaku:20140427132655j:plain
かっこいいチョークアート
 
f:id:nunchaku:20140427132803j:plain
オシャレ!
 
f:id:nunchaku:20140427132831j:plain
100名以上がいらっしゃるので、椅子をいっぱーい並べるのが大変でした!
 
f:id:nunchaku:20140427133048j:plain
ミニサイズのEvernoteステッカーと、おーいお茶をいただきました。
 
あと、ビールやジュース、お菓子などもいただきました!
Evernoteさんありがとうございます(o^^o)
 
このあと、ミニ懇親会に行って、Evernoteの方に中華いっぱい食べさしてもらいました。まんぷく!
あと、ステッカーが手元にいくつかありますので、欲しい方は次回の勉強会などでお知らせくださいませ

 
 

【女性のための勉強会】「Unityで猫もまっしぐら!」なるか!?Unity初体験! #unijo

女性のためのUnityハンズオン初心者勉強会・第2回目「Unityで猫もまっしぐら!」

http://www.zusaar.com/event/827006

参加してきました!

これからUnityはんずおーん! 【女性のためのUnityハンズオン初心者勉強会・第2回目「Unityで猫もまっしぐら!」】#unijo http://t.co/ErdWECNw0v

 

わたし、Unityはさわったことなかったのですが、思い切って参加!どきどき!

Unityの基本操作を覚えながら、ねこさん向けアプリをつくる勉強会です。

 

 

プレゼントにステッカーやピンバッジをいただいてしまいました!

 

しかも、肝心の内容は、講師がユニティ・テクノロジーズ・ジャパン合同会社のエバンジェリスト 高橋啓治郎さんだったり、Unityに詳しい男性陣がこまったらすぐ助けてくれたり、おやつタイムがあったりいたれりつくせり…

 

女性ばかりなこともあり、なごやかにはじめましての挨拶とかをしていたら開始時間になり、高橋先生の講演がスタート!!

 

まずはUnityの概要をすこし説明いただいた後に、基本操作を教えていただきました。

基本操作についてはこのスライドがわかりやすいです。

(イベントページに紹介されていたもので、当日使われていたものとは異なります)

Unityエディタの使い方を簡単にまとめた資料

https://dl.dropboxusercontent.com/u/6488074/POSTBOX/Slides/UnityEditor.zip

 

 

高橋先生が夜なべで用意くださったアプリようの素材

https://github.com/keijiro/game-for-cats

 

アプリ開発に入ってからは、付いて行くのに必死で、あまりメモをとれず><

 Unityに詳しいおにいさんにいっぱい教えていただきながら、 

初心者のわたしもなんとか完成させることができました。

 

f:id:nunchaku:20130707224817j:plain

 

つくったのは、ねこさんが喜んでくれることを目的とした

2ひきのねずみが異なる動きで動き回るアプリです。

ねずみを触ると煙をだしつつきゅ〜といいながらねずみが消えます。

また、2秒ごとにねずみがどんどん増えるという恐怖も添えました。

 

でも、肝心のねこさん受けはイマイチ…

 

ねこさんは、あきすてさんがもってたアプリにすごく反応してました。。。

 

あと、にゃーにゃー言わせてるだけのアプリとかも反応してました。。。 

 なかなか難しい><

もっといろいろ試したかったのですが、時間になってしまいました!

 

そのあとは懇親会に移動〜

男女比が半々くらいなので合コンみたいな雰囲気!?これは新鮮!

いろんなお話ができて楽しかったです^^

  

まとめ

 Unityは動きをつけるのがかんたんなので、「う、動いたーーー!」のよろこびがすぐやってきてくれるのが嬉しいなと思いました。

今回ならった基本操作だけでも、かなりいろいろな動きをつくることができます。

今後、動きのアイデアを練るときなんかに使ってみたいなと思います。

 

そして、つぎ。

これもぜひ参加したい!

これからもいろいろな体験をして、制作に活かして行きたいです^^

 

 勉強会を主催されたみなさま、参加されていたみなさまありがとうございました!

 

追記:7月10日

うわぁあああああ

よんでおこ!

【勉強会】世界に伝わる製品紹介ビデオの作り方とは!!Devcup Workshop

 f:id:nunchaku:20130617231619j:plain

六本木!!
プロモ動画を学ぶDevcup Workshopにいってきました(((((((((((っ・ω・)っ

 

 

 

いろいろノートにメモ〜

 

f:id:nunchaku:20130617231857j:plain
 
勉強会で使われたスライドは後日アップロードしてくださるとのことでした。
公開範囲はわからないですががが
 
今日のツイートでメモしたものを並べておきます。

 

まとめ

まずは5W1H(Why, Who, What, Where, When, How)

みせたいものは1つに絞る

流れ:問題提示→解決方法

・自分のアイデアを入れる

・テクノロジーの説明にならないようにする(技術から発想しない)

・プロジェクトに関わっていない人に見てもらい、意見をもらって調整する

撮影:

三脚を使ってブレないようにする

対象物のまわりはボカすのが流行り

尺:90秒

動画編集ソフトはひとまずiMovieでOK

 

だいたいいつもまずは撮ってみよう!というノリの私なのですけども!

なんとなくかっこいいからこの構図、で撮るのも悪くないですが、自分の思惑どおりの見せ方をするには勉強と経験が必要だなーと思いました。

伝わったときの喜びを考えたら、なにかを伝えるために最適な方法を研究することは楽しいです^^

【ねこさん向けアプリをつくろう!】好きなおもちゃや色について調べてみた

しまねっこにゃ!(=^x^=) #perlerbeads #アイロンビーズ

 

こんなすてきなイベントが!

女性のためのUnityハンズオン初心者勉強会・第2回目「Unityで猫もまっしぐら!」 #unijo #andronjo

そりゃもうヌンもまっしぐらなわけですよ・・・

情報をくれためぐめぐちゃんほんとありがとう!

会場は前から行ってみたかったネコワーキングさん!うぉおお

 

勉強会の目的

Unityを使って、「猫が喜ぶ」アプリを作りましょう!
審査員は、ネコワーキングさんの2匹の猫さんです。


「猫が喜ぶ」アプリについて参考にGame for Catsが書いてあったのですが、これかわいすぎますな・・・


iPad Game for Cats: The World's Greatest Video ...

ねこさんが愛おしすぎる・・・!

 

私は、ねこは好きだけど、ねこさんと暮らしたことがない・・・喜ぶといえば遊ぶ、遊ぶといえばおもちゃかな、ということで、おもちゃについて調べました。

 

好きなおもちゃ

Amazonで人気のおもちゃを調べてみました。

いろいろあるんだなー!

-----------------------------------------

ねこの好きなおもちゃの4つの条件

 1つ目は音です。ねこは聴力が 発達しているため音をだすものに興味を示します。買い物袋がガサガサする音を聞くとすぐに寄ってきてつついたりします。

2つ目は大きさで自分の顔より小さいもの。

3つ目は動きで、ネズミや鳥などにみたて不規則な動きをするものには飛びついてきます。そして重要なのが感触です。ねこは遊ぶとき噛んだり爪を立 てたりするので引っかかりがあるものを好みます。

この条件を満たすおもちゃを与えれば、ねこは大満足です。

にゃーるほど ねこの遊び道具より引用

-----------------------------------------

iPadやiPhoneだと、感触を体験してもらうことはむずかしいかもしれない!

爪に引っ掛かるのが好きみたいだから、ぜひ体感してもらいたいけど~~

 

あとは、ねこさん対応するために色について調べました。

 

好きな色

-----------------------------------------

ねこが好きな色

 ねこの目は 採光に長けていますが、色覚は非常に弱くいくつかの色を感知することしかできません。

ある実験によると、赤、ピンク、水色の容器をならべて同じキャット フードを入れどれから先に食べるかを調査した結果、並び順を変えても赤・ピンク・水色の順でした。ひょっとしたらねこの好きな色は赤ではないでしょうか。

またねこが区別できる色は、赤・緑、赤・青、赤・灰色、緑・青、青・灰色、黄色・青、黄色・灰色の組み合わせだそうです。

にゃーるほど ねこが好きな色より引用

-----------------------------------------

 赤・緑

 赤・青

 赤・灰色

 緑・青

 青・灰色

 灰色・青

 黄色・灰色

 

パステルカラーで淡い色遣いなどをすると、認識してもらえない可能性があるということか。

 

参考

猫に好かれる遊び方

ニャンコと遊ぼう ~ニャンコの飽きない遊び方~ 【飼い方】

 

まとめ

いろんなねこさんがいるので、性格もいろいろかなと思うけど、好きなおもちゃをつくるコツはすこしわかったかもしれない!

さっそく企画を考え始めよう~~~

 

ねこさんと暮らしている方、ねこさんが好きなおもちゃや好きなこと、こんなアプリほしいな~とかございましたら、ぜひ教えてください^^

【勉強会】デザインを正式に学んだことないけど興味ある方へ!ノンデザイナーズ・デザインブックを読み解く #DevLOVE

 

今日のメモ 周辺視野で生き残る #devlove

 ノンデザイナーズデザインブックを読み解く!
Tech Guild - Non Designers Design に参加してきました。
下記、資料類まとめです。

内容

ノンデザイナーズデザインブックを読み解く。
MIND HACKSとインタフェースデザインの心理学を引用しながら、デザインの基本4原則を解説していくという内容です。

資料

ノンデザイナーズ・デザインブック

スライド
ノンデザイナーズ・デザインブックを読み解く

Togetherまとめ
2013/06/05 Tech Guild - Non Designers Design - #devlove

イベントページに紹介されているスライドが参考になったのでメモです。

少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック
https://speakerdeck.com/kenclo/zurui-design
ノンデザイナーのための配色理論
http://www.slideshare.net/saucerjp/ss-14902681
初めての欧文書体
http://www.slideshare.net/shoheiitoh/ss-17245066
0.1ランク上のアイコンの作り方講座
https://speakerdeck.com/is8r/0-dot-1rankushang-falseaikonfalsezuo-rifang-jiang-zuo
Bootstrapのカスタマイズ例
https://speakerdeck.com/machida/railsenziniafalsetamefalsetwitter-bootstrapkasutamaizuli

 

まえだ先生(@monoooki)に質問してみました。

メイリオとか使ってみるけどなんかアレだしね・・・

Webフォントでどうにか、ということを教えていただきました!

あと、まえだ先生が冒頭でお話してたゲームとか関わったアプリとかおもしろそうだった。

まとめ

まえだ先生のユーモアたっぷりで、とても聞きやすいお話でした!

MIND HACKSを読もうと思って忘れてたので、ポチって読もう^^

第4回 iphone_dev_jp 東京iPhone/Mac勉強会まとめ #idevjp

第4回 iphone_dev_jp 東京iPhone/Mac勉強会

いってきました!受付してきました!

 当日プレゼントされたEVERNOTEステッカー!

 

ATND:http://atnd.org/events/39505

Twitterのハッシュタグ: #idevjp 

Togetherまとめ:http://togetter.com/li/508618

Ustream配信: http://www.ustream.tv/channel/endevmeetup

資料の共有: http://slidrs.net/sessions/376

 

追記:

@nakamura001さんのまとめがとってもわかりやすいです!

[勉強会]「第4回 iphone_dev_jp 東京iPhone/Mac勉強会」に参加して来ました

 

資料はこちらにまとまってます↓

Sliders: http://slidrs.net/sessions/376

 

ここぽんおすすめのこの本を読もうと思いました

Webデザインやってるときに富士通さんのツールつかってました!進化してるぽい!

おちゃめなEVERNOTEのJackさん!こんなプレゼンができるようになりたい!

ユーザーをびっくりさせない!という話にびっくり&納得

深津さんwww

おおっ^^

若かったらいきたかった!

読みます!

 

大盛況でした!イスを他の部屋からもってきていただいたくらい!

 

EVERNOTEのJackさんと!公演とてもステキでした!

 

いわいさんのスライドめくり!ありがとうございます(o^^o) 

 

JackさんにプレゼントしたアイロンビーズのEVERNOTEアイコン!

 

ピザ18まいっ!&サイドメニューっ!

懇親会でみんなで食べました。みごとになくなりました!

 

ここぽんのLluminoパーカー! 

レディースサイズはまだですか!!

 

深津さんのピクセルが数えられる定規!便利&かっこいい! 

 

いろんなお話が聞けて、楽しい勉強会になりました^^

次回もあるかな~~~ワクワク!