ぬんびりぶろぐ

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

アイロンビーズの小さめ図案に使えるドット絵ノートはじめました!

16×16の中におさまる小さなドット絵を集めたWebマガジンをはじめました

 Nunchaku Pixels|ヌン|note(ノート)

 

小さなドット絵とアイロンビーズで遊んでみよう!

まず、Nunchaku Pixels|ヌン|note(ノート) ←ここからすきなデザインをみつけます

MacのFinderアイコンYosemite ver.を選んだとします

f:id:nunchaku:20141027035131j:plain 

ドット絵をみながらアイロンビーズを並べます
アイロンビーズは1個の直径5mmなので、8cm×8cm以内の大きさです
あまり大きくないので並べるのはわりとらくちん!
 
f:id:nunchaku:20141027035521j:plain
 
アイロンをかけて完成!
こんな手のひらサイズのアイロンビーズ作品ができます
コースターに使ったり、チェーンを通して大きめのキーホルダーにしてもすてき!
f:id:nunchaku:20141027035145j:plain
 
くわしいアイロンビーズの遊び方はこちらをご覧ください


懐かしいのに、最先端?「触れるドット絵」アイロンビーズの作り方 | nanapi [ナナピ]

 

こんなドット絵があります

Nunchaku Pixels|ヌン|note(ノート) にはこんなドット絵があります
f:id:nunchaku:20141027035203j:plain
f:id:nunchaku:20141027035233j:plain
f:id:nunchaku:20141027035221j:plain
f:id:nunchaku:20141027035327j:plain
 
これはごっさん!
f:id:nunchaku:20141027035312j:plain

すこしづつ追加していきますので、ぜひぜひあそびにきてください! 

Nunchaku Pixels|ヌン|note(ノート)

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どっちを買うだのワイワイしました 楽しかった!

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

ふせんメモをEvernoteにカンタン保存!デスクトップ付箋アプリ「MemoZou」

f:id:nunchaku:20140826001229p:plain

Evernoteをもっと気軽に使いたい!

Evernoteをもっと使いこなしたい!

という方にオススメなMacアプリがリリースされました!

 

Evernote連携Macデスクトップ付箋アプリ「MemoZou」!

MemoZou

MemoZou

  • itok
  • 仕事効率化
  • ¥300

 

MemoZouとは

Macのデスクトップに付箋のメモがぺたぺた貼付けられるアプリです

付箋メモのアプリなら今までもあった、あったんですけど、

MemoZouはちょっと違う!

 

書いたメモをEvernoteにカンタン保存!

今までメモしたはいいけど、保存するときテキストとかにコピーしてえっと ってなってました 不器用

でも!MemoZouならカンタン保存!

 

メモを書く→Evernoteへの保存
  1. ⌘キーとNキーを押して付箋メモを作成
  2. 付箋にメモを描く
  3. ⌘キーとSキーと押して保存する
  4. Evernoteにタグ「#MemoZou が付いて保存される

勝手にタグが付くので、あとから探すときはタグで検索!

 

画像も貼れるから資料収集にお役立ち

テキストだけでなく、画像を貼ることができます

画像を貼ったり、テキストをコピー&ペーストしたりが自由自在!

メモを常に最前面に表示させる設定があるのも地味に便利〜

f:id:nunchaku:20140826000616p:plain

 

上記はわたしが気に入った使い方ですが、いろいろな使い方ができるアプリです

詳しくは開発された@itok_twitさんのブログをご覧ください

 Evernote連携Macデスクトップ付箋アプリ MemoZou v1.0 を公開しました。

 

そして!

 

アイコンのデザインを担当しました!

f:id:nunchaku:20140826003829p:plain

シンプル!

Evernoteなグリーン!

このアイコンをつくらせていただく経緯は、TIME TICKETがきっかけなのですが、それはまた別のエントリーで書きたいと思います

 あなたのアプリアイコンのラフを描きます!タイムチケットを発行しました

 

すてきなアプリを開発され、そしてアイコンデザインさせてくださった

いとーけーさん、ありがとうございました!

 

そうそう、みなさまの「MemoZouのかっこいい使い方ぜひ教えてください!

なんかいろいろ使えそうですよね!

 

MemoZouのダウンロードはこちら!

MemoZou

MemoZou

  • itok
  • 仕事効率化
  • ¥300

 

iPhoneアプリのアイコン制作につかってるツールまとめ

f:id:nunchaku:20131203204950j:plain

かわいいアイコンを集めるのが趣味だったことからはじまり、

アイコンをアイロンビーズでつくりまくったり

 ★ iPhone x アイロンビーズ ★ iPhone Advent Calendar 2013 ★

最近はアイコンデザイナーをしております

 あなたのアプリアイコンのラフを描きます!タイムチケットを発行しました 

いつも使ってるツールなどをまとめてみました

続きを読む

7月2日20時スタート!unity-chanのドット絵を描きながらイラストのコツを学ぼう!くまんぼうさんも来るよ!

f:id:nunchaku:20140626161241p:plain

パソコンとインターネットがあれば行けちゃう学校「schoo」さんで授業をやらせていただくことになりましたー!

ドット絵をかくところ、アイロンビーズ制作風景を生放送にてお送りします!

続きを読む