サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
こんにちは、LIGでWebディレクターをしているなべちゃんです。 Webサイトを制作する際に、クライアントや外部のライターさんにサイトに入れるテキストを依頼をする、というシーンは多いのではないでしょうか？ LIGでもまだテキストが確定していないときは「テキストテキスト……」「ダミーダミー……」と、領域を確保してクライアントやライターさんに依頼をしています。 今回はAdobeXDでワイヤーフレームやデザイン制作をしたあと、Googleスプレッドシートと連携し、Googleスプレッドシート上で書いたテキストがXDに流し込まれるという画期的なプラグインを紹介していきたいと思います！ 実はこのプラグインは、ちゃんれみさんが週に1回開催されているディレクターミーティングで紹介して、「神」「画期的だ」「もっと早くに知りたかった」と歓喜の声が上がっていました👏 私もこのプラグインを知ってからはかなりお
こんにちは、Webディレクターのイナッチです。 今回は、Adobe XD（以下：XD）で更新しやすいテーブルのひな形を作りましたので、ご紹介します。 せっかくなのでなぜ更新しやすいテーブルを作ろうと思ったのか？ なぜ作れたのか？ などの背景も合わせてご紹介いたします。が、そんなことはいいから早くテーブルを見たい方は、もろもろスキップしてこちらからどうぞ。 XDで更新しやすいテーブルができるまで XDといえばWebサイトなどの画面デザインのためのソフトというイメージですが、その使い勝手の良さから、デザイン以外の場面でも活用する機会が増えてきました。たとえばLIGのアカウントプランナーのノブさんは、企画書（提案書）をXDで作られるそうです。
Adobe公式サイトに記載のある通り、Adobe XDは今すぐのサポート終了ではないものの、サポート終了にむけて長期の予告期間となっているようです。新規の開発も終了しているようですね。それに伴い、XDの代わりとしてFigmaを検討されている方もいるかと思います。 弊社ではAdobe XDからFigmaへの移行を約2年前に行いました。そこで、これまでにエンジニアが両方のツールを使用して感じた、Figmaの利点と使いにくい点をご紹介します。 Figmaの利点 ページ機能でのアートボード整理が便利 Adobe XDでは1つのキャンバスですべてのアートボードを管理するような構造になっていました。 Figmaではページ機能があり、これを利用してアートボードをグループ化できます。ワイヤーフレーム、要件定義、デザインカンプなどのプロジェクトを各ページに分類・整理することで、作業が効率的に進むようになりま
加えて、画面仕様書を書きながら全体の構造や細かい仕様を検討していく過程で、以下の設計資料も同時に更新・精緻化していきます。 画面仕様書と並行して精緻化していく資料 コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 以上が、大まかなフローになります。ここからは、画面仕様書を書いていく各ステップを具体的にご紹介します。 STEP1：アートボードを作る AdobeXDの場合、テンプレートやコンポーネントの数だけアートボードを作成するのがおすすめです。例えばテンプレートが10個、コンポーネントが15個あるなら、アートボードは25個作成します。 前提資料として作成した「テンプレート一覧」や「コンポーネント一覧」に基づいて、IDと名称をアートボード名に設定しておきましょう。 1個のテンプレート（あるいは1個のコンポーネント）に対して複数の表示・動作
以下詳しく紹介していきます。 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はそれほどのデザインは揃えていませんが、日本人
AdventCalender2020「ちょっとした工夫で効率化！01【PR】パソナテック」の19日目です。日付が変わってしまいましたが、寝てないのでまだ19日ということで良しとします。 （テーマは、ちょっとした工夫ですが、「ちょっとした工夫」に収まってないかもしれないので、工夫の導入記事ということで、予めご了承ください。） エディタをカスタマイズや拡張機能を作ることで、日常の作業効率が上がるのは、デベロッパーの皆さんには当然の発想です。また、ブラウザの拡張機能なども、Webマーケティングの業務補助をするツールなどもよく使われるかと思います。拡張機能のような小技で作業効率を上げるというのはエクセルのマクロが、そういった分野のパイオニアといったところでしょうか。 本記事で、デザインツールでの拡張機能/プラグインを作り方を紹介し、ビジネスロジックを設計しているフロントエンド開発者や、LPなどのH
AdobeXD -> Unityに変換するやつ作りました！ 自分で言うのもなんですが、すごいものができたので20秒だけ動画見てください #akyui #unity #adobexd #gamedev https://t.co/pzpPVFfioG
昨日、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. 実際に試し
こんにちは！ イルグルムのUXデザイン室でUI/UXデザイナーをやっている松尾です。 今回は自社プロダクトのUIデザインガイドラインを「XD」から「figma」に移行したプロジェクトの奮闘記をお届けしていきたいと思います！ プロジェクト全体はまだ全て完了しているわけではないのですが、一番ボリュームのあるXD→figmaへのデータ移行作業は山場を超えて一息ついたところで現在執筆しております。 今回は第１章、移行プロジェクトの準備について書き起こしていきたいと思います。 それでは、よろしくお願いします！ まずは移行やってみてどうだった？figma楽しい！短期間でスキル爆上がり 今までよりも作業が効率的に移行に際しての調査や実際の移行作業を通してfigmaに触れる機会が多く、個人的にもかなりスキルアップしました。イルグルムのプロダクトは管理画面系のUIが多く、テーブルデザインやプルダウン、フォー
WebデザインやUIデザインを、AdobeXDで制作される方も多いかと思います。私も今ではXDをメインでWebデザインを制作しています！ 今回は、XDでデザインを制作される際に「入れておくと便利！役に立つ！」おすすめプラグインをご紹介します。オブジェクト関連・アートボード関連・レイヤー関連・テキスト／フォント関連のカテゴリ別でまとめています。 【おすすめXDプラグイン】オブジェクト関連 Singari［キーオブジェクトに整列・分布］ キーオブジェクトに合わせて、整列と分布ができるプラグインです。 整列機能ならデフォルトの機能がありますが「キーオブジェクト」に合わせた整列できないのです。イラレだとデフォルトで使える機能なので、イラレの操作に慣れている人からすると、とても不便に感じます。 このプラグインを使うと、例えば、以下のように「一番右のオブジェクトを基準に天地中央揃え」のようにキーとなる
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変換ラ
ウェブサイトのデザインといえば、かつてはPhotoshop、自分はFireworksを使っていたりしましたが、近年少しずつトレンドも変わってきました。「Sketch」にはじまり、「AdobeXD」などUI設計に便利な使い勝手の良いソフトが使われるようになり、「figma」も、ブラウザで操作するアプリケーションとは思えないほど多機能で且つ使いやすいソフトです。 そんな中、AdobeXDで作成したファイルをエクスポートしてfigmaにインポート出来ないか、という相談があり、対応した時の覚え書きです。 AdobeXDの.xdからfigmaの.figに変換する いろいろ便利になってきているこのご時世、最初は簡単に出来ると思っていました。しかし、XDからfigmaへの移行は簡単には出来ません。いろいろ調べてみたつもりですが、2020年5月時点では.xdファイルから.figファイルに変換出来そうなのは
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
