WEBデザイン講座《デザインカンプ制作入門》コース【対象】自分の力だけでゼロからWEBデザインをすることに自信がない方

本講座では、デザインカンプを作成する際に「Adobe XD」というツールを使用します。

なお「Adobe XD」には、機能が一部制限されているものの、無料で使用できる「スタータープラン」が用意されています。

本講座のカリキュラムでは「スタータープラン」でも問題なくご受講いただけますので、学習前に「Adobe XD」のインストールを済ませておいていただきますよう、お願い申し上げます。

また、有料のプランにご加入中の方は、そのまま有料プランで「Adobe XD」をご使用ください。

• プランについて

  • スタータープラン (無料)

  • 単体プラン (有料)

  • コンプリートプラン (有料)

1. インストールに必要なもの

2. スタータープランで「Adobe XD」をインストールする方法

【注意】

本レクチャーでご紹介している『スタータープラン』で Adobe XDをインストールする方法は、Adobe社の都合で削除される可能性があるため、「スタータープラン」での「Adobe XD」のインストールは保証しておりませんので予めご了承ください。

Adobe社が公式サイトで公表している「XD スタータープランの今後の変更」について
例

• スタータープランはまだ利用できますか？

• スタータープランにアクセスする方法を教えてください。

• リンクされたライブラリでのスタータープランの使用制限はありますか？

AdobeXDは日々進化しているデザインツールです。

そのため、レクチャー動画を作成した際にはなかった機能も、アップデートにより追加されていることもありますが、そのあたりにつきましては、柔軟にご対応いただければ幸いです。

アップデートのお知らせは、Adobeの公式サイトにてアナウンスされています。

1. AdobeXDの起動とワークスペースの説明

2. AdobeXDの起動

3. 教材「AdobeXDチュートリアル.xd」を開く

4. ショートカットキー

5. 選択範囲をズーム

6. 拡大

7. 縮小

8. 移動 ※画面の移動・スクロール

9. ツールバー

Adobe XDの作業効率を上げるには、ショートカットを覚えるのが一番の早道です。

Adobeの公式WEBサイトでは、Adobe XD で使用できるすべてのショートカットキーの一覧が紹介されており、ショートカットキーリストをPDFでダウンロードできます。

1. 選択ツール

2. 長方形ツール

3. 楕円形ツール

4. 多角形ツール

5. 線ツール

6. ペンツール

7. テキストツール

8. アートボードツール

9. ズームツール

1. メインメニュー

2. ホーム

3. モードの切替え

   • デザインモード

   • プロトタイプモード

   • 共有モード

4. ドキュメントに招待

5. モバイルプレビュー

6. デスクトッププレビュー

7. ズームレベル

8. プロパティインスペクター

9. ペーストボード

10. アートボード

1. アートボードの作成

2. アートボードの編集

   • オブジェクトの配置

   • 色の変更

3. 画像の追加とマスク

   • マスクの作成

   • マスクの編集

1. プロトタイプの作成

   • ホームの設定

   • リンクの設定

2. プロトタイプのプレビュー

1. リストの作成

2. リストコンテンツの変更

   • 余白の設定

   • 画像の変更

1. スクロールの設定

2. ヘッダーの固定

3. スタイルの変更

1. トレース用のWEBデザインを選び、ダウンロードする

2. Photoshop形式のファイルをAdobeXDで読み込む

1. ナビゲーション部分のトレース

   • ロゴ

   • メニュー ※リピートグリッド

   • 検索ボックス

     • 虫眼鏡のアイコン

1. ヘッダー部分のトレース①

   • テキストのトレース

1. ヘッダー部分のトレース②

2. lorem ipsum について

作成したワイヤーフレームに素材(画像)を配置していきます。

配色の基本ルール

• ベースカラー

• メインカラー

• アクセントカラー

コーポレートカラーやブランドカラーの指定がない場合に、ゼロからテーマカラーを決める方法を学習します。

完成させたWEBデザインのカスタマイズ例を紹介します。

「AIに奪われる仕事・奪われない仕事」という言葉を、一度は耳にされたことがあるかと思います。
はたして近い将来、このような世界が現実になるのでしょうか？

• WEBデザイン（デザインカンプの制作）と、

• HTMLやCSSなどのコーディング

これらの仕事がこの先、AIに代替されてしまうのか？について、ひとつずつ見ていきましょう。

注意：

現在、AIは驚異的な速さで進化しているため、この先、動画内容が時代遅れになる可能性があります。その場合は、本動画を削除することもありますので、予めご了承ください。

ChatGPTやその他のAIチャットを使って、人間が要望する「HTMLやCSS」をどのくらいの精度でコーディングできるのか？という検証を、2023年3月上旬に行いました。この後に視聴できる動画は、さらにその後（2023年7月上旬）に検証した動画となります。