人気記事
Adobe XD  ”UI・UXの頂きから見える至高の景色”

皆さんはホームページを作成する際、何を意識して作成するでしょうか。

ただ闇雲なWebデザインになってはないでしょうか。ホームページを作成する理由は閲覧者の購買意欲を高めるためであり、独りよがりな自己満足ではホームページとして意味を成しません。

 

そこで今回はWebデザインをする上で意識する点をご紹介するとともに、実際ホームページの作成に用いられるツールについてご紹介致します。

真のWebデザイナー = UI・UXの覇者

ホームページを作成するにあたって意識するべきことは閲覧者がページに留まりやすいデザインにする必要があるということです。つまり第三者の目線でそのページが見やすいか否かということが決まってしまうのです。

 

しかし我々Webデザイナーは個人の主観によってデザインを行っていると言えるでしょう。

確かに自分好みなデザインはページ自体に愛着も湧きますし、やる気も出ます。しかし、そのホームページはデザインの観点から本来の目的を見失ってしまっているのです。

 

では、不特定多数の閲覧者の目に止まるデザインとは如何なる物でしょうか。

そこで鍵となるのがUI・UXになります。

 

この二つを意識したWebデザインであるか否かは大きな差が生まれると言ってもいいでしょう。このUI・UXについてまずご説明致します。

”UX”(User Experience)の本質

User Experience(UX)とは、お客様に最大限のサービスを提供するという目的を達成するために、ユーザーがアプリケーションやWebサイトを利用する際の総合的な体験を向上させる手順のことを指します。

 

つまりUXとは、閲覧者がホームページを介して得られる「心地よさであると言えるでしょう。

 

ホームページに訪れた閲覧者が感じる感覚全てがUXに当たります。

例を挙げると、美しいデザインや見やすいフォントなどの色覚的な感覚や、ページの読み込むスピードが速いなどの意識的な感覚などです。

つまりここで重要になるのがUXのを意識するということは、お客様の満足感を念頭に置いた上でホームページの作成であるということです。

 

UXに富んだデザインを行う事によって閲覧者がページ上に留まる時間が必然的に増え、ホームページとしての本来の役割を果たすと言えるでしょう。

”UI”(User Interface)の本質

一方、User Interface(UI)とは、Webサイトや携帯アプリの表現力や操作性を向上させるプロセスのことを指します。UIとはUser Interface(接点)の略で、Webサイトやアプリにおいては、ユーザーがそのサイトやアプリを利用するときに接する画面や画面遷移、何かしたときのレスポンスなど含む一切を意味します。

 

もちろん画像やイラスト、フォントやテキストサイズ、色といったグラフィックデザインの要素も含まれます。

 

つまりUIとはWebサイトの作り手とユーザーがコミュニケーションをする接点となる部分と言えるでしょう。

 

アプリの外観を重視し、ユーザーとの対話を促進させるのです。アプリケーションを使用する際に目にする画面、ページ、ボタンなどの視覚的要素が、そのアプリケーションのUser Interfaceです。

 

これら二つの点を意識する事によって、ホームページの格は格段と跳ね上がり、閲覧者に満足していただけるデザインであると胸を張って言えるでしょう。

 

しかしこのUI・UXをマスターするには何よりも自分の経験値を増やす必要があります。

これらの本質をしっかり理解した上で自分なりに試行錯誤することをお勧めします。

 

真のWebデザイナーへの道を歩む一歩としてこの記事を認識していただけると幸いです。

 

では実際にUI・UXを用いたデザインをするにはどのツールを用いれば良いでしょうか。

 

筆者はAdobe XDを強くお勧めします。理由は様々ありますが、何よりも使いやすいという点、そしてUI・UXのデザインをする上で必要となる機能が網羅されているからです。

 

これらの点を踏まえてAdobe XDの魅力についてご紹介致します。

Adobe XDとは?

Adobe Experience Design(Adobe XD)とは、WindowsとMacに対応したプロトタイピング(将来完成予定の作品の不完全なモデル(プロトタイプ)を作成することおよびその過程を意味する)やUser interface、User experience のデザインを可能にするツールのことを指しています。

 

シンプルな操作性であるため、あらゆるレベルのデザイナーに適していると言えるでしょう。

 

このソフトは、ページ間のインタラクションを作成するためのプロトタイピングと、UIおよびUXデザインのためのアートボードを使用しています。そのため、Adobe XDはモックアップ(設計・デザイン段階で試作される、外見を実物そっくりに似て作られた実物大の模型のこと)やワイヤーフレーム作成に最適なツールとなっています。

 

Adobe XDは、わかりやすくて使いやすいソフトであると言えるでしょう。そのインターフェースは他のAdobeソフトとは異なりますが、同じツールと同じようなショートカットを備えています。

 

これまでにAdobeのアプリケーションをひとつも使ったことがなくても、UIやUXデザインの基本をっていれば、Adobe XDの使い方を簡単に学ぶことができます。User interfaceの経験があることが望ましいですが、同時にXDはそれを学び始めるのに適した場であります。

Adobe XDの特徴

Adobe XDは、コラボレーションや共同作業でレイアウトを作成するための強力なツールです。

その主な機能の一部をご紹介します。

 

* プロトタイプ作成

* レスポンシブデザイン

* ベクターデザイン

* リピートグリッド

* コラボレーション

* 他のアプリとの連携

 

プロトタイピング

 

この機能は、インタラクティブデザインの核心であり、すべてのAdobe Experienceデザイナーが頼べきものです。


XDでのプロトタイピングは、アートボードを接続し、そのオブジェクト間にさまざまなインタラクションを作成する手段です。

 

これらのインタラクションを開始するには、マウス、キーボード、ゲームコントローラー、タッチジェスチャー、さらには音声コマンドを使用することが可能です。

これらは通常、1つのページから別のページへの移動、オブジェクトのアニメーション、オーディオファイルの再生などを含みます。

 

Adobe XDでは、ドロップダウンメニューなど多くのUIに重要なアニメーションオブジェクトを作成することもできます。

レスポンシブデザイン

 

Adobe XDでは数回クリックするだけで、アートボードの編集、作成、削除が可能です。

 

レスポンシブデザインに加え、多数のサイズテンプレートが用意されているので、このAdobeアプリクリエイターは素晴らしいツールと言えます。

つまり、ウェブサイトのユーザーにレスポンシブデザインのオプションを設定することが可能なのです。

 

特筆すべきは、デスクトップ版のプロジェクトを変更すると、モバイル版にも同じ修正が自動的に適用されることです。

ベクターデザイン

 

エクスペリエンスデザインでは、Adobe Illustratorと同様に、主にベクターグラフィックスを使用しています。

 

ベクターグラフィックスの形状を変更しても品質に影響がないため、レスポンシブデザインに適しています。

リピートグリッド

 

Adobe Experience Designレビューの目玉ともいえるこのユニークな機能は、非常に便利なものです。


1つのオブジェクトまたはオブジェクトグループのコピーをいくつでも作成することができます。

リピートグリッドを作成したらすぐに、それを拡大するとコピーが作成され、その逆も同様に行うことができます。

コラボレーション

 

Adobe XDの共有モードを使えば、URLを作成してクライアントや他のプロジェクトメンバーと共有し、確認することができます。

 

コラボレーションのためのもう一つの優れた機能として、XDではMicrosoft TeamsやSlackなどのアプリを統合することができます。

XDでは、Microsoft TeamsやSlackなどのアプリを統合することができ、メッセージの概要にサムネイルや短いプロジェクトの説明を含めることができるので、同僚は送信内容をすぐに確認することができます。

他のアプリとの連携

 

他のAdobeソフトで作成したプロジェクトを統合できなければ、Adobe アプリとは言えません。

特にAdobe XDでは、PhotoshopやIllustratorのプロジェクトをインポートして、そのオブジェクトやレイヤーをすべて維持することができます。これにより、Webデザインの原則にこだわることができるのです。

プラグイン

 

ベストなAdobe XDのプラグインは、ワークフローを大幅に高速化し、数々のビジュアルを追加して、アプリをさらに強化することが可能です。

 

HTMLコードのエクスポートから様々なグラフィックの追加まで、できないと言えるでしょう。驚くべきことに、ほとんどすべてが無料または無料版で行うことができます。

Adobe XDの弱点

 

Adobe XDは強力なツールですが、制限がないわけではありません。

 

CSSの書き出しができない

Adobe XDはウェブサイト制作ソフトではなく、UI/UXデザインソフトですが、HTMLを書き出すプラグインはあっても、CSSを書き出すプラグインがないのはやはり寂しいものがあります。これがあれば格段に良くなりますし、強力になります。

 

問題のあるモバイルプレビュー機能

Liveプレビュー機能を使えば、Adobe XDプロジェクトのモバイル版をMacやiOSデバイスで試すことができます。Windowsでの設定はかなり難しく、Windows版もMac版もAndroidスマートフォンには対応していません。サポートされていない旧バージョンのWindowsに関しては、Adobe XDはWindows 10でのみ動作します。

 

結論

 

今回はUI・UXを意識したWebデザインの重要性、そしてAdobe XDについてご紹介しました。

Webデザインをする上で重要な要素とツールについて理解していただけたら幸いです。

これら二つの点を押さえて真のWebデザイナーを目指しましょう。素晴らしいホームページには閲覧者の興味関心をくすぐり、購買意欲を促進する力があります。その点においてホームページは初めて意味を成すのです。

 

ご精読ありがとうございました。

Twitterでフォローしよう

おすすめの記事