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

黒野明子 のAdobe XDへの理解を深める「スタイルガイド構築と過去のデザイン資産活用」

講座レベル2

2020年5月からの新しい試みとして、これまで1回6時間だった授業を分割し、平日夜の2時間で受講いただけるように構成を変更しました。Adobe XDのシリーズすべてを受講してもよし、お好きなものだけ選んでもよし、お好きなスタイルで学んでください。

シリーズ全3講座
【夜間2時間講座新設】ゼロからはじめるAdobe XD「描画の基礎を習得しよう」
【夜間2時間講座新設】Adobe XDへの理解を深める「プロトタイピング&アニメーション」
【夜間2時間講座新設】Adobe XDへの理解を深める「スタイルガイド構築と過去のデザイン資産活用」

この講座【Adobe XDへの理解を深める「スタイルガイド構築と過去のデザイン資産活用」】は、Adobe XDの基礎的な描画方法を知っている方に向けた講座です。あなたのスキルレベルが【ゼロからはじめるAdobe XD「描画の基礎を習得しよう」】の内容と同等であれば、この講座内容を理解することができます。

この講座では、サンプルのアプリUIデザインを利用し、共通化できるカラーやコンポーネントなどをベースにした「アセットパネルを利用したスタイルガイド」を構築していきます。元になるデータはXDで制作されたものだけではなく、PhotoshopやIllustratorで制作したものをXDで開いて編集していきますので、過去のデザイン資産を活かして新しい手法で再編集する手法についても学ぶことができます。

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

できあがったアセットパネル(で作成したスタイルガイド)を含んだドキュメントは「クラウドドキュメント」として保存し、別のドキュメント内からスタイルを呼び出して利用可能です。そして、親となるドキュメント内でスタイルを編集すると、子になるドキュメントに変更箇所が通知されます。これにより、デザイナー間、ドキュメント間で共通化したスタイルを管理しながら利用することが可能になります。この一連の手法についても、丁寧に解説していきます。

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

デザイン資産の再活用という面では、以下のようなトピックについても触れていきます。

  • コンポーネントのインスタンス(複製された子コンポーネント)ごとに固有の内容をもたせつつ、必要な部分を一括変更する手法
  • CCライブラリを利用した「アプリをまたいだデザイン資産の再活用」の使いどころ
黒野明子

修了目標

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

  • Adobe XDのアセットパネルとクラウドドキュメントの機能について知る
  • PhotoshopやIllustratorで制作したデザインデータをXDで再利用する方法について知る
  • アセットパネルとクラウドドキュメントを利用したスタイルガイドの制作技法を知る
  • コンポーネントとインスタンスについて詳しく知る
  • レスポンシブサイズ変更やコンテンツに応じたレイアウトなど、コンポーネントの再利用に関連する手法を詳しく知る
お得なプリペイド受講チケット

カリキュラム概要

  1. スタイルガイドとはなにか
    • スタイルガイドの概要
    • Atomicデザイン、デザインシステムなど、関連する用語や概念について
  2. Adobe XDのクラウドドキュメントについて知る
    • アセットパネルのドキュメント間連携は、クラウドドキュメントで保存した際に利用可能となる
    • 保存されたドキュメントの管理
    • おまけ:ドキュメント履歴
    • おまけ:共同編集
  3. Adobe XDのアセットパネルについて知る
    • カラー
    • 文字
    • コンポーネント
    • 登録した内容の一括変更や置き換え
  4. Photoshopで制作した過去データをXDで開き、アセットとして登録する
  5. 他のクラウドドキュメントからアセットパネルの内容を連携させる
    • 元のクラウドドキュメントで変更があった際の差分の取り込み
    • 自分以外の人をクラウドドキュメントに招待して内容を共有する
  6. CCライブラリとの使い分けを考える
    • アプリケーションをまたいでアセットを管理できるCCライブラリ
    • CCライブラリから配置したアセットをアセットパネルに登録してみると?
  7. コンポーネントの複製と管理について知る
    • マスターコンポーネントとインスタンスについて知る
      • 一括変更できる場合、できない場合
    • マスターコンポーネントの管理
      • マスターコンポーネントの再呼び出し
    • コンポーネントの上書き
    • コンポーネントのステートについて知る
      • ステートの設定方法
      • ステートの使いどころ
  8. 「レスポンシブサイズを変更」について知る
    • 「手動」の細かな指定について

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

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

使用OS
Mac
※普段使用しているOSと異なっている場合でも講座内容の習得に大きく影響はありません。
PCの持ち込みも可能です。講座内で使用するソフトウェアの設定、環境構築をしておくようお願いします。
講師
黒野明子
定員
6名
対象
・デザインシステムやスタイルガイドの策定に興味のあるアートディレクターやデザイナー
・過去にPhotoshopやIllustratorで制作したデザインデータをモダンな手法で再利用したい方
・XDでのプロトタイプやレイアウトデータ制作をもっと効率化したい方
対象OS
受講環境のOSは、最も機能を豊富に利用できるmacOSとしますが、Windows版との違いなどもお伝えします。
会場
ロクナナワークショップ
東京都渋谷区神宮前1-1-12 原宿ニュースカイハイツ 204号室
JR山手線「原宿駅」・東京メトロ副都心線「北参道駅」から徒歩7分

受講料

29,800円(税込み)

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

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

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

開講日・お申し込み

この講座には現在募集日程がありません。次回開講日程は 67WSカレンダー共有 などでご確認ください。また、企業研修などで開講をご希望の場合はお気軽に ご相談 ください。

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


講師

  • Twitter
  • Instagram
  • Facebook