Adobe XD で作る PowerCMS の実装仕様書 | PowerCMS ブログ
弊社の受託作業は、デザインとコーディングをいただいて CMS へ組み込むというものが多いです。 CMS 設計には、ディレクターがそれぞれ慣れたツールを使っています。 お客様にいただくこともあります。その際は PDF や Excel でいただくことが多いです。 私もそれらを真似してみたり、他の良いといわれるツールを試してきたのですが、これというツールに巡り会えずにここまできました。しかし、ここ数ヶ月は Adobe XD に落ち着いています。 Adobe XD とは Adobe XD はデザインからプロトタイプ作成・共有までをおこなうツールです。 Webサイトやモバイルアプリのデザインとプロトタイプの作成がひとつでできるとうたわれているものですが、私はこれで、プレゼン資料や仕様書を作っています。 といっても、本格的に使い始めたのは昨年の秋頃からなので、まだ2案件しかありませんが。 こういう使い
ペーパープロトタイプの画面作成に「Linea」を選んだ理由 - Chatwork Creator's Note
こんにちは。ChatWork Advent Calendar 2017のトップバッター、@cw-takeです。 今回は僕がデザイン作業の中でペーパープロトタイプを必要とした背景と、プロトタイプをつくるにあたって検討したツールの紹介をしたいと思います。 なぜペーパープロトタイプが必要？ ペーパープロトタイプは、大まかな配置や簡単な遷移を開発チーム内で共有して、メンバーから出たフィードバックをその場で修正し、プロジェクトの早い段階でデザインの合意を取るために必要です。 Sketchなどのデザインツールを使わなかったのは、ペーパープロトタイプに以下のような利点があると考えたからです。 手描きのラフなデザインは相手からのフィードバックを引き出しやすい 誰でも触れるキャンバスは誰もが簡単にアイデアを形にできる デザイナーは制作環境を分けることで、デザインの段階ごとに達成したい目的に集中できる 僕がペ
検索結果一覧のUI改善でKPIが17.5%向上した話 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。デザイナーの上田です。たまにはサービスグロース系の記事を書いてみようと思います。 突然ですが、「サービス改善の一環でUI改善の施策をリリースしたけど、明らかな数字の変化が見られず、いまいち上手くいったのか上手くいかなかったのか評価がしづらい。」といった経験をお持ちではありませんか？ わたし自身は何度かそういった経験があり、UI改善が定量的な成果に結びつきづらく感じて、「UI改善の価値を主張しづらいな。」と頭を悩ましていました。 そんな中、担当したUI改善で、主要なKPIを17.5%改善することができ、デザインプロセスに汎用性を持たせられそうな感覚があったので、そういった事例を増やしていくために、今回はどんな風に設計したかプロセスを振り返ってみようと思います。 もちろんUI改善の効果は定量的な数字の変化のみで推し量れないと思ってますが、一方でUI改善で数字を伸ばせない訳ではないと
世界最強のデザインツール、その名も「InVision Studio」誕生。Adobeとの最終戦争が始まる…！
InVision Studioとは一体…？ TechCrunchの記事によると、現在プロトタイピングツールInVisionは世界中で300万人以上のユーザーを抱えているそうで（すごい） 今まではプロトタイピングとコラボレーションの機能を持ったツールであり、またSketchのプラグインを開発するチームを買収するなどの動きはありましたが、画面をゼロからデザインするツールは持ち合わせていませんでした。 今回発表されたInVision Studioは、明確にデザインツールPhotoshop・Sketchを競合としたデザインツールになるようです。 Windows＆Macアプリケーション InVision Studioはティザーサイトを見る限り、Webアプリではなくデスクトップのネイティブアプリケーションのようです。プラットフォームもMacとWindowsが明記されています。 SketchはMacアプ
ついにSketch上でPrototypeの作成が可能に…！待ってました、Craftバージョンアップデート！！
ついにSketch上でPrototypeの作成が可能に…！待ってました、Craftバージョンアップデート！！ 今日は最新のSketch44のことを書こうと思ったんですがね…出てしまいましたね… CraftのPrototype機能が！！！ 昨年の3月にInVisionに買収されたSilver Flows。 今は「Craft」という名前でアップデートを続けています。 最初のコンセプトムービーではプロトタイプを作成する様子が流れていたため、いつ出るかいつ出るか…と、首を長くして待っていたわけですが… ついに今日のアップデートで、Prototype機能が正式リリースされました！！！ 参考記事 「InVisionにSilver Flowsがジョイン。彼らが描く未来とは？」 早速使ってみた インストールしたらCraftプラグイン内にカミナリマークが表示されました。クリックするとプロトタイプ機能が有効に
【2017年版】海外のプロトタイピングツール11選（機能比較表つき）
Webサイトやアプリの制作過程において欠かせないプロトタイピングツール。海外のサービスも含めると、その種類は多岐に渡ります。 そのため、「それぞれのツールの特徴ってなんだっけ？」と混乱することも多いでしょう。特に海外の新しいツールの情報を仕入れても、結局「いつもの」ツールに留まってしまいがちです。しかし、自らのスキルや制作したいプロトタイプレベルによって最適なツールを使い分けることは、デザイン業務の可能性を広げます。 そこで今回は制作したいプロトタイプの度合いに応じて、海外のプロトタイピングツールをご紹介していきます。 シンプルなプロトタイプ制作におすすめ ここでは、シンプルなプロトタイプ制作を行う際に推奨したいプロトタイピングツールをご紹介します。「使用感や見た目の心地よさの追求」までは行わない想定をしているので、簡易なアニメーション設定を行うことができるサービスを取り上げます。 １.P
UXデザイナーが備えておきたいツール・サービス厳選20個まとめ
UXデザインとはユーザーエクスペリエンス(UX)、Webサイトやアプリの使い勝手やユーザーが体験する満足度を重視したデザインのことで、あなたが満足するデザインをつくってもユーザーが使いやすいと感じなければUXが良いとは言えません。 ユーザーのリサーチやテストやフィードバック、プロトタイプやワイヤーフレームの作成、クライアントやチームメンバーとのコラボレーションなどに役立つツール・サービスを紹介します。 20 Valuable Tools For UX Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーのリサーチ・テスト・フィードバック プロトタイプ・ワイヤーフレームの作成ツール コラボレーションのツール ユーザーのリサーチ・テスト・フィードバック ユーザーのリサーチは、プロトタイプを制作する前におこなう
UI/UXデザインは「プロトタイプがないと話にならない」- 「Adobe XD」を使った"最強のデザイン手法"
意外に役立った「Adobe XD」の機能とは？ そうした中、荒木氏がプロトタイプの作成に最速なツールとして採用したのが、アドビのUI/UXデザイナー向けツール「Adobe Experience Design(以下、Adobe XD)」だという。 メリットとしては、デザイナーが手慣れたアドビツールの操作感で、Webデザインで多用されるリスト表示を容易に作成できる「リピートグリッド」などの機能を使えること、画面遷移・共有の容易さが挙げられたほか、意外に役立ったというのがモックの動画撮影機能。これにより「(クライアントへの)使い方の説明を省くことができる」と荒木氏。 プロトタイプの作成には、他にもイメージの共有速度を上げるために、ふだん見慣れているUIで作ることや、いち早く実用段階に着手できるかが大切なため、実装ベースで作ることなどが挙げられた。 また、荒木氏が考えるUI/UXデザイナーに必要な
UI/UXデザインは「プロトタイプがないと話にならない」- 「Adobe XD」を使った"最強のデザイン手法"
アドビ システムズ主催のクリエイター向けイベント「Adobe MAX Japan 2016」が9月2日、開催された。 これは、米サンディエゴで行われている本家イベント「Adobe MAX」を日本のユーザー向けに開催するもの。イベント当日は多種多様なセミナーが行われたが、本稿では「プロトタイプで舵を取れ！Adobe XDを使った最強のUI/UXデザイン手法」と題して行われたセッションの模様をお届けする。 "ハードルは高くスケジュールは短い"Webの現場 同セッションのスピーカーは、ビジネス・アーキテクツのデザイナーの荒木脩人氏。荒木氏が所属するビジネス・アーキテクツは、ウェブサイトの構築を中心に、コンテンツ開発からデータ解析、調査、分析、最適化まで行うデザイン会社。じぶん銀行や森ビル・六本木ヒルズのウェブサイトやauもモバイルサービスアプリなどが代表的な作品だ。 そんな中、2012年に同社に
ありがちなプロトタイプ失敗パターン
次へ進むための『何か』 プロトタイプは今日の設計プロセスにおいて必須の役割を果たしている … といった論調を見かけることがあります。特にアプリの場合、Web サイト制作以上に開発者とデザイナーの密接なコミュニケーションが必要になるので、単なる静止画データの受け渡しでは不十分です。そこで「プロトタイプを作りましょう」となるわけですが、他のツールと同様、手法を取り入れただけで制作における課題が解決されることはごくまれです。 プロトタイプは、紙で作るものから、Principle のようなアプリケーションを使ってインタラクションを加えるものまであります。プロトタイプの完成度も制作スピードもツールによってまちまちなので、どのように扱えば良いのか迷う方も少なくありません。また、新しいツールを採用してプロトタイプ（のようなもの）を作ってみたけど、以前と状況が変わらないどころか、大変になってしまうこともあ
FireworksユーザーのためのAdobe Experience Design
2016年7月5日に開催したAdobe Experience Designの勉強会資料です。Fireworks使いの人向けにExperienceDesignの向き・不向きを解説しています。
UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介します
Adobe Experience Design（以下、Adobe XD）の評判はいいって聞くけど、実際のところどうなの？ 使えるの？ そんな疑問がすっきりするAdobe XDで何ができるのか、Webサイトやアプリのワイヤーフレームやプロトタイプを作成するのに便利な機能を紹介します。 Wireframing and Prototyping in Adobe XD 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 UI/UXデザインに適したツールを探して Adobe XDとは Adobe XDのアートボード Adobe XDのシェイプ操作 Adobe XDのオブジェクトのグループ化 Adobe XDのリピート グリッド（Repeat Grid） Adobe XDのエクスポートとインポート Adobe XDでプロトタイプを作成 Adobe X
プロトタイピングツールって、どれがいいの？！プロトタイプを簡単に作れる5ツール比較 | SELECK
WEBサービスやアプリの世界でもプロトタイプを作り、ユーザーのインサイトを確認した後に実際のプロダクトを作る手法が広がっています。 その流れにあわせ、プログラミングなしでプロトタイプを作れる様々なツールが生まれています。 結局、どのプロトタイピングツールがいいの？という声はよく聞くので、今回は下記のプロトタイピングツールの使い方を比較しました。 inVision Flinto Prott Flinto for Mac Pixate プロトタイピングツールは目的に応じて選ぶことが重要 プロトタイプを作る目的は様々ですが、下記のどちらの目的かによって、選ぶべきプロトタイピングツールが変わってきます。 プロダクトとして機能するかの確認 ユーザーが心地良いかの確認 「プロダクトとして機能するか」を確認するためには、細かいインタラクションの確認は必要ありません。ざっくりと動くものを作り、ユーザーに見
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The rise and fall of Invision
3 rapid prototyping exercises to improve your UX skills
The Blog | Welcome to Adobe Blog
高齢者UIプロトタイプ検証の学び
The Blog | Welcome to Adobe Blog
UINotebook - A Notebook for Engineers & Creatives
The Blog | Welcome to Adobe Blog