Lesson

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

レッスン動画一覧

Webデザインの表現を広げるレイアウト
全4回

Adobe XD を使って、マルチカラムをベースにした様々なレイアウトを作成してみましょう。 このレッスンでは、カラムの設定方法から少し複雑なレイアウトのつくり方まで、XD の機能...

XD検定の目安 初級
  1. 画面全体に広がるマルチカラムレイアウトを作成する
  2. 画面に固定されたサイドメニューを作成する
  3. メイスンリーレイアウトを作成する
  4. ブロークングリッドレイアウトを構造化する
Adobe XDでアニメーションするプレゼン用スライドを作成する
全4回

Adobe XD を使って、アニメーションを取り入れた、分かりやすくて飽きさせないスライドをつくりましょう。 このレッスンでは、プラグイン「プレゼンテーション」を使って、簡単にプレ...

XD検定の目安 初級
  1. プラグイン「プレゼンテーション」を使ってスライドの土台を準備する
  2. スライド画面の切り替えに、緩やかな動きを追加する
  3. スライド内のコンテンツをダイナミックに変形して注目を集める
  4. スライド内の強調したい場所に、動きをつけて視線を誘導する
Adobe XDで縦横スクロールできるカレンダーをデザイン
全4回

Adobe XD を使って、ちょっと複雑な UI パーツのの動きを確認するためのプロトタイプをつくってみましょう。 このレッスンでは、縦方向と横方向にスクロールできるカレンダーのつ...

XD検定の目安 中級
  1. スケジュール表とデータ用パーツの作成(スクロールできるカレンダー 1/4)
  2. 縦方向にタイムラインを作成(スクロールできるカレンダー 2/4)
  3. 横方向に日付軸を作成(スクロールできるカレンダー 3/4)
  4. 縦と横にドラッグできるインタラクションの設定(スクロールできるカレンダー 4/4)
Adobe XD でアニメーションするランディングページをデザイン
全3回

Adobe XD のアニメーション機能を使うと、スクロールするにしたがって変化するページを表現することができます。 このレッスンでは、ローディング時の表現と、スクロールした時のパラ...

XD検定の目安 初級
  1. ページのイントロアニメーションを作成(アニメーションするランディングページ 1/3)
  2. ページのパララックス効果を作成(アニメーションするランディングページ 2/3)
  3. ページスクロール時のフェードイン効果を作成(アニメーションするランディングページ 3/3)
EC サイトでよく使われる UI パーツをつくる
全3回

e コマースサイトをデザインする際によく出会うことになるパーツの効率的な作り方を紹介するシリーズです。 このレッスンで紹介するのは、カルーセル、ドロップダウン、画像のズーム、および...

XD検定の目安 初級
  1. カルーセル(EC サイトのよくある UI パーツをつくるシリーズ)
  2. ドロップダウン(EC サイトのよくある UI パーツをつくるシリーズ)
  3. 画像ズームとカウンター(EC サイトのよくある UI パーツをつくるシリーズ)
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. Adobe XDのパディングとスタックで簡単レイアウト
  2. PSDデータを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. マウスオーバーで形状が変わるボタンをデザイン