タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
AdobeXDで画面設計資料を作るときに気をつけること・おすすめの作り方（前編） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
AdobeXDにGoogleスプレッドシートからテキスト情報を流し込むプラグインが便利すぎる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGでWebディレクターをしているなべちゃんです。 Webサイトを制作する際に、クライアントや外部のライターさんにサイトに入れるテキストを依頼をする、というシーンは多いのではないでしょうか？ LIGでもまだテキストが確定していないときは「テキストテキスト……」「ダミーダミー……」と、領域を確保してクライアントやライターさんに依頼をしています。 今回はAdobeXDでワイヤーフレームやデザイン制作をしたあと、Googleスプレッドシートと連携し、Googleスプレッドシート上で書いたテキストがXDに流し込まれるという画期的なプラグインを紹介していきたいと思います！ 実はこのプラグインは、ちゃんれみさんが週に1回開催されているディレクターミーティングで紹介して、「神」「画期的だ」「もっと早くに知りたかった」と歓喜の声が上がっていました👏 私もこのプラグインを知ってからはかなりお
AdobeXDで更新しやすいテーブルの雛形を作ってみた〜コンポーネント・スタック・パディング機能の活用〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのイナッチです。 今回は、Adobe XD（以下：XD）で更新しやすいテーブルのひな形を作りましたので、ご紹介します。 せっかくなのでなぜ更新しやすいテーブルを作ろうと思ったのか？ なぜ作れたのか？ などの背景も合わせてご紹介いたします。が、そんなことはいいから早くテーブルを見たい方は、もろもろスキップしてこちらからどうぞ。 XDで更新しやすいテーブルができるまで XDといえばWebサイトなどの画面デザインのためのソフトというイメージですが、その使い勝手の良さから、デザイン以外の場面でも活用する機会が増えてきました。たとえばLIGのアカウントプランナーのノブさんは、企画書（提案書）をXDで作られるそうです。
動画で学ぶ総合学習プログラム「Adobe XD Trail」公開！ワークショップや学習キット、XD検定連携など #XDTrail #AdobeXD | Adobe Blog
動画で学ぶAdobe XDの総合学習プログラム ほぼ毎月の機能アップデートで進化するAdobe XDを使う時、どんどん便利になっていくなと思う一方で、最初はどこから勉強したらいいのか、使ったことのない機能や、もっと効率的に作業する方法があるんじゃないかとモヤモヤすることがあるかもしれません。 Adobe XD Trailには、様々な用途やレベルから学べるコンテンツがあり、XDがカバーする5つの機能カテゴリーを可視化したラベルが付けられているため、全体を把握しながらXDをマスターしていけます。 各コンテンツに付けられた5つの機能カテゴリーラベルと難易度表記 Adobe XD Trailを見る 用途に応じたコンテンツを使い分けよう XD Trailには学びたい用途に応じた様々なコンテンツがあります。機能について個別にしっかり学んだり、作り方を知りたいものを学んだり、より実践的な制作体験をしたり
Adobe公式サイトに記載のある通り、Adobe XDは今すぐのサポート終了ではないものの、サポート終了にむけて長期の予告期間となっているようです。新規の開発も終了しているようですね。それに伴い、XDの代わりとしてFigmaを検討されている方もいるかと思います。 弊社ではAdobe XDからFigmaへの移行を約2年前に行いました。そこで、これまでにエンジニアが両方のツールを使用して感じた、Figmaの利点と使いにくい点をご紹介します。 Figmaの利点 ページ機能でのアートボード整理が便利 Adobe XDでは1つのキャンバスですべてのアートボードを管理するような構造になっていました。 Figmaではページ機能があり、これを利用してアートボードをグループ化できます。ワイヤーフレーム、要件定義、デザインカンプなどのプロジェクトを各ページに分類・整理することで、作業が効率的に進むようになりま
簡単で便利！Sketch, Figma, AdobeXDなどにコピペで利用できるUIデザイン用のカラーパレットを生成 -CopyPalette
最近のUIデザインでよく使用されている、一貫性のある単色のカラーパレットを簡単に生成でき、そのカラーパレットをSketch, Figma, AdobeXDなどにコピペで利用できるオンラインツールを紹介します。 CopyPalette CopyPaletteは1つのカラーをベースに、濃淡のバリエーションでカラーパレットを簡単に生成できるオンラインツールです。生成されるカラーパレットはSVGなので、さまざまなソフトウェアにコピペで利用できます。 CopyPaletteの使い方は簡単、登録など面倒なことも一切不要です。 まずは、サイトにアクセスします。
「源ノ角ゴシックとNoto Sansならトラブルないと思ってました」的 AdobeXDで使うフォントの話｜Risa Yuguchi
この記事はAdobe XD アドベントカレンダー 2020 の2日目の記事です。 ときどき相談をうけるのですが、Adobe XDでWebサイトやサービスをデザインするときにどのフォントを使っていますか？ 最近では商用利用できる日本語フォントの種類はかなり増えました。一方Adobe XDは、Adobe FontからインストールできるフォントであればCreative Cloudとしての性質で自動的にインストールしてくれますし、USBで繋いでないデバイスプレビューでも自動的にダウンロードして表示してくれます。 今回は定番かつ安定的に使用できる二つのフォントと利用するときに注意が必要なフォントを二つ解説しました。 [おすすめ/名前注意]源ノ角ゴシック次の二つの条件のうち片方が揃ったらこれを選ぶのがおすすめ。 ・MacとWindowsの人が混ざっている ・スタータープランの人が参加している源ノ角ゴシ
Adobe XD 2020年6月アップデートリリース！デザイントークン、スタック、スクロールグループなど #AdobeXD | Adobe Blog
スクロールグループを使用すると、プロトタイプを実際のWebサイトやアプリのように動作させることができます。画面の一部の領域がスクロールするような、フィード、リスト、カルーセル、ギャラリーなどをデザインできるようになりました。これは、Adobe XDのUserVoiceフォーラム（英語）に寄せられたなかでも最も要望が多かった機能の一つ（英語）です。 デザイン上の任意の領域をスクロールグループとして指定し、縦、横、または両方向にスクロールするように設定できます。カンバス上では、スクロールグループを作成した領域に青いハンドルが表示されます。デスクトップでプロトタイプをプレビュー、あるいはプロトタイプのリンクとして共有すると、指定した領域を実際にスクロールすることができます。 Let’s XDでスタック（英語）とスクロールグループ（英語）の使い方を学ぶことができます。さらに、ベイエリアのUI/UX
Adobe XDのスキルを高めよう！UI/UXデザインチャレンジ | Adobe XD Creative Challenge シーズン3 #AdobeXD #Challenge - Adobe Blog
Adobe XDのスキルを高めよう！UI/UXデザインチャレンジ | Adobe XD Creative Challenge シーズン3 #AdobeXD #Challenge 好評だったシーズン1、シーズン2に続き、年内最後のAdobe XD Creative Challengeを開催します。普段の業務とは別に自由にAdobe XDを使ってみたい方を対象に、Webサイトやスマホアプリのデザインやプロトタイプを実際につくる機会を用意しました。指定された日にアンロックされる6つのチャレンジ（課題）は、XDの代表的な機能を体験できるようにつくられています。 今回は参加しただけで賞品が抽選で当たるチャンスもあります。また、目を引く優秀な作品を制作した方にはAdobe XD特製ノベルティが、シーズンを通して素晴らしい作品を制作し続けた方の中から1名にCreative Cloud 個人版 1年分が贈
AdobeXDで画面設計資料を作るときのおすすめの手順を解説します
加えて、画面仕様書を書きながら全体の構造や細かい仕様を検討していく過程で、以下の設計資料も同時に更新・精緻化していきます。 画面仕様書と並行して精緻化していく資料 コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 以上が、大まかなフローになります。ここからは、画面仕様書を書いていく各ステップを具体的にご紹介します。 STEP1：アートボードを作る AdobeXDの場合、テンプレートやコンポーネントの数だけアートボードを作成するのがおすすめです。例えばテンプレートが10個、コンポーネントが15個あるなら、アートボードは25個作成します。 前提資料として作成した「テンプレート一覧」や「コンポーネント一覧」に基づいて、IDと名称をアートボード名に設定しておきましょう。 1個のテンプレート（あるいは1個のコンポーネント）に対して複数の表示・動作
AdventCalender2020「ちょっとした工夫で効率化！01【PR】パソナテック」の19日目です。日付が変わってしまいましたが、寝てないのでまだ19日ということで良しとします。 （テーマは、ちょっとした工夫ですが、「ちょっとした工夫」に収まってないかもしれないので、工夫の導入記事ということで、予めご了承ください。） エディタをカスタマイズや拡張機能を作ることで、日常の作業効率が上がるのは、デベロッパーの皆さんには当然の発想です。また、ブラウザの拡張機能なども、Webマーケティングの業務補助をするツールなどもよく使われるかと思います。拡張機能のような小技で作業効率を上げるというのはエクセルのマクロが、そういった分野のパイオニアといったところでしょうか。 本記事で、デザインツールでの拡張機能/プラグインを作り方を紹介し、ビジネスロジックを設計しているフロントエンド開発者や、LPなどのH
はじめに 先日アメリカのLAで開催されたAdobeMAXにてAdobeXDの新機能が紹介されました！ その中でも 特に目玉機能だと感じたステート機能 （コンポーネント状態）について詳解させていただきます。 まずはステート機能で何が出来るのかを理解するために以下の動画をご覧ください。 Embedded content: https://twitter.com/pino_ebiebi/status/1191955060537860097?ref_src=twsrc%5Etfw そして、こちらの記事はAdobe XD Advent Calendar 2019の２日目の記事です。 ステート機能の基本 動画作りました！ ステート機能の基本が2分で分かる動画を作ったので、まずはこちらを観てみてください！ Embedded content: https://twitter.com/pino_ebiebi
【2024年】AdobeXDおすすめテンプレート11選！UIキットを使うメリットでメリットは？ | Skilled Magazine | Vue.js オフィシャルパートナー
以下詳しく紹介していきます。 Webサイト用UIキット Wires jp 2.0 Bootstrap 4 UI Seoulify – Fashion store FREE | Web UI & Animations E-Comm Free UI Kit Wires jp 2.0 引用：Wires jp 2.0 ワイヤーフレームに使える様々なテンプレートが用意されているAdobe XDのUIキットです。 Wires jp 2.0はWires jpをベースに、日本向けに再構成されたUIキットとなっています。 Wires jpは、スマホ向けのテンプレートが170種類、PC向けのテンプレートが90種類もあります。 コンポーネントの種類もログインフォームやニュースフィード、プロフィール画面や支払画面など240種類用意されています。 Wire jp 2.0はそれほどのデザインは揃えていませんが、日本人
決して派手ではないが、毎日使えて確実に時短になる系のプラグインを紹介します。デザイン、WF、資料作成全般に使えます。 （凝ったプロトタイプを作るなどの派手なプラグインは今回対象外です！） ●プラグインの導入方法今回の記事で「こりゃ良さそう」と思うプラグインがあったら、プラグインパネルから検索して入れてみてください。方法は以下の通りです。簡単！ ①プラグインパネルを開き、②プラスアイコンをクリック。Creative Cloudアプリが立ち上がるので、検索窓でプラグイン名を検索してください。 下準備は以上です。では本編へどうぞ。 （長い話になりますよ〜☕️） 【アートボード整理編】●Artboard Plus主にアートボードの整列に使います。以下の記事がとてもわかりやすいので詳しくはそちらをどうぞ。 主な機能は次の3つです。 Rearrange Artboards into Grid: アート
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ） コーディングで仕事をするには、デザインツールで作成されたデザインカンプからのコーディング能力が必要です。 その中でも特にXDは操作性が高く人気なので、XDからコーディングできる力は必須といっていいでしょう。 この記事では、XDからコーディングするために必要なテクニックを解説しています。 僕がコーディング代行などの実務を通して感じた重要ポイントもふまえてまとめているので、記事を読み終えると実践を想定した知識が身に付きますよ！ AdobeX
きゅぶんず on Twitter: "AdobeXD -> Unityに変換するやつ作りました！ 自分で言うのもなんですが、すごいものができたので20秒だけ動画見てください #akyui #unity #adobexd #gamedev https://t.co/pzpPVFfioG"
AdobeXD -> Unityに変換するやつ作りました！ 自分で言うのもなんですが、すごいものができたので20秒だけ動画見てください #akyui #unity #adobexd #gamedev https://t.co/pzpPVFfioG
Adobe XD 2020年2月アップデートリリース！macOSでXDを音声でコントロール、声によるデザインが可能に #AdobeXD | Adobe Blog
音声コントロールは、コンピューターと人とのインタラクションデザインにおける進化のなかで、最もエキサイティングなものの1つといえるでしょう。ユーザーは、デバイス上でのタッチ、タップ、タイピング操作の代わりに、口述と音声コマンドだけでMacを操作することができます。音声コントロールは、ソフトウェアの画面遷移や対話的操作にまったく新しい方法を提供しますが、それは同時に、自分の手での機器操作が困難な、身体や運動機能に障がいを持つ人々にとっても大いに役立つものです。 アドビは常に、すべての人に「つくる力」を、という理念を実現するための新しい方法を模索しています。そして、経歴や経験値、能力を問わず、私たちの製品を活用して素晴らしいものづくりができるよう、あらゆるクリエイターを支援しています。本日、私たちはこのビジョンをAdobe XDにも広げ、macOSによる音声コントロールのサポートを追加しました。
Adobe Creative Cloud アプリには、[CCライブラリ]パネルを介してデータのやりとりをする機能があります。 📝Adobe Creative Cloud ライブラリ https://helpx.adobe.com/jp/creative-cloud/help/libraries.html この秋にアプリの[CCライブラリ]対応の追加が行われて、AdobeXDとWordやPowerpointを用いたマニュアル作成での図版作成と管理が楽になりました。 #AdobeXD 「Creative Cloud ライブラリへの XD アセットの追加」と 「Word／PowerPoint 向け Adobe Creative Cloud アドイン」の機能がめっちゃ便利で、今年一推しでした。 スライド作成がめっちゃはかどるし、図版の使い回しがしやすくなりました～。うれしすぎ。#CCDojo p
プロトタイピングツール「AdobeXD」で絵コンテが作成できるプラグイン「Storyboard Editor Plugin」を試してみました - CrossRoad
昨日、AdobeXD User Festival 2020というカンファレンスがありました。その中でとくに気になった「Storyboard Editor Plugin」について、このプラグインを使って、実際に絵コンテ、動画を作ってみました。 今回は「Storyboard Editor Plugin」の環境構築、使い方、詰まったところなどをまとめました。 1. AdobeXDとは？ 2. AdobeXD User Festival 2020とは？ 3. Storyboard Editor Pluginとは？ 4. Storyboard Editor Pluginの環境構築、使用、絵コンテ出力 4.1 環境構築 4.2 Storyboard Editor Pluginを使ってみる 4.3 作った絵コンテをエクスポートしてみる 5. Premiere Proで絵コンテを読み込む 6. 実際に試し
UIデザインガイドラインをAdobeXDからFigmaに移行した私の奮闘記録 ①準備編｜イルグルムUXデザインチーム
こんにちは！ イルグルムのUXデザイン室でUI/UXデザイナーをやっている松尾です。 今回は自社プロダクトのUIデザインガイドラインを「XD」から「figma」に移行したプロジェクトの奮闘記をお届けしていきたいと思います！ プロジェクト全体はまだ全て完了しているわけではないのですが、一番ボリュームのあるXD→figmaへのデータ移行作業は山場を超えて一息ついたところで現在執筆しております。 今回は第１章、移行プロジェクトの準備について書き起こしていきたいと思います。 それでは、よろしくお願いします！ まずは移行やってみてどうだった？figma楽しい！短期間でスキル爆上がり 今までよりも作業が効率的に移行に際しての調査や実際の移行作業を通してfigmaに触れる機会が多く、個人的にもかなりスキルアップしました。イルグルムのプロダクトは管理画面系のUIが多く、テーブルデザインやプルダウン、フォー
自分が本当に欲しかった AdobeXD to Unity 変換ライブラリ、AkyuiUnityを作りました - きゅぶろぐ
github.com AdobeXD -> Unityに変換するやつ作りました！ 自分で言うのもなんですが、すごいものができたので20秒だけ動画見てください #akyui #unity #adobexd #gamedev pic.twitter.com/pzpPVFfioG— きゅぶんず (@kyubuns) 2021年2月16日 AkyuiUnity、読み方は あきゅい ゆにてぃ です。 まえがき 「そもそもUIをAdobe XDで作れると何が嬉しいの？」という方は、こちらをお読みください。 「AdobeXDで作ったUIをUnityで使いたい！」と思い[Unity AdobeXD]でググると、たくさんのライブラリがヒットします。 検索に引っかかるもの全て試しましたが、気に入るものが無かったので自作することにしました。 自分は以前、Baum2というPhotoshop to Unity変換ラ
AdobeXDはサクサク動いてくれて嬉しいのですが、カラーマネージメント非対応という弱点もあります。 また、AdobeXDからPSDへ変換すると、言語オプションが「東アジア」から初期設定に変わってしまい、文字の段落設定から禁則処理が抜け落ちてしまいます。AdobeXDには、禁則処理という項目が無いからです。 InternetExplorer以外のWEBブラウザは自動的に禁則処理がされるようになっていますから、htmlでコーディングする場合は、テキストの禁則処理は必要ないと考えてよいと思います。しかし、LP制作の場合、テキストも含めて画像ファイルにしてしまうことも多いですから、禁則処理が使えないのは制作に差し障りがありますね。 ですから、テキスト編集のことを考えると、禁則処理が使えるようにしておく必要があります。その為には、ファイルの言語オプションを「東アジア言語の機能」にしなければなりませ
AdobeXDのアートボードに設定できるグリッドで、iPadやSurfaceなどのアートボードのプリセットを使ってBootstrap4のグリッドを作る方を紹介します。 XDでBootstrapを使ったレスポンシブ対応サイトを作成する場合に便利です。 XDでBootstrap4のグリッドを作る方法 ここではXDのスタイルパネルにある「グリッド」設定を使ってBootstrap4のグリッドを作ってみます。 やり方はアートボードを選択した状態で、右側のスタイルパネルの下にある「レイアウト」にチェックをつけます。あとは「列」を12に、「段間幅」を30にして、左右のマージンを画面幅ごとに設定すれば完了です。 左右マージンの計算方法 左右マージンの計算方法は次の通りです。container幅に-30pxしているのは内側のpaddingを引くためです。
ウェブサイトのデザインといえば、かつてはPhotoshop、自分はFireworksを使っていたりしましたが、近年少しずつトレンドも変わってきました。「Sketch」にはじまり、「AdobeXD」などUI設計に便利な使い勝手の良いソフトが使われるようになり、「figma」も、ブラウザで操作するアプリケーションとは思えないほど多機能で且つ使いやすいソフトです。 そんな中、AdobeXDで作成したファイルをエクスポートしてfigmaにインポート出来ないか、という相談があり、対応した時の覚え書きです。 AdobeXDの.xdからfigmaの.figに変換する いろいろ便利になってきているこのご時世、最初は簡単に出来ると思っていました。しかし、XDからfigmaへの移行は簡単には出来ません。いろいろ調べてみたつもりですが、2020年5月時点では.xdファイルから.figファイルに変換出来そうなのは
AdobeXDのデータからコーディングをする方法【完全版】
XDからコーディングってどうしたらいいの？XDって持ってないけどコーディングできるの？てかXDってそもそもなんのサービスなの？ こんな疑問に答えます。 AdobeXDを使ったコーディング依頼って、初めてだとやり方がわからないですよね。 ですが、AdobeXDからコーディングをするのはとっても簡単です。 私自身も頻繁に、XDでWebデザインを制作してコーディングをしています。 本記事では、XDを使ったコーディングをするやり方について解説をしています。 記事を読み終える頃には、AdobeXDからコーディングができるようになります。
Adobe XD 2020年1月アップデートリリース！コンテンツに応じたレイアウト、新しいプラグインAPIなど #AdobeXD | Adobe Blog
2020年代の幕開けとなるこの1月に、Adobe XDのアップデートがリリースされました。 共同編集、ドキュメント履歴、コンポーネントのステート、共有モードなどを含む、Adobe MAXでのXDメジャーアップデート以降も、私たちチームは開発を続けてきました。12月のアップデートでは、バグ修正、ご報告いただいた問題点の解決、パフォーマンス向上に注力しましたが、新たな１年を始めるにあたって、今月のアップデートでは、コンテンツに応じたレイアウト、強化されたXDプラグインAPIなど待望の機能をお届けします。 私たちは引き続き、UserVoice（英語）に寄せられる機能リクエストやXDの今後についてのTwitter（英語）、Facebook、ならびにコミュニティフォーラム（英語）上でみなさんとの対話を重ねていきたいと思っています。 本記事では1月アップデートに含まれる新機能すべてをご紹介します。 A
【AdobeXD】グループの上からでもアウトライン化（パスに変換）できるプラグインを作った話 更新日：2019/12/26 Webデザインといえば、今まで「Photoshop」「Illustrator」「Sketch」といった感じでしたが、昨今の「AdobeXD」の普及により、弊社でもXDで作成されたデザインを扱う機会が増えてきました。しかし、まだまだ発展途上のXDでは痒いところに手が届かない部分が多いのも事実です。 そこで、今回はXDで個人的に使い勝手が悪いと思っている「パスのアウトライン化」についての記事になります。 Contents XDのアウトライン化は面倒くさいXDにアウトライン化を便利にするプラグインは無かった今回の目標：グループの上からでも「パスに変換」を実行01「manifest.json」と「main.js」を理解しよう02jsで選択してアウトライン化する処理03vue.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
エンジニアがAdobeXDからFigmaに移行して感じたこと | techlab / baigie
JavaScriptでAdobeXDプラグインを作ってマークアップ作業を効率化 - Qiita
AdobeXDのステート機能（コンポーネント状態）を使いこなそう！
【AdobeXD】地味に便利なおすすめプラグイン30選｜サオリ＠webstudyroom
【保存版】AdobeXDからのコーディング方法を徹底解説！【初心者必見】 - PENGIN BLOG
AdobeXDとCCライブラリで、マニュアル作成がはかどるようになった話｜r360studio 森和恵
AdobeXDからPSD を書き出す際の留意点 XDはカラマネ非対応です
AdobeXD Bootstrap4のグリッドの作り方(レスポンシブ対応)
AdobeXDのデータをfigmaで編集できるように移管したい時の対応方法 | 素材の壺
【AdobeXD】グループの上からでもアウトライン化（パスに変換）できるプラグインを作った話 | 東京のホームページ制作 / WEB制作会社 BRISK
www.hmv.co.jp
encount.press
www.news-vouge.com
futaman.futabanet.jp
15drm.com
search.app