この記事はAdobe XD Advent Calendar 2018 4日目の記事です。

先月、弊社で開発しているWebサービス「Lisket」のランディングページをざっくりリニューアルしました。
私はデザインからコーディング（既存コードの上書き）を担当していまして、スピード重視のスケジュールの中、XDが役立ったので簡単に紹介します。

※制作環境はmacOSです

背景・状況

LPのリニューアルについて

Lisketの料金体型が11/8から新しくなり、あわせてLPも刷新しよう！というのが発端でした。
ご利用を検討されている方に新しい料金体系とツールの利点（対価）が正確に伝わる状態にすること、そしてCVRの向上が主な目的です。

尚、現状は共通パーツとトップ・料金・フォームページなど特定範囲を優先的にリニューアルした段階であり、その他のページや内部コードは今も随時改善中です。

ちなみに今回のリニューアルは、「Lisketインサイドセールスプロジェクト」という リード獲得に向けた施策の一部 です。
部署をまたいだメンバー同士で、Slackのプロジェクト専用チャンネルの中で日々やり取りしています。

活躍した場面

方向性・コンテンツ内容のすり合わせ

リニューアルの方向性検討ではまずラフイメージを作成し、プロジェクトリーダーにすぐSlackで投げて都度フィードバックをもらっていました。
この段階ではスピードを最優先し、リニューアル前のサイトのコンテンツのスクショの切り貼りやテキストベタ打ち程度で共有。

こうして、期間内にリニューアルする範囲、新しく掲載するコンテンツの内容、大まかなレイアウトなど徐々に要件を固めていきました。

ちなみに、アートボードや選択した要素を Command+C でコピーして、Slackのチャンネルやスレッドを開いて Command+V するとすぐに共有できるのが地味に便利です。

ビジュアルの作成、すり合わせ

固めた要件をビジュアルに起こす段階でもXDを活用しました。

どうしてもXDだけだと表現が難しい画像はPhotoshopで作成し、CreativeCloudライブラリで連携しました。

XD側からライブラリへの登録ができない、並び替えができないなど不便な点はありますが、一度登録しておくとFinderを開かずにpsdを更新でき、即座に反映されるのが快適でした。

コーディング（画像の書き出し）

アナログですが、必要な画像だけ複製して１箇所にまとめ、まとめて選択して Command+E で簡単に書き出していました。

バッチ機能、どれを選択したのかあとから探すのがだいぶ面倒な気がしているので、そのあたり使いやすくなると嬉しいですね。

XDのメリット

とにかく軽い・速い

PhotoshopでもスピーディなWebデザイン制作が可能ですが、データが大きくなるにつれてパフォーマンスが落ちます。
そこでページ単位でデータを分けるといった工夫をしても、それらの行き来や共通で使うデータ管理などが今度は手間になっていきます。

XDでは アートボード・レイヤーを大量に増やしてもさほど動作パフォーマンスが落ちない ため、そうした制作外のストレスがかなり軽減されると感じました。

このおかげで、例えば変更前の状態をアートボードの横によけておき、必要なときに新旧並べて１枚の画像に書き出し確認してもらうこともできます。
また、原稿待ちのページがある場合、XDであれば目立つようにさえしておけば見落としにくく安心でした。

そして、シンボル・アセットを活用してデータ作成しておくことで、ヘッダーやボタンなど共通のパーツや、特定の配色やフォントなどであとから変更が必要になってもすぐ全体に適用して最新のイメージを共有することができました。

夏頃のXD機能追加で、名称変更・並べ替えやグラデーション登録ができるようになっていて助かりました。

まとめ

ということで、XDを活用してスピーディにデザインの制作ができました。デザインツールとして、XDはとにかく 「軽い」「速い」 のが魅力的で、今回のような小規模の制作でも役立つと感じています。
もちろん制作環境・内容によって向き不向きはありますが、もし実務で取り入れるか迷っている方は、一度軽い気持ちで試してみてはいかがでしょうか。

ちなみにLisketアプリ本体のUI改善でも少しXDを活用していますので、機会があればまたご紹介します！

今回のLPリニューアルでは、弊社代表の堤が発信している「中小企業のためのWebサイト改善術」のノウハウも取り入れています。
開発部ではない方の弊社ブログで連載中ですので、ぜひご一読ください！

【中小企業のためのWebサイト改善術その１】反響を出すために改善すべき３つのページとその具体的な改善策