Web Designer’s Tips ! の登壇資料です https://web-designers-tips.peatix.com/
AdobeXDの導入活用Tips!Webサイト制作が快適になる
View Slide
ろくぜうどん@rokuzeudon-粟屋元太 Genta Awaya- 2012.03~会社員Webデザイナー- 2018.07転職!! NEW
私とXD
私とXD2015.102016.032017.10Adobe XD Public Preview版 公開Adobe XD CC正式リリースProject Comet発表
2016.08～09UIデザインのオンラインスクール課題でAdobe XD初挑戦私とXD
私とXDベーシックコース エキスパートコース
私とXDベーシックコース エキスパートコース６画面 ×５ファイル
私とXD６画面 ×５ファイル 80画面程度１ファイルだけ❤ベーシックコース エキスパートコース
私とXD実務でも活用開始2016.12～
私とXD圧倒的快適実務でも活用開始2016/08～09
私とXDXD大好き❤Webデザイン制作を快適・円滑にする Adobe XDの役割についてhttps://blog.rokuzeudon.com/entry/adobe-xdデザイン・プロトタイプ制作だけじゃない Adobe XDの魅力について資料作成・共有が快適に！？ビジネスマンにもオススメなデザインツール、AdobeXDhttps://blog.rokuzeudon.com/entry/adobe-xd-case https://mens.esupro.co.jp/entry/AdobeXD
XDとは？
Adobe XD (Experience Design)公式サイト
Adobe XD (Experience Design)webサイト、モバイルアプリ、その他のデザインがこれ 1 つで可能な、まったく新しいUI/UXソリューションです
Adobe XD (Experience Design)
Adobe XD (Experience Design)デザインレイアウト・配色など
Adobe XD (Experience Design)デザイン画面遷移プロトタイピングレイアウト・配色など
Adobe XD (Experience Design)共有/確認デザイン画面遷移プロトタイピングレイアウト・配色など
Adobe XD (Experience Design)共有/確認デザイン 画面遷移プロトタイピングレイアウト・配色などオールインワンなソリューションWeb・アプリUIデザインの
Adobe XD (Experience Design)Webデザインもできる WebデザインもできるWeb制作で主要なAdobeのデザインツール
Adobe XD (Experience Design)Webサイト/アプリのUIデザインに特化Web制作で主要なAdobeのデザインツールNEW
どんな感じで使うのか
-受託Webサイト制作-直受け-納期だいたい1～2ヶ月-ページもだいたい10～20ページとある例どんな感じで使うのか
ディレクターお客様 デザイナー エンジニアどんな感じで使うのかとあるメンバー
ワイヤーフレーム デザイン企画/提案書 コーディングとある制作の流れどんな感じで使うのか
XD使い始める前どんな感じで使うのか
どんな感じで使うのかワイヤーフレーム デザイン企画/提案書 コーディング
どんな感じで使うのかXD使い始めた後
ほぼ Photoshop Only XD + Photoshop/Illustlatorそれぞれの強みを活かす私のWebデザイン制作環境どんな感じで使うのか
過去のデザインデータ構成common/header.psdcommon/footer.psdcommon/part-***.psd00_index.psd01_about.psd02_concept.psd03_plan.psd…common/header-assets/common/footer-assets/common/part-***-assets/00_index-assets/01_about-assets/02_concept-assets/03_plan-assets/…ページ毎に分けてたどんな感じで使うのか
XD使い始めてからimg_assets/img.psdicons_assets/icons.aidesign.xdスッキリ！どんな感じで使うのか
使ってわかった 5つXDのメリット
あらゆる面で時短1.使ってわかったXDのメリット 1/5
1.あらゆる面で時短圧倒的に軽い・早い
1.あらゆる面で時短圧倒的に軽い・早い容量
200MB超 40MBいろんなところに影響リモート作業、共同作業、データのバックアップ etc...1.あらゆる面で時短
1.あらゆる面で時短圧倒的に軽い・早い容量 動作
全ページ・全ディスプレイ対応のアートボード作成してもサクサク動くDEMO11.あらゆる面で時短普通に使ってる限り超快適
1.あらゆる面で時短圧倒的に軽い・早い容量 動作 共有
画像書き出して専用サーバーの指定フォルダにアップして個別にHTML書き換えてベーシック認証して送る 共有リンク送るだけ1.あらゆる面で時短今まで 今DEMO2
使ってわかったXDのメリット 2/5習得がカンタン2.
ワイヤーフレームの作成2.習得がラクLOGO お問い合わせ事業紹介会社案内 採用情報キャッチコピー●●●●●●●●●●●
選択範囲 アートボード長方形/円 テキスト+マウス orトラックパッド操作2.習得がラク
ゼロから作る必要もないhttps://blogs.adobe.com/creativestation/web-adobe-xd-ui-kit-wires-jp2.習得がラク
デザイン制作でも...IllustratorかPhotoshopを使ったことあればすぐ慣れる・学習機会、学習方法がいろいろある公式スターターキット、公式チャンネル、書籍など・2.習得がラク
使ってわかったXDのメリット 3/5やりとりがカンタン3.
画面に映して一緒に見ながらパパッと修正3.やりとりがカンタン
一つのデータにまとまる！あれこれ探す手間が省ける3.やりとりがカンタン
DEMO3プロトタイプのコメント機能が便利どこをどう調整したらいのか意思疎通が楽https://xd.adobe.com/view/1d0721f4‑d0b7‑452c‑b19a‑5814e29104ea/screen/dbf68357‑f199‑47cb‑823f‑fe59e75c77af/pc‑01‑index/3.やりとりがカンタン
使ってわかったXDのメリット 4/5修正作業がカンタン4.
リピートグリッドカラー（アセット）文字スタイルシンボル・・・・後からの修正に強いデザインデータへ4.修正作業がカンタン
使ってわかったXDのメリット 5/5ほぼ毎月アップデート5.
パスワード機能ないのか～数値を演算入力したいなあプロトタイプは固定ヘッダー/フッター機能ないのか～ psd/aiデータインポートできたら良いのにJPGで書き出せないのか～シンボルの文字個別に変えたい5.ほぼ毎月アップデート
パスワード機能ないのか～数値を演算入力したいなあプロトタイプは固定ヘッダー/フッター機能ないのか～ psd/aiデータインポートできたら良いのにJPGで書き出せないのか～シンボルの文字個別に変えたいできるようになった5.ほぼ毎月アップデート
アップデートが毎回楽しみ5.ほぼ毎月アップデート
デザインカンプ作成時に 注意していたこと
Photoshopが得意なことはそっちでやる機能より装飾的な要素が重要になるバナー/ランディングページ作成 大量の画像編集/書き出しデザインカンプ作成時に注意していたこと
書き出したい画像は専用のアートボードか別途psdでデザインカンプ作成時に注意していたことDEMO4
ロゴ/アイコン作成 パスの細やかな調整文字とパス文字とパスデザインカンプ作成時に注意していたことIllustratorが得意なことはそっちでやる
複数オブジェクトの拡大・縮小は慎重にDEMOデザインカンプ作成時に注意していたこと
正直あんまり 活用してなかった機能
あんまり活用しきれていない機能プロトタイプ
プロトタイピングが求められる環境ではなかったプロトタイプで検証し精度高める コーディングしてから調整・修正あんまり活用しきれていない機能
やってみたけど 正直イマイチだった工夫
あんまり活用しきれていない機能プロジェクト関連情報の集約1.
あんまり活用しきれていない機能扉ページを作成し、サイトマップや状況を集約DEMO5https://xd.adobe.com/view/1d0721f4‑d0b7‑452c‑b19a‑5814e29104ea
あんまり活用しきれていない機能扉ページを作成し、サイトマップや状況を集約https://xd.adobe.com/view/1d0721f4‑d0b7‑452c‑b19a‑5814e29104ea求められる環境ではなかったDEMO5
あんまり活用しきれていない機能CC Libraryの連携2.
あんまり活用しきれていない機能DEMO6Photoshopなどとスムーズに連携できるCmd + Shift + Lでパネル表示
あんまり活用しきれていない機能もう一歩使いやすくなれば…！XD上からライブラリへ追加できない数が多いと一覧で探しにくすぎる・・
転職してからも バリバリ使ってる機能
スクショをいい感じにトリミング転職してからもバリバリ使ってる機能DEMO7
ＸＤに関するオススメの コンテンツ・サイト
公式Adobe XDスターターキットＸＤに関するオススメのコンテンツ・サイトhttps://www.adobe.com/jp/products/xd.html#starterkit基礎編 中級編
#AdobeXDwww.facebook.com/AdobeXDJapan/日本語Facebookページ「Adobe XD Japan」開設！ – Adobe Creative Stationhttps://blogs.adobe.com/creativestation/web-facebook-page-adobe-xd-japan#adobexd_study @adobexdＸＤに関するオススメのコンテンツ・サイトSNSのハッシュタグ・公式アカウント
ＸＤに関するオススメのコンテンツ・サイトアップデート情報最新機能 | Adobe XD CC Adobe Creative Stationhttps://www.adobe.com/jp/products/xd/features.html https://blogs.adobe.com/creativestation/serialization/adobe-xd-update
ＸＤに関するオススメのコンテンツ・サイトAdobe XD Feedbackhttps://adobexd.uservoice.com/
終わりに
XDはいいぞ終わりに圧倒的に軽い・早い1.習得がカンタン2.やりとりがカンタン3.修正作業がカンタン4.ほぼ毎月アップデート5.
全部使う必要はない終わりにXDには魅力的な機能がたくさんある
Enjoy XD!終わりに
rokuzeudon
ozontech
rakus_dev
ncdc
takumma
domehome
marumi
misty_marsden
mkasumi
moco1013
nabemasat
ooyama01
nishina
zenorocha
chrisshort
philnash
sugarenia
caitiem20
garrettdimon
jnunemaker
reverentgeek
mthomps
afnizarnur
chriscoyier
wjessup