おすすめデザインツールAdobe XD vol,1
どうも・・・。筆者です。
2〜3日更新がモットーの当ブログ。今回は更新が遅くなってすみません・・・。
実は11月〜12月の頭くらいまで寝る間を惜しむ激務だったのですが、ようやく片付いてブログ記事に全力を注ごうと思ったところ、なぜかそのタイミングで腰が爆発しましてですね・・・・。
しばらく椅子に座れぬ日々を過ごしておりました。
これに関しては、転んでもただでは起きない筆者。
後に記事にしてやろうと思っております。
在宅デスクワークの皆様はくれぐれも同じ轍を踏んづけないようにしてね。
さてさて。近況は一旦さておき、本題に参りましょう。
今回はおすすめデザインツールの紹介の第二弾・・・ではあるのですが、 今回は玄人向けツールの紹介です。
というのも、筆者、最近WEBデザインは専らadobe XDを使うようになりましてですね。
このadobe XD、使えば使うほど本当に痒いところに手が届くソフトでして。
これまでデザインといえばPhotoshopやillustratorだったのですが、XDの便利さ、そしてコーディングへの連携のしやすさなどをひしひしと実感し、もはや全webデザイナーはXDでデザインすればいいんじゃないかと本気で思うようになりました。
まだ、使ったことないデザイナーさん。
新しい技術に慣れるの大変なのはわかりますが、これを機に是非XDをお使いになることをおすすめします！
というか、デザイナーさんだけじゃなくてディレクターも使えるならXDでワイヤーフレーム書いた方が便利ですぞ！
XDあるとクライアントワークもめっちゃ楽になりますぞ！！
・・・というのを、若干鼻息荒く解説させて頂きます。
鬱陶しいでしょうが、XD未体験の方にとっては損はさせない内容ですので、是非ご一読をば！
ここがすごいXD！その①：モックアップ作成機能
まず、WEBデザインの制作にはいくつか工程があると思います。
- ヒアリング
- デザインカンプ
- デザイン仕上げ
- コーディング 納品
（サーバーは絡むとややこしいので持ってる前提でお送りします・・・・）
ざっくり挙げて行くとこんな感じでしょうか。
その中で、筆者のこれまでの経験も含めて苦労してきたポイントといえば主に３つです。
- カンプだけじゃイメージできないクライアントさん多し
- カンプ内で修正を繰り返した末に最初はあった法則が崩壊
- いざコーディングするときにルール化できておらず、再度デザインルール統一に戻る羽目になる
この中でのポイント１つ目、クライアントさんがイメージできない問題。
一枚絵は素敵だけど、これ、どう動くの？
特にWEBに不慣れなお客様は、毎回、二言目にはこう仰っていたように思います。
その度に口頭で説明したり、挙動が同じサイトを探して説明するわけですが、どうも今見ているカンプと動きが一致しない方が多い印象で、「もっと大局的にみて欲しいのにどうして枝葉ばかりを気にするのだろう・・・」と心で泣いた日も多かったものです。
しかしながら、サイトといえば動くものを期待するその心理もわかります。
どういう完成図になるのか見せられるなら、見せてあげたいなーと筆者はずっとずっと思ってました。
それが！！！
できちゃう！！！！
できちゃうんですよ、奥さん！！！！
XDにはモックアップ作成機能というものがあります。 これで、まだコーディングも何もしてないけれど挙動だけはあたかも本物そっくりに実装できてしまうのです〜〜〜〜！！
これからはカンプデザインはXDで作成し、クライアントさんのご要望に合わせてモックまで 作ってあげると、クライアントさんもイメージついてデザインにもGOが出やすくなるのでは ないでしょうか・・・？
個人的な所管ですが、XDでカンプを作るようになってからというもの、 デザイン的にはwidthやmarginも取りやすくなって作業効率は上がるし、 軽くモックを出したデザインは今までよりもOKが出やすくなった印象があります。
クライアントとデザイナーの「こうなったらいいな」を見事に実現してくださったXD。
モックの作り方は以下の動画がわかりやすいと思うのでぜひ参考にしてみてくださいませ。
これでクライアントさんに主要ページの動きも含めてお見せできちゃうので、今まで一生懸命 口頭であーでもないこーでもないと説明していたあの苦労がもうありません。
こうなりますよ〜！とお見せするだけ！
もう、説明で苦労していた筆者的には涙でてきますね。
また、XDのアニメーション挙動は実際のコーディングができる前提ですので、 コーダーとデザイナーで挙動で揉めることがないのも個人的には嬉しいポイント。
ここがすごいXD！その②：余白を数値で出してくれる
本来、デザイナーにあるまじきことなのですが。
筆者、余白レイアウトが結構苦手でした。
最初はそこそこルールを設けて作り始めるものの、あれこれとディテールや配置をこねくり回しているうちに余白ルールがどんどん狂ってきて、誰かとデータを共有したときにルール狂いを指摘されたり、コーダーさんに文句を言われたり、はたまた自分でコーディングしたときにやっぱりルール狂いがあって、それをコーディング上で直したら微妙にデザインがずれて完成してやっぱり指摘されたり。
まぁ、コーダーからすると一緒に仕事したくないNO１デザイナーの見本のような奴でございました。
そんな規則破り常習犯デザイナーだったワテクシですが、XDに変えて、ようやくその常習犯を卒業することができました、ぱちぱちぱち。
イラレもスマートガイドが設置されてずいぶんと使いやすくはなっているのですが、XDで嬉しいのはオブジェクトを配置すると数値計測までしてくれるという点。
筆者がルール破り常習犯を卒業できたのはひとえにこの数値計測のおかげといっても過言ではございません。
ほら、ブロックごとのmarginとかあるじゃないですか？
あとは、昨今よくあるカードタイプのレイアウトとか。
ああ言うデザインで筆者は３つ目のデザインだけpadding数値を狂わせるとかいう罪深いことを無意識にしでかす奴だったんですな・・・・。 （コーダーさん・・・もし読んでたら、もう改善したのでどうか許してけれ・・・・）
イラレでもちゃんと数値を測ればそもそもそんなこと起きないのですが、そういう部分を見えてないからって横着してたわけでして・・・。
そんな横着者の私に、あなたのオブジェクトは今「left-padding:32pxでright-padding:40pxだわよ」といつもいつも丁寧に教えてくださるXD様。
おかげで毎回数値を意識する癖がつき、ちゃんと整数配置を心掛けているため、今の私のカンプデータ、もといモックデータは結構綺麗なはず。
今なら、モックまで作ってコーダーさんに「これでコーディングお願いします！」って言っても大丈夫なのではと思っております。
XDの魅力はまだ続きます！！
こんな痒いところに手が届かんばかりの素敵な機能満載のXD。 たった一回ではとても説明仕切れません。
次回は、いよいよこのリモートワークの時代の救世主。 同時編集機能についてご紹介して参ります！
デザイナーの皆様、時代はXDですよ！ 個人的にはSketchよりFigmaより今はXDが使いやすいです。