名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

TEL.0120-038-517 CONTACT

NEWS & COLUMN

お知らせ・コラム

SCROLL

DESIGN

WEBデザインスキルを応用したXDでのプレゼンテーション作成方法

2022
.08.31

WEBデザインスキルを応用したXDでのプレゼンテーション作成方法

ホームページのデザインを専門にするWEBデザイナーでも、ホームページの提案や社内の発表などでプレゼンを行う機会は少なくありません。プレゼン制作ソフトといえば、Microsoft PowerPointが一般的ですが、普段WEBデザインなどでAdobe製品を使用しているWEBデザイナーにはMicrosoft Office系のソフトの操作は苦手な方もいるかもしれません。Adobe XDはWEBデザインを行うデザインソフトとして一般的ですが、動作の軽さと共通要素を一括に管理できる機能などを応用し効率的にプレゼン資料の制作を行うことも可能です。そこで今回は、ホームページ提案時のプレゼンテーションに役立つ、Adobe XDでWEBデザインスキルを応用したプレゼン資料制作のメリットと制作方法をご紹介します。

【目次】
1. Adobe XDでプレゼン資料を制作するメリット
a.WEBデザイン制作のスキルを応用して効率的に資料を制作できる
b.プロトタイプ機能を応用した魅力的なプレゼンが可能になる
c.資料の共有が簡単にできる
2. Adobe XDを使用したプレゼン資料の作成方法
3.今回のまとめ

Adobe XDでプレゼン資料を制作するメリット

Adobe XDでプレゼン資料を制作するメリットとして、一番は普段からXDを使用している「慣れ」の部分が大きいですが、WEBデザインを制作するソフトとしてXDが持つさまざまな機能などはプレゼン制作ソフトとしても魅力的です。

WEBデザイン制作のスキルを応用して効率的に資料を制作できる

WEBデザインスキルの応用できるメリットとして、前述した「慣れ」の部分も大きいですが、Adobe XDには共通項目のデザインを一括に管理する機能などが豊富なため、テンプレートを流用して各ページを編集していくプレゼン資料制作に向いています。
また、既存のプレゼンテーションの枠にとらわれず、WEBデザインライクなスクロールを任意の箇所に挟むなど、自由な構想で資料を作成することも可能です。

プロトタイプ機能を応用した魅力的なプレゼンが可能になる

WEBデザインで普段使用しているページリンク、ホバーアクションなどを簡易的に表現できるプロトタイプ機能を応用することで、プレゼンテーションをより魅力的にすることも可能です。ページをクリックで次ページへ送ることは当然ですが、任意の箇所をクリックすることで複数のページにリンクさせたり、ホバーアクションで簡易的なアニメーションを実装することもできるため、より有機的なページ構成の実現が可能になります。

資料の共有が簡単にできる

プレゼンテーションの資料を相手に共有する際もAdobe XDならWEB上にURLを知っている人のみに限定公開しブラウザ上で閲覧してもらうことが可能です。PowerPointのようにPPTXやPDFファイルを送付しファイルを開く必要もなく確認することができます。限定公開したデータには閲覧者が自由にコメントすることもできるので、確認ついでにフィードバックを残してもらうこともできます。
また、プレゼンテーションの本番ではデスクトッププレビューを画面共有することで簡単にプレゼンを行うことができます。zoomなどではデスクトッププレビューをウィンドウ選択することですぐに資料を共有できます。印刷して使用する場合やウィンドウ別に出力ができないプロジェクターなどで出力する際はスライドのサイズに注意しましょう。

Adobe XDを使用したプレゼン資料の作成方法

他のスライド制作ソフトにも言えることですが、プレゼンテーションを行う環境を踏まえ他スライドサイズの設定をしましょう。仮に13.3インチのMacBookでプレゼンを行う場合は、横1280px、縦800pxの倍数サイズでスライドを制作するとフルスクリーン表示に合う比率のスライドを制作することができます。
制作する際はWEBデザインの際も多用するカラーや文字スタイル、コンポーネントなどのテンプレート設定を行うことで共通項目を一括して編集することができます。また、類似項目はリピートグリッド機能を活用することで複製、編集することで効率的に作業を行うことができます。

スライドのデザインが完了したら、プロトタイプ機能を用いてスライドの導線構築を行いましょう。従来のスライドのようにページ順を設定できるだけでなく、ホームページのボタンのように子項目から任意のページにリンクさせることで索引的な構成も可能です。

ホバーアクションなどのステートでアニメーションを設定したら、実際のプレゼンテーション環境を想定してデスクトッププレビューやWEB上のデザインレビューで動作を確認しておくことも大切です。

今回のまとめ

WEBデザインでAdobe XDに慣れ親しんだユーザーなら、XDを使用することで効率的に資料制作を行うことができます。しかし、XDはあくまで資料作成ソフトではないので、プレゼンテーションに最適化されているわけではありません。XDをある程度使い慣れていない方では導入のハードルも高く、機能もシンプルなため、自身のデザインスキルやプレゼンテーションの環境を踏まえて資料制作ソフトの選定を行いましょう。

AUTHOR

著者情報

WEBデザイナー

T.S.

デザイン事務所でグラフィックデザイナーとしての勤務を経て、株式会社オンカにWEBデザイナーとして入社。クリニックやサロンなど高級感のあるデザインを得意としながら、サービスサイトやコーポレートサイトなど幅広いジャンルのホームページにおいて緻密な計算に基づいたデザインで顧客の集客力向上に尽力している。

  • カラーコーディネーター AD
  • ウェブマスター検定 1級
  • フードコーディネーター 3級

PAGE TOP