【Figma vs XD】WEBデザインツールのフィグマとAdobe XD比較してみた！
Vložit
- čas přidán 18. 03. 2022
- Figma（フィグマ）とXD（エックスディー）、2つのWEBデザインツールを比較してみました😊♪
それぞれの特徴や機能面など、両者の違いを比べてみました😆❗️
WEBデザインツールで迷っている方、まだ片方しか使ったことがない方にオススメの動画です❗️
🎥 この動画の構成 🎥
00:39 Figma（フィグマ）とは？
02:18 料金について
02:58 使用感について
05:20 機能面について
05:32 01. サイズ表示
05:59 02. 色補正
06:33 03. キャンバスサイズ
07:18 04. コンポーネント
09:01 05. オートレイアウト
10:01 06. 動画・GIF
11:05 07. エフェクト
11:44 08. モックアップ
12:12 比較まとめ
✅ ご視聴いただきありがとうございます🙇♂️
この動画を気に入っていただけたら、ぜひチャンネル登録よろしくお願いします❗️
◆ ぜひ『チャンネル登録』をよろしくお願いします🙇♂️
czcams.com/users/hirocode?sub_c...
◆ Twitter. ツイッター
/ hirocodeweb
◆ Instagram. インスタグラム 👈 オススメ❗️
/ hirocodeweb
◆ ROOM. 楽天ルーム
room.rakuten.co.jp/hirocode/
🔋 僕が使っている、おすすめのデバイス 🔋（アフィリエイト広告を使ってます！）
【 マウス 】
✅ ロジクール アドバンスド ワイヤレスマウス MX Master 3
amzn.to/34Zn5LH
" ボタンカスタマイズによって作業の効率化が図れます。アプリケーションごとにカスタマイズ可能です。 "
【 キーボード 】
✅ ロジクール アドバンスド ワイヤレスキーボード KX800 MX KEYS
amzn.to/38S1B4i
" 打ちやすく疲れにくく、タイピング音も静か。長時間コーディングする方にオススメ。 "
【 パソコン 】
✅ Apple Macbook Pro 16inch
amzn.to/2WXKtEN
" 画面サイズ大きいと作業が捗るので便利です。初期投資で良いパソコンの使用をオススメします。 "
【 周辺機器 】
✅ Apple AirPods Pro
amzn.to/3rAyU4u
" カフェでの作業や通勤時間など、ノイズキャンセリング機能で周りの雑音に影響されることなく集中できるようになります。他にApple機器を使用している方はAirPodsがオススメです。
✅ Apple iPad Pro 11インチ
amzn.to/3mZuvoo
" macに搭載されているSidecarという機能で、iPadをサブディスプレイとしての利用が可能です。 "
📕 おすすめ書籍 📕
【 デザイン 基礎編 】
✅ 1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
amzn.to/3o8vofO
" webデザインの基礎とコーディング(HTML/CSS)の基礎がわかる。入門者におすすめの一冊です。 "
✅ なるほどデザイン
amzn.to/2X48Z77
" デザイン全般について、図解で視覚的に分かりやすく説明がされている書籍。デザインに興味がある人にオススメです。 "
【 デザイン 思考編 】
✅ 誰のためのデザイン？
amzn.to/3o4gzun
" デザインにおける役割を理解できる。デザインをする上で何を考える必要があるのかが分かる本。 "
✅ IAシンキング Web制作者・担当者のためのIA思考術
amzn.to/2KETvEn
" デザイン以前のサイト設計における思考の方法を身につけるための一冊。 "
【 書籍デバイス 】
✅ キンドルペーパーホワイト Kindle Paperwhite
amzn.to/3n2AwRh
" 200冊あったビジネス書を処分してこちらを導入。一部デジタル化されていない書籍はありますが、紙の本に特別なこだわりのない方は電子書籍での読書をオススメします。
🎧 BGM 🎧
----------------------------------------------------------
Music Title: Happy And Joyful Children
Music Link: • Happy Children Backgro...
----------------------------------------------------------
#WEBデザイン #Figma #XD
いつも勉強させて頂いてます。有難うございます。
ちょうど.. Figma と ＸＤ と、両方 試用しかけたところで、大変に救かりました！
ＸＤで少し慣れてみてから、最終的には Figma にしたいと思います。
参考にしていただけてよかったです😊♪こちらこそご視聴いただき、ありがとうございます🙇♂️❗️
いつも動画を拝見して勉強しています。
ありがとうございます。
質問なんですが、もし今後フリーランスでやっていく場合Adobe(Photoshop、Illustrator、XD)抜きで、figmaだけでやっていくのは難しいと思いますか？
いつもご視聴いただきありがとうございます🙇♂️
FigmaだけでもWebデザインであれば問題なく出来るはずです‼️
懸念点を言えば、クライアントから提供いただくロゴデータがイラレ形式のファイルが多い点や、写真のレタッチや切り抜きなどが必要になった時です。
ただ、オンラインツールや無料アプリを駆使すればある程度対応できるかも知れないので、どうしても必要になったら導入するって形でも大丈夫かもしれません😆‼️
@@hirocode さんご回答いただきありがとうございます🙇♂️
いつかはヒロコードさんのような立派なwebデザイナーなれるように頑張ります！
また質問する時があれば、その時はよろしくお願いします🙇♂️
(関連内容)になるのですが、（ＸＤ）で作成したデータを （Figma）に インポート したら、どこまで使えるか？ また同じく、逆のパターンで インポートした場合だと どうなるか？.. あたりの内容も、 また..取り上げて頂けたら 大変にうれしいです！
XDとFigmaの連携について知りませんでした😵❗️少し調べてみたのですが、おっしゃる通りエクスポート・インポートとがあるみたいなので、その内容も今後の動画に取り入れたいと思います😆❗️ありがとうございます🙇♂️❗️
@@hirocode さん
有難うございます。よろしくお願い致します。
よし、フィグマにしよう！
Adobe製品は、アンインストールするのもめちゃ大変なイメージ。。
xdのリンク共有ですが、所有者しか共有リンク更新できないのが不便なんですけどその点、figmaどうですか？
コメントいただきありがとうございます😊♪
おっしゃる通りXDでは更新があれば「リンクをアップデート」みたいな形ですが、Figmaでは共有したurlに作業内容がリアルタイムで反映されます💡
XD同様、対象のアートボードや開始のアートボードを選んで新たにurlを作ることもでき、これは編集権限もったユーザーであれば自由に作成・変更行うことできます✏️
XDと違いアップデートしなくても内容が更新されてしまうので、クライアントに共有する場合など、それ用のページ用意するなど注意する必要が必要そうですね😆❗️
一部..(日本語化)もできる プラグインを、出して頂いている方もおられますので、それらを使うと 断然マシですが、 Figmaを 使おうとする場合には、やはり、完全日本語化に対応していない事が、初心者が理解をしていく際には、 ちょっとネックと なりますよね！
ヒロコードさんの解説は、いつも非常にわかりやすいので、初心者向けの プラグインのご紹介なども、期待してお待ちしております。 またよろしくお願い致します。
おっしゃる通り、英語だとハードル高く感じてしまいますよね💦 朗報で最近Figmaが日本法人設立したみたいで、今日本語化に向けて動いてるみたいです😆❗️
嬉しいお言葉いただきありがとうございます😭 より良い動画出せるように頑張ります❗️❗️
@@hirocode さん
＞日本法人設立したみたいで、今日本語化に向けて動いてるみたいです
そうなんですか！！ ようやくかぁ！ って 感じですけど、 料金体系も変わらずで、完全日本語化ともなれば、
使用者は絶対に、一気に増えそうですね！
No hablo TAKATAKA XD