モダンなWebデザインはXDで決まり！（内容によるが）

お世話様です、小林です。

ってわけでたまには更新します。

今回はデザインツールについて（Adobe製品限定）。の中でも、Webデザインのお話しです。

少し前までは、デザインツールといえばPhotoshop（以降フォトショ）かIllustrator（以降イラレ）が主流だったかと思います。
個人的には、アイコンとか結構必要なデザインはイラレ、レスポンシブちゃんと考えながら作ったり、写真素材多めな場合はフォトショってイメージでした。

あとは昔だとFireworks？とかあったみたいですが使ったことありません。

InDesignも使ったことありません。Adobeさんはツールたくさんあって半分くらい使わないですよね。

私も使っているのは９つでした。むしろ思ったより多かった。

 

ってわけで本題。

1年と半年前くらい？から本格的に使いだしたこちらのツール「XD」を紹介したいと思います。

 

XDってなに？

大まかに言ってしまえばデザインツールです。

が、目的が少し違って、「Webのワイヤーフレームやアプリのデザイン」に特化している、といっていいのかな？

多数の画面デザイン、UIを一気に作成して、その中で「画面のこの部分をタップするとこの画面にいく」とかもXD内で再現できます。

簡単な例だと、

【WebサイトのHOMEとABOUTデザインしまして、HOMEのヘッダーメニューの「ABOUT」をタップするとABOUTページが開く】

というようなWebサイト上の動きをXD内で再現できます。

これまでのデザインツールだと、HOMEもABOUTもページ全体のデザインを作って書き出して、パワポとか資料にまとめて

「この画面のここをクリックするとこの画面に～」みたいな説明が必要だったものを、

XDならWebサイトを直接触っているかのような感覚で見せることができます。

Adobe Cloudと連携が簡単にできるので、URLを発行してブラウザ上で体験してもらうことも可能。

まさにUX、UIを体感してもらう、といったことが可能なのです。

 

そもそもPhotoshopとIllustratorのメリデリ

ってわけで一旦整理しましょう。

デザインツールばっかりどんどんでても、結局じゃあなんでAdobeだけからそんなたくさん出てるの？って方も多いと思うので、

それぞれのツールのメリデリを完全主観でご紹介。

まずはフォトショとイラレから。

 

Photoshopのメリデリ

メリット

写真加工が強く色々なことができる。

素材加工がしやすい、切り抜きとかマスク処理がしやすい

ペンタブも使える。（イラレは使えないよね？たしか。）

レイヤー管理がイラレに比べて楽（これは完全に好みの差）

アートボード機能が使いやすくレスポンシブデザインしやすい（これも完全に好みの差）

デメリット

ベクターが扱えない（致命的）

 

Illustratorのメリデリ

メリット

ベクターが扱える

アピアランスやパスファインダーといったベクターデータで素材を作る上で色々な事ができる

デメリット

重い！

写真加工は基本出来ないと思っていい

ペンタブ使えない（はず）

アートボード機能がつかいずらい？（主観）

 

超個人的ですがざっくりこんな感じ。

まとめると、

Webサイト全体のデザインはPhotoshop、その中のアイコンとかのベクターデータで作りたい素材はIllustratorで作る

が一番理想形かなぁと思います。

と、、そこで登場しますはXD。

もちろんすべてにおいて勝ってるなんてことはないですが、個人的なメリデリです。

 

XDのメリデリ

メリット

軽い！！！！！（まじで軽い！！！！！）

→持ち出し用の低スぺPCでもサクサク動くので、クライアントとの打ち合わせ時もらっくらく。

ベクターデータが扱える（ただしイラレほど高機能ではない。アイコン作成とかくらいは余裕）

アートボード機能は神。というかそれ前提に使うソフト。

画面遷移も指定できる。

モダンなデザインテーマやテンプレがめっちゃある。

→スマホアプリのデザインなんかはめっちゃ便利。カレンダーとかいちいち作るのめんどいじゃん。

無料！！！！！！！！！！！！！！！

デメリット

写真加工はできない。

ペンタブなんていらない。

 

とまぁ超ざっくりこんな感じです。

まとめると、

イラレとフォトショのうちの「モダンなWeb、アプリデザイン（全体の作成）」に必要な機能だけを抽出して、下位互換させたツールです。

モダンってところがミソです。

例えばボタンのデザインとか、昔はリッチデザインが主流でしたが今ってまぁまずつかわないじゃん？私は作りません。めったに。一回あったかも。

XDではエンボスとか作れないので（超がんばればできるけど）そういうのはできません。

パッとかけれるエフェクトなんてシャドウとブラーだけ。たしか。

でもそれで十分なんです。フォトショもイラレも余計な機能が多すぎるのです。

XDは余計なものを一切排除して、逆に超重要な「アートボード」「ベクター」「マスク」あたりだけに特化させて、直観的にデザインできるようにしたツール。

 

よくある長めな化粧品とかのLPみたいなデザインは厳しいけど、ブートストラップで使われるようなデザインとか、いわゆるサイト制作でコーディングしやすい

モダンデザインはほぼできます。

 

結局どう使い分けるか

前術の通り、フォトショやイラレがWebデザインの世界で不要になったかと言われたらNoです。

逆引きてきな使い分けですが、

 

モダンなシンプルデザインのWebサイト制作依頼

まずはXDでWFを起こして、画像が入るような部分は適当にシェイプにしておき、

画像が決まったらフォトショで加工して、XDのWFに当て込んでデザイン整えていく、

で完成で大丈夫だと思います。

そのまま前ページ、レスポンシブも含めて紐づけて提出できます。

 

ちょっと古めな画像文字もたくさんつかうロングLP制作依頼

フォトショ一択ですかね。内容によってはイラレ。

こういう時はXDは出る幕無し。ページ数も少ないと思うので。

 

モダンデザインのWebサービスサイトの制作依頼

これも一個目と同じ要領です。

動的ページもデザインしていきましょう。

あと、複雑なアイコンとかシェイプデザインが必要な場合はそこだけイラレを使うとやりやすいかなと。

簡単なものはXDで作っちゃいましょう。

 

と、ざっくりこんな感じです。

古めなデザインや、ページ数が少ないLPとかならXDは出る幕ないかなって思います。

でも今時デザインならXDで最初からとりかかりつつ、バナーとか部分部分はフォトショやイラレで素材作成、が

今後のスタンダードになるといいなぁって思います。

 

肝心のXDの使い方は？

最後に。

フォトショ、イラレ使ったことある人なら、30分あればある程度使えると思います。

見りゃわかる。きっと。たぶん。

あと、ディレクターさんやエンジニア側の人にこそ使ってもらいたいツールでもあるんですよね。

かくいう私はまさにディレクター兼エンジニア側なので。デザインはあまり得意ではありません。。。

デザインツール慣れてない方は、2時間使ってみましょう。ぐりぐりぐりぐり。多分それで大丈夫です。

フォトショやイラレに比べて難易度はくっそ低いです。

 

 

 

ってわけで今回は愛用ツールのXDの紹介でした。

実際、いまではなくてはならないツールになってしまいました。

Adobe様ありがとうございます。