デザインツールアドベントカレンダー2日目
恐縮ながら参加させていただいております。
何卒よろしくお願いいたします。

デザインツールについて、今一番オススメのツールを、取り止めもなく発言してみようと思い参加させていただきました。文章を書くのはあまり上手ではありませんが、最後まで読んでいただけますと幸いです。

オススメツール

インハウスデザイナーの_tomotakeです。
主にサイトの制作側の商品詳細の更新や作り込み、サイトと特集の運営、開発をやっています。制作作業の他に、サイト全体の数値の計測、主に特集ページや、デザイナー発信の施策やサイトの改修をまとめたりすることもあり、デザイン以外の作業に関しては、効率よくデザイナーの意思を伝えるために去年あたりからAdobe XDをよく使うようになりました。この記事では、思わずAdobe XDを使い続けしまう好きなところをお伝えできたらと思います。

Adobe XD
https://www.adobe.com/jp/products/xd.html
なぜ、XD？なのか --->  デザイン作業を加速させれる！
このツールはみんなご存知の通り、とても動作も起動も軽くて、しかも、メニュー項目が直感的なため使い勝手も良い。グリッド表示によりレイアウトしやすく、上下左右、アートボード上のオブジェクトとのどのぐらい離れているのかなどの位置関係をグリッド線や数値で見せてくれることで、数値を揃えて、完成度の近い状態のラフも作ることができます。完成度の高いラフを作成できるおかげで、関わるスタッフにも意思が伝わりやすくなり最終イメージをイメージしやすくなります。便利な機能をいろいろ搭載したツールです。

特に好きな機能は以下の通りです。

デザインスペック
デザインスペックの共有ができる機能もお気に入りです。
この機能を使うことで、ロゴなどに使っている色まで拾ってくれるため間違いに気がつけたりもする。デザインを作成したら必ずチェックする機能としても使ったりしています。

プロトタイプモード
プロトタイプを見ながらコメントを付けられるので、感想や該当する画面に関しての修正や調整もメモがわりに使える。また、実機で検証するかのように見せてくれるので、イメージもつきやすく使い勝手が良いので、パスワード設定できるようになったので、資料としての共有などにも活用しています。

アセット機能
この機能を一時期photoshopのリンクファイルで使っていたこともあり、とても使いにくかったため、いつも他の方法を探していました。XDが登場してからはとても軽く実装していたので、どうしてもphotoshopでないと作れないとことでもない限り。こちらの機能を使って行こうかなと思うぐらい、一度にいくつも画面を帰れますし、変更もスムーズに行えます。

シンボルのリンク
これはお気に入りというよりも、とても使ってみたい機能。しかも、photoshopで作ってました。複数人で作業するときとかは特に共有コンポーネントファイルを用意して共有しながら作業いたので、同じことをXDでできるのならばとても凄いことです。

リピートグリッド
10人中9人は欲しかったと思う機能だと思います。私も好きです。面倒だったサンプルリスト作りがこんなに楽になるなんて。デザインが速くなるのはまさにこの機能があるからこそだと思います。

アニメーション機能
よしなにしてくれるアニメーション機能。前の動きから次の動きへ設定もしやすく、違和感なくつなげる事ができます。動くことで伝わることも多いと思いますので、速くプロトタイプモードにも追加してほしい。

XDはデザイナーの想像する速さでイメージを伝えることができる素晴らしいツールです。本来、実装に手間のかかる部分をうまくフォローもしてくれる。また、画面を作る以外でも使い方をいろいろ変えることで活用することができます。

最後まで読んでいただきありがとうございました。