レッスン記録｜Webデザイン就活戦略・ポートフォリオ・CSSレスポンシブ実践（2026年5月26日②）
この記事でわかること
今回は2本立てのレッスン。
新しい受講生のスキル棚卸しと今後の方向性を整理しながら、
別の受講生のCSSコーディングサポートも並行して行いました。
今回の内容
- 受講生バックグラウンドの確認・スキル棚卸し
- 今後の学習方向性とポートフォリオ戦略
- CSSコーディングサポート（メディアクエリ・Flexbox）
受講生のバックグラウンド
| 項目 | 内容 |
|---|---|
| 学習歴 | ハローワーク職業訓練（半年）→ デザイン・DTP中心 |
| 就活状況 | 7社受けるも書類選考で落ち続けている |
| 現職 | 派遣（印刷入稿データ作成） |
| 在籍予定 | 12月〜1月まで（更新制） |
既存スキル： Illustrator / Photoshop（実務使用中）・Figma（カンプまで）・HTML/CSS基礎・マーケティング基礎（競合分析・コンペ形式プレゼン経験あり）
今後の方向性
目指すべき像：Webデザイン＋コーディング＋AI活用のクリエイター
コテコテの制作会社デザイナーは競争が激しいため、
インハウスWebデザイナー（企業内担当） の方向性が現実的だという話をしました。
幅広いスキルを活かせる社内ポジションの方が入りやすく、長く活躍できます。
クリエイティブ×マーケティングの掛け合わせは、今の市場では強い武器になります。
AIの活用方針
AIを使えばサイト制作が「1ヶ月 → 1週間」になる時代。
ただし基礎知識がないと適切な指示が出せないのがポイントです。
- HTMLの言葉が分からないと、何度も言い直しが必要になる
- AIに8割の土台を作らせ、色味・位置調整は自分で行う
- Webデザイン×AIは「良い面（効率化）と怖い面（仕事を取られる）」の両面がある
ポートフォリオ戦略
現状はPDFポートフォリオ（バナー・チラシ・デザインカンプ）のみ。
Webポートフォリオがないことが、書類選考で落ちている原因の一つになっている可能性があります。
目標：HTMLコーディングでWebポートフォリオサイトを作成（12〜1月まで）
WordPressも活用できれば、さらに強みになります。
学習ロードマップ（次回正式作成予定）
- 現在進行中：Humanの動画学習（HTML/CSS）
- 次のステップ：Figmaカンプ → HTMLコーディング実践
- 最終ゴール：Webポートフォリオサイトの完成
週1セッション＋課題→次回確認→次のステップ のサイクルで進めます。
CSSコーディングサポート
メディアクエリ（レスポンシブ対応）
/* スマホ用（0〜768px） */
@media (max-width: 768px) { ... }
/* PC用（769px以上） */
@media (min-width: 769px) { ... }
max-width と min-width の混同に注意。スマホ用とPC用のスタイルを完全に分離することが重要です。
Flexbox
.about-box {
display: flex;
align-items: center;
justify-content: center;
}
その他のTips
Alt + Shift + F：VSCodeのコードフォーマット（自動整形）- Chromeの検証ツール：右パネルの「＋」ボタンで新規スタイルを追加し、背景色を赤・ピンクにして領域を視覚確認するとデバッグしやすい
- VSCodeのミニマップは右クリックで非表示にすると横幅が確保できる
次のアクション
- Humanの動画学習を進める（HTMLコーディング）
- Figmaカンプ（簡単なもの）→ HTMLで再現する課題に着手
- ポートフォリオサイトの構成をイメージしておく
次回：6月2日（月）19:30〜 ロードマップ作成 → HTMLコーディング実践開始
TAG
