最新版で比較するAdobe XDとFigmaの違い - デザイン機能編 - ICS MEDIA
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは？ Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
AdobeXDにGoogleスプレッドシートからテキスト情報を流し込むプラグインが便利すぎる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGでWebディレクターをしているなべちゃんです。 Webサイトを制作する際に、クライアントや外部のライターさんにサイトに入れるテキストを依頼をする、というシーンは多いのではないでしょうか？ LIGでもまだテキストが確定していないときは「テキストテキスト……」「ダミーダミー……」と、領域を確保してクライアントやライターさんに依頼をしています。 今回はAdobeXDでワイヤーフレームやデザイン制作をしたあと、Googleスプレッドシートと連携し、Googleスプレッドシート上で書いたテキストがXDに流し込まれるという画期的なプラグインを紹介していきたいと思います！ 実はこのプラグインは、ちゃんれみさんが週に1回開催されているディレクターミーティングで紹介して、「神」「画期的だ」「もっと早くに知りたかった」と歓喜の声が上がっていました👏 私もこのプラグインを知ってからはかなりお
Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 - ICS MEDIA
Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 Adobe XDの2020年6月の大型アップデートでは、目玉機能として「スクロールグループ」と「スタック」が搭載されました。 「スクロールグループ」はアートボードとは別のスクロール領域を定義できる機能、「スタック」はオブジェクトの並び順と間隔を管理できる機能です。 とくに「スタック」は使いこなせるかどうかで、デザイン制作のスピードがかなり変わってくるのでしっかりと覚えておきましょう！ スクロールグループの使い方 スクロール領域を定義できる「スクロールグループ」が登場しました。「水平方向にスクロール」「垂直方向にスクロール」「水平方向と垂直方向にスクロール」という3種類の方向を設定できます。 「水平方向にスクロール」はカルーセルのような、画面幅以上の要素を横スクロールさせるのに便利です。
『Adobe XDではじめるWebデザイン&プロトタイピング 一歩先行く現場のスキル』
高品質なサンプルを 作りながら学べる Web制作のワークフロー に沿って学べる コーディングに適した プロトタイプが作れる 本書はAdobe XDを使ったWebデザインとUIのプロトタイピングを、高品質なサイトを作りながら、現場のワークフローに沿って学んでいく本です。 ワイヤーフレームの作り方から、ビジュアルカンプ制作、デザイン要素の効率的な制作と管理、インタラクティブなプロトタイプ制作、 画面遷移やコーディングに必要なデザインスペックの共有、さらに動きのあるUI設計やプラグイン活用まで、現場レベルで求められるスキルを、より実践的な学び方で習得できます。 初学者から、現場経験が浅い新人デザイナー、さらにグラフィックデザインからWebへキャリアを広げたい方まで、しっかりWebデザインを学びたい、あらゆる方のための一冊です。
Adobe XDに音声付きプロトタイプ、アンカーリンクなどが登場！ | Web Design Trends
プロトタイプにオーディオ組み込みが可能に 今回のアップデートにより、プロトタイプにオーディオを組み込むことができるようになりました。 アニメーション再生時のように、特定のトリガーに紐付いてオーディオを再生することができるので、幅広く活用することができそうです。 具体的には、下記のような場合に活躍するのではないでしょうか。 将来的に、動画の再生や、オーディオの一時停止、早送りなどの機能が追加されればさらにプロダクトの完成形に近いプロトタイプを作ることができるようになるかもしれませんね。 プロトタイプにアンカーリンクを設定できるように アンカーリンクというのは、Webサイトでは一般的に使われていますが、同じページの特定の箇所までスクロールさせる時に使用する機能です。 これが追加されることにより、プロトタイプ上でより実際の形に近いUXを確認することができるようになります。 zeroheight
XDのワークショップをやってきました｜きよし
先日、Adobe XD ユーザーグループ名古屋 vol.4で「ステート機能を使って 色々なボタンを作ろう！」というワークショップをやってきました！ 写真はなおやん氏が撮ってくれました📷 🐥なんでやったの？運営している #なごデLT というイベントで、XDUG名古屋管理人のいおりさんがアウトプットの話をしてくださいました。 「アウトプット沢山しててすごいな〜私ももっと頑張らなければ〜」と感想を述べたら このワークショップ枠のお話をいただき、その場で「やります！」とお答えしました。ワークショップなんてやったこと無かったですが完全にその場の勢いです👏（笑） ステート機能にフォーカスした理由は以下の通りです。 🔹成果物がわかりやすいので、初心者の方でもXD楽しい！と感じられると思ったから 🔹リリースからそこまで時間が経っておらず、バリバリ使いこなしている方をまだあまり見ていなかったから
Adobe XDでモバイルファーストのWebデザイン入門 第1回: デザインする前に知っておきたいワークスペースの使い方とファイル管理 | Adobe Blog
Adobe XDはWebやアプリなどデジタル体験デザインのためにアドビが提供している最新のデザインツールです。「考える速度でデザインする」をテーマに開発されただけあって、軽くて操作しやすいのが特徴で、無料で使えるプランもあるので、これまでPhotoshopなど他のデザインツールを使っていたけれどXDも気になっているという方は多いのではないでしょうか。また、これからWebデザインを学ぶためにXDを覚えたいという方もいらっしゃると思います。 そこで、この連載では、Adobe XDを使ってレスポンシブデザインのページをデザインする手順を全6回に分けてご紹介します。ワイヤーフレームから始めて、完成したデザインを開発者に共有するまでに最低限必要なXDの機能を学べる構成になっています。 第1回は、XDを初めて触るデザイナーの皆さまために、XDを使ってデザインを始める際に知っておきたい基礎知識をご紹介し
CSS Nite LP64「Coder's High 2019」フォローアップ（4）鹿野 壮さん、松下 絵梨さん｜CSS Nite公式サイト
CSS Nite LP64「Coder's High 2019」フォローアップ（4）鹿野 壮さん、松下 絵梨さん 記事公開日：2020年1月 2日（木） 2019年10月19日に大崎ブライトコアホールで開催したCSS Nite LP64「Coder's High 2019」のフォローアップとして、鹿野 壮さん（ICS）、松下 絵梨さん（ツキアカリ）の『デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作』セッションのスライドなどを公開します。 スライド（PDF）デモファイル動画 2019年10月19日開催のCSS Nite LP64で「デザイナーとコーダーをつなぐ、Adobe XDを用いたモダンなウェブ制作」セッションを担当した松下・鹿野です。今回はご参加ありがとうございました！ アンケートでは「XDの便利な使い方を知れてよかった」「ダークモード対応について初めて知った
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アプリまたはwebサイトのレイアウトとデザイン |
Adobe XDの使い方がこれでよく分かる！Adobe公式、ワイヤーフレーム・プロトタイプのチュートリアルファイル
Top
実践！a-blog cmsユーザーのためのsite2019.xd活用法
いおり | デザイナー on Twitter: "最近になってやっとLTやセッション準備のやり方が固まってきたので大まかにまとめてみた。スライド作成以外は基本電車の中でやってます〜 XDでのプレゼン、キーボードトリガーを「→」にすると誤操作が減ってやりやすいので気になる人には試し… https://t.co/U7MXEF9QsG"