Webデザイン講座Webデザイン講座

黒野明子 のAdobe XD初心者入門講座

講座レベル1

軽くて速い操作感が魅力のAdobe XDは、ワイヤーフレームレベルでの企画検討からプロトタイプ作成、詳細なデザインの作り込みまで、アプリやWebサイト制作における幅広い過程で活用できるツールです。

Adobe XD CCのスクリーンショット

デザイナーのみならず、ディレクターやエンジニアにも注目されており、プロジェクトの始まりからフロントエンド開発の手前まで、チーム全体で同じツールでコミュニケーションをとることが可能です。

とてもシンプルなUIで、PhotoshopやIllustratorと比較するとツールの数も少なく、操作を覚えやすいのも大きな利点です。

黒野明子

講座の仕上げとして、受講生同士でロールプレイしながら、Adobe XDでのコミュニケーションとデータの受け渡しなどに取り組みます。6時間集中した学習で、基礎から実戦に活用できるテクニックまで学びましょう。


修了目標

本講座の受講修了時に、以下のスキル習得を目指します。

  • Adobe XDを利用したワイヤーフレームの作成方法を知る
  • 作成したワイヤーフレームを元にデザインを作り込むテクニックを知る
  • 作成した画面デザインを利用して、画面遷移やトランジションの設定をする(プロトタイプの作成)

カリキュラム概要

  1. AdobeXDのユーザーインターフェイスを知ろう
    • Adobe XDで新規ファイルを作成しよう
    • アートボードを設定しよう
    • レイアウトグリッドを設定しよう
    • 描画系の機能を知ろう
    • プロパティインスペクタの特徴を知ろう
  2. アートボードに描画していこう
    • 長方形や楕円、線の描画
    • シェイプとパスの違い
    • 角丸の編集
    • オブジェクトの大きさと位置の管理
    • ペンツールで自由な曲線の描画
    • 描いたオブジェクトの編集
    • ブーリアングループの作成(オブジェクトの型抜き等)
    • 色と線の太さの設定
    • グラデーションの設定
    • シャドウやぼかしの設定
    • オブジェクト同士の距離を測る
  3. 文字を扱おう
    • ポイントテキストとエリア内テキストの違い
    • フォントや大きさなどの変更
    • カーニングや行送りの設定
    • 色の変更
  4. .xdの中に素材を取り込もう
    • 写真の配置方法
    • CCライブラリパネルからPhotoshopで作成した写真を連携
    • CCライブラリパネルからIllustratorで作成したアイコンを連携
    • 一度連携した素材の再編集と同期
  5. アセットパネルにカラー、文字スタイル、シンボルを登録しよう
    • カラーを登録する
    • 文字スタイルを登録する
    • シンボルを登録する
    • 登録した要素を利用する
    • 一括編集や置き換えについて知る
  6. レイアウトを作り込んでいこう
    • リピートグリッドを作成する
    • リピートグリッド内に外部からのデータを取り込む
    • 要素を整列させる
  7. プロトタイプを作成してプレビューしよう
    • プロトタイプモードを知ろう
    • 固定オブジェクト機能を知ろう
    • アートボードのオーバーレイ機能を知ろう
    • デスクトップでのプレビューと録画
    • Adobe XDアプリを利用した実機プレビュー
  8. プレビューを共有するロールプレイング
    • 相互にデザイナー役とクライアント役になってみよう
    • プレビュー画面のオンライン共有を知ろう
    • パスワードの設定について知ろう
    • メールアドレスを使って非公開プロトタイプに招待しよう
    • 招待されたプレビュー画面にコメントを付け合おう
  9. Adobe XDを利用してコーディングの準備をしよう
    • 画像を書き出そう
    • デザインスペックでデータを共有しよう

*カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。

Adobe XD CCのスクリーンショット

使用OS
macOS X
※普段使用しているOSと異なっている場合でも講座内容の習得に大きく影響はありません。
PCの持ち込みも可能です。講座内で使用するソフトウェアの設定、環境構築をしておくようお願いします。
講師
黒野明子
定員
6名
対象
・これまでPhotoshopやIllustrator、Sketchなどを利用してWebサイトやアプリのデザインをしていた方
・ディレクター職だがチーム内で効率よく作業できるワイヤーや素材の受け渡しを知りたい方
・これからWebデザインを学びたい印刷系のデザイナー
対象OS
受講環境のOSは、最も機能を豊富に利用できるMacOSとしますが、Windows版との違いなどもお伝えします。
会場
ロクナナワークショップ
東京都渋谷区神宮前1-1-12 原宿ニュースカイハイツ 204号室
JR山手線「原宿駅」・東京メトロ副都心線「北参道駅」から徒歩7分

受講料

29,800円(税込み)

受講料には、テキストやノートPCの使用料金などを含んでおります。入会金などは一切必要ありません。

最大30%OFFまでの割引あります

  • 早割30
  • 早割10
  • 遠方割
  • 学割
  • 主婦割

開講日・お申し込み

2018年12月01日(土)11:00~18:00残り6席

2019年02月09日(土)11:00~18:00残り6席

受講希望の方は 受講規約 および よくある質問 のページを閲覧していただき、ご了承の後にお申し込みフォームからお申し込みください。また お申し込みの流れ もご参照ください。


  • Twitter
  • Instagram
  • Facebook