Help us understand the problem. What is going on with this article?

Adobe XDのチュートリアル体験メモ

More than 1 year has passed since last update.

はじめに

先日、合同勉強会 in 大都会岡山 -2018 Summer- にお邪魔しました。
そこで、Adobe XDの紹介から活用方法を目の前でデモ見せてもらいながら「すげー!」と感動したので早速触ってみました。
ただ、私はデザインもやったこともAdobe XDも触ったことがないド素人なので技術メモを書きながら進めてみましたので共有します。
(以下、Mac OSX環境でのメモです。)

Adobe XDとは

2017年10月にリリースされた
UIデザインからプロトタイピング、共有までを1つで行うことができるアプリケーション。

Adobe XDを使うメリット

  1. 無料で使える(Adobeのアカウントを入手するだけ)
  2. 軽い
  3. 学習コストがほとんどいらない(機能がシンプル)
  4. 製作間とクライアント間のコミュニケーショんが取りやすい
  5. テンプレートが豊富(みんなが大好きなBootStrapもある)
  6. XDを使ってやリとりをする日が来るのもそう先ではなさそう

Adobe XD の入手

  • https://www.adobe.com/jp/products/xd.html にアクセスする
  • XDを無料で入手 からダウンロードする
  • ダウンロードした XD_installer.dmg を開き、インストールする
  • ログインする
    • 以下のいずれかでログインする
    • スクリーンショット 2018-09-05 16.20.58.png
  • 質問に答えて進む(以下、解答例)
    • スクリーンショット 2018-09-05 16.25.10.png
  • インストールを開始する
    • スクリーンショット 2018-09-05 16.27.20.png
  • インストールが完了すると、 チュートリアルを開始 というボタンがあるのでやってみる
    • スクリーンショット 2018-09-05 16.36.32.png

チュートリアル

スクリーンショット 2018-09-05 16.41.39.png
やってみてどうなったら正解なのか分かりにくかったので、自分がやった時の画像を貼り付けておきます。

1. 現在のデザインをプレビューする

プレビューボタンを押すだけなので省略

2. スプラッシュスクリーンを作成する

スクリーンショット 2018-09-08 15.22.43.png

3. プロファイルの画像を選択する

画像が自動的にマスクされる
スクリーンショット 2018-09-08 15.21.43.png

4. ブログ投稿リストを作成する

リピートグリッドの画像を一括で指定するのかっこいい

スクリーンショット 2018-09-08 15.23.25.png

5. スクロールさせる

領域を下に広げています
スクリーンショット 2018-09-08 15.23.46.png

6. インタラクティブにする

ページ遷移は線を引っ張るだけでよくて、これだけでプレビュー画面での動きも反映されます。
「次の記事」をクリックすると選択したページに移動しました。
スクリーンショット 2018-09-08 15.52.48.png

7. プロトタイプの公開

画面右上の公開ボタンから プロトタイプを公開 を選択して、URLを発行します。
リンクコピーボタン スクリーンショット 2018-09-08 16.02.08.pngからコピーして、ブラウザで開くと作成したプロトタイプを閲覧できます。
スクリーンショット 2018-09-08 15.57.00.png
スクリーンショット 2018-09-08 15.58.48.png

以上で、チュートリアルは終わりです。

続いて、スターターキットを試してみる

  • https://www.adobe.com/jp/products/xd.html#starterkit にアクセスする
  • スターターキットをダウンロード(mac OS版) からダウンロード、解凍する
    • adobe-xd-starter-kit-basic-mac.xd ダブルクリックしてAdobe XDで開く
  • これだけは覚えておいた方が良いという基本的な使い方を学べる

先ずはこれだけ覚えよう

図を描くツール
スクリーンショット 2018-09-09 14.16.23.png

  • 長方形、正方形、円、直線などの作図と編集など基本的な使い方を学びます
    • Webアプリのプロトを作るなら長方形の角を丸める時、CSSでborder-radius指定する場面でもマウス操作だけで簡単に表現できる
    • シェイプのパス編集モードを使うと自由にシェイプが作れます
    • ↓長方形を変形させて手裏剣っぽい形にしてみたシェイプ
      • スクリーンショット 2018-09-09 14.12.11.png

2種類のテキスト
スクリーンショット 2018-09-09 14.17.07.png

  • パワポを使ったことがあるような人は慣れ親しんだ感じで使えそうです

画像の配置
スクリーンショット 2018-09-09 14.25.14.png

  • シェイプに画像を指定できます
  • シェイプ内の画像の位置を変更するときは左上が選択範囲アイコンスクリーンショット 2018-09-09 14.40.14.png になっていないと動かないので切り替えてから動かしましょう

プロトタイプとプレビュー
スクリーンショット 2018-09-09 14.42.53.png

  • チュートリアルには触れてありませんでしたが、プレビューの右上にある録画ボタンを押す動画を保存できます
    • スクリーンショット 2018-09-09 15.06.17.png
  • iPhone / Android実機で見られるようなのでiPhoneで試してみました
    • AppStoreアプリから Adobe XDを入手
    • チュートリアルで作成したAdobeアカウントでログイン
    • モバイルプレビュー...プロトタイプの公開の機能(URL叩いてブラウザから閲覧)と変わらなくない?
      • => 変更を加えて超リアルタイムで追従してくれるので一度は使った方が良い機能です

もっと便利に使ってみよう

プロトタイプの共有
スクリーンショット 2018-09-09 15.52.23.png

  • チュートリアルでもありましたが、手順がバッチリ書かれているので補足ありません

アセット:カラー
スクリーンショット 2018-09-09 15.53.09.png

  • ペイントが使えるレベルであれば特に詰まるようなところはなさそうです

リピートグリッド
スクリーンショット 2018-09-09 15.53.21.png

  • 個人的には一番楽しい機能です^^
  • 1つ作れば縦にも横にもリピートできます
    • 画像もテキストも一括で指定できるのが魅力です

アートボードの作成
スクリーンショット 2018-09-09 15.54.02.png

  • Android/iPhone端末の各種サイズを始め、PC版のサイズも用意されています

以上で終わります。最後まで見ていただきありがとうございました。

oh_rusty_nail
技術メモちょこちょこ書いてます。 参考にしていただけたら幸いです! 興味のある単語: [Selenium] [Jenkins] [自動化] [フロントエンド]
jrits
信頼と魅力のある先進のITをもとに、お客様のワークスタイル・イノベーションの実現を目指します。
http://www.jrits.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away