こんにちは、プロクラスの中山です。
聞きました？AdobeソフトのXD、もうすぐなくなっちゃうらしいですよ！
…という井戸端会議のような内容から始まる今回の記事ですが、WebデザイナーおよびWebディレクターなど、主にプロの方向けの情報になるかと思います。
ただ、「XD」の代わりにご紹介する「Figma」は使い方はそんなに難しくありません。
さらに、ページ数などは限られていますが【無料】で使えます。ちょっとWebデザインに興味があるな〜という方も、是非一度触ってみてください。
目次
Adobe XDが終了する？いつまで使えるの？
先日、私がFacebook上のIT関連記事を見ていた時に目に止まった情報がこちら。
■Adobeの製品一覧から「Adobe XD」が消失 ～買収した「Figma」への一本化で提供終了？
なんと、今までAdobeのダウンロードページにあった「XD」というソフトが製品一覧からなくなってしまっているらしいんですね。え〜、びっくりです。
この「Adobe XD」というソフトなんですが、どんなことができるソフトか馴染みのない人にはさっぱりですよね。
Adobe XDとは？できること・役割について
Webデザインをする時のソフトといえば、Adobeの「Photoshop（フォトショップ）」や「Illustrator（イラストレーター）」が有名ですよね。
特に、PhotoshopはWEBデザイン技能検定の2級実技試験で使用しなければならないほどにメジャーなソフトです。
これらとともに、デザインを作ることができるのが「Adobe XD」です。
3つとも、デザインを作れるのは共通ですが＋αの部分が異なるのでそこで覚えましょう。
・Photoshopは、デザインを作れる＋写真の編集や高度な加工が容易
・Illustratorは、＋印刷物制作や拡大縮小可能なイラスト・ロゴ制作なども得意
・Adobe XDは、＋プロトタイプ作成ができ、共有ができる
「プロトタイプ」って聞き慣れない単語かもしれませんね。
これは「まだちゃんとホームページとして完成してないけど、こんなイメージになる予定ですよ」とお客様に見せるためのものです。
デザイナーというよりは、クライアント様と打ち合わせに行くディレクターが使用する場合もありますね。
ホームページって、ボタンがたくさんあってどこを押したらどのページに繋がっているかわかりにくいので、静止画ではなくてある程度ボタンが押せたりする方がわかりやすいんです。
実際に画面上で本物っぽいWebサイトが見れた方がイメージしやすいですし、打ち合わせの時に説明しやすいですよね。
完全にデザインそのまま作っちゃうこともあれば、デザイン前の状態の「ワイヤーフレーム」としてお客さまのところへ持っていく場合もあります。
余談。Adobe Fireworksとの思い出
ちなみに、Adobe XDがやってくる前に私は「Adobe Fireworks」というWebカンプが作れるソフトを使っていました。
こちらはまだダウンロードはできるという噂ですが、だいぶ古いバージョンのまま取り残されているようです。
えっ、最新版が2012年5月11日…！？10年以上前…。
完全にXDに置き換わってしまった模様です。それよりも自分が歳を取ったことに衝撃です。
それは置いておいて、Fireworksは一括で書き出しが容易だったり、いいところがいっぱいあるようなので今も変わらず使い続けている人もいるようですね。
Fireworksを犠牲にしてXDが現れたので、その恨みにより実は私はXDをちゃんと使おうとしてこなかった私ですが、まさかXDも技術の進歩の犠牲になるとは…
Adobe XDの代わりに何を使えばいいの？Figmaとは
今回、XDがフェードアウトしていく中で名前が上がったのが「Figma」。これもワイヤーフレームを作るソフトらしく、デザインやプロトタイプ作成ができます！
Adobe社がXDの競合であるFigmaを買収したんだそうです。（200億ドルで…！）
これからXDはFigmaに統合される予定なのだとか。
あ、今XDを使ってる人は急に消えたりしないので大丈夫ですよ！
ちょっと試しにFigma使ってみよっか！
ちなみに、ここから始まるざっくりワイヤーフレームの完成時間は30分もかかっていません。簡単ですね！
そうとわかれば、今のうちに軽くチャレンジしてみましょう。
無料で登録できるので、サクッとワイヤーフレームを作る練習をしてみましょうか。
■コラボレーションインターフェイスデザインツール – Figma
https://www.figma.com/ja/
ちゃんと日本語対応してあるので安心です。
Googleのアカウントをお持ちの方は「サインアップ」からサクッとアカウント作成ができますよ。
まずはデザインを選んで、白紙のカンバスを用意してみましょう！
ポップなテイストのイラストで案内されるのでちょっとウキウキします。
ザクザク作っていきましょう。
まずはフレームを選びます。このデザインを表示する時の想定画面サイズですね。
とりあえず「デスクトップ」としておきましょうか。
次に、ワイヤーフレームのつもりなので四角を並べてパーツが配置される場所を明示していきましょう！
イラストレーターとかの図形を作るツールにも似ていますね。マウスのドラッグで直感的にパーツを並べていくことができます。
続いて、テキストを並べておきましょう。
なんとなくホームページのワイヤーフレーム的なものができました。
はい、できました！
簡単なワイヤーフレームは一瞬でできてしまいますね。
おまけに、「ここはスライドショーになる予定ですよ」というメモも添えておきました。
「これじゃあどんなホームページが完成するのかイメージしにくくてわからないよ〜」という場合は、もう決まっているロゴや画像を入れてみましょう。
先ほどの枠線に合わせて画像を入れることが可能です！
「画像/動画を配置」を選んで、用意した「ロゴ」の四角い枠をクリックして画像をポイっと入れるだけで配置完了です！
なんだかWebサイトっぽくなりました。
あとはカーディガンでも肩にかけながらデザイナーさんに「これを元にイケてるデザインに整えておいてヨロシク！」と言えば、立派なWebディレクターの完成です。（偉そうにしちゃだめ）
Figmaでページ間リンクなどを見せるわけではない場合は、データをエクスポートすることも簡単にできます。
例えば、下記は今回作ったワイヤーフレームのPDF書き出し版です。
静止画にはなりますが、「ソフトとかよくわかんないよ」という方にデザインを見てもらいたい時に便利ですね。
Webデザイナー・ディレクターがFigmaを使うべきか
まだFigmaはAdobeのソフトとして登場しているわけではありません。
しっかり使おうと思うとAdobeとは別にFigmaの有料版に登録しないとたくさんのデータ保存ができないので、今はまだその時ではないかもしれません。
Adobeの会社アカウントなどをお持ちの方は、わざわざFigmaの有料版を利用しなくてもそのうちダウンロードできるようになるかもしれませんので、今はまだ導入に踏み切らなくても良いのではないかと思います。
ただ、ゆくゆくは移行して使いこなそうと思っている方は今のうちにざっくりと触って慣れておくと導入しやすいかもしれませんね。
ただ、Fireworksが更新されなくなり、XDがなくなりつつあるのでFigmaもいつかはまた新しい何かに取って代わられる日が来るかもしれません。
それはPhotoshopやIllustrator、その他のソフトも同じです。
ITはいつだってお勉強ですね。これは悲しい運命ですので受け入れましょう。
今回はかなりざっくり乱暴な導入編でしたが、実際に仕事の現場で使うようになったらもっと高度な機能（プロトタイプの画面遷移を設定したり）を使いこなさないといけないシーンが増えてくるかと思います。
また詳しい話は別の機会に。