AIで学ぶ！Webデザインの練習方法

• AI
• WEBデザイン

こんにちは！カンマンWebデザイナーの横田です。Webデザイン学習にてこんなお悩みはありませんか？「実案件がないから、どう練習していいかわからない」「フィードバックをくれる人がいない」そんなWebデザイン学習者・初心者にとって、今注目すべきは“AIを使った練習方法”です。

ChatGPTをはじめ、MidjourneyやAdobe FireflyなどのAIツールを活用すれば、独学でも効率よく、しかも“実務感覚”に近い形でスキルを磨くことが可能です。

---

1. ChatGPTにコードレビューを頼む

「自分のHTML/CSSのコード、どこが悪いんだろう？」そんなとき、ChatGPTが便利な“メンター”になります。

使い方：

• 書いたコードをそのまま貼り付けて「改善点を教えて」と依頼
• 指摘だけでなく、修正コードを提案してもらえる
• レスポンシブ対応、アクセシビリティ改善など幅広いアドバイスも可能

メリット：

• 24時間いつでもレビューOK
• 客観的な視点でフィードバックを得られる

---

2. ワイヤーフレーム案をAIに出してもらう

「何をどこに配置したらいいか分からない…」という人は、ChatGPTにページ構成を考えてもらいましょう。

例：

「歯科クリニックのトップページ用ワイヤーフレーム構成を考えてください」

→ ヒーロービジュアル、診療内容紹介、院長メッセージ、アクセス情報など、セクションごとに整理された構成案が出てきます。

それをもとに、Figmaなどで実際にワイヤーを引いたりデザイン化したりすることで、構成力も養えます。

---

3. MidjourneyやFireflyで配色トレーニング

色のセンスに自信がない人にとって、AIによる配色生成は心強い練習ツールです。

練習法：

• 「落ち着いた雰囲気のカフェ系LP風の画像を作って」とMidjourneyに指示
• 生成された画像からカラーパレットを抽出（Adobe Colorなどを活用）
• その配色を参考にして、自分でもバナーやサイト風デザインを作ってみる

Fireflyでも、テキスト指定で「春らしい爽やかなトーン」などの配色画像を生成可能です。

---

まとめ

AIを活用すれば、独学でも「構成力」「色彩感覚」「実装スキル」のすべてをバランスよく鍛えることができます。

ポイントは、

• AIに丸投げせず、課題として活用する
• 出力を受けて、自分で考え・調整する力を持つ

という姿勢。

実務さながらの練習を“ひとりでも”実現できるAI時代、賢くトレーニングに取り入れて、自分らしいデザイン力を育てていきましょう！