Lesson

目的やつくりたいもの別に、実際に手を動かして学ぶ

レッスン動画一覧

Adobe XD でつくるグラフィックのアニメーション表現
全3回

Adobe XD を使うと、描いたシェイプや文字に少しの手間を加えるだけでアニメーションを使った表現を追加できます。 このレッスンでは、回転するローディングアイコン、Illustr...

XD検定の目安 初級
  1. アニメーションするローディングアイコンを作成
  2. Illustrator で作成したロゴをアニメーションさせる
  3. Adobe XD で作成したイラストをアニメーションさせる
CCライブラリを活用!Photoshopの精度とAdobe XDの速度を両立させるワークフロー
全4回

CCライブラリを利用すると、PSDデータをXDドキュメントに配置して、修正が必要になったらPhotoshopに戻るというワークフローが利用できます。 このレッスンでは、CCライブラ...

XD検定の目安 初級
  1. CCライブラリを使ってPSDデータをAdobe XDで活用
  2. Adobe XD内のグラフィックスをPhotoshopで編集する
  3. Adobe XDのドキュメントアセットで直しに強いスタイル管理
  4. アセットの使い回しに便利なAdobe XDのコンポーネント
PSDから始める!Adobe XDでWebデザインを簡単レイアウト
全4回

PSDデータのデザインカンプを Adobe XDに読み込むと、効率的にWebページのレイアウト作業やレスポンシブ対応を行えます。 このレッスンでは、PSDデータをXDに読み込む手順...

XD検定の目安 初級
  1. PSDデータをAdobe XDで開いてレイヤーを確認・編集
  2. Adobe XDのパディングとスタックで簡単レイアウト
  3. リピートグリッドで繰り返し要素をラクラク配置
  4. レスポンシブ対応を素早く行えるAdobe XDの便利機能
表示されるとアニメーションするグラフを作成
全3回

Adobe XDで、表示されるとアニメーションするグラフをデザインしましょう。デザインの動的な側面を表現すれば、アイデアを周囲に伝えることがずっと容易で確実になります。 このレッス...

XD検定の目安 初級
  1. 表示されるとアニメーションする円グラフを作成
  2. 表示されるとアニメーションする棒グラフを作成
  3. 表示されるとアニメーションする折れ線グラフを作成
タップで見た目が変わるボタンをデザイン
全3回

Adobe XDで、タップして操作できるボタンをデザインしましょう。デザインの動的な側面を表現すれば、アイデアを周囲に伝えることがずっと容易で確実になります。 このレッスンでは、タ...

XD検定の目安 初級
  1. タップで見た目が変わるいいねボタンをデザイン
  2. タップで見た目が変わるハンバーガーボタンをデザイン
  3. タップで見た目が変わるチェックボックスをデザイン
モバイル画面のスライド式ドロワーメニュー
全4回

Adobe XDで、モバイル画面のドロワーメニューをデザインしましょう。このレッスンでは、モバイル画面とドロワーメニュー画面を作成し、タップ操作でメニュー画面がオーバーレイ表示され...

XD検定の目安 初級
  1. スライド式ドロワーメニュー① カード型UIをつくる
  2. スライド式ドロワーメニュー② 繰り返し要素を配置
  3. スライド式ドロワーメニュー③ メニュー画面の作成
  4. スライド式ドロワーメニュー④ インタラクションを設定
マウスオーバーで見た目が変わるボタンをデザイン
全3回

Adobe XDで、マウスオーバーに反応するボタンをデザインしましょう。デザインの動的な側面を表現すれば、アイデアを周囲に伝えることがずっと容易で確実になります。 このレッスンでは...

XD検定の目安 初級
  1. マウスオーバーで不透明度が変わるボタンをデザイン
  2. マウスオーバーで背景色が変わるボタンをデザイン
  3. マウスオーバーで形状が変わるボタンをデザイン