WebデザイナーのためのXDの使い方【基礎編】

Adobe XDの使い方の基礎編解説です。ビューポートやガイドの使い方からシェイプの様々な使い方、テキストエリアの概念などを解説しています(｀･ω･´)ゞ
Adobe XDはPhotoshopやIllustratorと比較しても使い方は簡単で動作もとても軽量です。まずはXDの基礎をおさえて、柔軟に使えるようにしていきましょう！
＝＝＝　動画学習サービス「unazuki」
Web制作を学べる動画学習サービスを運営しています。
unazuki.online/
・WordPressコンプリートコース
　unazuki.online...
・JavaScriptコース
　unazuki.online...
・HTML & CSSコース
　unazuki.online...
＝＝＝　SNS
■ Twitter： / life_toshindai
＝＝＝　経歴
Webデザイナー・エンジニア
〜 2013 自動車メーカー系の企画職
2014 〜 フリーランスWebデザイナー
2016 〜 法人化
--------------------　簡単な自己紹介
都内でWeb制作をやっています。
苦労した経験をもとに、
KZbinでは過去の自分が欲しかった
知識・技術・マインドなどをスライドやデモ解説で発信しています💪
🏋️‍♂️活動
WordPressやWebデザイン講座など有益な情報を発信。
初心者向けの動画〜超実践向けの動画まで多数公開しています。
再生リストも作っているのでよろしければご覧ください。
✈️出身
福岡県
---------------------------
Webデザイナーとして活躍される方の
知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
(｀･ω･´)ゞ
詳しくはチャンネル概要欄もご覧ください。
#ホームページ
#作り方
#アキユキ

[@けいいち-c8h]

Adobe XD初学者になります。凄い分かり易い動画でデザインカンプ作成のイメージが持てました！ 繰り返し見て、基礎力をしっかり付けたいと思います！

[@mahok8272]

とてもわかりやすかったです！ 20年間グラフィックやっていますが、 最近webにも興味がでてきて、 お勉強したいと思っています。 ありがとうございました😊

[@web5096]

ありがとうございます！ 20年間すごいですね🤗

[@designhills]

アドバンス編でXDを使っていらっしゃったので「もしや？」と思って探したらKZbinで説明があったので、ラッキーでした。いつもの語り口調で安心します。By 551

[@web5096]

XD扱いやすいと思いますのでぜひ使ってみてください。 551美味しいですね…！ ありがとうございます🤗

[@KWashiki]

わかりやすい説明をとても参考になりました。無駄なく短い時間で習得できました。

[@tsugumiつぐみ]

天才です　わかりやすさが神です　 主さまみたいに素敵なデザインをささっと作れるようになるまで頑張って努力します　 動画にしてくださりありがとうございます

[@web5096]

ありがとうございます！

[@のぶ太郎-i6f]

すごく分かりやすかったです！ 市販本で学習するよりもはるかに理解しやすいです。

[@web5096]

本当ですかー！ ありがとうございます🙌 めっちゃ嬉しいです！

[@kazumad89]

ありがとうございます。最初によく使う機能が紹介されていて、分かりやすくてとても助かりました。これからも頑張って下さい

[@mabo-marumiya]

仕事で各自調べて使えと指示が出たのでとても助かりました！ 分かりやすくて嬉しいです😊 ありがとうございます！

[@maikumasohsuke7112]

Webの勉強を始めましたので、Xdを使ってデザインカンプを作りたいと思っているのですが Adobeのチュートリアルでは今一ピンと来なかったのですが、基礎の基礎が良く分かりました。 ありがとうございます。

[@tonoo1040]

先日xd使ってデザインしてた人に便利ですよ って言われて よし!!使ってみよう!!になったけど 本当にこっちの方が簡単　使ってみたいと思います

[@tentenmotif1195]

とても分かりやすく、無駄なくテンポが良いです。 ありがとうございます。

[@なし-i8v]

わかりやすくて、説明に無駄がない！ 自分はフリーランス目指しています。 こういう教科書的な存在があると 心強いです。 頑張ります。

[@MrREred]

理解しやすく、見やすい早さの動画でした。助かります！

[@岩隼]

めちゃくちゃ分かりやすかったです・・・！ ありがとうございます！！ 応用編も今から見ます！！

[@hrmi_pl_i]

使い始めた瞬間に見るべきでした…！とても分かりやすかったです！

[@shun13z9]

聞き取りやすくスピードも丁度良く何より頭に入る、素晴らしい

[@rosemary-np4bv]

丁度XDが気になっているところでした！大変分かりやすい解説をありがとうございました。

[@hidekiwatabe2823]

いつも凄く勉強になってます。大変でしょうがこれからも役立つ情報発信をお願いします。

[@ERIKOKAMIGUCHI]

XDはなんとなくで使ってましたが、とっても参考になりました。 コンテンツ幅てグリッドを付けるの早速やります。 わかりやすい動画をありがとうございます。

[@web5096]

参考にしていただけたようでよかったです！

[@ayataka9327]

おはようございます！ とても分かりやすいです、ありがとうございます！！

[@kotoetakano4478]

デザインカンプを作成する上で、XDの操作がわからなかったですがとてもわかりやすくて、かなり勉強になりました。

[@web5096]

良かったです！ ありがとうございます！

[@noa-mg6fj]

説明が丁寧でわかりやすかったです！

[@闇の戦士香山リカさん]

Adobe公式よりずっとわかりやすい。ありがとうございます。

[@fworks2]

本当にわかりやすい解説ですね。ありがとうございます😊。

[@natsumim7576]

分かりやすい。 会社変わって初めて使うので助かりました

[@kazuhirotokunaga9642]

AdobeXDの使い方動画を探してましたがちょうど良い動画を見つけました。 Fireworksよりかなり使いやすい印象です。ご提供ありがとうございます。

[@沼尻友則]

今までイラレで作っていたWebページを 「XDを覚えて、3日間で作って！」とのオーダーを受けたので、途方に暮れてしまいましたが、 アキユキさんのチャンネルを見つけて、とても勉強になりましたw ありがとうございました！ チャンネル登録させていただきましたので、今後ともどうぞよろしくお願いいたします！

[@fujisonfit]

解説が簡潔なので、早送りしてもわかりやすかったです。 非常に助かりました！

[@web5096]

ありがとうございます！

[@sasuke-ni9nd]

すごいわかりやすかったです。がんばります

[@belgiumlife.]

とってもわかりやすかったです😌✨ 応用編も見てきます！

[@web5096]

ありがとうございます！！

[@zaramelife]

分かりやすかったです！ありがとうございます。 応用編も続けて見てみます！

[@mariosolomon2513]

you prolly dont care but if you guys are stoned like me during the covid times then you can stream pretty much all of the new series on Instaflixxer. Have been streaming with my brother lately =)

[@pierceedwin5273]

@Mario Solomon yup, I've been watching on Instaflixxer for since december myself =)

[@SEAGULL-mi4ww]

わかりやすく最後のおさらいで復習できました。 応用編も見ましたがこちらも分かりやすく勉強になりました。 ありがとうございました！！！(チャンネル登録しました） 更にXDの使い方のをアップしていただけると助かります (^_^)

[@ujukim-l7k]

わかりやすい動画ありがとうございます！助かりました。

[@harapeco-rina]

今、ポートフォリオ製作中でこちらの動画を拝見しました！ 学校の先生よりサクサク進んでしかもわかりやすいです！！！！ ありがとうございます🤗✨✨

[@rodyda]

めっちゃわかりやすい

[@パワーナレッジスクール]

とてもためになりまし💦本当にありがとうございます！！

[@web5096]

嬉しいです！作った甲斐がありました！

[@honochbabygirl3174]

まさに昨日初めてXDを触ったところだったのでありがたい動画です。勉強させていただきます！

[@rianasgallery8283]

ありがとうございます。分かりやすいです。

[@toshi9367]

むちゃくちゃ分かりやすすぎてビビる（語彙力）

[@ukiuki_fishing]

とてもわかりやすく苦手なイメージが払拭されました笑。XDチャレンジしてみます、ありがとうございます

[@takayamayoshikazu2782]

わ❗️Adobe XDってすげぇ🙀 早速ダウンロードしよ😆

[@user-gy2eu2gs1p]

とても分かりやすかったです。

[@古川隼人-n5g]

アキユキさんいつも動画見させて頂いております♪とてもわかりやすい解説ありがとうございます；；

[@web5096]

ありがとうございます♪

[@teamilk7704]

凄くわかりやすくて、大変助かりました❗ありがとうございます❗

[@kh-on8xv]

XDデータからのコーディングの方法をどこかのタイミングで教えて頂けたら、全米が涙することもあるかもしれません。 何卒お願いします！！

[@Eiji-s9p]

最高のコンテンツです。ありがとうございますmm

[@worldwideweb6509]

現在のフロントエンドでは、コーディングよりこのようなデザインソフトを利用する場面のほうが多いのでしょうか？

[@koichiro1976]

わかりやすいです。

[@page0626]

初めまして。 お伺いしたいのですが、Illustratorと比較してXDの良い点はどういった所でしょうか？ Illustratorでも代用できますでしょうか？

[@陽明-t4x]

Illustratorで代用できるならXDいらないじゃん考えたら分かる事

[@page0626]

@@陽明-t4x Illustratorと比較してXDの良い点はどういった所でしょうか？？

[@陽明-t4x]

@@page0626 そりゃWEBデザインに特化してるところでしょ。イラレはあくまでグラフィックデザインメインだから

[@page0626]

@@陽明-t4x ありがとうございます

[@tyokoboy4061]

幅なんですが、macbookのような13インチでのサイズにぴったりに来るようにするためには、どれくらいになるのでしょうか？1440でしょうか？

[@yuri-yg1ru]

幅(ｗ)と高さ(h)の右にある座標軸(ｘとｙ)とは何でしょうか？

[@ab-cl5fc]

恐れ入りますが、テキストエリアの指定方法について伺ってもよろしいでしょうか？ T 状態で、ドラックして見ましたが、ずっと未指定のままになり、うまく指定できなかったですが、 何かのキーを押しながらドラックする必要がありますでしょうか？？

[@tetsugakushayamato]

はじめまして。教えて下さい！XDを使ってサイトを作りはじめましたが、外部リンクの貼り方が全く分からず困ってます。。

[@worldwideweb6509]

このソフトはwix的なイメージですか?

[@Santatheater]

何分に何を説明するのか書いてくれるともっと見やすいです。

[@さくら桜-b7m]

完了しました！

[@TheHandandhand]

とてもわかりやすい解説ありがとうございます！！ 基本的な質問でお恥ずかしいのですが、画像を配置するときに、 画面をスライドして画像が配置されている画面からドラッグしているやり方があるのですが あれはどうやっているのでしょうか、、、（例: 23:45付近）（>_

[@web5096]

XD上で作成したオブジェクト（四角ツールとかで作ったもの）に対して、ドラッグ・アンド・ドロップで画像を落としてあげると、オブジェクトの形にトリミングされた形で画像が適用されますよ！

[@user-rs8ey1mu3f]

わかりやすかったです！助かりました！

[@snissy2154]

結局今ってXD使えないんですか？

[@testaaaeee]

質問失礼します。デザインカンプはPhotoshopがほとんどと聞いたことがあるのですが、XDを使われてる理由はありますでしょうか？

[@web5096]

XDは作ったデザインをそのままプレビュー用のURLを生成して共有できるので便利ですよ！ あと単純にXDは軽くて作業も捗りますし、アートボードの概念が便利（１つの画面の中で複数のページデザインを作れる）なので、基本XDで作っている感じです。

[@testaaaeee]

@@web5096 ありがとうございます！XDで作ってみようと思います！！

[@TheCrossroadsstudio]

XDデビューします

[@rk-yc1wi]

niruさんの声に似てる

[@ぴんく色社長]

ありがとうございます('ω')

[@katsutoru]

イラレ・フォトショが使える人間には入りやすそうやな ´-`）

[@shubono3186]

何このよどみない解説w

[@Sofu8pie]

わかりやすかったです！ありがとうございます！！