Apple Design ResourcesApple Design Resources Design apps quickly and accurately by using Figma, Sketch, Photoshop, and XD design kits, guides, and other resources.
さまざまなデザインの伝達手段と自分に適した手法の見つけ方
私は、UXデザインアプリケーションであるUXPinのCEOであるMarcin Trederです。そして、ベテランのUXデザイナー兼UXチームのマネージャーでもあります。 みなさんにワイヤーフレーミングとデザインドキュメントの作成をご覧いただけることを大変嬉しく思います。毎日の仕事をより簡単にするための応用テクニックをみなさんが楽しんで学習することを願っています。 この記事では、ワイヤーフレームの作成方法やデザインドキュメントの作成方法を紹介します。私自身の経験を踏まえたヒントをお伝えすると同時に、私が犯した重大なミスをみなさんは避けられることを期待しています。 記事は実践向けに作成されています。なので、少しのデザイン哲学と多くの実話を期待していてください。 すべてのデザインドキュメントの事例は、UXPinによって作成されています。 ワイヤーフレーム、プロトタイプ、モックアップの違い 数年前
必要な物は紙とペンだけ！ペーパープロトタイピングのススメ
まずは紙。家にあるチラシの裏の白い部分でも可能なのですが、方眼のものが製図しやすいです。お気に入りのノートを使ってみてください。後述するプロトタイプ制作ツールのMarvelから、無料のプロトタイピング用紙（PDF）が配布されているので、こちらを使ってみてもいいですね。 基本的にどんなペンでも構わないのですが、太いペン、細いペン、薄い色（灰色）のマーカーの3種類あれば文句なしです。マーカーはなんやかんやコピックが使いやすいのかなーと思います。 その他 紙とペンだけでOKですが、よく使うアイコンが手軽に描けるUI Stencilsという定規兼ステンシルがあると便利です。iPhone用ステンシルだけではなく、様々な種類が用意されているので、興味のある方はUI StencilsのWebサイトを覗いてみてくださいね。 ペーパープロトタイプの描き方 1. ざっくりとしたレイアウト組み まずは画面をレイ
UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる | Ledge.ai
TOP > Technology > 注目テクノロジー > UX課題を”つくる前”に改善！インド発の無料プロトタイピングツールが、人間の仕事を本気で奪いにきてる こんばんは、イイノです。 つい先日にはAdobeXdのプレビュー版がリリース。プロトタイプが本格的に現場に浸透するぞー！なんて、話題になってますが、個人的にはXdを超える？なんて思えるプロトタイピングツールを発見してしまったので、紹介してみようかなと。 これまでのプロトタイピングツールでは難しかった『複数人プロトタイピングでの挙動をトラッキング分析』や、『個別＆全体での行動をレポーティング』といった機能を搭載し、なんと無料で利用可能にしてしまったという衝撃のツール『CanvasFlip』。 インドの天才たちが作ってくれたこのツールで、プロトタイピングとユーザーテストの手順や手間やコスト、その他もろもろな常識が変わってしまう？…かも
どのようにして高速に iOS アプリの UI を作り上げるか：動作モックの活用と実装時の UI 作りこみ - クックパッド開発者ブログ
Holiday デザイナーの多田です。 皆さんは Web アプリやモバイルアプリを開発する時、モックアップ作成にどれだけ時間を割いているでしょうか？もしくはモックアップを作成せずにすぐに実装に入るでしょうか？私はこれまで Web アプリ開発ではいきなり実装に入ることが多かったのですが、Holiday iOS アプリ の開発では Web アプリの時のように上手くいかないことに気づき、やり方を考え直しました。iOS アプリ開発の過程で、モックアップ作成や実装をどのように捉えるか、具体的にどう行うか、ということが自分なりに見えてきたので、それらについてご紹介します。 目的は、価値のあるプロダクトを速くユーザの手に届けること Web アプリやモバイルアプリの開発過程においてモックアップなどを作る目的は、あくまでも ユーザに届く プロダクトの価値を高めてそれを速くリリースすることです。適切な前準備は
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
iOS 9 GUI (iPhone) — Facebook Design Resources
Photoshop and Sketch templates of GUI elements found in the public release of iOS 9. Go make good stuff. Most people find this file useful for mocking up apps. Others use it to concept ideas or create custom interface elements that work harmoniously with those native to iOS. Whatever your use, we hope you make good stuff with it. New to this app design thing? You may want to become acquainted with
簡単に多様なjQueryアニメーションを実装できるプラグイン「jQueryTween」｜BLACKFLAG
jQueryを使った複雑なアニメーションを実装しようとすると CSSのプロパティ値を細かく操作して設定することが必要になりますが 複雑なアニメーションからシンプルなものまで、 簡単かつ軽量なかたちで実装することができるプラグイン 「jQueryTween」がとても便利そうだったので紹介してみます。 jQueryTween – Lightest Tweening Engine for jQuery jQueryTween – Lightest Tweening Engine for jQuery 「jQueryTween」は「tween.js」と併せて使用し ハードウェアアクセラレーションを行って軽量かつ高機能なアニメーションを実現しています。 プラグインページのアニメーションデモでは ・Animating Object Size ・Animating Colors ・Transform T
GoogleがプロトタイピングツールPixateを買収。無料化される。オススメ。 | fladdict
Googleが、ローカルベースのプロトタイピングツールPixateを買収した模様。以後、Pixateアプリは無料となり引き続き開発が続けられるようです。 2013年頃、Pixateに$600払ってた俺は泣いた。おめでとうございます。 Invisionを主流に百花繚乱の分断化で割と困っていたプロトタイピング業界。Googleがこの分野に手を出したことで変動は起きるのだろうか。 これがプロトタイピングツールの決定版になるとよいですね。高性能だし無料だし。クラウド版も$5だし。 日本でプロトタイピングサービスばパッとしない究極の問題は、サービスがオンラインのことなんですよね。SI系の人たちは「セキュリティ的な事情でオンラインの共有サービスを使えない」という事情がありました。Pixateはローカルアプリなので、その辺の心配をする必要がないのがポイントですね。そのうち大手SIとかでもこういうツールが
フェーズと目的に応じたプロトタイピングの手法と意味 - クックパッド開発者ブログ
こんにちは。ユーザーファースト推進室の元山です。 みなさんはスマートフォンアプリケーションやWebサービスの開発・改善をするときにどのようなプロセスで行っているでしょうか？アジャイルやリーンなどの最近では一般的なよくある開発プロセスの中で、今やプロトタイピングは当たり前に行うものとなっていると思います。プロトタイピングを支援するアプリやWebサービスも数多くありますが、ただ闇雲にプロトタイプを作ればいいわけではありませんし、プロトタイプモックを作ること自体が目的化されては意味がありません。 クックパッドでもプロトタイピングを取り入れた開発プロセスを行っていますが、開発のフェーズであったり、または目的によってどのようなアウトプットとしてプロトタイピングするのかは変わってくると思います。今回はクックパッドで実際に行っているプロトタイピングについてフェーズや目的ごとにご紹介しようと思います。 コ
現役UIデザイナーが語る「今、プロトタイピング開発に求められること」UI Crunch #3
現役UIデザイナーが語る「今、プロトタイピング開発に求められること」UI Crunch #3 馬場 美由紀（HTML5 Experts.jp編集部） この1～2年、Webサービスやスマートフォンアプリの開発現場では、早い段階から評価・検証により課題を洗い出し、制作の効率化を図るプロトタイピングがさまざまな手法・ツールによって試されている。 「UI Crunch」第3回となる今回のテーマは、「今、プロトタイピング開発に求められること」。講座は、元山和之氏（クックパッド）、吉竹遼氏（Standard Inc.）、村越悟氏（グリー）、土屋尚史氏（Goodpatch CEO）デザイナー各氏によるスピーチ、および坪田朋氏（DeNA）を加えたパネルディスカッションを通じて考え、深めていくという構成で行われた。 チーム開発におけるKeynoteを使ったプロトタイピング 最初のセッションは、クックパッドの
Free Mobile Mockups To Use In Your Next Design
Using mockups help you as a designer to present your design work to your clients in an amazing look, creating mockup wasting your time once the web are full of free mockups. Today we handpick free mobile mockups to use In your next design from the web, pick your mockup and Show off your design work, let your client be amazed.
iMacやiPhoneなど無料で使えるApple製品のPSDモックアップ素材 30
資料の作成時やポートフォリオ、Webサイト制作など様々な場面でデザインをワンランクアップさせてくれるモックアップ素材。そんなモックアップ素材からPSDファイルとして無料でダウンロードできるものをiMacやiPhone、iPadといったApple製品に絞って30個集めてみました。 ※基本的に無料でダウンロード出来る素材ばかりですが、規約は各テーマによって違います。使用する際は規約に注意してください。 1. Flat Apple's Devices Mockup 2. MacBook Air Psd Mockup 3. iPad Air Mockup 4. Responsive Showcase PSD Mockups 5. iPhone 5S Psd Flat Design Mockup 6. iPhone 5C Mockup 7. Apple Retina MacBook Pro 8. F
Webデザインの仕方が分からない！初心者にすすめるデザインのコツ その2 « ブログ｜東京のアプリデザイン制作会社｜株式会社ハラハラ｜harahara Inc.
こんにちは、代表の藤原です。 前回の記事でデザインのコツに関するロード第1章 スタディについて書かせていただきました。 UIデザインをするための5つの工程 ロード第1章 スタディ ロード第2章 モックアップ ロード第3章 仮組デザイン ロード第4章 ブラッシュアップ ロード第5章 なんでもないようなことが幸せだったと思う 前回は巷にあふれる良いデザインを常に見て分析する必要性を解かせてもらいました。Webサイトのデザインで言えばブックマークサイトなどをチェックして常日頃からデザインの引き出しを作る重要性を理解していただいたかと思います。それらを踏まえた上で次の章に進みたいと思います。 ロード第2章 モックアップ モックアップとは何か モックアップとはなんでしょうか、人によってはラフスケッチやポンチ絵などと言われることがあります。要はそのWebサイトのデザインの設計図、と思ってもらって構い
ペーパープロトタイピング入門 – 第1回 どうして紙でプロトを作るのか | fladdict
ペーパープロトタイピング講座シリーズ。第1回は導入編。 第1回はの導入編。ペーパー・プロトタイピングとは何なのか、何故必要なのか。そして導入することで、どんな利点があるのかを説明する。 ペーパー・プロトタイピングって何？ ペーパー・プロトタイピングとは、紙で実際にアプリやサイトを「実装する」ことである。 通常の開発においてコンテンツが使いやすいかどうかは、開発が終盤になるまでわからない。このため「作ってはみたが使いにくい」や「いまさら後戻りできない」という問題が発生する。UIや手触りが重要なモバイル系のアプリにおいて、これは致命的な問題になる。ペーパープロトタイピングはこの問題を低コストで解決する。 紙とペンで動作モックを作成することで、本実装を行う前に、素早く手戻なく検証を行うことができる。これにより、仕様書策定や実装前にPDCAのサイクルを実現できる。作業負荷の高い本実装を行う前に軽く
Fireworksの画像からタップ操作対応のプロトタイプを作成できる「TAP」 | デベロッパーセンター
Webサイトやアプリを制作する場合、デザインを作り込む前に触って動くプロトタイプを作ることで、あらかじめ使い勝手の良し悪しなどを検証することができます。今回紹介するTAP（Touch Application Prototypes）を使うと、Fireworksで簡単にモバイル向けのプロトタイプを作成できます。 よくあるWebサイト制作の実装工程について確認しましょう。まず、PhotoshopやFireworksなどのツールを用いてデザインの作業を行います。次に、作成したデザインカンプを元に、パーツをスライスし、コーディングをしてからはじめて「動く」「触れる」ものを作ります。こうした工程の場合、実際に動く状態を見てから問題に気づき、要素の配置や装飾の変更などが発生し、大きな手戻りが生じるというのを経験している人も多いのではないでしょうか。 そうした問題を解決・軽減するために「プロトタイピング」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
神アップデート！プロトタイピングツール「Prott」のワイヤーフレーム機能がめっちゃ良い！｜男子ハック
新着記事
[Fireworks] 複数のファイルをページに読み込める「Import Files in multiple pages」 | バシャログ。![[Fireworks] 複数のファイルをページに読み込める「Import Files in multiple pages」 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/6c06e5dc16e1d75594b70da83a3dfbacbdc01b4e/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_fireworks.png)
