[2025年出題基準] Webデザイン技能士実技試験完全ガイド

🚩 2025年のWebデザイン機能士手書きと実技試験スケジュール

2025年度ウェブデザイン機能士資格試験情報：  http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798

▲2023年基準で3,991人が受験して2,298人合格、 1,693人不合格
（2023年度に1,693人がそれなりに懸命に試験準備し、受付し、受験しに試験場まで行ったが不合格でした。

▼実技試験受付前にぜひ！見てください。

実技試験の受付は4日間行われます。 Q-Netで午前10時から受け付けてください。受付期間は4日ですが、受付開始日の10:00～10:30内にすべて締め切ります。だから10時前にQ-Netログインしてスタンバイしてこそ実機試験受付可能です。実技試験は、筆記試験とは異なる特定の試験場でなければならないため、実技試験人員が毎回定められています。実技試験の受付ができなかったので試験できない学生たちはとてもたくさん見ました。だから必ず受付初日午前10時前にログイン後スタンバイしてください。

日程よく見て、今年はぜひ！合格していただきたいと思います〜！

Fタイプレイアウト制作及び最終本制作映像がアップデート完了（2024.1.16）

2024年から追加されたFタイプ4種類（F1、2、3、4）制作映像が更新されました。 Fタイプと呼ばれる新しい制作モジュールがあるか、そうではありません。ただし、レイアウトだけ1つ追加されたと考えればいいです。追加されたFタイプ4つのため実技試験の準備に大きく負担されないと思います。

😧 2024年実技試験1回目からFタイプ4つが追加

2023年度までAタイプ、 Bタイプ、 Cタイプ、 Dタイプ、Eタイプそれぞれ4種類ずつ合計20個でしたが、2024年の1回目の試験からFタイプ4種類が追加されました。それで、合計24種類を勉強する必要があります。
主催側で2023年度に試験年齢を大幅に上げたが、2024年度から試験難易度をもう少し上げました。

✅ 2024年に追加されたFタイプ授業映像は現在準備中です。

2024年1回実技試験が2024.03.16～2024.03.29なので、Fタイプを除いて現在ある内容を勉強してください。 A、B、C、D、Eタイプを十分に上手にしている状態であれば、 Fタイプも全体のレイアウトだけがちょっと違うので、大きく違う部分はありません。ただし、全体のレイアウト設計で1340ピクセルで中央揃えですが、スライドセクションのみブラウザ100％にする必要があるのが難しいようです。

※Fタイプもスライド方式、タップメニュー、ナビゲーション、モーダルともA、B、C、D、Eタイプと同じです。

Fタイプ授業映像と資料は遅くとも1月末までに準備される予定です。少し早いかもしれません。予想では1月20日程度になると予想します。

※公開問題PDFファイルは下記セクションで2023年度と2024年度ダウンロードしてご確認ください。

2024年度ウェブデザイン機能士資格試験情報： http://www.q-net.or.kr/crf005.do?id=crf00503&jmCd=7798

本日F3オープンバンキング（23番）タイプ試験を見てきました！

学習の質問ではありませんが、先生が周りにFタイプ試験を見たことがないので

情報が正確ではないというのが覚えてくると思いますが、他の受験生の方々と

先生に役立つようにテストを終えて走って来て、投稿を作成します！

今週ずっと不思議にFタイプが気になっていましたが、今日ちょうど試してみるのが直感していたようです😭😭

1.講義通り

.slideの中でslide-imageとslide-bannerで結んで勉強しましたが、

試験紙では私達がslide-bannerと呼んだ部分を指示事項では<ショートカット>とし、content-innerの中にあるshortcut部分を試験紙ではバナーと指示していました。ただコードを結ぶ名前だけ違ったけどFタイプ用意してる方はあまり混乱してほしい気持ちでコード名を変えて勉強するのかどうかという気がしました！しばらくして、ちょうど指示事項要求した名前でコード名も統一をさせました！

2. ピンク色のボックス部分を色塗りした部分について申し上げるものがありますよ～
覚えているかもしれませんが、..😭😭
私が24.03.27にFタイプslide-banner link部分に文字を入力する指示があるかと思う
質問を投稿したことがあります..！
残念ながら、私の予想通り、テストの指示にアンカーごとにテキストを入れるという部分がありました。
提供されるテキストメモ帳に挿入するようにテキストがありました😭😭
そして、総入る画像はレイアウトと同様に5つでした。
ただし、テキストを画像のどこに置くように特定の指示はなく、
だから私は

spanでテキストを入力してギャラリー画像にspanを入れたのと同じように
display:block 処理をして上下に入れて配列する方法にしました。
イラストやフォトショップでイメージを作るのではなく、提供されたイメージを挿入しなければなりませんでした。

配置をしてからスライド画像の上に浮かんでいない写真を貼っておいたようで、
私はバックグラウンドカラーを与えて透明度を調節してスライドイメージとは別の部分であるアイコンのように見える
作成しました。

3. そしてお知らせ部分です！右側に先生が???😭😭 と水色で書いた部分は本当に空白でした！ただし、お知らせ部分にエン？と驚いた部分は、tab-inner幅が広くないことがあるから
お知らせ部分にem/bタグを使ってバッチや馬の縮小を勉強していきましたが、
日付入力がありませんでした！
だからゆっくりアンカーだけ入れてブロック処理して中央配置して飾りました。

私が間違えたのは、フッターメニューにボーダーボトムを与えたことです。
メニューサブバックwidthサイズをハザーサイズに与えたということの2つのことですが、(Aタイプsub-backのように作ってしまいました😭)
他のものはすべてうまくいき、自分でもああ、これくらいすればいいという気持ちでよく解いてきました！ 😭😭
こういうあの二つの問題に落ちるとあまりにも恥ずかしくて恥ずかしいようですが..😭😭😭😭
それでも、自分で多くの構造を把握して作ることができるというのがあまりにもそうです。

そしてFタイプがどうしても見たことのないタイプだから。

今日私が行った試験場に12人が試験を見ましたが、6人が途中であきらめていきました。
私はすべての確認を終えて提出するのに2時間20分かかりましたが、
その時まで私を含めて提出した人は3人であり、私が教室出てくるまで3人が残っていました。

4月9日に合格発表日ですが、どうぞよろしくお願いします😭😭
先生対面の授業ではなくオンラインの授業でしたが、本当にたくさんのことを学びました😭😭
ありがとうございます😭😭！

😊ジェイクエリスライドの作成アップデートが完了しました（2023.3.11）

ジェイコーリー方式スライド制作映像が更新されました。 2023年からDタイプ、Eタイプ追加され、実機試験の難易度が上がり、スライドの制作方法をより簡単で楽に制作が必要です。そこで既存のジェイクエリー方式映像を新しい映像で制作しました。

従来のCSSスライダーで作成すると、多少減点要素がある可能性があります。 CSSスライダー講義がありますが、ジェイクエリを使ってスライダー製作することをお勧めします。 （事実2つの方法の中で楽なもので学習して試験をしても合格には全く支障がありません。）

CSSスライドの場合、スライド1、2、3の後に再びスライド1に戻り、1、2、3に行く部分が少しぎこちないが、ジェイコーリースライドはスライド1、2、3の後、再び自然にスライド1、2、3に見えます。まもなく、CSSスライドよりも完璧なスライド作成が可能です。

ジェイクエリコードを見れば短くてとても簡単で理解しやすいと思います。
※JQueryコードは6行ですが、実際に動作するコードは3行です。

▼ジェイコーリー方式スライド制作映像とダウンロードファイルは下記からご覧頂けます

▼ 2023年に新たに追加されたDタイプ（D1）最終版のプレビュー

▼2023年に新たに追加されたDタイプ（D2）最終版のプレビュー

▼2023年に新たに追加されたDタイプ（D3）最終版のプレビュー

▼2023年に新たに追加されたDタイプ（D4）最終版のプレビュー

▼ 2023年に新たに追加されたEタイプ（E1）最終版のプレビュー

▼ 2023年に新たに追加されたEタイプ（E2）最終版のプレビュー

▼ 2023年に新たに追加されたEタイプ（E3）最終版のプレビュー

▼ 2023年に新たに追加されたEタイプ（E4）最終版のプレビュー

2025年のウェブデザイン機能士実技準備の方はぜひ！参考にしてください。

2024年、ウェブデザイン機能士実技試験試験情報が発表されました。筆記実技ともにWebデザイン機能史出題基準は2022年出題基準と同じです。また、ウェブデザインの機能士実技試験の公開問題も2022年とまったく同じですが、2023年からDタイプとEタイプが追加されました。 Webデザイン機能士実技試験の公開問題は以下のセクションに更新されました。

[追加事項] 2024年度1回目からFタイプ4つがさらに追加されました。 （合計24種類）

2022 年から変わった部分は、公開問題 5 ページの技術的遵守事項 10 番で Internet Explorer でうまく動作しなければならないという部分が MS Edge でよく見られていると変わった部分が唯一です。 Internet Explorerで結果をチェックせずにMS Edgeをチェックするというのは、FLEXなど、ほぼすべてのCSSプロパティを使用できるということです。すぐに受験生が成果物を製作する際に、クロスブラウジングに対する負担がほとんどなくなったと考えても良いです。 （試験ですから安全な合格のために講義の授業内容で使用した方法で学習し、試してみることをお勧めします。）

🚩 2025年のウェブデザイン機能士実技試験出題基準

現行ウェブデザイン機能社出題基準適用期間は2025.1.1～2027.12.31まで有効です。
本講義は現行出題基準に完全に合わせた実技試験講義で製作されました。

2025年度ウェブデザイン機能士資格試験情報： http://www.q-net.or.kr/crf005.do ?id=crf00503&jmCd=7798

🚩 2025年のウェブデザイン機能士実技テキストエディタ

2021年の3回目の実技試験からビジュアルスタジオコード（Visual Studio Code）テキストエディタのみが利用可能になりました。既存のテキストエディタでインストールされていたBracketsとDreamweaverは、Q-Net公式サイトの案内によると、2022年からは使用できません。したがって、結論はNotepad ++またはVisual Studio Codeのいずれかを使用してテスト準備することができます。もちろんEditPlusとBracketsを書くことはありませんので、Visual Studio Codeを使って実技試験を勉強してください。

Q-Net公式サイトのウェブデザイン機能士実機活用ソフトウェア案内

https://www.q-net.or.kr/cst006.do?id=cst00602&gSite=Q&brdId=Q006&code=1204&artlSeq=5199079

上記のガイドに示すように、「プラグイン（別途アプリケーション、アドイン）はインストールできません。」となっています。意味は、ビジュアルスタジオコードエクステンションがインストールされていないため、ビジュアルスタジオコードプログラムの基本機能として実技試験を見なければならないということです。だからビジュアルスタジオコードをインストールし、別のエクステンションをインストールしないで勉強してください。実技試験場と同じ環境で試験準備をしなければなりません。下図のビジュアルスタジオコード講義の4つのうち、赤いボックスの2つだけを学習してください。もちろん、実務のためのビジュアルスタジオコード学習なら、4つすべて学習してください。

[必読]学習を始める前にテキストエディタを使用する

該当講座にあるVisual Studio Codeの使い方の中で、Webデザインの機能士実技試験のために赤いボックスの2つの映像のみを学習してください。 （実技試験場にはエクステンション設置がされていません。 ）

ビジュアルスタジオコードで自動保存機能を有効にする

自動保存はエクステンション機能ではなくビジュアルスタジオコード自体機能なので自動保存する詳細な方法はコーディングワークス Inflearnブログでご確認ください。 https://www.inflearn.com/blogs/728

【アップデート】Flex配置全体レイアウト制作講義映像

1) 2022年よ​​りウェブデザイン機能士実技試験技術的コンプライアンスでEdgeとChromeでクロスブラウジングチェックします。以前のIE（Internet Explorer）は正式に除外されました。 👍

2) floatで横配置する既存方式を十分に学習後、Flex配置を学習（ Flex配置は必須ではない）
Float と Position の配置を知らずに Flex 配置学習を控える必要があります。

3) 使用する場合 Flex 配置は全体レイアウトのみに使用することをお勧めします（詳細な配置に Flex 使用を控える）

選択 1) Flex 配置(全体レイアウト) + Float, Position(レイヤーポップアップ、ナビゲーション、お知らせ)
選択 2) Float, Position (全体レイアウト、レイヤーポップアップ、ナビゲーション、お知らせ)

※フレックス（Flex）での全体レイアウト制作は、Floatで配置する既存方式を十分に学習した後、最終本製作で活用されることをお勧めします。

⚡効果的な学習のためにぜひ！コーディングワークスパブリッシングYouTubeを参照してください。

コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。

コーディングワークスパブリッシングYouTubeチャンネル： https: //www.youtube.com/codingworks

💡  講義の特徴

合計30時間、合計112の講義と18のコア資料で実技試験合格を誇るカスタム講義

合計27のHTML+CSS+JQUERYコア理論講義

実技試験製作モジュール完璧分析講義（レイアウト、スライド、ナビゲーション、タブメニュー、レイヤーポップアップ）

Webデザイン機能士実技試験通過の最大の難関！スライド製作

コーディングワークス講義は、ジェイコーリー製作だけでなく、純粋なCSSでスライド完全に実装

学生の好みに応じて、ジェイコーリースライドまたはCSSスライドの制作方法を選択可能

CSSスライドアニメーション（横スライド、縦スライド、クロスフェードスライド）

ジェイコーリースライドアニメーション（横スライド、縦スライド、クロスフェードスライド）

すべての製作モジュールを含む実技試験最終版の3つの制作映像

Webデザイン機能士実技試験に不可欠なPhotoshop CS6の使い方と画像制作映像

HTML + CSS理論教材だけでなく、すべての制作モジュールと最終版の3つの制作ファイルをダウンロード

コーディングワークス講義は合格かどうかではなく、どれほど高得点で合格するかについての本当の講義

実技試験当日に試験場の雰囲気、手続き、コツ、提出方法、資格証明申請方法など詳細な映像まで

💡  受講対象

- Webデザイン機能士資格証明実技試験に合格したい方
- ウェブサイトのメンテナンス修正補完を独自にしたい方
- WebデザインからWebパブリッシャーに職業を切り替えたり、HTML+CSS+JQUERYパブリッシングを強化したい方
- Webパブリッシングの理解度を高めたいWeb企画者
- フロントエンドパブリッシングに対する理解度を高めたい開発者

💡  授業目標

- Webデザイン機能士実技試験に高得点で合格できます。
- HTML+CSS+JQUERY パブリッシングのスキルを体系的に向上させることができます。
- ウェブサイト制作ノウハウを向上させることができます。

- Webパブリッシング就業のための個人ポートフォリオウェブサイトを作成することができます。

💡  準備事項

- 基本的なコンピュータ活用能力とインターネットブラウザ使用能力
- コーディングのための基本的な英語タイプの能力

💡コーディングワークスWebデザイン機能士実技試験講座の特徴は何ですか？

- 2024年出題基準に最適化された講義内容（12種類の完璧分析及び適用）
- 簡単で簡単なコードが高得点合格と安全錠合格を保証
- 実務にすぐに使える実力を育てる体系的な講座
- 合計30時間を超える充実した講義内容
- 現場で学生を直接教えている実力ある講師が進行する特別な講義
- HTML+CSS+JQUERY理論学習書PDF教材ファイル提供

💡コーディングワークスWebデザイン機能士実技試験オンライン講座誰ですか？

- 実務ウェブパブリッシャー兼有名学院でオフライン講義を進行する講師
- 良い講義のために直接教えた経験とノウハウが十分な講師
- 長年ウェブデザイン機能士資格証明実技試験に備えて授業進行した講師で特別な合格ノウハウ専修
- ウェブ機能士資格証明実技試験に備えている学生のレベルと何が必要かをよく知っている講師
- 入門者と初級者が理解しやすいコードで現実的かつ効率的な学習方法を提示する講師

🙋🏻‍♂️講師紹介

• （現在）フリーランサーフロントエンドパブリッシャー
• グリーンコンピュータアカデミーウェブパブリッシングインストラクター
• ダージョはコンピュータアカデミーWebパブリッシングインストラクター
• 今コンピュータアカデミーWebパブリッシングインストラクター
• フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
• 今コンピュータアカデミーウェブデザイン機能士実技資格証明
• イージー＆エデューフロントエンドパブリッシング、UI/UXデザイン
• HTML + CSS + JQUERYパブリッシングYouTubeチャンネル「コーディングワークス」を運営
• コーディングワークスパブリッシングYouTubeチャンネル - https://www.youtube.com/codingworks
• コーディングワークスパブリッシングブログ - https://www.inflearn.com/users/@codingworks/blogs

🙋🏻‍♂️質問する前に必ず！読んでください〜！

学習しながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合、HTML、CSS、JSコードをコピーしてすべてアップロードしてください。正確な回答を提供できます。

ブラウザの結果画面はキャプチャで、コードはコピーしてアップロードしてくれば正確な回答ができます。