WEB PRODUCTION CHALLENGE
デザインを、
コードで再現する。
Figmaのデザインカンプを見ながら、HTML・CSS・JavaScriptを使ってWebページを制作する実践課題です。基礎を学んだあとに実際に手を動かし、コーディング力とデザインを読み取る力を身につけます。
- 課題への挑戦は無料
- 実在するFigmaデザイン
- 完成見本を確認可能
- 必要な方のみ添削を利用
ABOUT
制作チャレンジとは
講座で覚えた知識を、ひとつのページとして組み立てるための実践トレーニングです。
Figmaのデザインを観察し、必要な画像や文字情報を整理してから、HTMLで構造を作り、CSSで見た目を再現します。課題によってはJavaScriptやアニメーションも加えます。
正解のコードを写すのではなく、完成見本と比較しながら自分で考えて調整することが目的です。
FREE CHALLENGE
まずは無料で、制作を最後まで試す。
制作チャレンジの課題に取り組むだけで、添削サポートへの申込みは必要ありません。自分で制作・確認したあと、必要な方だけ講師へ相談できます。
FREE
制作チャレンジ
- レベルに合う課題を選ぶ
- Figmaと完成見本を確認する
- 自分で制作してセルフチェックする
OPTION
講師による添削サポート
- 自分では判断しにくい部分を確認する
- 実務を意識したコードへ改善する
- 制作途中の疑問を相談する
制作ガイドは準備中です
AIレビューは今後公開予定です
RECOMMENDED FOR
このような方におすすめ
基礎学習の次に進みたい
HTMLやCSSを学んだあと、実際のページ制作で理解を確かめたい方。
デザインの読み方を知りたい
Figmaからサイズ、余白、画像などの情報を読み取る練習をしたい方。
レスポンシブ制作を練習したい
PCとスマートフォンで崩れないページを、自分で設計したい方。
自分のコードを見直したい
動くだけでなく、意味が伝わり修正しやすいコードへ改善したい方。
WORKFLOW
学習の進め方
デザイン確認から改善まで、実際の制作に近い順番で進めます。
-
01
無料の課題を選ぶ
今の学習状況に合うレベルから、取り組む制作チャレンジを選びます。
-
02
デザインと完成見本を確認
Figma、画像素材、完成見本を確認し、必要な情報を整理します。
-
03
自分でページを制作
HTMLで構造を作り、CSSで再現し、必要に応じてJavaScriptを追加します。
-
04
セルフチェックする
完成見本と比較し、画面幅を変えながら表示やコードを見直します。
-
05
必要な場合は講師へ相談
自分で判断しにくい点や、より実務的に改善したい点を相談します。
-
06
修正点を確認して改善
添削内容をもとに修正し、次の制作でも使える考え方を整理します。
CHOOSE YOUR LEVEL
レベルから選ぶ
今の学習状況や、練習したい内容に近いレベルを選んでください。
STEP 01
入門編
シンプルな1ページを制作する
入門編
HTML・CSSの基礎を学び始めた方向け。まずはデザインを見ながら、ページの構造と見た目を再現します。
この課題で確認すること
- 基本的なHTML構造
- 余白・文字・画像の扱い
- シンプルなレイアウト
- デザインとの見比べ方
STEP 02
初級編
レスポンシブ対応のページを制作する
初級編
HTML・CSSの基礎を一通り学んだ方向け。PCだけでなく、スマートフォンでも見やすいページを制作します。
この課題で確認すること
- デザインから余白を読み取る
- Flexbox・Gridの使い分け
- スマートフォン表示
- 保守しやすいclass名
STEP 03
中級編
動きのあるLP制作に挑戦する
中級編
複雑なレイアウトや動きに挑戦したい方向け。コードの再利用性や、修正しやすい設計も意識します。
この課題で確認すること
- 複雑なレイアウトの分解
- CSSアニメーション
- 必要に応じたJavaScript
- 再利用しやすいクラス設計
STEP 04
上級編
複合的な制作課題へ挑戦する
設計、複雑なレイアウト、動き、保守性まで含めて取り組む上級課題を今後追加する予定です。
- 複数ページや共通パーツを意識した設計
- JavaScriptを含むインタラクション
- 再利用・修正しやすいコード整理
SKILLS
制作チャレンジで身につくこと
デザインの観察力
見た目をセクションやパーツへ分解し、必要な情報を整理します。
HTMLの構成力
内容の意味と見出し階層を考え、読みやすい構造を作ります。
CSSの再現力
余白、色、文字、レイアウトを組み合わせてデザインへ近づけます。
レスポンシブ対応
画面幅が変わっても内容が読みやすいレイアウトを考えます。
動きの実装力
目的に合わせてCSSアニメーションやJavaScriptを使います。
比較・改善する力
完成見本との差を見つけ、原因を考えて修正する習慣を身につけます。
SELF CHECK & AI REVIEW
まずは自分で比較し、改善点を整理する。
完成見本と見比べながら、HTML構造、余白、文字サイズ、レスポンシブ表示、動作を確認します。AIレビュー機能は現在準備中です。
- 見出し階層やHTMLの意味を確認する
- 画面幅を変えてレイアウトを確認する
- 完成見本との差を言葉にして整理する
AIレビューは今後公開予定です
制作ガイドもサブドメイン公開後にご案内します。
MENTOR SUPPORT
添削・メンターサポート受付中
一人では気づきにくい改善点を、一緒に確認します。
まずは無料の制作チャレンジに取り組んでみてください。自分で確認しても判断が難しい部分や、より実務を意識したコードへ改善したい場合は、講師による添削サポートをご利用いただけます。
完成後だけでなく、制作途中のご相談も受け付けています。
添削・サポートを相談する お問い合わせフォームで「トレーニングサポート」を選択してください。添削内容・料金・対応方法は、お問い合わせ時にご案内します。
- HTML構造
- 見出し階層
- CSSレイアウト
- 余白や文字サイズ
- レスポンシブ対応
- JavaScriptの動作確認
- Figmaデザインとの差
- クラス名やコードの整理
- 保守しやすさ
- 今後の学習方法
SUPPORT FLOW
サポートの流れ
- 01制作チャレンジに取り組む
- 02作成したページやコードを送る
- 03内容を確認して添削する
- 04修正点や改善方法をご案内
- 05必要に応じて再確認する
Q初心者でも参加できますか？
A
はい。HTML・CSSを学び始めた方は、まずSTEP 01の入門編から始めるのがおすすめです。
Qどのレベルから始めればよいですか？
A
シンプルな1ページ制作から確認したい方は入門編、レスポンシブ対応を練習したい方は初級編、動きや設計まで意識したい方は中級編を目安にしてください。
QFigmaを使ったことがなくても大丈夫ですか？
A
デザインの確認はできますが、操作に不安がある場合は、先にFigma基礎講座で画面構成や画像の書き出しを確認するのがおすすめです。
Q完成までどのくらいかかりますか？
A
ページ内の期間は目安です。1日に確保できる時間や学習経験によって個人差がありますので、無理のないペースで進めてください。
Q添削では何を見てもらえますか？
A
HTML構造、CSSレイアウト、レスポンシブ対応、JavaScriptの動作、Figmaとの違いなどを確認し、改善方法をご案内します。
Q質問は何回できますか？
A
回数や対応範囲は申込み内容によって異なります。現在の受付内容は、お問い合わせ時にご確認ください。
Qオンライン相談は可能ですか？
A
オンラインでの相談も受け付けています。実施方法や時間は、ご希望を確認したうえでご案内します。
Q制作途中でも相談できますか？
A
はい。完成前でも、止まっている箇所や確認したいコードを共有してご相談いただけます。
START YOUR CHALLENGE
まずは無料で、自分のコードを形にしよう。
課題への挑戦は無料です。制作後に改善点を詳しく確認したい方や、途中で止まった方は添削サポートをご利用ください。