Lesson

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

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

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

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

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

Adobe XD の描画ツールを使うと、さまざまな装飾的な表現を描くことができます。さらにレイアウト機能を組み合わせると、コンテンツに合わせて見た目が自動調整される装飾もつくれます...

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

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

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

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

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

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

Adobe XDは、レスポンシブサイズ変更やリピートグリッド等の機能を使って素早くレスポンシブデザインを実現できます。 このレッスンでは、モバイル画面用のデザインをPCの画面に合わ...

Adobe XDのアセットパネルでは、プロジェクト内のすべてのアセットを管理することができます。 カラー、文字スタイル、コンポーネントをアセットパネルに追加することで、簡単に繰り返...