建築設計士は押さえておきたいAdobe XDで作るプレゼンボード

Adobe XDでプレゼンボードを作ってみる

今回は「建築プレゼンボードを作るなら、Adobe XDが便利」という内容をご紹介します。

建築プレゼンボードはMicrosoft PowerPointやKeynote、専用ソフトをお使いの方が多いと思います。ビジネス必携ツールともいえるほど普及しているPowerPointですが、シンプルで直感的な操作性が欲しいと感じることもあります。AppleのKeynoteは社内マシンがWindows PCだと使えないといった環境にも左右されます。

Adobe XDとは?

実はAdobe XDはWebやモバイルアプリのUI / UXデザイン専用ツールとして誕生し、必要な機能だけで構成され、シンプルで直感的な操作性が魅力です。

Adobe XDで作成される画像はベクターデータですので、プレゼン用に拡大したり配付資料用に縮小したりしても荒れにくいという特長があります。そしてAdobe PhotoshopやAdobe Illustratorと比べると動作が軽く、操作の邪魔になりません。

Adobe XDのワークフロー

Adobe XDの操作画面には二つのモードがあり、見た目のデザインは「デザインモード」を使い、動きのデザインには「プロトタイプモード」を使います。二つのモードを往来しながら作業し、最後に関係者に「共有」するという流れです。

Adobe XDを開くとアートボードと呼ばれるデザインをレイアウトする領域が表示されます。あらかじめ用意されたモバイルアプリやWebサイトの各画面サイズを指定し、デザインをスタートします。

その後、複数のアートボードをつないでインタラクティブプロトタイプを作成します。作成されたプロトタイプをWebに公開し、関係者が閲覧・コメントできるようにURLまたは非公開の招待状(プレビュー版)を提供することができます。ブラウザーで見ることができるので、Adobe XDをお持ちでない方でも閲覧できます。

Adobe XDで外構提案用プレゼンボードを作成してみた

これらAdobe XDの一連の機能を使って外構提案用プレゼンボードを作ってみたいと思います。

アートボードを選択

まずは建築のプレゼンボードを想定して、デザインモードで「1,920×1,080」のアートボードを選択します。

直感的にデザインを進める

アートボードの背景をグリーンに色付けし、テキストとパース画像を挿入。PhotoshopやIllustratorからデザインをコピーしてアートボードにペーストしたり、次のアプリからファイル(JPG、SVG、PNG、GIF)を読み込みドラッグまたはコピー&ペーストをしたりすることもできるので、デザイン作成はスムーズに進められます。

  • エクスプローラー(Windows)
  • Finder(Mac)
  • Webブラウザー
  • OSクリップボード

パース画像と背景色がイメージに合わないため、背景色を修正してみます。右側の塗りつぶしツールを使って好みの色合いを簡単に選択できます。

リピートグリッドを活用する

同じデザインを繰り返す場合に「リピートグリッド」が役立ちます。例えば、サムネイルと短文のリストを繰り返す場合、要素を選択してリピートグリッドをクリックすると、境界線に大きなハンドルが表示されるので縦横にドラッグすると簡単に複製ができあがります。いずれかのスタイルを変更すると全てのグリッドに反映されますので、デザイン変更・更新時にうれしい機能です。

今回は表紙の画像に帯状の透かしをリピートグリッドを使って入れてみました。

テキストを比較しながら変更する

テキストをクリックし、右側のプロパティからテキストの種類、フォントサイズ、テキスト揃えをイメージに合わせて調整します。アートボードをコピーして並べて比較しながら操作するとイメージの違いを比較しやすいです。テキストブロックの個々の単語または文字を選択してそのセクションのみを書式設定することもできます。

アートボードを追加しながらデザインを進める

アートボードを追加してデザインを進めていきます。Webカタログ画像などのコンテンツをドラッグ、またはコピー&ペーストして挿入できるので操作は非常にスムーズです。目的に合わせてアートボード追加・リピートグリッドを活用して編集を進めていきます。

ターゲット画面にリンクを設定する

プロトタイプモードに切り替えリンクを設定していきます。

オブジェクトをクリックすると矢印付きの接続ハンドルが表示されます。ハンドルにマウスポインターを重ねるとカーソルがコネクターに変化するので、ターゲットのアートボードまたは画面までドラッグするとリンクが設定できます。一つのオブジェクトから複数のリンクを設定する際も同様にドラッグするだけです。

アートボード同士を接続するには、アートボードのタイトルを選択します。リンクを削除するにはターゲットアートボードからドラフトエリアにコネクターの宛先ハンドルをドラッグします。

デザインとプロトタイプのプレビュー

リンクが仕上がったらデザインモードに切り替え、デスクトッププレビュー機能で画面の切り替えなどを含めて正確にプレビューできるか確認します。仕上がりに問題なければ共有機能を利用して、公開または非公開のWebリンクを発行して関係者と共有できます。お客様にコメントを入力してもらうこともできます。

このようにAdobe XDのちょっとした機能だけでも、外構提案のプレゼンボードが簡単に作成できました。Adobe XDのデザイン機能を有効に利用すれば、より効果的な活用もできそうです。

さらに詳しく知りたい方へ - 無料資料ダウンロード

本トピックスでご紹介しきれなかった内容を資料にまとめています。もちろん無料! ぜひ情報収集や検討資料としてお役立てください。

資料ダウンロードお申し込み