ランサーズ等のサービスを開発・運用する中で得た知識やノウハウを紹介しています。

thumbnail

Labels:  デザイン 投稿者:shohei

AdobeXDを使ってLPを作ってみたお話

初めまして。デザイナーのchoponです。

今回私がお話するのは、AdobeXDを使って、ワイヤー・デザインの制作を行った過程といい点・悪い点について簡単にお話できればと思います。

AdobeXD(以下XD)とは、Adobeから今年リリースされた、新しいプロトタイピングツールです。

特徴としてはデザインモードとプロトタイピングモード2のモードがあり、
デザインモードで制作したものを、プロトタイピングモードでつなぎ合わせてメンバーにすぐに見せれるという点です。
\(しかもURLで共有できますよ)/

しかも、今はiOSアプりで、XDのアプリがありXDを立ち上げたPCをつなぐことにより、リアルタイムで、実機でのデザインの確認ができます。
\(これとっても便利です)/

基本アプリを作る上で使用するツールとして、認知されていると思うのですが私は今回リキッドデザインのLPをXDで制作しました。
そこで感じた、いい点悪い点を整理しました。

前提としてこれまで私はIllustratorでワイヤー・デザインを制作していました。

 

良かった点

  • SPデザインの確認がとても簡単
  • アートボードをどれだけ増やしても重くならないのでデザインの発散が簡単
  • イラレで作ったアイコンをそのままコピペできる
  • 要素間の余白がすぐに分かる

良かった点は非常に多かったのですが、ポイントを絞って4点書きました。

SPデザインの確認がとても簡単
前述しましたが、やはりSPでの確認が非常に簡単です。修正したものがそのままリアルタイムに実機で確認できるのは最初感動してしまいました。

アートボードをどれだけ増やしても重くならないのでデザインの発散が簡単
Illustratorとの比較ですが、どんだけアートボードを作っても制作中一度も落ちませんでした。おそらく1ファイルに合計20枚は作っていたのですが、少しのラグもなくサクサク制作できました。

イラレで作ったアイコンをそのままコピペできる
すばらしい!流石Adobeというべきでしょう。Illustratorとの互換性が非常に良くそのままコピペして、XD内でも編集可能です。

要素間の余白がすぐに分かる
これは個人的な意見かもしれませんが、要素間の余白が何ピクセルあいているか、altを押すことでいつでも確認できます。

悪かった点\(ここを改善して欲しい)/

  • プロトタイプモードで要素をFixedにできたら…
  • スマホを繋げなくても、ワイヤレスにリアルタイムでデザインの確認できたら…

結構考えたのですが悪かった点が見つからなくて、強いて言うならこれだというものを書きました。今後のアップデートに期待です。

プロトタイプモードで要素をFixedにできたら…
プロトタイプモードでも、iOSアプリで確認してもそうなのですが、要素をFixedでおけないので、固定のCTAを再現することができません。

スマホを繋げなくても、ワイヤレスにリアルタイムでデザインの確認できたら…
関係各所にデザインを見せるときに、いちいちスマホとPCをつなげるのが面倒でした。また、そのコードの距離も限られているのでそこの制限も気になるところです。

まとめ

以上、いい点・悪い点を書きましたが、個人的には今までの中で最高のデザイン制作ツールだと思っています。
デザイナーじゃない方でも簡単にプロトタイプを作れるシンプルなツールだと思うので、是非お試しください。

ランサーズではサービスを成長させてくれるエンジニア、デザイナーを募集しています!
ご興味がある方は、以下URLよりご応募ください。


【中途採用】
サービスリードエンジニア
テックリード(アーキテクト)
フロントエンドエンジニア
サーバーサイドエンジニア
業務エンジニア(社内システム基盤・基幹システム)

【インターン・学生バイト】
19新卒対象サマーインターン
エンジニアインターン

その他採用情報

関連記事

ランサーズ開発ランチ(Lunchers#4)〜海外で働くクリエイターのリアル Taq Yoneda(タクヨネダ)氏〜

開発部 デザイナーチームの上野です。 ランサーズの開発ランチ4回目はカナダのIT企業でデザイナーをされているTaq Yoneda(タクヨネダ)氏に来日していただきました。   Lunchers (ランチャーズ)とは、社外ゲストをお招きして、社内の開発 …

thumbnail
デザインシステムってなに? ~“Design Systems”を読んで~

はじめまして!ユーザーファーストデザイン室の加藤です。主にランサーズのフロントエンド開発を担当しています。 今回は現状のランサーズのデザイン/フロントエンド開発に関する課題感から、ある本を読んだので、そちらについて共有します。 現状ランサーズで感じている課題感 …

thumbnail
新規サービスリリース前に失敗した、目的の捉え方の話

はじめまして! ランサーズのユーザーファーストデザイン室の森下です。 業務では、最近は主に10月にリリースされた新サービス「Lancers Top」のデザインやコーディングを行っています。 今回は、そのサービスのリリース前の開発時に学んだ、目的を抑える時に気を …