WebデザインとWeb制作の違い：スクールで作る成果物を比べる

WebデザインとWeb制作の違いを調べていると、講座名だけでは学ぶ範囲が分からないことがあります。ここでは「画面の案を作りたい」「ブラウザーで使えるページにしたい」「公開後も更新したい」の三つに目標を分け、授業の成果物を読み比べます。

この区分は講座を比較するための整理方法です。名称だけで全校を二種類へ分類したり、デザインの授業では実装を扱わないと決めたりするものではありません。実際の対象範囲は、各講座の課題と説明で確認します。

画面案と、操作できるページを並べて考える

架空の植物交換会を題材にします。日時、持ち物、参加方法を配置した画面案と、その内容をブラウザーで読めるページは、確認する場所が異なります。

画面案では情報の順番や文字の扱いを検討します。実装したページでは、それに加えてリンクの移動先や狭い画面での表示などを確かめます。画面を画像として提出する課題なのか、操作できるページとして提出する課題なのかを最初に調べましょう。

見た目が似ていても、提出するものが同じとは限りません。「サイトを作る」という説明を見つけたら、完成例だけでなく、提出形式まで読むのが比較の出発点です。

科目名を、何を変えるための技術かに読み替える

HTMLは内容の構造、CSSは見た目、JavaScriptは操作に応じた動作などに使われます。MDNの初めてのWebサイト制作も、計画からこれらの技術、公開へ項目を分けています。

講座に技術名が書いてあっても、紹介を読むだけなのか、自分で書いて提出するのかは別に確かめます。例えばCSSなら、既存の色を一つ変える課題と、同じ原稿を異なる幅へ配置する課題では、行う作業が異なります。

自分の目標を「植物交換会の持ち物を、スマートフォンでも読めるページにする」と書けば、画面案だけで目標を満たすか、実装と表示確認も必要かを判断する材料になります。

公開と更新を、受講範囲の別欄にする

手元の完成画面だけでなく、公開先で読める状態にするところまで学びたい場合は、その工程が課題にあるかを確認します。さらに「開催日を変更する」といった更新を行いたいなら、変更後の確認も比較欄へ入れます。

「公開サポートあり」という言葉を見たときは、誰が作業し、受講者は何を経験できるかを聞いてください。代わりに公開してもらうことと、自分で公開の手順を練習することは、目標へのつながりが異なります。

必要な学習順を組む段階では、一枚のページで学ぶロードマップへ進めます。講座比較の段階では、まだ学ばない工程も含めて範囲を見えるようにしておきます。

二つの候補を、同じ成果物の欄で比較する

紙に「情報の配置案」「画面のデザイン案」「実装したページ」「公開と更新」の四欄を作り、候補校の資料から確認できた内容を書きます。作品例の有無、受講者が作る部分、提出後の確認方法を短く添えましょう。

空欄は「対象外」ではなく「資料では未確認」とします。例えば完成サイトの掲載はあっても公開の授業が見つからなければ、「受講者が自分で公開する課題はありますか」と質問できます。

作品数の多さだけで選ばず、今回必要な成果物の欄が満たされるかを読みます。画面設計を深めたい人と、公開まで一通り試したい人では、同じ欄に印が付く必要はありません。

例えば、次は講座名から推測せず、資料に書かれた範囲だけを整理した模擬の比較メモです。A・Bは実在校を表しません。

成果物	講座Aの資料	講座Bの資料
配置案・画面案	制作課題あり	支給された案を使用
実装したページ	記載なし・要確認	HTMLとCSSで制作
公開と更新	記載なし・要確認	公開課題あり、更新は要確認

画面設計を練習したいならAの課題内容を、支給案を実装したいならBの提出物を詳しく確認する、という次の行動を選べます。

作りたい成果物に必要な工程が、講座に含まれるか

まず成果物を一つ選び、必要な工程に丸を付けます。次に候補の講座説明を読み、未確認の欄を一つだけ質問文へ変えましょう。受講の判断は、必要な情報がそろってから行います。

配置案の課題を試すなら、情報設計の無料レッスンを使えます。その課題を終えたとき、画面案を残したいのか、実装へ進みたいのかを自分の言葉で書いてください。