建築設計士は押さえておきたい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クリップボード

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

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

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

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

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

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