就労移行支援 キズキビジネスカレッジ（KBC） Webデザイン
あなたのアイデアを形にする
――「見る専門」から「創る人」へ
こんな方におすすめ！
- Webデザインやサイト制作に興味があり、PCの基本操作から体系的に学びたい未経験の方
- デザイン（Figma/Photoshop）から構築（HTML/CSS）まで、Web制作の一連の流れを習得したい方
- 実務に即したサイト制作を経験し、クリエイターやWeb担当者として自信を持って就職を目指したい方
学べる主要スキル
- HTML/Css/Javascriptの基礎から始めるwebページ構築の理解
- HTMLによるWebページの文書構造の記述と理解
- VS Codeの操作や文法チェックなどの実務検証スキル
- Figmaを使用したワイヤーフレーム・プロトタイプ制作
- PhotoshopによるWeb用画像の書き出しや色調補正
本プログラムでは、Webデザインとサイト構築の基本を体系的に習得できます。
前半は単一のWebページ制作を通じて、Photoshopでの画像加工やHTML/CSSの基礎を学び、中盤以降はFigmaを用いたデザイン検討や最新のレイアウト手法など、実務で役立つ応用技術へステップアップします。
最大の特徴は、専門用語も平易に解説するため、未経験からでも着実にITスキルを積み上げられる点です。
PC操作に不安がある方でも無理なく学習を進めることができ、現場で通用するWeb制作のワークフローを一つひとつ丁寧に身につけていくことが可能です。
実務に即したサイト制作の経験を通じて、IT業界への就職を現実的な目標へと変え、変化の激しい社会でも求められ続けるクリエイティブなスキルを手に入れることができます。
カリキュラム詳細
第1回：Web構築の基本
- Webページの文書構造の理解から、意図したレイアウトを組むHTML/CSS技術
- Figmaを活用したレイアウト設計やパーツ作成などのデザイン実務
- Photoshopを用いたWebに最適な画像書き出し・加工スキル
- JavaScript等でユーザーに響くアニメーションを実装する基礎
第2回：Web用画像の作成とランディングページ構築の基礎
- 【Photoshop】画像をWeb用の補正、書き出し
- 【Figma】図形を配置してワイヤーフレーム（ページ構成）を作成する
- 【VS Code / HTML】Webページの骨組みと区画の作成
- 【HTML】見出しや段落を設定し、実際の文章を画面に表示させる
第3回：ランディングページの構築とHTML・CSSの基本
- 【VS Code / HTML】Webページの土台となるファイルの作成
- 【HTML】ヘッダーや本文の区画分けと文章やリンクの配置
- 【VS Code / CSS】デザインを整えるためのファイルの作成とHTMLとの連携
- 【CSS】文字の色や大きさや配置の指定とページの装飾
第4回：ランディングページの構築とCSSレイアウトの基本
- 【VS Code】HTMLとCSSのファイルの連携とブラウザでの表示確認
- 【HTML / CSS】要素へのクラス名の付与と個別の文字やボタンの装飾
- 【Figma / HTML】Figmaからのデザイン画像の書き出しとページ内への配置
- 【CSS】要素の余白設定とフレックスボックスを利用した横並びのレイアウト
第5回：ランディングページの仕上げと外部サービスの連携
- 【CSS】要素の自由な配置と文字や枠線へのグラデーションの設定
- 【HTML / CSS】Google Fontsを利用したWebフォントの適用
- 【HTML / CSS】ページ内へのYouTube動画やGoogleマップの埋め込みとサイズ調整
- 【Webサービス】作成したHTMLやCSSの記述に対する構文チェック
第6回：ランディングページの仕上げとWeb公開およびFigmaの基本
- 【HTML / CSS】SVG画像の書き出しとヘッダーメニューの横並びレイアウト
- 【HTML / CSS】画面幅に合わせてレイアウトを変化させるレスポンシブデザインの適用
- 【Webサービス】記述エラーの検証とFTPソフトを用いたWebサーバへのファイル転送
- 【Figma】デザインツールの起動とフレーム配置や画像挿入などの基本操作
第7回：Figmaによるプロトタイプ作成とWebディレクションの模擬体験
- 【Figma】プロトタイプ機能を用いた画面遷移とインタラクションの設定
- 【Figma】固定ヘッダーやモーダルウインドウなど動的なデザインの再現
- 【Webデザイン】ターゲットやUXを意識したポートフォリオサイトの設計
- 【Webディレクション】生成AIをクライアントに見立てたヒアリングの模擬体験
第8回：ポートフォリオサイトの構築とWebレイアウトの基本
- 【Webデザイン】シングルカラムやカードなどのレイアウト動向とデザイン手法の理解
- 【Figma】デザイン案の確認と背景透過PNG画像ファイルのエクスポート
- 【VS Code / HTML】Emmetを用いた効率的なHTMLの骨組みの構築
- 【HTML】ページ内各セクションへの属性付与と基本マークアップの実施
第9回：ポートフォリオサイトの構築とメイン部分のCSSレイアウト
- 【HTML / CSS】リセットCSSやWebフォントの読み込みとスタイルの初期設定
- 【CSS】色の変数化と入れ子構造を用いた効率的なコーディングの実施
- 【CSS】ヘッダーの画面上部への固定とフレックスボックスによる要素の横並び
- 【CSS】計算関数を用いた余白調整とプロフィール画面の2段組みレイアウト
第10回：ポートフォリオサイトの構築とサイト全体のCSSスタイリング
- 【CSS】プロフィール画面における2段組みレイアウトと余白の調整
- 【CSS】グリッドレイアウトを用いたマス目状の要素配置と間隔設定
- 【HTML / CSS】お問い合わせフォームの構築と入力項目のスタイル指定
- 【CSS】疑似要素と絶対配置を用いた画像へのホバーエフェクトの実装
第11回：CSSアニメーションとポートフォリオサイトの構築
- 【CSS】自由な位置指定と回転や拡大などを組み合わせた要素の配置
- 【CSS】背景画像の固定とスクロールの併用による奥行き感のある演出
- 【CSS】始点と終点の指定や複数時点の変化を用いたアニメーションの実装
- 【HTML / CSS】外部ライブラリを用いたサイトへのアニメーションの適用
※講座内容は、随時のブラッシュアップによって変更となる可能性があります。
気になるプログラムがございましたら、
お気軽にご相談ください
専門知識を持つ経験豊富なWebデザイン講師
ビジネスと病気・障害の両面に知見のある講師による講座です。実際の職場での事例を交えながら、わかりやすく実践的に学べます。（紹介する講師は一部です）
Commentvoices 受講後の声
体験した講座の内容がすごくおもしろかったので、来週までに自分のペースで進め、追いつけたらと思います。新しいことばかりで大変でしたが、楽しかったです。
講座資料を見ながら、自習で実践を行ってみました。なかなかやりごたえのある内容です。