（兎に角）早くプロトタイプを作る技術（初心者向け） - Qiita
とにかく早くプロダクトのプロトタイプを作るための技術についてまとめます。 この技術は運用しやすく作る技術とはまた別の技術です。 （綺麗に作るのは後でやる） かなり偏った考え方もあると思いますがご容赦ください。 プロトタイプを作る上でやらないことを決めます。 実はやることよりもやらないことを決めることの方が難しいです。 UXに基づいて後回しにするという意思決定が必要です。 プロトタイプでやるべきこと コンセプトの決定/チャネルの調査： なぜ作るのか、誰をターゲットとして作るのか、競合プロダクトの調査 コア機能の実装： ユーザの苦痛を解消させるプロダクトのコア機能の実装をします。 ここで想定しているコア機能とは一画面に収まるアプリケーションのメイン機能の事を指します。 デザインはモックレベルではなく、ユーザが使う想定のデザインテーマ、レイアウト、アフォーダンス、メンタルモデル、UI、アニメーシ
とにかく雑に作れ
学生たちを見ていると、きちんと議論して、きちんと設計して、きちんと何かを作ろうとするみたいです。ときには副作用を考慮して、やっぱり作るのやめようかという話になり、再び議論に戻ることもあります。 ああ、もったいない、もったいない。私は適当な人間なので「なんてマジメなんだ、とりあえず何か作ればいいのに」と思います。デザイン思考ではそのことを「クイック＆ダーティプロトタイプ」と呼んだりしますが、それだとなんだかカッコよすぎるので、私は「雑に作れ」と言ってます。 でも、言葉だけでうまく伝わるはずもなく、「どうすれば雑に作れるのか？」と再び議論を始めたりするので、なかなか難しいところです。 それでも「締め切り」というのは効果的なもので、次回までに何かを発表しなければいけないとなると、「議論してばかりじゃ話が進まない！」となり、ある種の覚悟を決めて雑に作ってくれるようになります。 私が印象的だったのは
みんなで理想を共有！ "動く"プロトタイプを導入しました。 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。サイボウズ デザイングループの樋田（といだ）です。 今年の6月にデザイナーとしてサイボウズへ中途入社しました。 今は社内でプロトタイピングおじさんやってます。 プロトタイピングってもう開発のプロセスには欠かせないものになってますよね。 サイボウズの開発でもいままでプロトタイピングをやってきたのですが、プロトタイピングをより開発に活かすべく新しいツールを導入することにしました。 理想のツールを探して これまではInVIsionだけでプロトタイプを作っていたのですが、InVisionのプロトタイプだけでは実装とのずれがあって詳細な検討ができない…という不満がありました。 そこで実装に近い"動く"プロトタイプが作れるツールを導入することにしました。 主な目的はこの3点 早く出来る 簡単にできる（学習コストが低い） 再現度が高い 世の中にはたくさんのプロトタイピングツールがあるので 理
ペンとふせんで！スマホUIのアイデアプロトタイピング - クックパッド開発者ブログ
検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング
ワイヤーフレーム、モックアップ、プロトタイプの違いとは？ | POSTD
開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたはこうした用語の意味を本当に理解しているでしょうか？ ワイヤーフレームやプロトタイプは、それぞれどんなときに利用するのか、知っていますか？ まず、アプリの構築を始める前に、スケッチ、ワイヤーフレーム、モックアップあるいはプロトタイプからスタートするべきだという理由を見てみましょう。 構築したいものがどんなものか、ブレインストーミングをしたり考え出したりするため。こうした作業により、あなたの期待するものが明確になる。 開発者にかかる費用を節約し、構築に必要なものを明らかにすることができる。 こうした作業の結果は投資家や最初の顧客、共同設立者に提示する目的で使える。 顔を突き合わせることのない開発チーム とコミュニケーションを取るためには、これらの用語を正しく区別し
おすすめのプロトタイピングツール5選(2016年5月時点) - Money Forward Developers Blog
こんにちは、デザイナーの大橋です。 昨今のプロダクトデザインの制作フローにおいて、プロトタイピングは必須の作業の一部になっていると思います。 そこで今回は、世の中にあるプロトタイピングツールの中で定番のものから最新の分析までできちゃうツールまで、いくつか紹介したいと思います。 その前に、そもそもプロトタイプを作るメリットとは？ 個人的な意見ですが、下記の二点があると思います。 エンジニアとの認識合わせができる 事前に懸念点を発見し、開発やデザインに入る前にある程度の課題を解決する マネーフォワードでのプロトタイピング toB、toCサービス共に積極的に利用しています。 プロトタイプを作成したら、デザインチームやプロダクトの開発チーム内に共有。 チーム内レビューやユーザーテストを繰り返し、トライ&エラーで、ブラッシュアップしていっています。 プロトタイピングを開発期間に、最初から組み込む事で
GoogleがプロトタイピングツールPixateを買収。無料化される。オススメ。 | fladdict
Googleが、ローカルベースのプロトタイピングツールPixateを買収した模様。以後、Pixateアプリは無料となり引き続き開発が続けられるようです。 2013年頃、Pixateに$600払ってた俺は泣いた。おめでとうございます。 Invisionを主流に百花繚乱の分断化で割と困っていたプロトタイピング業界。Googleがこの分野に手を出したことで変動は起きるのだろうか。 これがプロトタイピングツールの決定版になるとよいですね。高性能だし無料だし。クラウド版も$5だし。 日本でプロトタイピングサービスばパッとしない究極の問題は、サービスがオンラインのことなんですよね。SI系の人たちは「セキュリティ的な事情でオンラインの共有サービスを使えない」という事情がありました。Pixateはローカルアプリなので、その辺の心配をする必要がないのがポイントですね。そのうち大手SIとかでもこういうツールが
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
JavaScriptでのbuilt-in/DOM objectのprototype拡張 - monjudoh’s diary
@rosylillyが気にしていた のでまとめた。 built-in/DOM objectのprototype拡張による弊害 追加したプロパティ/メソッドがfor inで列挙される var obj = {a:1}; for (var i in obj) { console.log(i); } こうするとaだけ出るはずが、 Object.prototype.b=function(){}; こうした後だとa,bが出てしまうって奴ですね。 そのまま代入しないでObject.defineProperty/definePropertiesでenumerable:falseのプロパティとして定義すれば列挙されなくなるので特に問題ありません。 今回挙げるprototype拡張の弊害の内唯一これだけはECMAScript5時代になって解消されました。唯一これだけは。 built-in/DOM object
prototypeの正体 - tumblr
prototypeってものを本で読んだだけでわかったつもりになっていたけど、いざ使ってみたら勘違いばかりでダメダメだったので覚書。やっぱ何か覚えるときはコードの写経だけでもしといたほうがいい気がする。 動かないコード こんなコードを動かそうとして失敗した。 var proto = { prop:"aaaaaa", alert:function(){ alert(this.prop); } }; var base = function(){ this.prototype=proto; }; var test = new base(); test.alert(); で、こんなエラーが出る。 test.alert is not a function 明らかに this.prototype=proto; が怪しいので、こいつをコメントアウトして、さらにbaseコンストラクタの前で base.pro
【連載】いまからはじめるPrototype.js (1) Prototype.jsの概要と$で始まるメソッド | エンタープライズ | マイコミジャーナル
Prototype.jsとはなにか Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリだ。単体でもAjaxian.comの2006年と2007年の調査で最もよく知られたAjaxフレームワークに選ばれるほどの人気を得ているが、実はWebアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。 ライブラリはMITライセンスで公開され、ドキュメントはクリエイティブ・コモンズ(Creative Commons)ライセンスのAttribution-Share Alike 3.0で公開されている。詳細はライセンスのページで確認していただきたい。 これから6回にわたって、こ
รวมแหล่งท่องเที่ยวสถานที่น่าไปที่สุดในแต่ละจังหวัดของไทย
Prototype-ui แนะนำสถานที่เที่ยวจากทั่วโลกรวบรวมมาไว้เพื่อเป็นข้อมูลอีกทั้งยังเก็บภาพบรรยากาศดีๆ มาให้เป็นตัวเลือกในการตัดสินใจถ้าจะหาสถานที่เที่ยวสักที่ ซึ่งเราได้ไปทำการรีวิว และรวบรวมข้อมูลต่างๆไว้ให้แล้ว เช่น ที่เที่ยวกับการเดินทาง บรรยากาศ... SEE MORE Read More TOURISM FORMATS ความสนุกของการท่องเที่ยว ซึ่งก็แบบออกเป็นการท่อวงเที่ยวหลายๆรูปแบบทั้งทางน้ำทางบก และทางอากาศได้ดังต่อ่ไปนี้
はてなブログ | 無料ブログを作成しよう
ネイルで使う材料で、DIY時の木割れやネジ跡を派手にしたらかわいい OSB合板でちょっとしたボックスをつくりました。 ビス止め下手すぎて木を割ったり穴あけすぎたりした場所に、好きな派手色の樹脂を詰めてパテ代わりにしてみました。 ちょっと某HAYっぽみ出て可愛かったので、自分用にメモです。 手順 塗装 派手色グミジェルで失敗部分…
Ext JSとprototype.jsで作るリッチなUI（1/4） ─ ＠IT
Ext JSとprototype.jsで作るリッチなUI：パターンとライブラリで作るAjaxおいしいレシピ（3）（1/4 ページ） 今回は話題のExt JSを使ったサンプル Ext JSはAjaxアプリケーションを構築するためのJavaScriptライブラリ（フレームワーク）です。Ext JSを使用することで、デスクトップアプリケーションのようなユーザーエクスペリエンスを提供できます。2007年10月11日に2.0のベータ版がリリースされ大変注目を集めました。 今回はそのExt JS 2.0のベータ版を使ったサンプルを紹介していきます。 ■ ごく普通の入力フォームのサンプル まずこちらのサンプルを見てください。 今回のサンプルプログラム（拡大表示はこちら、※注意1：FireBugを有効にしている場合は動作が重くなる場合があります。一時的にFireBugをオフにして利用されることをおすすめし
prototype.jsでラジオボタンの値を取得 : せつないぶろぐ
prototype.jsで$Fを使ってform中の値を取得したり できるのだけれど、 $Fはテキストボックスやドロップダウンリストが対象で ラジオボタンやチェックボックスの値までは取得できない。 で、どうするかと言うと prototype.jsのEnumerable.findでラジオボタンの値を取得する http://blog.goo.ne.jp/btblog.php html <form name="f"> <input type="radio" name="i" value="123" checked> <input type="radio" name="i" value="abc"> <input type="radio" name="i" value="xyz"> </form> js var r = $A(document.f.i).find(function(v) {
Really easy field validation * Dexagogo
Really easy field validation Here's a form validation script that is very easy to use. Current Version: 1.5.4.1 - 06 Jan 2007 - Demo / Download Instructions The basic method is to attach to the form's onsubmit event, read out all the form elements' classes and perform validation if required. If a field fails validation, reveal field validation advice and prevent the form from submitting. Inclu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rapid Prototyping Tip: Defining data as code files
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
Flinto - The App Design App
Rapid Prototyping with Solr