タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
エクセルやパワポで作るよりもいろいろな利点があるため気に入っているのですが、思わぬところに落とし穴があったりと、いろいろ工夫が必要なところがあります。 そこで今回は、私がXDで画面仕様書を作る際に気をつけていることと、おすすめの作り方をご紹介します。 今回は下準備編です。 下準備その1：前提資料一式を作る まずはXDで画面仕様書を作る前に、必要な前提資料一式を作ります。これらを作らずに画面仕様書を書き始めてしまうと、書き方が迷走したり、 一つの資料に情報を詰め込みすぎた見にくい資料になってしまいます。 最低限、以下の資料は事前に作るようにしています。 サイトマップ ディレクトリマップ（テンプレート一覧） コンポーネント一覧 フォーム入力項目一覧 ※フォームがある場合 CMS編集項目一覧 ※CMSがある場合 いずれも一覧系の資料になります。画面上の細かい仕様を決める前に、これらの資料を通し
こんにちは、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はそれほどのデザインは揃えていませんが、日本人
昨日、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［キーオブジェクトに整列・分布］ キーオブジェクトに合わせて、整列と分布ができるプラグインです。 整列機能ならデフォルトの機能がありますが「キーオブジェクト」に合わせた整列できないのです。イラレだとデフォルトで使える機能なので、イラレの操作に慣れている人からすると、とても不便に感じます。 このプラグインを使うと、例えば、以下のように「一番右のオブジェクトを基準に天地中央揃え」のようにキーとなる
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
