"Protopie"を使って簡単に動的なプロトタイプを作ろう Part1.スクロールに応じて動くナビゲーションバーとローディング | Nagisaのすゝめ
こんにちわ、Nagisaのデザイナーリーダーの川畑です。 最近FramerやInvisionSTUDIOを筆頭にインタラクション・アニメーションデザインのツールが続々登場して賑わっていますね。 弊社でも各デザイナーが新しいツールを手に取り、どのような制作ができるのかとワクワクしながら積極的に試しています。 その試みの一環として“Protopie”というツールを触っていたのですが、 評判通りとても使い勝手がよく、せっかく触るなら!と公式チュートリアルで紹介されていない動きもチャレンジしてみたので、その作例と手順を紹介したいと思います。 ProtoPieの概要や優れている点を知りたい!という方は公式サイトやこちらの記事をご覧になってください。 ・ProtoPie – 公式サイト ・“最も早くプロトタイプが作れる”と噂のプロトタイピングツール「ProtoPie」を使ってみた 今回紹介するもの ス
とにかく雑に作れ
学生たちを見ていると、きちんと議論して、きちんと設計して、きちんと何かを作ろうとするみたいです。ときには副作用を考慮して、やっぱり作るのやめようかという話になり、再び議論に戻ることもあります。 ああ、もったいない、もったいない。私は適当な人間なので「なんてマジメなんだ、とりあえず何か作ればいいのに」と思います。デザイン思考ではそのことを「クイック＆ダーティプロトタイプ」と呼んだりしますが、それだとなんだかカッコよすぎるので、私は「雑に作れ」と言ってます。 でも、言葉だけでうまく伝わるはずもなく、「どうすれば雑に作れるのか？」と再び議論を始めたりするので、なかなか難しいところです。 それでも「締め切り」というのは効果的なもので、次回までに何かを発表しなければいけないとなると、「議論してばかりじゃ話が進まない！」となり、ある種の覚悟を決めて雑に作ってくれるようになります。 私が印象的だったのは
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
Adobe Experience Design（XD）を使ってアプリのプロトタイプを作ってみた
2018年3月15日 XD, スマートフォン, 便利ツール 先日発表された、Adobeのプロトタイピングツール、Adobe Experience Design（Adobe XD）。Sketchライクなシンプルなグラフィックツールです。なにやら面白そうだったので、早速つついてみました。デモとして、簡単にチャットアプリのプロトタイプを作ってみたので、使用感とともに紹介します。 ↑私が10年以上利用している会計ソフト！ Adobe Experience Design（Adobe XD）って何？ Adobe XDはアプリやWebサイト等のデザインに使えるグラフィックツール。ただグラフィックが作成できるだけではなく、クリックやタップで次の画面に移動し、実際に動作しているようなプロトタイプも作成できます。それだけの機能がついて、なんと無料です！ 残念ながら今のところMac専用ツールですが、今年中にWi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
