学生インターンがAdobe XDでMagentoテーマのモックアップを作るために学んだこと

この記事で得られるもの

・Adobe XDの基礎知識
・Adobe XDの強み（プラグイン・共有機能・アニメーション）の知識
・ECサイトデザインの初学者用勉強法の知識

はじめまして

この記事はMagentoテーマのモックアップを作成するという大務を仰せつかった、Veriteworksで学生インターンとして勤務している私がAdobe XDを使ってそれを達成しようとした際の記録です。

なぜ私がするか

・音楽イベントのフライヤー制作などのためにAdobe製品の使用経験がある（主にIllustrator、After Effects）。

・デザインスクールの建築学科で行なっていた建築設計の図面製作のために基礎的なビジュアルデザインを学んだ。

これらの二つの経験から、まっさらの状態からAdobe商品やビジュアルデザインに触れる方よりも優位性があると感じたからです。

実際のところウェブデザインの知識も経験も一切なく、Adobe XDも試しに起動した程度しか使ったことがありませんでした。

当時、私が最初に想定していたウェブデザインのモックアップを作成するためには

・モックアップツール(XD)をの使い方を学ぶ

・ウェブデザインの基礎的な理論を学ぶ

・様々なサイトを比較検証し、どのようなサイトがどのような目的で使われているのかを研究する。

の3つの関門を必要だと覚悟しており、その中でも一つ目のツールの使い方の学習が最も時間がかかるのではないかと予想していました。

第1の関門　ツール

私の経験上、イラストレーターやアフターエフェクトどの他のAdobe製品はまともに使えるようになるまでかなりの時間がかかります。スクールなどで体系的に学ぶべきだとのアドバイスもいただいたこともあります。
以上のことから、どれほど時間がかかるのかと怯えながらAdobe XDの基本機能を確認しながら使ってみると…。

超簡単でした！！

モックアップ制作に必要な厳選された機能ばかりが入っているので複雑な操作がほとんどなく、感覚的に操作できます。

実際にAdobeのチュートリアル動画も分という短さであり、他のソフトよりも導入しやすいソフトでした。

以下、私が使ってみたAdobe XDの強みです。

・起動、動作がとにかく軽く、負担なく制作できる。

例えば、起動時間を私が試してみたところ、Adobe Photoshopで約1分30秒程度かかったところAdobe XDではその1/10の約10程度で起動できました。
動作中に固まることもありませんでした。

・多くのAdobeならではのプラグインが使用できる。

他のモックアップツールでも様々なプラグインが使えることはたしかです。しかし、Adobe提供のソフトだからこそ使えるプラグインも多く、例えばPhotoSplash()というツールはAdobe Stockのライブラリーから検索条件にあった画像を自動的に抽出し、図形に当てはめることができます。

Googleや、フリー画像サイトからイメージを引っ張ってくる必要もなく、一括選択した図形全てにそれぞれ別の画像を当てはめることができるので、サンプルに画像を当てはめる際にかなりの時間短縮が可能です。

このように、Adobe特有のプラグインが増えてきている上、Magentoは今やAdobeのソフトです。Magentoとの互換性のあるプラグインが作成されることも十分期待できるのではないかと考えています。

ちなみに、プラグイン作成もAdobe社がかなり推薦していて、YouTubeやAdobe道場などでチュートリアルが載っているので作成してみるのも良いかもしれません。

・アニメーションのサンプルを短時間で高クオリティに作れる。

アニメーション作成はAdobeの最大の強みの一つであることは間違い無いでしょう。だからこそ、XDのアニメーションは他のツールと比較した際にも、手軽さと表現の幅のバランスがとても優れています。

こちらの映像のプレゼンテーションはXDのアニメーションの優秀さを表現できているのでオススメです。

・多様な共有機能を持ち、オフィス内外とのコミュニケーションが円滑に取れる。

Adobe XDはデフォルトで主に三つの共有機能を持っています。

1.プロトタイプの公開

2.デザインスペックの公開

3.ビデオを録画してそれを共有

一つ目と二つ目の共有方法がかなり便利で、URLやコードで共有できるのですが、プロトタイプとデザインスペックの共有ページにはコメントする場所があり、そこで指摘や修正依頼を受けることができます。

社内ならSLACKなどのツールもありますが、顧客とのコミュニケーションをこの共有リンクを使うことでとることが可能です。そのURLにはパスワードも設定可能なので、一定の安全性も保護されています。

動画撮影は、スクリーンショットでアニメーションを簡潔に伝達する機能です。こちらも、UXを構築する上の重要な要素である画面推移などを素早く共有できる便利な機能です。

第二の関門　基礎知識

ウェブデザインの基礎的な理論を学ぶことです。ご存知の通り、デザインは人間の無意識的な心理に沿うように作られるのが基本です。加えて、SEO（検索エンジン最適化）というウェブサイトがGoogleなどの検索エンジンに引っかかりやすくするための構造整理や工夫をおこなわなければなりません。

ウェブデザイナーは、そのあたりの要素をきちんと勉強する必要があると、耳が痛くなるほど言われました。

これらの基礎的な知識は
http://amzn.asia/d/elvO34O
こちらの本で学びました。こちらは検定の本なので、基礎的な知識が網羅されており、未経験の私でもかなりわかりやすく、お勧めいたします。

第三の関門　実例の研究

こちらは、実際のサイトにアクセスして自分の目で分析するのが最も勉強になりました、ウェブページは時代の流行や最先端のマーケティングに合わせて編集・作成されます。なので実際に動いているサイトを研究するのが最も実用的な方法だと言えます。しかし、Magentoの場合はアニメーションが頻繁に使われたクリエイティブ（すぎる）サイトは、システムに過剰な負荷がかかり、ユーザー体験を阻害する可能性が大いにあるので、注意をしています。

私たちは自然と自分の関心のあるもののサイトを参考にしてしまいがちではありますが、アウトドア系が好きだからといってアウトドア系のウェブサイトばかりを参考にしたり、ハイブランドが好きだからといってGUCCIやMIU MIUなどのブランドサイトのみを見てしまうと、汎用性の少ないデザインのみしか考えられいようになってしまう可能性が大いにあります。なので、私は多くのECサイトを見て研究することを心がけています。

例えば、男性でも勉強のために主要なコスメ系のウェブサイトを見てトレンドのウェブデザインについて勉強したり、ハイブランドの服しか着ないという信念を持ったファッショニスタだとしても、GUやユニクロといったファストファッションのブランドのウェブサイトを閲覧して学ぶことは、必ず意識しなければならないでしょう。

私は今、この三つ目の関門に直面しながら、実際にテーマ作成に挑戦しています。

まとめ

私は、デザインの経験はありますがウェブデザインについてはほとんど未経験です。しかし、建築などのデザインと比べて、教材がインターネットにたくさんあり、ツールの使い方も、理解しやすいものがYOUTUBEを探せばすぐに見つかります。

Adobe XDという簡単で使いやすいツールがあり、多くの教材と実際のサイトという例がインターネット上に無数に転がっているので、みなさまも是非、Adobe XDでテーマ作成をしてみてはいかがでしょうか！