コラム

ウェブサイトができるまでどのような作業があるかご存知ですか。

細分化するととても多くなりますが、ざっくり分けると、
・要件定義
・ワイヤーフレーム作成
・デザイン作成
・コーディング
になります。

今回は、ワイヤー、構成の作成について少し触れたいと思います。
ワイヤーフレームの作成といえばFireworksと言われてきましたが、現在では様々なツールが存在しております。
その中でも、Adobeが提供している、AdobeXDが様々な機能を備え、動作も軽量であるため、おすすめです。

AdobeXDのメリットは？

とにかく軽い

Adobeソフトといえば起動や挙動が安定しない、重いというイメージがありますが、XDに関してはサクサク動きます。
アートボードを何枚作成しても動作が安定しているため、ページ数の多いサイトでも活躍できるでしょう。

ワイヤーの素材が豊富

Adobeから素材が提供されており、ワイヤー作成が容易となります。
ボタンのみでなく、ヘッダーやフッターも多数あります。
しかも無料の物も多くありますので、コスト面でもおすすめです。

プロトタイプの作成が容易

実際に実機でのページ間の遷移やタップ、スワイプの動作確認ができます。
そのため、ユーザーの使い勝手を考えたUI設計が、より簡単になります。

プロトタイプのユーザー間での共有が容易

作成したプロトタイプはURLを発行することができるので、全てのPCやスマホで確認することができます。
そのため、ディレクターや、クライアント間のやり取りも、より簡単になります。
また、閲覧するだけならXDは必要ないので、PhotoshopがないからPSDファイルが見れないみたいなことにはなりません。

AdobeXDのデメリットは？

メリットが多く扱いやすい印象のXDですが、あくまでワイヤーフレームの作成ツールです。
Photoshopのような写真の彩度の調整、レイヤースタイルの適用などの細かいデザインはできません。
そのため、メインビジュアルや、バナー制作にはあまり向かないと思われます。

いかがでしたでしょうか。
簡単なワイヤーから、プロトタイプ、共有まで、とても簡単にこれ一つでできるため、一度試してみるのもいいと思います。