【AdobeXD】WebデザイナーがWebデザインの制作過程をフル公開
現役WebデザイナーがAdobeXDでWebデザインをする過程を公開します。
単純に作業動画ではなく、Webデザインをする過程でAdobeXDの使い方のポイントも解説しています(｀･ω･´)ゞ
AdobeXDはWebデザインをする上で欠かせないツールです。うまく使いこなすことでかなり高速でWebデザインを制作することが可能になります。
この動画でWebデザイナーが実際にAdobeXDをどのように使いこなしているのかがわかると思います。
※一部訂正
5分35秒あたりで紹介した縦中央揃えのショートカットはCommand＋Control＋Mです。
（Command＋Shift＋Mと紹介していました）
--------------- 他のAdobeXDの動画
・WebデザイナーのためのXDの使い方【基礎編】
• WebデザイナーのためのXDの使い方【基礎編】
・WebデザイナーのためのAdobe XDの使い方【応用編】
• WebデザイナーのためのAdobe XDの使...
・Webデザイナー向け、Adobe XDでプロトタイプを作る方法
• 【AdobeXD】WebデザイナーがWebデ...
・WebデザイナーがAdobe XDでオススメするショートカットキーBest10！
• WebデザイナーがAdobe XDでオススメ...
#AdobeXD
#Webデザイナー
#Webデザイン
＝＝＝ 動画学習サービス「unazuki」
Web制作を学べる動画学習サービスを運営しています。
unazuki.online/
・WordPressコンプリートコース
unazuki.online/wordpress
・JavaScriptコース
unazuki.online/javascript
・HTML & CSSコース
unazuki.online/html_css
＝＝＝ SNS
■ Twitter： / life_toshindai
＝＝＝ 経歴
Webデザイナー・エンジニア
〜 2013 自動車メーカー系の企画職
2014 〜 フリーランスWebデザイナー
2016 〜 法人化
-------------------- 簡単な自己紹介
都内でWeb制作をやっています。
苦労した経験をもとに、
KZreadでは過去の自分が欲しかった
知識・技術・マインドなどをスライドやデモ解説で発信しています💪
🏋️♂️活動
WordPressやWebデザイン講座など有益な情報を発信。
初心者向けの動画〜超実践向けの動画まで多数公開しています。
再生リストも作っているのでよろしければご覧ください。
✈️出身
福岡県
---------------------------
Webデザイナーとして活躍される方の
知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
(｀･ω･´)ゞ
詳しくはチャンネル概要欄もご覧ください。
#ホームページ
#作り方
#アキユキ
Пікірлер: 85
私が受講したことある有料動画よりよっぽどためになる…この方の事もっと早く知りたかった
感動しました！ 勉強させてもらいます！
腑に落ちてなかったことが、この動画で腑に落ちた！ありがとうございます！
ありがとうございます。 素晴らしいです！！
わかりやすい！！ありがとうございます！
すごくわかりやすくて、感謝しかないです
目から鱗でした。 有料で受講したモノより ためになりました。 ありがとうございました。
すごいわかりやすくて感動しました！ありがとうございます😊チャンネル登録しました！
思いっきり初心者ですが、説明がわかりやすくポンポン次に進むので見入ってしまった。登録しようと思います
サクサクでしかも分かりやすかったです。ありがとうございます。
今回もとてもためになりました。ありがとうございます！ ＸD使いこなせると楽しそうですね！ デザイン力をつけるためにもっと勉強しようと思いました。 サムネイルがイカしてますね！(≧▽≦)
勉強を始めたばかりの者です。とても分かりやすくモチベーションが高まりました！ありがとうございます^_^
アキユキさん、すばらしい動画ありがとうございます。 今からwebデザインをはじめようと考えていた所なので本当に助かります。 完成図が簡単に作れて共有できるのですね。 マスターコンポーネントを活用するのと、ボタンタップでページ移動を学びました。 これからも、たくさん見て学ばせていただきます！！！ 改めてありがとうございました。
私はillustratorが得意なのでXDは好きなのですが、有料の講座がphotoshop押しでもやもやしてました。ほんと、もっと早く辿り着ければ良かった。。 ありがとうございます！
ありがとうございます。 Webデザインの学校卒業しましたが、全くそれよりすごく勉強になります。感謝でいっぱいです。
目からウロコすぎました！✨ サクサク作業出来そうです！ ありがとうございます🙇♀️
@web5096
2 жыл бұрын
良かったですー！
今日からXD勉強始めた者です。勉強になったのは勿論、すごくワクワクしながら見ることができました！ありがとうございます。
@web5096
2 жыл бұрын
ほんとですか！嬉しいですねー！
まじですごい、、(語彙力) Webデザイナーになるためにまじてがんばらろ、、🥺
初米です！相変わらずイケメンですね。 すごいわかりやすいのでこのチャンネルの動画参考にしています！
Webデザインの勉強を始めたばかりの者です。 具体的な作成の流れを見ることができて、とてもタメになり、モチベーションが上がりました！ありがとうございます。
@web5096
Жыл бұрын
ありがとうございます！
本当に超有益動画でした。というか、アキユキさんの動画は全部超有益。マジ神です。 街で見かけたら何も言わずに抱きついて、キスしますので宜しくお願い致します。 本当にいつも素晴らしい情報発信をして頂きありがとうございます。
すごい.....
実際の動画すごく助かります。ありがとうございます(^^)
これ、Figmaとかでもめっちゃ応用効くし、普通にクッソ神動画だな。(デザインしたい人には)
他の方の動画は実践の部分が少なく、喋るだけの動画になってしまっていて分かりにくかったのですが、主様の動画では実践を交えて解説してくださるので、ワクワクしながら学ぶ事が出来ました！ 知識すらまだ殆ど無い高校二年生ですが、将来的に自分の夢であるWEBデザイナーとして活躍出来るように勉強を頑張っていきたいと思います！
@web5096
11 ай бұрын
そう言っていただけて嬉しいです。 高校生ですでに夢に向かって努力されてて素晴らしいですね！ （自分の高校時代を思い出すと恥ずかしい...） 頑張ってください！
大変為になりました。ショートカット覚えないとですね。
今年に入ってから勉強を始めた初心者です。とてもわかりやすく勉強になります。登録させていただきました。 ひとつずつ見せていただいて学習していきたいと思います。
@web5096
Жыл бұрын
ありがとうございます！
わかりやすい動画ありがとうございます！ WEBデザイナー UI/UXデザイナー インタラクティブデザイナーの違いを教えてください！
いや、え、これ無料ですか？？？今デザイン学んでる身としては最高すぎる動画でした。。。！ ありがとうございます！
XD使いやすいよねー、使ってた面白かったし
とりあえずショートカットキー覚えたい
アキユキさん、figmaについてはどう思いますか？ figmaを使うメリットデメリットについて解説した動画をアップする事を希望します😊
大変参考になりました！ 通常の作業とは逆だと思いますが、この動画での作業は実際出来上がったサイトを見ながらXDの作業をしているのでしょうか？
これからXdを使いますが、非常に参考になりました！ あと、もし可能でしたらアキユキさんが購入されているおしゃれなフレーム素材について、情報をいただけませんでしょうか。
自由自在なのがカッコいい！
こんな分かりやすい動画初めてだ。。。オンラインスクールに通ってるけど、こちらの動画の方が分かりやすい。。。
デザインをやることになり、迷っていたところに救世主! かなり効率的にできるな! 使いこなそう😁😁😁
完全に有料級の動画でビックリしたｗｗ
めちゃめちゃ素晴らしい動画ありがとうございます！ おせっかいかもしれませんが、5:35 くらいの中央整列のショートカットキーですが、Command＋Control＋Mでした！
@web5096
3 жыл бұрын
ホントですね... ご指摘ありがとうございます！
凄いです！ ウェブデザイナーに興味があってスクールで勉強しようかと考えてます。 色々検索してたらアキユキさんの動画にたどりつきました！感動して即チャンネル登録させて頂きました。Webデザイナーをメインにお仕事されているんですか？ 初心者でも出来るようになりますか？
@web5096
Жыл бұрын
ありがとうございます！ 僕はデザインも開発もどちらもやってます！ もちろん、最初は皆んな初心者ですし、他のデザイン経験がなくてもしっかり勉強して経験積んで行けば大丈夫です。
この動画に対する初心者向けの解説動画があるとありがたいです… 広告何回も踏むなどよろしくお願いします🙇♂️
エアプでの質問で申し訳ないのですが、 12:28 からのコンポーネントの説明で、 マスターコンポーネントを変更すると インスタンス？も変更されるとありますが、 マスターの1つ右のものは変更されてません。 どれがインスタンス？になっているものかが 分かるような機能はあるのでしょうか？
各要素の間に空のスペースBOX入れると空き感が統一できておすすめですよ。 あとカードデザイン作る時、paddingとスタック使うと楽。
@web5096
3 жыл бұрын
ありがとうございます。 プロトタイプで各メニューにリンク貼りたかったりするので、僕の場合はスペースでやらないことが多いです。 スタックは確かに使ってなかったですね！
分かりやすい(*´ω`*)
実はレイアウトよりも素材写真の収集と補正の方が時間がかかるという。。 クライアントさんがそこを理解してくれていると助かるんだけど、そうじゃない場合は結構地獄。
こんにちは！この、ソフトを使って、ランサーズなどのWEBデザインの受注を受けることは可能ですかね…… プロゲート少しかじったぐらいで、ITスキルは皆無にちかいですが、今回のような、デザイン制作は慣れれば出来ると思いました！
wedデザイナーになるために今資格の勉強してます！
素晴らしい
ミリアド プロというのがなかったんですが似たようなフォントってありませんか？ それと、写真を貼る時どうやって切り替えてますか？
見てたらめちゃ簡単そうと思ってインストールして使ったら想像以上に簡単だった。 Ps勉強してきた時間は何だったんだ
webデザイナーはhtmlとかのプログラミングは書かなくても大丈夫ですか？
やっぱりプロは凄いですね！ PhotoshopよりXDの方がデザイン作るはオススメですか？
@web5096
3 жыл бұрын
画像加工はphotoshopを使うのでどちらも使いますが、 基本はXDでやっていくのがオススメです！
こちらはプログラミングなしでホームページを作れるのですか？
画像の書き出しは1つずつ指定するしかないのでしょうか？ Photohopではレイヤー名に「hoge.jpg7」とかつけてまとめて抜き出せてたので、同じ様なやり方が分かれば知りたいです。
@web5096
3 жыл бұрын
複数選択してまとめて書き出しはできますよ！ psのようなファイル名から自動で書き出す生成機能はなかったと思います。
今から未経験転職目指すなら、psよりxd勉強した方がよいのでしょうか？ それとも現場ではまだpsが主流なのでしょうか。
@web5096
3 жыл бұрын
もうxdが主流だと思いますが、画像加工はpsでやったりしますので、psも画像加工レベルで使えるといいと思いますよ。
いまだFWで作ってる民。そろそろXD導入すべきかなｗ
動画拝見させて頂きました。 自分もXDをMacBookでインストールしたいのですが、有料版と無料版どちらをインストールした方が良いでしょうか？
0.75倍速にすると丁度いい速さ
センターライン初めからズレてたからずっと気になってたやで…
@web5096
3 жыл бұрын
ですよね...(；´Д｀)
定規は使わないんですね！数値で判断してるのかな？
なんか独学でサイト作りをやってきた自分的には、こういうのは最初からHTMLでやってしまうよね。 デザインを納品みたいなときにはADOBEで納品とかしなきゃなのかなｗ
何もしたことない者ですが、XDでデザイン（案）だけのソフトですよね？ XDでデザイン作れてリンク遷移もできるなら、このままウェブサイト作れればいいのにと思ってしまうw
これ無料で見て良いんですか。弟子入りしたい
ノンコードでフリーランスのwebクリエイターってなれるんですか？
これでも、結局のところホームページ公開して運用出来ないところがネックですよね。XDはプロトタイプだけで、ウェブページとして使えないから、ホームページを作れる訳じゃない。悲しいです。
XDはFigmaと比べるとかなり使い勝手悪いかな。。主流はFigmaだと思います、、！
マエケンに似てない？
私は外国人です。あなたの話は早いです。聞きにくいです。ですから 遅くもいいですか。お願いします。
グリッド引きなさいよ
@user-ti6su6ls2o
3 жыл бұрын
グリッドシンプルに邪魔じゃない？
@domtoyota
3 жыл бұрын
うわっ…DTP出身のかたですか？大人しく紙やっといてください
@user-ti6su6ls2o
3 жыл бұрын
@@domtoyota え、なんかごめん；；