この授業のゴール
Webにかかわる仕事を3つ以上、役割と一緒に言えるようになる。
1. サイトづくりはリレーでできている
たとえば「パン屋さんのサイトを作りたい」という依頼が来たとき、完成までの流れはこうなります。
- 企画「誰に・何を伝えるサイトか」を決めます。(パンの写真をきれいに見せたい、場所と営業時間を分かりやすく…)
- 設計ページの構成(トップ・メニュー・アクセス…)と、それぞれに何を載せるかを決めます。
- デザイン色・写真・文字の配置を決めて、完成イメージの絵(デザインカンプ)を作ります。
- 制作(コーディング)デザインの絵を、HTML と CSS で「本物のWebページ」にします。
- 公開・運用サーバーに置いて世界に公開。そのあとも「新商品を追加して」などの更新が続きます。
この流れのどこを担当するかで、仕事の名前が変わります。
2. 主な登場人物たち
Webディレクター
チームのまとめ役。お客さんの要望を聞き、スケジュールを立て、みんなの作業がうまく進むように調整します。「企画」「設計」の中心です。
Webデザイナー
サイトの見た目を設計する人。色や写真の配置だけでなく、「使う人が迷わない」ように考えるのが本当の仕事です。Figmaなどのツールを使います。
コーダー / マークアップエンジニア
デザインの絵を、HTML と CSS で本物のページに変える人。デザイナーの意図を正確に再現する、ていねいさが光る仕事です。
フロントエンドエンジニア
ページに動きをつける人。メニューの開閉、検索機能、アニメーションなど、JavaScript を使って「触って気持ちいい画面」を作ります。
バックエンドエンジニア
画面に見えない裏側を作る人。ログイン、買い物かご、データの保存など、サーバー側のプログラムを担当します。
Webライター / マーケター
サイトに載せる文章を書く人、サイトをたくさんの人に見つけてもらう工夫をする人。文章が得意な人の入り口になりやすい仕事です。
ヒント: 小さな会社では、1人が2〜3役をかねることもよくあります。「全部を少しずつできる」ことも立派な強みになります。
3. やってみよう ― 好きなサイト観察ワーク
やってみよう
普段使っているサイトやアプリを1つ選んで、「誰の仕事か」を予想するワークです。
- サイトを1つ選びます。(例: 好きなお店のサイト、動画サイト、ゲームの公式サイト)
- そのサイトの中で「いいな」と思う部分を3つ見つけます。(例: 色がきれい、メニューが分かりやすい、検索が速い)
- その3つが、さっきの「仕事図鑑」のどの人の仕事か、予想して書きます。
- スタッフと答え合わせをして、予想と合っていたか確かめます。
記入例 (山田さんの場合): 選んだサイト = お菓子の通販サイト。いいなと思った3つ = ①写真がきれい (→ デザイナーの仕事かな?)、②検索が速い (→ バックエンドエンジニアかな?)、③メニューがスッと開く (→ フロントエンドエンジニアかな?)。― このくらいの ざっくり加減で大丈夫です。
発展チャレンジ(慣れている方・A型の方向け)
発展チャレンジ
- 求人サイトで「Webデザイナー」「コーダー」「フロントエンドエンジニア」を検索して、実際の募集を1件ずつ読んでみましょう。「必要なスキル」の欄に、このカリキュラムで学ぶ言葉(HTML、CSS、JavaScript、Figma…)がどれだけ出てくるか数えてみてください。
- 在宅勤務OKの募集がどれくらいあるかも見てみましょう。Web系の仕事が在宅と相性がよい理由を、自分の言葉でまとめてみてください。