【#4】web開発初心者が「AdobeXD」を使ってみる

「名言や心に響く言葉をコンセプトにしたSNSを作りたい！」

そんな思いではじめた、新たなSNS・webサービスの開発。

これまでの経緯やコンセプトについて興味がある！気になるという方は、こちらからご覧下さい。

＊

前回の投稿で、このwebサービスでのデザインについてをご紹介させていただきました。

できるだけ淡い雰囲気や綺麗な印象のあるデザインにしたいという個人的な思想のもと、素人ながらにデザインをちまちまと作っていているわけであります。

何かサービスをやるとなれば機能と合わせて、こうしたデザインにも注力すべきだというのが個人的な見解です。自分でデザインをするといったプログラミング的思考でいうところの”表側”のことが大好きなので、あーでもないこーでもないと頭を捻りながらも、楽しみながら設計してきました。

こうしたデザインの設計には、画像加工でよく知られるPhotoshopでもお馴染み「Adobe」が出している「AdobeXD」(以下XD)というソフトで作成しています。

今回は、そんなXDの魅力や機能をお伝えさせてください。

やりたい！と思う機能を、デザイン面から自由自在に

XDに関しては、実際のWebデザインやサービス開発の現場で働いておられる方のYouTubeやブログを漁りつつ、デザイン設計に使えるソフトがないかと探していた時に出会いました。

現場でも多用されているようでして、備えられている機能はかなり高機能となっています。

ここからは、個人的に便利だな〜と思った機能を、いくつかご紹介します。
（個人的な好みでの機能チョイスとなってます。。）

様々なデバイス、サイトサイズ向けのベースが用意されている

​iPhone各世代やwebサイトの画面幅だけでなく、インスタのストーリー、Apple Watchなんかも想定して作成することができます。

自分のサービスの展開に合わせて多様なサイズのテンプレートを使用することができるので、ベースデザインが崩れる心配もありません。

同じパーツを使いまわせる！

これは、コンポーネント機能というやつです。

プログラム書かれる方なら特に馴染み深いかと思いますが、もともとバラバラなパーツを一つのまとまり(コンポーネント)にして登録しておくことで、このまとまりを必要とする場面場面で、再利用が容易に行えます。

かなり作業効率をあげてくれる素敵な機能で、鼻血ものでした。

便利なUIキット達

ネットで検索をかけると、世界中の様々なユーザーさんが用意してくださっているUIキットが多数ヒットします。これをダウンロードしてXDに取り込むことで、例えば「ここにはリツイートマークを付けたい！」と思った時に、わざわざ自分で一からマークを作らなくても、KITに用意されているアイコンを差し込むことでデザインとして組み込むことができます。

また、KITの中には様々な用途に合わせたデザインのベースも用意されているので、デザインに自信がない方はこれらを使うのもかなり時間短縮につながるのではないでしょうか。

今回僕のSNS開発でも、上のようにパーツをKITから呼び出し、それを組み合わせることで色々な要素を設計していきました。実際に本番実装するときにこのデザインでやるかは置いておいて、とりあえず良さそうなパーツ組み込んでおくだけでも、全体の雰囲気をざっと掴めるのでおすすめです。

こうして組んだパーツ達を、先述したコンポーネントでひとまとまりにしておくと、「フッター用のデザイン作らなきゃ！」と毎画面でやらなくて済みます。

便利！脱帽！！！

よく使う文字・カラーも保存しておけちゃう

こんな感じで、よく使うカラーは色ごとに登録しておいて好きな時に素早く使うことができます。2枚目の画像だとパレット下側にいくつかバラバラな色が正方形で保管してあるのがそれです。

これもっけこうよく使う機能で、大変重宝しました。デザインの基本としてカラーを統一することは重要かと思いますので、カラー管理をもっと便利にしたい方は、ぜひこの部分ジャンジャン使ってみてください。

まじですごいプロトタイプ機能

実際にサービスができた時にどんな挙動になるかを、ページにあるボタンや、そのページ自体を選択して遷移先を指定してつなぎ合わせてあげることでシミュレートできます。

XDにはスマホ向けのXDアプリも存在しており、例えばiPhoneアプリでのサービスを設計中の方が、PCでプロトタイプ機能の設計までしておいたXDのデータをiPhone版XDで開くと、実際にiPhoneでサービスを使っているような感覚でテストできちゃいます。

もちろんデザイン面でのつなぎ合わせといった形ではあるのですが、実際の動きを視認できるので、より具体的にサービスのイメージを掴めるのでおすすめです。これはXDの中でもかなり目玉機能かと思います。

＊

今回はこんな感じで、かなり実践的な内容でございました。作業効率もモチベーションも上がる素敵なソフトでしたのでぜひ紹介できたらと思い、まとめさせていただきました。

まだ使ったことのない方はぜひ使ってみてください。本当におすすめです！！！