Adobe XDによるUIデザイン・ワイヤーフレームの制作方法を豊富な実例から学べる、UIデザイナーにお勧めの良書
Adobe XDでWebサイトを制作したい、ワイヤーフレームの作り方を具体的に知りたい、コミュニケーションやプレゼンテーションツールとして活用したい、基本操作から実務レベルの使い方まで詳しくていねいに解説した一冊を紹介します。 Adobe XDは、Webサイトやアプリの制作で欠かせないツールの1つとして多くのユーザーに支持されています。Adobeユーザー（登録無料）なら無料で利用でき、Webサイトやアプリの制作だけでなく、コラボレーションツールやコミュニケーションツールとしても活躍します。 本書は現役のデザイナー・ディレクター陣が執筆した、Adobe XDの解説書です。基本的な操作から、WebサイトやスマホアプリのさまざまなUIデザインやワイヤーフレームの作成方法、オンラインディスカッションやプレゼンテーションなどの活用方法まで、実務で役立つテクニックが詳しく解説されています。 学べるだけ
アウトプットの精度が上がる！「Adobe XDをプロトタイピングに活かす方法」 研修レポート | メンバーズクリエイターズブログ
2021.3.1 アウトプットの精度が上がる！「Adobe XDをプロトタイピングに活かす方法」 研修レポート ツールデザインナレッジ研修 皆さん、こんにちは。 メンバーズキャリアカンパニー所属ディレクターの森山です。 この度、2021年1月26日にオンラインにて開催された「Adobe XDをプロトタイピングに活かす方法」研修を受講しました。 講師は株式会社まぼろし取締役CMOであり、メンバーズキャリアカンパニーの技術顧問も務めてくださっている益子貴寛さんです。 今回の講義は、Adobe XDの機能の中でも、それぞれのワイヤーフレームやデザインをリンクで有機的につなげて、ブラウザで動く画面を作ることができる「プロトタイピング」という機能にフォーカスした内容でした。 ディレクターやマーケター、プランナーなどのノンデザイナー及びノンエンジニア向けの講座ではありましたが、プロトタイピング自体はU
AdobeXDにGoogleスプレッドシートからテキスト情報を流し込むプラグインが便利すぎる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGでWebディレクターをしているなべちゃんです。 Webサイトを制作する際に、クライアントや外部のライターさんにサイトに入れるテキストを依頼をする、というシーンは多いのではないでしょうか？ LIGでもまだテキストが確定していないときは「テキストテキスト……」「ダミーダミー……」と、領域を確保してクライアントやライターさんに依頼をしています。 今回はAdobeXDでワイヤーフレームやデザイン制作をしたあと、Googleスプレッドシートと連携し、Googleスプレッドシート上で書いたテキストがXDに流し込まれるという画期的なプラグインを紹介していきたいと思います！ 実はこのプラグインは、ちゃんれみさんが週に1回開催されているディレクターミーティングで紹介して、「神」「画期的だ」「もっと早くに知りたかった」と歓喜の声が上がっていました👏 私もこのプラグインを知ってからはかなりお
そのデザインを確かめよう！ユーザーのフィードバックを得るための6つのAdobe XDプラグイン
そのデザインを確かめよう！ユーザーのフィードバックを得るための6つのAdobe XDプラグイン デジタルデザインは試行錯誤の繰り返しです。デザインの過程で、フィードバックを取り込みみながら数十の異なるバリエーションをつくるUI/UXデザイナーは珍しくありません。ビジョンを明確にしたいデザイナーは、Adobe XDのようなツールを使えば、本物のように感じられるインタラクティブなプロトタイプを作成できます。それを共有すればチーム全体の認識を揃えられるでしょう。しかし、これはまだほんの始まりです。 プロトタイプを最大限に活かすには、実際のユーザーにそれを試してもらう機会を持つことです。プロトタイプを使ってユーザーテストを行うと、開発に実際に着手する前に、デザインについての洞察を得られます。ユーザーがどのようにデザインを使おうとするのか確認して、後になってから修正するとコストがかかる潜在的な問題点
知れば知るほど、レベルアップ！「企画と設計をしっかりとつなぐ！レベルの高い成果物を生み出すためのAdobe XD活用術」研修レポート | メンバーズクリエイターズブログ
2021.1.12 知れば知るほど、レベルアップ！「企画と設計をしっかりとつなぐ！レベルの高い成果物を生み出すためのAdobe XD活用術」研修レポート ウェビナーオンラインイベントナレッジ 皆さん、こんにちは！メンバーズキャリアカンパニー所属の鷲澤（わしざわ）です。2020年4月1日に入社いたしました。 この度、2020年11月19日（木）オンライン開催された「企画と設計をしっかりとつなぐ！レベルの高い成果物を生み出すためのAdobe XD活用術」研修を受講しました。 講師はメンバーズキャリアカンパニーの技術顧問、株式会社まぼろし取締役CMO 益子 貴寛先生です！ 高いレベルで成果物を制作する為に必要不可欠なAdobe XD。 益子先生に、使いこなし術をトータルで分かりやすく解説していただきました。 Adobe XDとは？ Adobe XDとは、Adobeが提供しているオールインワンのU
簡単で便利！Frontifyで作成したガイドラインをAdobeXDで使う｜Tatsumin
簡単にスタイルガイドが作れて管理も楽なWebサービスである FrontifyのAdobe XDのプラグインが出たので使ってみました。 このプラグインのローンチは2019年8月でしたが、私がXDとFrontifyを使い始めたのがちょうどその頃で、自分自身がまだ初心者でしたし、日本語のドキュメントやブログ記事などが出ていなかったので、利用を後回しにしていました。 しかしふと使ってみたら、本当に簡単ですぐに使えてとても便利だったので使い方を紹介します。 Frontifyとは 公式サイトの言葉を拝借しますとオールインワン・ブランドマネジメントプラットフォームです。何やらピンとこない人のために自分の言葉で説明しますと、ブラウザ上で簡単にデザインガイドラインの作成・管理ができるWebサービスです。 ガイドラインジェネレータにFrontifyを選ぶ理由は便利さと簡単さにあります。 ・直感的で編集も利用も
XD使い始めこそ知っておきたい！よく似た機能を使い分けよう｜macheri｜note
こんにちは、まちえり（@macheri_me）です。Adobe XD Advent Calendar 3日目に参加します！ 今回は私がXD初心者だった頃の失敗談から学ぶ「XDのデザイン制作で、はじめに気を付けるべきデータ構成」について書きます。知っておくことでXDデザイン制作のトラブル回避になります！ こんな人にオススメの記事です ・デザイナー問わずこれからAdobe XDに挑戦してみたい人 ・Adobe XDを使い始めてある程度作れるようになった人 見た目は同じでもまったく違う機能たちXD初心者の頃は簡単ゆえにスピード重視でサクサク作っていました。その結果、制作物の規模が大きくなった際に「こんなことになるならあの時この機能で作っておけば...」と後悔しながら作り直すことも多々あり。。 見た目が同じでも作りが違う2つの構成を比較しました。それぞれの方法で作るとどんな違いがあるでしょうか？
Adobe XDでグリッドシステムのレイアウト枠を作る - グリッドシステムを使ったレイアウトとレスポンシブWebデザインについて｜tkpea
Adobe XDでグリッドシステムのレイアウト枠を作る - グリッドシステムを使ったレイアウトとレスポンシブWebデザインについて この記事では非コーダー向けに、グリッドシステムを使ったレイアウトとレスポンシブWebデザインの考え方、AdobeXDでレイアウトグリッドを作る時の操作方法について書きます。 AdobeXDの内容は初見で触ってみて自分なりに模索した方法なので、他に良いやり方があればご教授ください。 グリッドシステムとはWebデザインに於いて、横並びの要素を配置する時「要素の幅はどれくらいか？」「要素同士の隙間はどれくらいか？」を決定するときのガイドラインになる枠組みのことです。 スマートフォンの登場以来、様々なデバイスの画面サイズへの対応が求められる現在のWebデザインでは、この枠組みを基準にデザインされていることが多いです。 実例例えば↓こんなデザインがあったとして、 これに
Adobe XDで簡単にワイヤーフレームやモックアップを作成できる無料素材 -Quick Mockup
12/3にパシフィコ横浜で開催された「AdobeMAXJapan」に合わせて、Adobe XD用の便利なプラグインが登場しました！ プラグインは通常、英語圏内に特化されたものが多いですが、「Quick Mockup」はなんと日本のデザイン現場向けに特化されたもので、簡単にワイヤーフレームやモックアップが作成できます。 日本のUXデザイン用に開発されたAdobe XD用プラグイン「Quick Mockup」 Quick Mockupの特徴 Quick Mockupのインストール Quick Mockupの使い方・動画 Quick Mockupの特徴 Quick Mocukupは、日本のデザイン現場で使用頻度の高いUI要素のサンプルから簡単にワイヤーフレームやモックアップを作成、さらにスタイル、ステート、コンテンツのカスタマイズで簡易プロトタイプをすばやく簡単に作成できます。 Quick Mo
2020年版：XDがもっと便利に！おすすめのプラグインまとめ | Web Design Trends
WebやアプリのUIデザイン制作に使われる機会の多いAdobe XDですが、「プラグイン」を活用することによってもっと便利に使うことができます。 現在では様々なプラグインが登場していて、どのプラグインを使えばいいのか分からないという方も多いのではないでしょうか。 今回は、Adobe XDのおすすめプラグインをまとめてご紹介したいと思います。 2020年版：おすすめの人気UIデザインツールを徹底比較！【Figma / XD / Sketch】 現在は、デザインツール戦国時代とも言われるように、様々なデザインツールが競争を繰り広げています。 UIデザインを作るための「UIデザインツール」もどんどん進化していて、個性的なツールが多数登場していま... Web Design Trends XDにプラグインを追加する方法 XDでプラグインを追加する場合には、メニューから「プラグイン＞プラグインを見つ
Adobe Xdはカラーマネジメント非対応！色が合わないのに回避策は…ない？
いつからか…Mac版Xdではプロファイルを読むようになっています（Win版では確かめていません）。RGBを入れ替えたプロファイルを埋め込んだ画像をXdに貼ると上のように。プロファイルを読まないアプリでは右のようにおかしな色になりますが、Xdは一応プロファイルを読んでいるようです。ただし、色はおかしなまま。下は左の画像をSafariで表示したもの。こちらのカラーが正しい。変な実装ですね。（2020/11追記） 「XDから書き出すと色がくすむ」んじゃなくて、Xdだけが変で、書き出すと「正しい色になる」のです。 Xdで色が変わる問題…… Adobe Xdさん。 PhotoshopやIllustratorで作ったものを貼ったりコピペしたりすると、色がガラッと変わって見えます。また、Xd上で選択した色はブラウザで見るとだいぶ褪せて見えます。 Xd上でこう見えているとして、
Adobe XD 2019年10月アップデートリリース！ブレンドモード、サイズ/位置調整のショートカット、非表示オブジェクトへのアクセスなど #AdobeXD | Adobe Blog
今月のAdobe XDアップデートには、ワークフローを確実に高速化する、エキサイティングな新しいキーボードショートカットの追加とUI強化、そして要望が多く寄せられていたブレンドモード（描画モード）の導入が含まれています。ブレンドモードを使えば、PhotoshopやIllustratorと同じ「比較（明）」「乗算」といった設定を画像に適用して他のレイヤーとブレンドできます。これにより、興味深くユニークな効果が生まれ、より魅力的な画像やグラフィックスをXDで作成できるようになりました。 今回のアップデートにはまた、Windows版およびMac版のXDアプリケーションのデザインスペックとデザインカンバスの両方で、完全に覆われたレイヤーや一部覆われたレイヤー、または非表示のレイヤーを扱いやすくするための新機能も含まれています。加えて、オブジェクトを簡単にナッジ（少しずつ移動）する、サイズ変更するた
[Adobe XD]プラグインを使って・作ってクリエイティブな時間を増やそう｜Risa Yuguchi｜note
この記事はデザインツールAdvent Calendar 2018の12日目の記事です。 日本で最近人気が上がってきているAdobe XD(以下XD)は、シンプル・軽い・速い動作が特徴。「考える速さでデザインする」そのテーマを体現する機能がいっぱいあります。 繰り返しのデザインを簡単に作れる「リピートグリッド」 一瞬で画像にマスクした状態にできる「画像の挿入」機能 位置の修正も レスポンシブリサイズにも対応 かつては時間をかけてやっていた作業がXDでは簡単です！クオリティアップのためのテクノロジーは役に立ちます。どんどん発展していってほしいものです。 そんな便利なXDですが、それでも何かを作るときにはXDの機能を使うにしても面倒な単純作業が出てしまいます。 それを解決してくれるのがプラグインです。 プラグイン例その1:自分の作業のちょこっとを解決 拙作のプラグインになりますが、微妙なサイズ調
![[Adobe XD]プラグインを使って・作ってクリエイティブな時間を増やそう｜Risa Yuguchi｜note](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d4bf90d97b035f49dd73ad3d1dcc79e8db76087/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F8901443%2Frectangle_large_type_2_e6a49d84a8a9ba8d1a2123aead4fdaff.jpg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
OverflowがAdobe XDと連携したようなので利用してみました。｜Koushi Kagawa 😎｜note
簡単にいうと、『Adobe MAX 2018でAdobe XD とOverflowの連携が発表されたよ！』ということですね。 Check our how-to guide for more detailed information.↑に記載ある通り、『詳しくはハウツーガイドを読んでくれ！』と書いてあるので、こちらも読んでみることに。 こちらに連携の方法が書いてありました。以下にまとめます。 Adobe XDとOverflowの連携方法上記ハウツーガイドを参考に連携方法を記載します。 1. Adobe XDとOverflow を最新バージョンにバージョンアップする 古いバージョンだと連携できないようなので、どちらも最新のバージョンにアップデートしましょう。 参考： Adobe XD バージョンアップ方法 Overflow 2. Adobe XDで、Overflowプラグインのインストール A
デザイナーと開発との連携はXDとZeplinを活用させよう｜イースト株式会社
こんにちは！ 初めまして。 営業本部デザイン室、ひよっこデザイナーのミヤザワと申します。 「デザイナー」というと、少しかっちょいい雰囲気になってしまいますが デザイナーはデザイナーでも「ひよっこ駆け出しデザイナー」として所属しております。 このブログでは、 同じような「駆け出しデザイナー」の方が読んだ時に 「頭の片隅にでも入れておこう」と思えるようなお話ができたらいいなと思っています。 （デザインについて考える機会も増やしたい） 記念すべき第1本目は「XD」と「Zeplin」についてです。 デザイナーと開発との連携の問題 入社した当初からずっと デザイナーと開発との連携について課題でした。 今までの開発との連携はこのような流れでした。 という流れで連携しており、見ての通り ものすっっっっごく効率が悪い！ 一番 面倒な 大変なことが、カラーコードをメモ帳にまとめること！ ↑こんな感じでメモを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Zoomと連携するAdobe XDプラグインでリアルタイムコラボレーションをもっと便利に
【リモートワークを支えるAdobe XD】合同会社DMM.com「共有設定と明快なファイルづくりでクオリティとスピードの両立を実現」
The Blog | Welcome to Adobe Blog
The Blog | Welcome to Adobe Blog
The Blog | Welcome to Adobe Blog