メンバーズ｜Members Co.,Ltd.DX現場支援で顧客と共に 社会変革をリードする メンバーズは、お客さまのDXチームに伴走し、「DX投資のROI最大化」を実現します。 お問い合わせ
Adobe XD 2021年4～7月のアップデートによる新機能を紹介 | パソコン工房 NEXMAG
スライドスイッチを作成し、強化された表現力を実感する スライドスイッチを作りながら、各新機能を見ていきます。特に今回はスライドスイッチ作成のためのチュートリアルファイルと素材ファイルを用意しましたので、下記よりダウンロードして一緒に作ってみてください。 チュートリアルファイル： https://stylograph.com/nexmag/xd-03-tutorial.zip ※筆者の都合などにより、データは削除される場合があります ※ダウンロードデータを第三者に配布したり、インターネット上で配信することを禁止いたします では、早速スライドスイッチとなるコンポーネントを作ります。 まず線ツールと楕円形ツールを使って、スライドするベースとつまみがある形を作成してください。後から飾りをつけていきたいので、それぞれをグループ化して「ベース」と「つかみ」という名前を付けておきます。さらに、ベースとつ
株式会社LYZON
このAdobe XD（以下、XD）プラグインは、異なるフォントサイズの複数のテキストオブジェクトの行間を、CSSのline-heightのように倍数で指定し、一括置換するためのプラグインです。 こちらからダウンロードできます。 Line Height - Adobe XD Plugin 異なるフォントサイズの複数のテキストオブジェクトの行間を、CSSのline-heightのように倍数で指定し、一括置換するためのAdobe XDプラグインです。 リンクを開くと、XDを開くアラートが表示されるので、手順にしたがってインストールしてください。 XDのプラグイン検索で「line height」と検索しても出てきます。 「Line Height」プラグインの使い方 説明不要なほど簡単なプラグインですが、プラグインでできることも含めて紹介します。 1. テキストオブジェクトを選択しましょう 複数のテ
Adobe XDでウェブデザインを加速する！[第5回] 「共有」モードからはじめるチーム間コミュニケーション | Adobe Blog
ウェブサイトやアプリのデザインでは、他のメンバーの意見を聞くための「レビュー」の工程がとても大切です。ひとりのデザイナーが「完璧に」つくり込んだデザインが、後からクライアントの意図とずれていると判明する状況は誰しも避けたいことでしょう。またデザイン次第で、その後のコーディングや改修が難しくなるケースもあります。デザイナーに求められているのは、段階を追って少しずつデザインを共有して、レビューにより集めた意見をデザインへ反映していく進行です。 Photoshopでは、作業中のページデザインを丸ごと画像として書き出せます。一方、修正点の伝達、リンクエリアなどのデザインの解釈、バージョンの把握など、デザインのコミュニケーションには様々な工夫が必要です。また、コーディングの工程では、エンジニアがPhotoshopを操作しなければならないケースも度々発生します。 これに対し、Adobe XDの「共有」
![Adobe XDでウェブデザインを加速する！[第5回] 「共有」モードからはじめるチーム間コミュニケーション | Adobe Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/b11347c7c6978baa191928fa5d3f1a459c43e838/height=288;version=1;width=512/https%3A%2F%2Fblogs.adobe.com%2Fjapan%2Fwp-content%2Fuploads%2F2020%2F11%2Fheader5-1024x564.png)
Adobe XDの使い方を画像付きでやさしく解説【初心者向き】
人気のデザインツール『Adobe XD』の使い方を、画像付きでくわしく解説してゆきます。この記事を読めばXDの使い方が分かり、デザイン作業に役立てることが出来ます。WEBデザインを学習中の方、WEBサイト制作を学習中の方はぜひご確認ください。
Adobe XDでウェブデザインを加速する！[第１回] Photoshopユーザー的、Adobe XDコラボのススメ
Adobe XDでウェブデザインを加速する！[第１回] Photoshopユーザー的、Adobe XDコラボのススメ 連載 Adobe XDでウェブデザインを加速する！ ウェブの黎明期以来、多くのデザイナーがPhotoshopを使ってサイトデザインに取り組んできました。その一方で、近年はAdobe XDでデザイン制作をする人も増えています。では、両者の違いはどこにあるのでしょうか？ この連載では、Photoshopに馴染みのあるウェブデザイナーの皆さんに向けて、より効率的にウェブデザイン制作が行えるように、Photoshopのデザインを活かしたAdobe XDの使い方を解説します。 今回は、XDの位置づけを理解することを目的とし、XDのデザインツールとしての特徴や使用する際の注意点を解説します。 Photoshopを使ったウェブデザイン 人目を引くための派手な見た目のキャンペーンサイトなど
![Adobe XDでウェブデザインを加速する！[第１回] Photoshopユーザー的、Adobe XDコラボのススメ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4cfc9214ed8155b1cdaca967c605bf99f4c4ecd/height=288;version=1;width=512/https%3A%2F%2Fblog.adobe.com%2Fjp%2Fpublish%2F2020%2F08%2F31%2Fmedia_184e6bc0e6bb8f6d3d5109380f0a32eeebc8d7c6d.png%3Fwidth%3D1200%26format%3Dpjpg%26optimize%3Dmedium)
XD初心者の目からウロコ！「ディレクターが押さえておきたいAdobe XDテクニック2020」研修レポート | 採用情報 | メンバーズ
XD初心者の目からウロコ！「ディレクターが押さえておきたいAdobe XDテクニック2020」研修レポート みなさん、こんにちは。メンバーズキャリアカンパニーの江口です。 中途入社5年目、数字を見て考えることやメルマガ配信が得意なディレクターです。 8月26日（水）、オンラインで開催された「ディレクターが押さえておきたいAdobe XDテクニック2020」研修を受講しました。 今回はメンバーズキャリアカンパニーの技術顧問 株式会社まぼろし取締役CMO 益子 貴寛先生から、ディレクター向けのAdobe XD活用方法を教わる貴重な機会！ 社内外200人弱がエントリーする、大規模なオンライン研修となりました。 すごいよ！Adobe XD！ 「Adobe XD」（以下XD）は最近注目のデザイン・プロトタイピングツール。 社内クリエイターの中でもよく話題に上がり、すでに業務で活用している人や、業務へ
Adobe XDでモバイルファーストのWebデザイン入門 第2回: ワイヤーフレームをサクサクつくろう！ | Adobe Blog
本連載の第1回では、Adobe XDを使い始める前に知っておきたい基礎知識をご説明しました。第2回からは、実際にWebサイトのデザインに取り掛かります。制作するのは【架空のミュージシャンのWebサイト】です。 この記事では、デザインの最初のステップとして、XDの［長方形ツール］と［テキストツール］を使い、ワイヤーフレームを作成する手順を解説します。XDを使うと、ワイヤーフレームを直感的にサクサクつくることができます。特に［リピートグリッド］は、コンテンツをいくつも並べては直すことの多いワイヤーフレーム作成の本当に強力な味方です。 なお今回は、ワイヤーフレームのラフスケッチが存在する状態からの作業を想定しています。このように、アイデアレベルのデザインを、実際にデバイスの画面で確認しながら形にするにはXDは最適のツールです。もちろん、ゼロからXDを使ってワイヤーフレームを試行錯誤するのもオスス
AdobeXDのリピートグリッドを使ってコンテンツを一括で流し込む方法 | ビジネスとIT活用に役立つ情報（株式会社アーティス）
リピートグリッドを利用することでコンポーネントを繰り返すようなデザインを効果的に作成することができるようになりましたが、今回は作成されたコンポーネントに対してコンテンツを一括で登録する方法を紹介します。 前回同様、スマートフォンを想定した下記のリストレイアウトをサンプルとして利用します。 画像コンテンツの流し込み 画像コンテンツの流し込みは非常に簡単で、対象となる画像を選択してコンポーネントにドラッグ&ドロップするだけで完了します。流し込みたい画像をあらかじめ用意して、デスクトップ等のフォルダにまとめておくとスムーズに作業が行えます。 操作方法 登録したい画像をまとめて選択して、コンポーネント上にある任意のオブジェクトにドラッグ&ドロップします。 ドラッグ&ドロップした画像がリピートグリッドで作成された各コンポーネントのオブジェクトに順番に反映されました。 画像はオブジェクトのサイズに合わ
デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 - NxWorld
デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。 エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。 プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。 プラグインのインストール・アンインストール・実行について インストール プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。 イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスア
Adobe XDでアプリのプロトタイプを作る（初心者向け）
2018年はAdobe XDがぐっと使いやすくなり、プロトタイプ制作が捗った年でした。ある程度XDを使い慣れた人向けの記事は出揃ってきたと思うので、初心者さんでも「明日から作れる！」プロトタイプの作り方をご紹介します。 この記事は「Adobe XD Advent Calendar 2018」9日目の記事です。 今回プロトタイプに盛り込む機能は以下の通り。 スプラッシュ画像 インクリメンタルサーチ（文字を入れるとリアルタイムで絞り込む） 「もっと見る」アコーディオン風ボタン ポップアップ（モーダルウィンドウ） まずは、プロトタイプの画面デザインを作る まずは画面を作らないといけません。 1から作ってもいいんですが、XDで使える便利なUIキットが配布されているので活用しましょう。（今回はiOS風文字入力キーボード、ヘッダーなどはUIキットを使っています） Apple Design Resour
実務で活かすXD！制作を支える取り組みと代表機能の活用術
Adobe XD ユーザーグループ名古屋 vol.3 https://xdstudy-nagoya.connpass.com/event/139537/
シンボルからコンポーネントへ [3分で分かるAdobe XDアップデート]｜Kouhei Hayashi / はやし こうへい｜note
「2019年上半期最大」と言われるAdobe XDのアップデートが、5/14(日本時間)にやってきました。 具体的に追加された機能の一覧は、こちらのAdobeさんのオフィシャルブログをご覧ください。 その中でも今回は「シンボル機能の廃止」「コンポーネント機能の登場」について、シュパッと分かりやすく解説します！ これまであった「シンボル」とは？主にボタンやアイコンなど、1つのプロジェクトにおいて繰り返し使うパーツを「シンボル」として登録し、スタンプのように同ドキュメント内で再利用ができる、さらに後から一括での編集が可能、という十分にありがたーい機能でした。 しかしそのコピーに対して、個別にサイズやカラーを変更することができません…この制約さえクリアできれば最高なのに！！ そんな歯痒い面を持ち合わせていたシンボルちゃん。 「シンボル」に変わり「コンポーネント」が登場。そんな制約を取り払い、「シ
![シンボルからコンポーネントへ [3分で分かるAdobe XDアップデート]｜Kouhei Hayashi / はやし こうへい｜note](https://cdn-ak-scissors.b.st-hatena.com/image/square/ee5ad6b176283ba030857eb217f5fab66e095f81/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F11710929%2Frectangle_large_type_2_67acdd917033d09f66fd6799066404ee.jpeg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
デザイン制作の効率化に役立つ! AdobeXDのコンポーネント入門 - ICS MEDIA
2019年5月のアップデートでシンボルが廃止され、代わりに「コンポーネント」が実装されました。従来のシンボルに比べ柔軟なパーツのバリエーション作成が可能で、またドキュメント間での同期が行えるため複数人での作業やアセットの再利用がより効率的にできるようになりました。 従来のシンボルの機能と課題 シンボルは、ドキュメント内に同じ要素を繰り返し配置する場合に使用します。要素をシンボル化して配置することで、後からまとめて変更できるのが特徴です。シンボル内の要素の位置や大きさなどを変更すると、シンボルのコピーすべてに反映されます。 またテキストとビットマップは個別に設定可能で、たとえばボタンのテキストだけを変更するといったことができます。しかし、マウスオーバーや非アクティブ時のデザインで色や線を変更したい場合は変更が同期されてしまうため、別のシンボルとする必要がありました。 コンポーネントではこうい
Adobe XD 2019年8月アップデートリリース！CSSコード自動生成（第一弾）、ローカルでのPhotoshop編集連携、コンポーネントの操作性改善など #AdobeXD
Adobe XD 2019年8月アップデートリリース！CSSコード自動生成（第一弾）、ローカルでのPhotoshop編集連携、コンポーネントの操作性改善など #AdobeXD 連載 Adobe XD アップデート Adobe XDは、デザインチームが素晴らしい体験を創り出すための、生きたプラットフォームであり、幅広いクリエイティブワークフローを支援するために、常に進化し続けています。今月のアップデートでは、新しく追加された「プラグイン」パネルを使ったこれまでにないプラグイン利用法、XDとPhotoshopの連携をさらに強化する機能、そしてデザインスペックから開発者がコピー＆ペースト可能なCSSコードを自動生成する機能を追加しました。加えて、作業効率をアップするために、コンポーネントの操作性に重要な改善を実施しました。 ぜひ最新バージョンのXDをダウンロードし、アップデートに含まれるすべての
ディレクターがワイヤーフレーミングにAdobe XDを導入してみた。【デザイン編】｜Koichiro Miyoshi｜note
こんにちは。広告キャンペーンを中心にWebサイトからスマホアプリまで、デジタルコンテンツのディレクションやプランニング、UI/UX設計をしているMiyoshi Koichiroです。 前回の投稿で、ひととおりAdobe XDの基本操作を覚えたところで、今回は実際にワイヤーフレームを作成していきます。 もくじ ・UIキットとマテリアルアイコンをダウンロードしよう ・プリセットからワイヤーフレーミングを始めよう ・コピペで複製しながらアートボードを追加していこう ・使いまわせるアセットを貯めていこう ・よく使うパーツは効率的にシンボル化しておこう ・リピートグリッドは外部ファイルで効率よく更新しよう ・自分なりのルールを決めよう ・ショートカットをもっと使いこなそう ・レイヤー構造の整理をしよう ・アートボードごとに画像で書き出そう ・今後のアップデートに期待したいポイント制作環境繰り返しにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者でもわかる！Adobe XDの使い方 基本機能&ワークスペース編 | Adlab
Adobe XDのアートボードの使い方を解説する【初心者向き】
UIデザイナーはダウンロードしておこう！iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース
Toolabs DSM Plugin for Adobe XD