みなさん、こんにちは！
ジャングルオーシャンのラファエロです！！
これからUIデザインにチャレンジしたい！という初心者の方のために人気のUIデザインツールを紹介をします！
今回紹介するのは「XD」と「Sketch」です。
どちらもデザイン制作現場でバリバリ使われている素晴らしいツールなので、初心者の方は必ずチェックしておきましょう！！
プロトタイピング特化のAdobe製ツール「XD」
「XD」はデザインをやっている人にはお馴染みのAdobe製です。
もともとはプロトタイピングツールとして開発されたツールでしたが、機能がどんどんアップデートされてUIデザインツールとしてもとても優れたツールの一つになりました！
そんなXDを理解する上で欠かせないポイントをまとめたのがこちら！！
Adobe公式のXD学習サイトで学べる
Adobe XD TrailというAdobe公式の動画学習サイトで使い方を学べるため、初心者でも気軽にXDを使えるようになれます！
IllustratorやPhotoshopとの互換性◎
Adobe製のツールなので、同じくAdobe製でデザインツールとして最もメジャーなllustratorやPhotoshopとの互換性は抜群！
llustrator、Photoshopで作成したデザインデータをXDで開くことができたり、コピー&ペーストで直接デザイン要素をXDに持ってきたりする事も可能です。
またXDはllustrator、Photoshopに比べて動作がめちゃくちゃ軽いので、これまでにllustrator、Photoshopで作成したデザインデータをXDに移行させれば作業もサクサクになりますよ！
リピートグリッド機能がめちゃくちゃ便利
XDをを語る上では欠かせない超便利機能がリピートグリッド（グリッドの繰り返し機能）です！
UIデザインでは商品一覧ページのような同じ要素がズラーっと並ぶデザインを作る場面が多々あるため、このリピートグリッド機能はめちゃくちゃ便利です。
さらにリピートグリッドで繰り返した要素内の画像やテキストを一括編集することができるので、使いこなせば作業効率アップは間違いなしです！
アセットとコンポーネントの管理が優秀
デザインを作り込んでいく上でよく使うカラーや文字スタイル、コンポーネント（シンボル）をアセットパネルという機能で一括管理出来ます。
またアセットパネル内のカラーや文字スタイル、コンポーネント（シンボル）を更新すると、更新内容がリアルタイムでデザインに反映されるため非常分かりやすくて使いやすいです！
Sketchにも同様の機能がありますがXDの方が直感的に使いやすく優秀だと感じました！
アニメーションやレスポンシブデザインの表現が可能
動きのあるものの表現ではXDがダントツの精度！
プロトタイピングツールとして開発されただけあってアニメーションやレスポンシブデザインの動きも表現可能なんです！
UIデザインだけに止まらず、プロトタイプとしての作り込みがここまでできるのはXDの最大の強みでもあります。
レスポンシブデザイン対応
今では当たり前になりつつあるレスポンシブデザイン。
デバイスのサイズに応じてレイアウトが変わるレスポンシブデザインの表現を簡単に設定することが出来ますよ！
自動アニメーション
こちらも当たり前になりつつあるアニメーション表現。
自動アニメーション機能を使えば、プロトタイプとしてかなり完成度になるはずです！
デザインスペックの共有機能
デザイン制作をチーム進める場合やフロントエンドエンジニアにコーディングを依頼する場合など、デザインスペックを他者に共有する必要があったりしますよね。
XDはブラウザ上でデザインを共有しフィードバックを受け取るための共有機能が備わっているので、XDを持っていない人とでもデザインスペックについてのやり取りが可能です！
MacとWindowsで使える
SketchはMacのみでしか使えないのですが、XDは他のAdobe製のツールと同様にMacとWindowsどちらのOSで使えます！
なので、Windowsユーザーの方には特にXDがおすすめかもしれません。笑
UIデザインツールの先駆け的存在「Sketch」
今では様々なUIデザインツールが登場していますが、その先駆け的存在なのが「Sketch」です！
後発のUIデザインツールが台頭する以前は、UIデザインツール言えばSketch一択でした。
そのためSketchの使い方を解説してくれているサイトが多く、プラグインやデザイン素材も豊富に揃っているのでかなり取っ付きやすいUIデザインツールです。
そんなSketchを理解する上で欠かせないポイントをまとめたのがこちら！！
初心者でも使いやすい
Sketchは日本語対応していないため機能は全て英語表記ですが、それでも分かりやすいUIになっています！
またUIデザインツールの先駆け的存在のため、Sketchの使い方を解説してくれているサイトが多く学習しやすいのもポイント。
ちなみにラファエロは下記のサイトを見ながらSketchの使い方を覚えました。笑
ビジュアルの作り込みがしやすい
SketchはIllustratorようにベクターデータによる制作が可能で、SketchだけでUIデザインだけでなくビジュアルの作り込みまで出来てしまいます。
IllustratorやPhotoshopに比べて動作が軽いため、下の動画のようにLP制作もサクサクです！
SketchでのLP制作1
SketchでのLP制作2
シンボルを専用ページにまとめて管理
XDにもデザインを作り込んでいく上でよく使うコンポーネント（シンボル）を管理する機能はありますが、Sketchはデザインパーツをシンボル化するとシンボル専用の一覧ページが作成されます。
デザインパーツを逐一シンボル化していくことで、自動的にシンボル専用の一覧ページが充実してきてデザイン制作を効率良く進められるようになります！
プラグインやUIキット・デザイン素材が豊富
SketchはUIデザインツールの先駆け的存在ということもあり、オンライン上にプラグインやUIキット・デザイン素材が豊富に揃っています！
様々なプラグインやUIキット・デザイン素材を活用していけば、初心者でもそれなりにクオリティの高いUIデザインが可能になるで下記のようなプラグインやUIキット・デザイン素材を必ずチェックしておきましょう！！
プラグイン
UIキット・デザイン素材
結局どっちを使えばいいの？
Adobe CCコンプリートプランを契約してるAdobeユーザーならXD
Adobe CCコンプリートプランを契約してるAdobeユーザーなら実質無料でXDが使えるので、むしろ使わないともったいないです。笑
プロトタイピング機能を重要視しているならXD
XDはもともとプロトタイピングツールとして開発されたツールのため、UIデザインだけでなくプロトタイプ制作も重視するなら間違えなくXDです！
WindowsユーザーならXD
SketchがWindowsに対応していないため、この二択から選ぶならば必然的にXDになります。
Adobeのツールを使ったことのないor経験の浅いデザイン初心者の方ならSketch
IllustratorやPhotoshopを使ったことないなら、XDよりもビジュアルの作り込みができるSketchを選んだ方が良いかと思います！
またプラグインやUIキット・デザイン素材が豊富なため、デザイン初心者でも取っ付きやすいです。
LPやデザインカンプなどをサクッと制作したいならSketch
XDよりもビジュアルの作り込みが得意なSketchを選んだ方が良いでしょう！
チームでのデザイン制作に使うならメンバー次第
チームで使うなら、チームメンバー全員が使いやすい方を選ぶの一番です！
どちらも使いやすく優れたツールなので、チームで話し合って良い方を選びましょう！
また最近では、ブラウザ上でデザインが出来てチーム作業に向いている「Figma」というIUデザインツールも注目を集めているのでチェックしておくと良いかもしれません。
両方を使い分けるなら
使い分けるとすれば、作り込むものはSketch、動かすものはXDという感じでラファエロは考えています！
XDはSkechで作成したデータを取り込むことが可能なので、ビジュアルの作り込みはSketchで行って、プロトタイプの作り込みはXDといった使い分け方も良いかもしれませんね。
どちらも無料で試せるので、とりあえずお試しを！
ここまで色々と書きましたが、結局は自分で試して使ってみてそれぞれの良さを感じてもらうのが絶対に良いです。笑
どちらも無料で試せる素晴らしいツールなので、気になった方からとことん使い倒してみましょう！
Webデザイン初心者向けの記事もチェックしてみてね
UIデザインの関連記事はこちら
以上、ラファエロでした！！
