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

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 ส.ค. 2024
  • 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制作をやっています。
    苦労した経験をもとに、
    TH-camでは過去の自分が欲しかった
    知識・技術・マインドなどをスライドやデモ解説で発信しています💪
    🏋️‍♂️活動
    WordPressやWebデザイン講座など有益な情報を発信。
    初心者向けの動画〜超実践向けの動画まで多数公開しています。
    再生リストも作っているのでよろしければご覧ください。
    ✈️出身
    福岡県
    ---------------------------
    Webデザイナーとして活躍される方の
    知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
    (`・ω・´)ゞ
    詳しくはチャンネル概要欄もご覧ください。
    #ホームページ
    #作り方
    #アキユキ

ความคิดเห็น • 84

  • @shun13z9
    @shun13z9 3 ปีที่แล้ว +10

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

  • @user-bt1mo4nx2u
    @user-bt1mo4nx2u 3 ปีที่แล้ว +7

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

  • @kazumad89
    @kazumad89 3 ปีที่แล้ว +2

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

  • @user-sk6ed9wl9t
    @user-sk6ed9wl9t 3 ปีที่แล้ว +6

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

  • @KWashiki
    @KWashiki ปีที่แล้ว

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

  • @maboisaboutmarumiya
    @maboisaboutmarumiya 4 ปีที่แล้ว +6

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

  • @maikumasohsuke7112
    @maikumasohsuke7112 2 ปีที่แล้ว

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

  • @tentenmotif1195
    @tentenmotif1195 3 ปีที่แล้ว +3

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

  • @user-ko1ym5kc4y
    @user-ko1ym5kc4y 2 ปีที่แล้ว

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

    • @web5096
      @web5096  2 ปีที่แล้ว

      ありがとうございます!

  • @MrREred
    @MrREred 3 ปีที่แล้ว +2

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

  • @mahok8272
    @mahok8272 ปีที่แล้ว

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

    • @web5096
      @web5096  ปีที่แล้ว

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

  • @fworks2
    @fworks2 3 ปีที่แล้ว +2

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

  • @tonoo1040
    @tonoo1040 2 ปีที่แล้ว +1

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

  • @user-os4ty2fk2p
    @user-os4ty2fk2p 3 ปีที่แล้ว +4

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

  • @hrmi_pl_i
    @hrmi_pl_i 3 ปีที่แล้ว +4

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

  • @user-hm3jc1ee1c
    @user-hm3jc1ee1c 10 หลายเดือนก่อน

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

    • @web5096
      @web5096  10 หลายเดือนก่อน

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

  • @hidekiwatabe2823
    @hidekiwatabe2823 3 ปีที่แล้ว

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

  • @rosemary-np4bv
    @rosemary-np4bv 4 ปีที่แล้ว +3

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

  • @kazuhirotokunaga9642
    @kazuhirotokunaga9642 3 ปีที่แล้ว +1

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

  • @ayataka9327
    @ayataka9327 ปีที่แล้ว

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

  • @noa-mg6fj
    @noa-mg6fj 3 ปีที่แล้ว +1

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

  • @kotoetakano4478
    @kotoetakano4478 2 ปีที่แล้ว

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

    • @web5096
      @web5096  2 ปีที่แล้ว

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

  • @user-cc4jy7vt9n
    @user-cc4jy7vt9n 2 ปีที่แล้ว

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

  • @designhills
    @designhills 2 ปีที่แล้ว

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

    • @web5096
      @web5096  2 ปีที่แล้ว

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

  • @rodyda
    @rodyda 16 วันที่ผ่านมา

    めっちゃわかりやすい

  • @user-jd2hw5du6s
    @user-jd2hw5du6s 2 ปีที่แล้ว

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

    • @web5096
      @web5096  2 ปีที่แล้ว

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

  • @user-nk9jy8gq9w
    @user-nk9jy8gq9w 4 ปีที่แล้ว +1

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

  • @harapeco-rina
    @harapeco-rina 2 ปีที่แล้ว +1

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

  • @natsumim7576
    @natsumim7576 2 ปีที่แล้ว

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

  • @SEAGULL-mi4ww
    @SEAGULL-mi4ww 3 ปีที่แล้ว +5

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

  • @fujisonfit
    @fujisonfit 2 ปีที่แล้ว

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

    • @web5096
      @web5096  2 ปีที่แล้ว

      ありがとうございます!

    • @sasuke-ni9nd
      @sasuke-ni9nd 9 หลายเดือนก่อน

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

  • @zaramelife
    @zaramelife 3 ปีที่แล้ว +4

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

    • @mariosolomon2513
      @mariosolomon2513 3 ปีที่แล้ว

      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
      @pierceedwin5273 3 ปีที่แล้ว

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

  • @user-zo9vt4ks5y
    @user-zo9vt4ks5y 2 ปีที่แล้ว

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

  • @belgiumlife.
    @belgiumlife. 2 ปีที่แล้ว

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

    • @web5096
      @web5096  2 ปีที่แล้ว

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

  • @user-zu2sx1tw2r
    @user-zu2sx1tw2r 2 ปีที่แล้ว

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

    • @web5096
      @web5096  2 ปีที่แล้ว

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

  • @honochbabygirl3174
    @honochbabygirl3174 4 ปีที่แล้ว

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

  • @rianasgallery8283
    @rianasgallery8283 3 ปีที่แล้ว

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

  • @toshi9367
    @toshi9367 ปีที่แล้ว

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

  • @ukiuki_fishing
    @ukiuki_fishing 3 ปีที่แล้ว

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

  • @teamilk7704
    @teamilk7704 3 ปีที่แล้ว

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

  • @user-gy2eu2gs1p
    @user-gy2eu2gs1p 3 ปีที่แล้ว

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

  • @user-mv5th1rx1o
    @user-mv5th1rx1o 3 ปีที่แล้ว

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

  • @takayamayoshikazu2782
    @takayamayoshikazu2782 3 ปีที่แล้ว

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

  • @kh-on8xv
    @kh-on8xv 3 ปีที่แล้ว

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

  • @koichiro1976
    @koichiro1976 3 ปีที่แล้ว

    わかりやすいです。

  • @user-md1cm6vt5k
    @user-md1cm6vt5k 2 ปีที่แล้ว

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

    • @web5096
      @web5096  2 ปีที่แล้ว

      ありがとうございます♪

  • @worldwideweb6509
    @worldwideweb6509 2 ปีที่แล้ว

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

  • @tyokoboy4061
    @tyokoboy4061 3 ปีที่แล้ว

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

  • @ab-cl5fc
    @ab-cl5fc 3 ปีที่แล้ว

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

  • @user-rs8ey1mu3f
    @user-rs8ey1mu3f 3 ปีที่แล้ว

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

  • @user-dy6sx3tf6v
    @user-dy6sx3tf6v 3 ปีที่แล้ว

    完了しました!

  • @yuri-yg1ru
    @yuri-yg1ru 2 ปีที่แล้ว

    幅(w)と高さ(h)の右にある座標軸(xとy)とは何でしょうか?

  • @Santatheater
    @Santatheater ปีที่แล้ว

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

  • @tetsugakushayamato
    @tetsugakushayamato 3 ปีที่แล้ว

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

  • @TheHandandhand
    @TheHandandhand 3 ปีที่แล้ว

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

    • @web5096
      @web5096  3 ปีที่แล้ว +1

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

  • @page0626
    @page0626 ปีที่แล้ว

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

    • @user-jo7ke8mk1b
      @user-jo7ke8mk1b ปีที่แล้ว

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

    • @page0626
      @page0626 ปีที่แล้ว

      @@user-jo7ke8mk1b
      Illustratorと比較してXDの良い点はどういった所でしょうか??

    • @user-jo7ke8mk1b
      @user-jo7ke8mk1b ปีที่แล้ว +1

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

    • @page0626
      @page0626 ปีที่แล้ว

      @@user-jo7ke8mk1b
      ありがとうございます

  • @worldwideweb6509
    @worldwideweb6509 2 ปีที่แล้ว

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

  • @snissy2154
    @snissy2154 2 หลายเดือนก่อน

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

  • @testaaaeee
    @testaaaeee 4 ปีที่แล้ว

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

    • @web5096
      @web5096  4 ปีที่แล้ว +3

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

    • @testaaaeee
      @testaaaeee 4 ปีที่แล้ว +2

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

  • @TheCrossroadsstudio
    @TheCrossroadsstudio 3 ปีที่แล้ว +1

    XDデビューします

  • @rk-yc1wi
    @rk-yc1wi 11 หลายเดือนก่อน

    niruさんの声に似てる

  • @katsutoru
    @katsutoru 3 ปีที่แล้ว

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

  • @user-px7jb3uy3j
    @user-px7jb3uy3j 3 ปีที่แล้ว

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

  • @shubono3186
    @shubono3186 2 ปีที่แล้ว

    何このよどみない解説w