Adobe XDで縦横スクロールできるカレンダーをデザイン 全4回 縦と横にドラッグできるインタラクションの設定（スクロールできるカレンダー 4/4） このレッスンでは、縦や横にスクロールできる、カレンダーアプリ UI のつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイル...
Adobe XD でアニメーションするランディングページをデザイン 全3回 ページのイントロアニメーションを作成（アニメーションするランディングページ 1/3） このレッスンでは、ページを読み込んだ際に表示されるイントロアニメーションのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファ...
Adobe XD でアニメーションするランディングページをデザイン 全3回 ページのパララックス効果を作成（アニメーションするランディングページ 2/3） このレッスンでは、ドラッグ操作でパララックス効果を表現するインタラクションのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルフ...
Adobe XD でアニメーションするランディングページをデザイン 全3回 ページスクロール時のフェードイン効果を作成（アニメーションするランディングページ 3/3） このレッスンでは、スクロールするとコンテンツがフェードイン表示されるインタラクションのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードした...
EC サイトでよく使われる UI パーツをつくる 全3回 カルーセル（EC サイトのよくある UI パーツをつくるシリーズ） このレッスンでは、クリック操作で3枚の商品画像がループするカルーセルのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイル...
EC サイトでよく使われる UI パーツをつくる 全3回 ドロップダウン（EC サイトのよくある UI パーツをつくるシリーズ） このレッスンでは、色違いの商品を選択するドロップダウンのつくり方を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開...
EC サイトでよく使われる UI パーツをつくる 全3回 画像ズームとカウンター（EC サイトのよくある UI パーツをつくるシリーズ） このレッスンでは、商品画像のズーム機能と購入数を指定するカウンターのつくりを解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選...
Adobe XD でつくるグラフィックのアニメーション表現 全3回 アニメーションするローディングアイコンを作成 このレッスンでは、半円のローディングアイコンをアニメーションさせる方法を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択し...
Adobe XD でつくるグラフィックのアニメーション表現 全3回 Illustrator で作成したロゴをアニメーションさせる このレッスンでは、Illustrator で作成した手書き風のロゴをアニメーションさせる方法を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサ...
Adobe XD でつくるグラフィックのアニメーション表現 全3回 Adobe XD で作成したイラストをアニメーションさせる このレッスンでは、Adobe XDで作成したイラストをアニメーションさせる方法を解説します。 Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイル...
表示されるとアニメーションするグラフを作成 全3回 表示されるとアニメーションする円グラフを作成 このレッスンでは、Adobe XDのアニメーション機能と破線を使って、表示されるとアニメーションする円グラフをつくる方法を解説します。 Adobe XDを起動し、「ファイル」→「開...
表示されるとアニメーションするグラフを作成 全3回 表示されるとアニメーションする棒グラフを作成 このレッスンでは、Adobe XDのアニメーション機能と破線を使って、表示されるとアニメーションする表示されるとアニメーションする棒グラフをつくる方法を解説します。 Adobe X...
表示されるとアニメーションするグラフを作成 全3回 表示されるとアニメーションする折れ線グラフを作成 このレッスンでは、Adobe XDのコンポーネントのステート機能を利用して、表示されるとアニメーションする折れ線グラフを作成する方法を解説します。 Adobe XDを起動し、「ファ...
タップで見た目が変わるボタンをデザイン 全3回 タップで見た目が変わるいいねボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「ファイル」...
タップで見た目が変わるボタンをデザイン 全3回 タップで見た目が変わるハンバーガーボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「ファイル」...
タップで見た目が変わるボタンをデザイン 全3回 タップで見た目が変わるチェックボックスをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、タップすると見た目が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「ファイル」...
マウスオーバーで見た目が変わるボタンをデザイン 全3回 マウスオーバーで不透明度が変わるボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると不透明度が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「...
マウスオーバーで見た目が変わるボタンをデザイン 全3回 マウスオーバーで形状が変わるボタンをデザイン このレッスンでは、Adobe XDのアニメーション機能を使って、マウスオーバーすると形が変わるボタンのプロトタイプをデザインする手順を学びます。 Adobe XDを起動し、「ファイ...
