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

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よりご応募ください。

Webエンジニア(Wantedly)
Rubyエンジニア(Wantedly)
フロントエンドエンジニア(Wantedly)
インフラエンジニア(Wantedly)
2017新卒エンジニア(Wantedly)
エンジニアインターン(Wantedly)
その他採用情報

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

「なんかちょっといい感じ」とは何か

はじめまして! プロダクト開発部デザイナーのもりしたです。 今年の3月からランサーズにジョインし、デザインやコーディング業務を中心に、少し前から自分で施策を考えるようになりました。 学ぶことが多く楽しいと同時に、数字が読めず算数ドリルの必要性を感じている今日こ …