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
※普段使用している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
  • 遠方割
  • 学割
  • 主婦割

開講日・お申し込み

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

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

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

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

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



受講者の声

受講して本当によかったです。 とても為になり、早速活用できそうです。

一般企業勤務 正社員

知りたいことは全部聞けたので、非常に満足しています。実務内容も聞けてとても勉強になった。

一般企業勤務 正社員

全く知らない状態で受講しました。黒野さんの説明が丁寧で、とても分かりやすかったです。

Web制作会社勤務 正社員

以前xdの勉強をしたことがあったので、覚える事が多い講座についていけた気がします。

一般企業勤務 正社員

想像していたよりもはるかに丁寧かつ、必要としていた事を教えて頂けて大満足です。

一般企業勤務 正社員

XDの基本的な使い方を知りたかったので、後半が凄くタメになりました。

その他 正社員

職場でXDをデザインツールとして取り入れいく流れがあり、今後の作業に役立てていきたいです。

一般企業勤務 正社員

丁寧に分かりやすく解説していただいたので、とても理解しやすかった。 コーディング(コーディング用の画像の作成からコーディングまで)

正社員

現役・かつadobeエバンジェリストの方が講師だったので、実務の話を織り交ぜながら説明いただいたのがとても参考になりました!

一般企業勤務 正社員

わたしはディレクターで、あまり最近実制作に携わらないので、制作の講義には若干ついていけない部分もありましたが、機能全般についての理解は深まりました。

Web制作会社勤務 正社員

  • Twitter
  • Instagram
  • Facebook