皆さんこんにちは。菊地です。本日もせっせとワイヤーを引いております。さて、以前のブログでも書きましたが弊社のワイヤーフレームの作成はAdobeのXDを使用しています。

Adobe XDとは？

Adobe XDは、Webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。
Adobe XDとは | Adobe XD CC チュートリアル https://helpx.adobe.com/jp/xd/how-to/what-is-xd.html

弊社では基本ワイヤーフレームの作成で使っていますが、デザインも可能ですし、プロトタイプの共有も可能です。何より毎月という頻度でアップデートされており、どんどん出来ることが増えています。また、良く比較されるSketchはMac専用アプリなのに対し、XDはWindowsでも使用が可能。おそらくWeb制作に関して今後間違いなく主流になっていくことが見込まれます。まだ触れていないという方がいらしたら、この機会にインストールすることをオススメしますよ！機能の制限はありますが、無料のスタータープランもあります。

Adobe XD CCの購入 | UI/UXデザイン、プロトタイプ、共同作業ツール
https://www.adobe.com/jp/products/xd.html

今回は初めて使う人が参考になりそうな記事をピックアップ！

さて、XDのUIは非常に直感的なため初めて触れる方でも、だいたい使い方が把握できると思うのですが（IllustratorやPhotoshopに触れてきた方はなおさら）、とはいえ、なんとなく概要は把握しておきたいという方もいらっしゃるかと思います。すでにリリースから期間が経っているので、使い方については、公式サイトはじめ、すでに色々な所でUPされています。ただ、逆に情報が有りすぎたりで、どこから見ればよいかわからなくなってしまうの困りもの。ここでは、初めての方が使ってみるにあたって、わかりやすそうな記事をピックアップしてみようと思います。

Adobe XDチュートリアル | Adobe XD CCの使い方

https://helpx.adobe.com/jp/xd/tutorials.html

Adobeの公式サイトのチュートリアルです。動画で説明がされているので、非常にわかりやすく、基本機能も網羅されているので非常に良いです。動画が閲覧できる環境でしたら、まずはこちらを一通り見ればツールとして何が出来るかということは、ほとんどわかってしまうかと思います。

Adobe XD – Adobe Creative Station

https://blogs.adobe.com/creativestation/tag/adobe-xd

またまたAdobeさん。XDに限らず、Photoshop, Illustrator, InDesign, Dreamweaver, Premiere関連の最新の製品情報や使い方、Tipsなどが掲載しているブログです。上記のリンクは、XDのタグを絞り込んでいるので、XD関連の情報をすぐにチェックできます！アップデートの詳細情報や、ちょっと慣れてきたユーザーにとって「かゆいところに手が届く」ような情報が記載されていて役に立ちます。

デザイン・プロトタイプ制作だけじゃない Adobe XD の魅力について – LOGzeudon

https://blog.rokuzeudon.com/entry/adobe-xd-case

こちらは、ちょっと方向性を変えて、Webデザイナーさんのブログ。使い方というよりXDの色々な可能性について書かれています。ちょいちょいXD関連の記事について私も目を通すようにしているのですが、こちらを読んでテンション上がった覚えがあります。「おお〜XDやっぱり面白そうだ！」と思わせてくれる記事。制作の現場にいる人が書いているので、実際にこれから使おうという人は色々イメージがつきやすいかと思います。

今回は手始めに参考サイトを上げてみましたが、いかがでしたでしょうか？次回は「スターターキット」について書きたいと思っています。良ければそちらもチェックしていただけると嬉しいです！