こんにちわ！最近はフロント開発も担当させていただいてます、Yamamotoです。 今回はエンジニアがデザインを学ぶべく、100のWebサイトのデザイントレースをして、学んだことをまとめてみました。 エンジニアまたは未経験だけど、Webデザインにも興味があるという方の、何かのきっかけになれば幸いです。 目次 なぜ Webデザインを学ぼうと思ったのか デザイントレースについて 100トレースして学んだこと なぜWebデザインを学ぼうと思ったのか ざっくりですが、実務を行いながら以下のように思うことがありました。 細部のデザイン指示がなく、開発の手が止まってしまう どう実装するか目線の発想・提案しか浮かばない 綺麗なコードだけではなく、視野を広げてより良いものを作りたい などなど... デザイナーとエンジニアの業務は差別化されてはいますが、互いに近接し交わる部分も多くあります。そんな中で、業務効
先日ローンチされたAdobe XD Trailから、Adobe XDの使い方がよく分かるワイヤーフレーム・プロトタイプを制作するチュートリアルファイルを紹介します。 Adobe XDの基本操作をはじめ、ワイヤーフレームの作成、スタイルの適用、プロトタイプの作成、コラボレーションなど、実践的な使い方がこれでよく分かります。
デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。 エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。 プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。 プラグインのインストール・アンインストール・実行について インストール プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。 イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスア
「技術＆仲間」と紡ぐ、ゲームUI/UXのワークフロー ～CGWORLD 2019 クリエイティブカンファレンス登壇レポート～ | バナON! | 株式会社バンダイナムコオンライン
2020-01-30 クオリティ第一 ゲーム開発 デザイナー プランナー 「技術＆仲間」と紡ぐ、ゲームUI/UXのワークフロー ～CGWORLD 2019 クリエイティブカンファレンス登壇レポート～ 2019年11月3日（日）に開催された『CGWORLD 2019 クリエイティブカンファレンス』にて バンダイナムコオンラインのデザイナーが講演を行ないました。 登壇したのは、ビジュアルデザイナーとして ゲームのUI（ユーザーインターフェース）デザイン、リードビジュアルを担当する太田垣 沙也子さん。 ビジュアル業務のなかでもやや特殊なポジションと言えるUIデザインには、 使いやすく美しいデザインを作るのはもちろん、 プランナーと共にゲームのフローを考え、エンジニアに渡すための実装データを作るといった多岐に渡る業務があります。 その中で今回は「トライ＆エラー」について注目。 『UI! UI! U
Adobe XDステート機能を使いこなそう！ ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 AdobeXD2019年11月の大型アップデートで「ステート機能」が登場し、リッチなインタラクションを作成しやすくなりました。従来はアートボードを複数枚組み合わせて表現するしかなかったのですが、ステート機能の登場によって簡単にできるようになっています。 今回はホバーボタン、スライダー、ハンバーガーメニューなど実例を交えながら、ステート機能の基本と一歩進んだ使い方を紹介します。AdobeXDは使っているけどステート機能は触ったことがない、ステート機能をイマイチ使いこなせてないという方はぜひご覧ください。 ステート機能の基本 簡単にステート機能について振り返っていきます。 ボタンなどの要素は、ユーザー操作によって状態が変わることがあります。たとえば、一般的な「いいねボタン」であれば最低でも「
アウトプットの精度が上がる！「Adobe XDをプロトタイピングに活かす方法」 研修レポート | メンバーズクリエイターズブログ
2021.3.1 アウトプットの精度が上がる！「Adobe XDをプロトタイピングに活かす方法」 研修レポート ツールデザインナレッジ研修 皆さん、こんにちは。 メンバーズキャリアカンパニー所属ディレクターの森山です。 この度、2021年1月26日にオンラインにて開催された「Adobe XDをプロトタイピングに活かす方法」研修を受講しました。 講師は株式会社まぼろし取締役CMOであり、メンバーズキャリアカンパニーの技術顧問も務めてくださっている益子貴寛さんです。 今回の講義は、Adobe XDの機能の中でも、それぞれのワイヤーフレームやデザインをリンクで有機的につなげて、ブラウザで動く画面を作ることができる「プロトタイピング」という機能にフォーカスした内容でした。 ディレクターやマーケター、プランナーなどのノンデザイナー及びノンエンジニア向けの講座ではありましたが、プロトタイピング自体はU
AdobeXDにGoogleスプレッドシートからテキスト情報を流し込むプラグインが便利すぎる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、LIGでWebディレクターをしているなべちゃんです。 Webサイトを制作する際に、クライアントや外部のライターさんにサイトに入れるテキストを依頼をする、というシーンは多いのではないでしょうか？ LIGでもまだテキストが確定していないときは「テキストテキスト……」「ダミーダミー……」と、領域を確保してクライアントやライターさんに依頼をしています。 今回はAdobeXDでワイヤーフレームやデザイン制作をしたあと、Googleスプレッドシートと連携し、Googleスプレッドシート上で書いたテキストがXDに流し込まれるという画期的なプラグインを紹介していきたいと思います！ 実はこのプラグインは、ちゃんれみさんが週に1回開催されているディレクターミーティングで紹介して、「神」「画期的だ」「もっと早くに知りたかった」と歓喜の声が上がっていました👏 私もこのプラグインを知ってからはかなりお
Adobe XDがSketchよりも優れている理由
最近、私の周りでもAdobe XDを使用する人が増えてきました。特に日本では、SketchユーザーよりAdobe XDユーザーの方が勢いがあるように感じます。 SketchとAdobe XDを長きに渡り使用し、その結果Adobe XDを使用することにしたUIデザイナーの比較記事を紹介します。海外だとSketchの方が多く感じてましたが、そういう流れなのでしょうか。 Why Adobe XD is better than Sketch. by Simon Fairhurst 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Sketchの特徴 Adobe XDの特徴 はじめに 私の前回の記事では25,000を超える閲覧と共有があり、SketchとAdobe XDの2つのツールの比較について補足したいと思いました。 前回の記
UIデザイナーはダウンロードしておこう！iOS 14のデザインテンプレート・UI要素が揃ったAdobe XD用の素材がApple公式からリリース
先週リリースされたばかり、iPhoneやiPadに採用されているiOS 14のデザイン用のテンプレートやUI要素が揃ったAdobe XD用の素材を紹介します。 素材はAdobe XD用だけでなく、Photoshop用やSketch用も揃っており、9月に新しくなったSF Symbols 2もダウンロードできます。 Apple Design Resources UIデザイン素材は、ページのちょい下からダウンロードできます。 iOS 14のAdobe XD用の素材は先週リリースされたばかりで、Photoshop用とSketch用、そしてiOS 13もダウンロードできます。
150種類以上のコンポーネントと50種類以上のすぐに使えるスマホスクリーンが含まれたワイヤーレフーム素材を紹介します。 アイデアを素早くプロトタイプ化するためのスターターキットで、スタイルガイドを利用して新しいコンポーネントやスクリーンを簡単に作成することもできます。 かわいいデザインで、見るだけでも楽しめます！
知れば知るほど、レベルアップ！「企画と設計をしっかりとつなぐ！レベルの高い成果物を生み出すためのAdobe XD活用術」研修レポート | メンバーズクリエイターズブログ
2021.1.12 知れば知るほど、レベルアップ！「企画と設計をしっかりとつなぐ！レベルの高い成果物を生み出すためのAdobe XD活用術」研修レポート ウェビナーオンラインイベントナレッジ 皆さん、こんにちは！メンバーズキャリアカンパニー所属の鷲澤（わしざわ）です。2020年4月1日に入社いたしました。 この度、2020年11月19日（木）オンライン開催された「企画と設計をしっかりとつなぐ！レベルの高い成果物を生み出すためのAdobe XD活用術」研修を受講しました。 講師はメンバーズキャリアカンパニーの技術顧問、株式会社まぼろし取締役CMO 益子 貴寛先生です！ 高いレベルで成果物を制作する為に必要不可欠なAdobe XD。 益子先生に、使いこなし術をトータルで分かりやすく解説していただきました。 Adobe XDとは？ Adobe XDとは、Adobeが提供しているオールインワンのU
WebやアプリのUIデザイン制作に使われる機会の多いAdobe XDですが、「プラグイン」を活用することによってもっと便利に使うことができます。 現在では様々なプラグインが登場していて、どのプラグインを使えばいいのか分からないという方も多いのではないでしょうか。 今回は、Adobe XDのおすすめプラグインをまとめてご紹介したいと思います。 2020年版：おすすめの人気UIデザインツールを徹底比較！【Figma / XD / Sketch】 現在は、デザインツール戦国時代とも言われるように、様々なデザインツールが競争を繰り広げています。 UIデザインを作るための「UIデザインツール」もどんどん進化していて、個性的なツールが多数登場していま... Web Design Trends XDにプラグインを追加する方法 XDでプラグインを追加する場合には、メニューから「プラグイン＞プラグインを見つ
Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 Adobe XDの2020年6月の大型アップデートでは、目玉機能として「スクロールグループ」と「スタック」が搭載されました。 「スクロールグループ」はアートボードとは別のスクロール領域を定義できる機能、「スタック」はオブジェクトの並び順と間隔を管理できる機能です。 とくに「スタック」は使いこなせるかどうかで、デザイン制作のスピードがかなり変わってくるのでしっかりと覚えておきましょう！ スクロールグループの使い方 スクロール領域を定義できる「スクロールグループ」が登場しました。「水平方向にスクロール」「垂直方向にスクロール」「水平方向と垂直方向にスクロール」という3種類の方向を設定できます。 「水平方向にスクロール」はカルーセルのような、画面幅以上の要素を横スクロールさせるのに便利です。
先日、Adobe XDの2020年3月の大型アップデートが公開されました。今回の目玉機能は「アンカーリンク」そして「オーディオの再生」です。これらのプロトタイプの可能性を拡げてくれる機能の使い方と注意点を紹介します。 その他にも「タップトリガーでの複数のアクション」「コンテンツに応じたエリア内テキストのサイズ変更のショートカット」「画像の置き換え」といった機能も登場しました。 Adobe XDを普段から使っている方には最新機能の復習として、使っていない方にはAdobe XDの進化を感じられる内容になっています！ アンカーリンク 同じページ上の特定のポイントまでスクロールするリンクの一種である「アンカーリンク」が登場しました。 プロトタイプモードでアンカーリンクしたい要素から、スクロール先にリンクを繋ぐだけで設定は完了です。同一ページ内でリンクを繋ぐと自動的にアクション「スクロール先」が設定
Adobe XDは、Adobeが提供しているデザインオールインワンツールです。UI/UXデザイナーは特に活用したいツールとなっており、日本語にも対応しています。デザイナー以外もデザインを構築する機会も多く「デザインの知識がなくても本当につかえるの？」といった心配もあるかと思います。 そこで今回は、Adobe XDの使い方について解説します。 Adobe XDとは Adobe XDとは、Webサイトはもちろん、モバイルアプリなどのデザインに適しており、正確で高い品質の作業をバックアップしてくれるツールです。コーティング知識がなくとも利用できる、スピード感と直感的な操作を実現しています。 その秘密はテンプレートにあります。好みのものを組み合わせればオリジナリティのあるプロトタイプの作成も可能です。 作成したデザインはチームメンバーへの共有も可能。Windows・Mac・iOS・Androidと
UIキットとは、画面デザインやレイアウト、さらにパーツごとのデザインなどが集まったデザイン集のようなものです。 UIキットを参考にすることで、優れたデザインのアイデアを見つけることができたり、フリーのUIキットであればそのパーツを組み合わせて短時間でクオリティが高いUIデザインを作ることもできます。 今回は、おすすめのAdobe XDのUIキットをご紹介したいと思います。 2020年版：おすすめの人気UIデザインツールを徹底比較！【Figma / XD / Sketch】 現在は、デザインツール戦国時代とも言われるように、様々なデザインツールが競争を繰り広げています。 UIデザインを作るための「UIデザインツール」もどんどん進化していて、個性的なツールが多数登場していま... Web Design Trends
XDを使った大規模プロジェクトのデザイン手法 | クリエイターのための総合情報サイト CREATIVE VILLAGE
Adobe XDが正式リリースされて約3年。そろそろプロジェクトに導入してみたい。でも、まだ実際のプロジェクトで本格的に導入したことがない…という方もいらっしゃるのではないでしょうか。 そこで、複数人のデザイナーが関わる大きなプロジェクトにおいて、XDを用いた効率的かつ品質を落とさないデザインの進め方をご紹介させていただきます。 金本 幸奈（かねもと・ゆきな） 株式会社メンバーズ UX/UIデザイナー2014年中途入社。大手キャリアアプリのUX/UIデザイン監修、企業サイトやメディアサイトのリニューアルでは情報設計からデザイン領域まで担当。開発の知見を活かし、CMS組み込みを考慮したデザイン支援やデザインガイドラインの策定を中心に行なっています。重度のガジェットヲタク。 デザインをする上での制約 まずはじめに、会社員として働くデザイナーのみなさまは、様々な制約がある中でいかによいデザインを
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 2019年8月アップデートリリース！CSSコード自動生成（第一弾）、ローカルでのPhotoshop編集連携、コンポーネントの操作性改善など #AdobeXD
Adobe XD 2019年8月アップデートリリース！CSSコード自動生成（第一弾）、ローカルでのPhotoshop編集連携、コンポーネントの操作性改善など #AdobeXD 連載 Adobe XD アップデート Adobe XDは、デザインチームが素晴らしい体験を創り出すための、生きたプラットフォームであり、幅広いクリエイティブワークフローを支援するために、常に進化し続けています。今月のアップデートでは、新しく追加された「プラグイン」パネルを使ったこれまでにないプラグイン利用法、XDとPhotoshopの連携をさらに強化する機能、そしてデザインスペックから開発者がコピー＆ペースト可能なCSSコードを自動生成する機能を追加しました。加えて、作業効率をアップするために、コンポーネントの操作性に重要な改善を実施しました。 ぜひ最新バージョンのXDをダウンロードし、アップデートに含まれるすべての
チュートリアル動画 - Adobe XD Trail
オブジェクトの塗り、線、ドロップシャドウの設定 1/3（塗り） Adobe XD でオブジェクトへカラーの塗りを適用するには、まずオブジェクトを選択して、次にカラーピッカーを表示します。 カラーフィールドとカラースライダーを使用して色を調整する...
小規模WEB制作のための簡易的なスタイルガイド
世間一般では「スタイルガイド」というと、大規模サイトや長期間運用するサービスのためのものが多いようです。私が作っているのはそこまで本格的ではないので、社内では「パーツ集」と呼んでいます。 それまでの課題 パーツ集を作る前は、コーディング担当者とのすれ違いがありました。 アニメーションを作っても気付かれない ドロップダウンやボタンのアニメーションをプロトタイプで作っておいても、実装者に気づかれず「ここどうするの？」と聞かれることもありました。 ドキュメントアセットを見てね、は通じない XDのドキュメントアセットのカラーや文字スタイルに命名してテキストスタイルを登録しておいても、行間や書体が違ってしまうことも悩みでした。文字間（letter-spacing）などは特に空気！ 自分の一貫性も揺らぐ 初案を作ってから次のデザイン時まで期間が空いたりすると、自分でもデザインの一貫性が保てないことも課
Adobe XDでモバイルファーストのWebデザイン入門 第2回: ワイヤーフレームをサクサクつくろう！ | Adobe Blog
本連載の第1回では、Adobe XDを使い始める前に知っておきたい基礎知識をご説明しました。第2回からは、実際にWebサイトのデザインに取り掛かります。制作するのは【架空のミュージシャンのWebサイト】です。 この記事では、デザインの最初のステップとして、XDの［長方形ツール］と［テキストツール］を使い、ワイヤーフレームを作成する手順を解説します。XDを使うと、ワイヤーフレームを直感的にサクサクつくることができます。特に［リピートグリッド］は、コンテンツをいくつも並べては直すことの多いワイヤーフレーム作成の本当に強力な味方です。 なお今回は、ワイヤーフレームのラフスケッチが存在する状態からの作業を想定しています。このように、アイデアレベルのデザインを、実際にデバイスの画面で確認しながら形にするにはXDは最適のツールです。もちろん、ゼロからXDを使ってワイヤーフレームを試行錯誤するのもオスス
WEBデザインはAdobe Photoshop一択だったのですが、 最近はすっかりAdobe XDにはまってます。 今まで、食わず嫌いでなかなか試すことが出来なかったのですが、 いざ使ってみると、その簡単さに驚愕せざるを得ません。。 パッと長所を上げただけでも ・とっても軽量で使いやすい ・リピートグリッドで繰り返し要素も簡単 ・プレビュー機能で、クライアントや外部プログラマーとの共有も楽々 ・コンポーネント化することで、アートボードをまたがって共通部分の修正も楽々 ・プロトタイプ機能でページの変遷イメージも簡単作成 と、良いことづくめのXD。 使ってみて気になったところは ・画像系の処理はPhotoshopとの併用が必須 ・pngなどのオブジェクトなどの色変更は結構厄介 ・レイヤー効果でやっていたようなことがしづらい といったところでしょうか。 それも、慣れてくれば問題ないかなという感じ
GitHub - kyubuns/AkyuiUnity: Adobe XD to Akyui to Unity UI
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは！ 7月に入社したデザイナーの赤沼です！ 皆さんは「Adobe XD」使いこなしていますか？ ニジボックスでは社内に専門のSlackチャンネルもあるほど、Adobe XDは活用されています。 その中でよく話題に出るのが「プラグイン」についてです。 「このプラグインが良かった！」 「この問題を解決できるプラグインはありませんか？」などなど。 そこで今回、 「プラグインが多すぎてどれから入れたらいいのかわからない‼︎」という方に向けて、 おすすめ無料プラグインをカテゴリーごとに紹介します！ Adobe XDプラグインのインストール方法 Adobe XDのプラグインをインストールする方法は２つあります。 Adobe XD内のプラグインパネルから直接インストール Web上からダウンロードしたものをインストール 1. Adobe XD内のプラグインパネルから直接インストール Adobe X
きゅぶんず 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（以下、XD）プラグインは、異なるフォントサイズの複数のテキストオブジェクトの行間を、CSSのline-heightのように倍数で指定し、一括置換するためのプラグインです。 こちらからダウンロードできます。 Line Height - Adobe XD Plugin 異なるフォントサイズの複数のテキストオブジェクトの行間を、CSSのline-heightのように倍数で指定し、一括置換するためのAdobe XDプラグインです。
公式テンプレートを使ってAdobe XDのプラグインを自作してみよう ～starter project導入編～ | ビジネスとIT活用に役立つ情報（株式会社アーティス）
弊社ではwebデザイン作成前のプロトタイプを構築する際にAdobeXD（以下XD）を利用する機会が増えてきました。 XDは軽量・シンプルで使い勝手の良いツールなのですが、機能が限定的で痒い所に手が届かないこともしばしば。。。 そのような時に「何か良いプラグインはないかな」とインターネット等で検索していたのですが、「プラグインを自分で作れればおもしろいのでは？」と考え調べてみることにしました。 プラグインとは プラグインとはXDの操作を拡張することができる機能で、ユーザーアクションの自動化や複数のファイルへの操作のように、繰り返し行われるような作業を自動化する際によく利用されます。 Adobe社が提供しているPhotoshop等の製品でも提供されている機能ですが、2018年10月のアップデートによりバージョン13.0以降のXDでもプラグイン機能が提供されるようになりました。
はじめに これは、Adobe XDからPrefabを自動生成できるライブラリAkyuiUnityをオススメする際に、 「そもそもUIをAdobe XDで作れると何が嬉しいの？」と聞かれた時用の記事です。 この記事では「デザイナーさん」と「プログラマーさん」という2人の登場人物が出てきます。 個人または少人数の開発で、これらを1人でやっている人も多いでしょう。 それでも、この2つの作業を頭の切替なしに出来るとは思いません。 そのため、ここでは「デザイナーさん」と「プログラマーさん」の2人がいるという体で話を進めます。 また、今回作ったライブラリがAdobe XD用なのでAdobe XDと書いてますが、特にXDに限った話ではないのでsketchでもPhotoshopでも適当に読み替えてください。 今まで これら2人のよくあるワークフローを見てみましょう。 [1] デザイナーさん：どういう画面に
Adobe XD ユーザーグループ名古屋 vol.3 https://xdstudy-nagoya.connpass.com/event/139537/
Design, Test, & Share VR InterfacesInstant VR Prototyping. Test in WebVR.Design in 2D like you always do. Test instantly in WebVR & share with developers & stakeholders. Get Plugin Now
ディレクターがワイヤーフレーミングにAdobe XDを導入してみた。【デザイン編】｜Koichiro Miyoshi｜note
こんにちは。広告キャンペーンを中心にWebサイトからスマホアプリまで、デジタルコンテンツのディレクションやプランニング、UI/UX設計をしているMiyoshi Koichiroです。 前回の投稿で、ひととおりAdobe XDの基本操作を覚えたところで、今回は実際にワイヤーフレームを作成していきます。 もくじ ・UIキットとマテリアルアイコンをダウンロードしよう ・プリセットからワイヤーフレーミングを始めよう ・コピペで複製しながらアートボードを追加していこう ・使いまわせるアセットを貯めていこう ・よく使うパーツは効率的にシンボル化しておこう ・リピートグリッドは外部ファイルで効率よく更新しよう ・自分なりのルールを決めよう ・ショートカットをもっと使いこなそう ・レイヤー構造の整理をしよう ・アートボードごとに画像で書き出そう ・今後のアップデートに期待したいポイント制作環境繰り返しにな
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)
WEB制作で役立つデザインツール『Adobe XD』のアートボードの使い方を解説します。基本的な使用方法からWEB制作の実例まで、イラスト付きで分かりやすく解説してゆきます。XDの使い方が知りたい方、デザインを効率的に作成したい方、WEB制作を学習中の方は必見の内容です。
みなさんこんにちは！デザイナーの古屋です。 XDで配置したベクター素材を拡大縮小する際に、 縦横比を固定していても崩れてしまうことはありませんか？ 今回はその原因と解決方法をご紹介いたします。 （最初は下記のブログにまとめて記載するつもりだったのですが、 説明が長くなりましたので分けることにいたしました。） XDでの拡大縮小は線幅に注意！ 原因 素材が崩れてしまう原因は、「レスポンシブサイズを変更」に チェックが入っているためです。 解決方法 方法１）「レスポンシブサイズを変更」をオフ 「レスポンシブサイズを変更」をオフにし、縦横比を固定することで 全体のバランスを変えずに拡大縮小することができます。 方法２）Shiftキーを押しながら Shiftキーを押しながら拡大縮小すると、 「レスポンシブサイズを変更」をオフにしなくても同様の結果が得られます。 オブジェクトの大きさを数値で決めたい場
動画で学ぶ。 自由に使う。 Adobe XD を使いこなせれば、 あなたのアイデアを自在に形にすることができるはず。 学びからさらなる高みを目指しませんか。 Tutorial XDの基本操作を3分動画で分かりやすく解説！ シェイプの描き方や、ドロップシャドウの付け方などの基本的な操作から、コンポーネントの様々な機能や共有方法の紹介まで、Adobe XDの使い方を動画で丁寧に紹介します。
【現役デザイナーが解説】Figmaとは？メリットとデメリット、AdobeXDやSketchとの違いをまとめました。 2023年3月27日 Figma AdobeXD, Figma, Sketch, デザインツール, 機能紹介 「FigmaとAdobe XDとSketch、結局どれを選べばいいの？」 本記事では、こんなお悩みを解決します。 近年デザイン業界で大きな注目を集めているデザインツール「Figma」。多くの大手企業でも使われており、もはやデザインツールの主流となっています。 2022年秋にAdobe社がFigmaを買収したことで注目度が一気に上がりましたが、「AdobeXDやSketchとの違いがよくわからない」「結局どれを選べばいいの？」という方も多いのではないでしょうか。 そこで、今回はUIデザインツール「Figma」でできることやメリット・デメリット、Adobe XDやSket
XD 吹き出しの作り方
吹き出しを一から作成してみました。 お馴染みの吹き出しは、バナー広告やランディングページの作成など、幅広く使用できると思います。 完成物は色々なサイトで落ちていると思いますが、自分でアレンジできたら自由度も高いですし、簡単なので、たまには自作してみるのもよいのではないでしょうか。 以外と吹き出しを自作する記事が少なかったので書き起こしてみました。 はじめにこんなかんじの、もくもくな吹き出しを作成していきます。 吹き出し本体の作成雲みたいなもくもくの本体は楕円のコピペで作成します。 楕円を重ねるはじめに、楕円作成ツールで適当な楕円を描画しましょう。 選択ツールに戻します。 また、線の太さを調整します。ここではサイズを「7」に変更しました。 コピペで楕円を重ねていきます。 楕円を合体重ねた楕円の集まりを一つの図形にします。 ドラッグドロップで楕円を選択しましょう。 「合体」アイコンを選択しまし
人気のデザインツール『Adobe XD』の使い方を、画像付きでくわしく解説してゆきます。この記事を読めばXDの使い方が分かり、デザイン作業に役立てることが出来ます。WEBデザインを学習中の方、WEBサイト制作を学習中の方はぜひご確認ください。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザイン100トレース | Hypertext Candy
Adobe XDの使い方がこれでよく分かる！Adobe公式、ワイヤーフレーム・プロトタイプのチュートリアルファイル
デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 - NxWorld
Adobe XDステート機能を使いこなそう！ - ホバー、カルーセル、ハンバーガーメニューの効率的な作り方 - ICS MEDIA
CC0の太っ腹ライセンス！スタイルガイドと150種類以上のコンポーネントが揃ったワイヤーフレーム素材 -Contra
2020年版：XDがもっと便利に！おすすめのプラグインまとめ | Web Design Trends
Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 - ICS MEDIA
待望のアンカーリンクとオーディオ機能が登場！ Adobe XDでプロトタイプに役立つ新機能まとめ - ICS MEDIA
Adobe XDの基本的な使い方を解説！専門知識不要でUI・UXデザインが簡単に！
2020年版：Adobe XDのおすすめUIキット18選 | Web Design Trends
Adobe XDでウェブデザインを加速する！[第１回] Photoshopユーザー的、Adobe XDコラボのススメ
windowsでAdobe XDを使ってて、画面を左右移動できないでハマった
【現役UIデザイナーおすすめ！】Adobe XDの無料プラグイン９選
Adobe XDで行間をCSSライクに設定できるプラグインを公開しました
Adobe XDからUnityのPrefabを自動生成出来ると何が嬉しいの？ - きゅぶろぐ
実務で活かすXD！制作を支える取り組みと代表機能の活用術
DraftXR - Instant VR Prototyping
Adobe XDのアートボードの使い方を解説する【初心者向き】
【XD】素材のレイアウトを崩さずに拡大縮小する方法 | ホワイトボードオフィシャルブログ
Adobe XD Trail - 動画でXDを学ぶ総合学習プログラム
【現役デザイナーが解説】Figmaとは？メリットとデメリット、AdobeXDやSketchとの違いをまとめました。
Adobe XDの使い方を画像付きでやさしく解説【初心者向き】