プレミアムサービス会員向け
全7レッスン
AIでWebデザイン講座
小さなヨガ教室のサイトを、ターミナルの AI（Claude Code）と一緒に、雰囲気・配色とフォント・トップページ・スマホ対応・写真・見直しの順に育てる講座です。本物の画面の録画で、AIに頼む文と確認の画面の読み方を見せます。手を動かすのは AI、選ぶ・決める・見直すのはデザイナー。1レッスン5〜10分で進めます。
プレミアムサービスで受講するこの講座は、Skillhubのプレミアムサービスの会員が受講できます
7レッスン
0できること
会員プレミアム
ABOUT
この講座について
CURRICULUM
カリキュラム
- 1はじめに：作るサイトと、Claude Code の準備この講座で育てるヨガ教室のサイトの全体を見て、Claude Code を入れてサインインし、練習用フォルダで最初のお願いを1つ送るところまで進めます。
- 2① 雰囲気を決める：3つの案をムードボードで見比べる教室のメモを読ませて、サイトの雰囲気の案を3つ、色・フォント・言葉・見本つきの1枚のページ（ムードボード）にしてもらいます。案を選ぶのはあなたです。
- 3② 配色とフォント：読みやすさを確かめたデザインの決まりを作る選んだ案の色とフォントを、スタイルガイド（デザインの決まり）にまとめてもらいます。文字と背景の読みやすさ（コントラスト比）を Claude Code が計算し、足りない色を直します。
- 4③ トップページ：決まりを使ってページを組むスタイルガイドの色とフォントを使って、トップページを作ってもらいます。区切りの順番を決めるのはあなた。途中で AI が自分で画面を撮ろうとしたときに断る方法も、実際の画面で見ます。
- 5④ スマホ対応：崩れを言葉にして直してもらうスマホの幅で見つけた崩れを、見たまま言葉にして Claude Code に直してもらいます。変えてほしくない所も書くこと、AIが決まりとの食いちがいを教えてくれたときの受け取り方も見ます。
- 6⑤ 写真：縮めて軽くし、四角と差しかえる届いた写真を、Claude Code に横幅をそろえて軽くしてもらい、ページの「写真」の四角と差しかえます。写真の説明の文字（alt）も入れてもらいます。
- 7⑥ 見直しと直し：プロの目で見直し、直す所を選ぶClaude Code にページを見直してもらい、直したほうがいい所を一覧にしてもらいます。直す所はあなたが選び、直ったら最後は自分の目で確かめます。講座のまとめと、次に学ぶことも。