上流工程の言語化・目を引くJS・Core Web Vitals・Web解析・成果データ — 卒業制作を「仕事が取れる1本」に作り替える5ステップ
学習を終えて、卒業制作もある。それでも副業の案件が取れないなら、作品の出来を疑う前に「学習用の作品を、そのまま受注用に使っていないか」を疑ってください。卒業制作は学んだ内容を証明するために作られていて、発注者が「この人に頼めるか」を判断する材料としては作られていません。見せる相手が違えば、作るべき中身も違います。
ただし、ゼロから作り直す必要はありません。手元の卒業制作に次の5つを組み込んで「作り替える」だけで、発注者から見た評価は変わります。
- 誰の・何のためのサイトかという上流工程の言語化
- 目を引くJavaScriptの動き
- Core Web Vitals(表示速度)の改善
- Web解析まで見越した設計
- 成果への貢献をデータで示す準備
本数を増やす必要もありません。急いで量産した5本より、ここまで作り込んだ1本のほうが高く評価されるケースがあります。この記事は、Web制作スクールAddedPallasの添削とカウンセリングで「仕事にならない卒業制作」を見続けてきた立場から、作り替えの手順を順番に書いていきます。
卒業制作が、そのままでは仕事にならない理由
先に答えを書くと、卒業制作は「学習の証明」として講師や採点者に向けて作られており、発注者の判断材料として設計されていないからです。出来が悪いからではありません。
カウンセリングでも「スクールの卒業制作は評価されないと聞いた」という相談を受けます。Yahoo!知恵袋にも同様の評価が並びます。添削の現場から言うと、この評価は半分当たっています。スクールの課題は教える都合上どうしても似るため、カフェの架空サイト、定番のアプリ模写といった「どこかで見た作品」が世の中に量産されます。発注者が複数の候補者を並べたとき、課題をなぞっただけの作品は見分けがつきません。
半分は外れています。課題を作り切った実装力そのものは本物です。印象に残っているのは、他スクールの卒業制作だという架空カフェのサイトをカウンセリングに持ち込んだ方でした。実装は堅実で、コードの土台もしっかりしている。ところが「誰に向けたサイトですか」と聞くと、答えが止まりました。足りないのは技術ではなく、「誰のために、何を達成する作品か」という視点です。ここは後から組み込めます。つまり、作り直しではなく作り替えで足ります。
では、その視点がないと発注者にどう見えるのか。発注者側の見方から確認します。
発注者が探しているのは「作れる人」ではなく「成果を出せる人」
副業の最初の発注者になるのは、個人店のオーナーや中小企業の担当者です。技術は読めません。読んでいるのは「頼んだら、うちの売上や集客に効きそうか」です。
発注者は作品を自分の商売に置き換えて眺め、任せたら成果が出そうかを判断します。その目で見られたとき何が判断材料になるかは、ポートフォリオを作っても案件が来ない理由の記事で4点に整理しているので、本記事では繰り返しません。
当校が一貫して教えているのは、サイトは公開して終わりではなく、予約や問い合わせという成果につながって初めてクライアントの役に立つ、という考え方です。「どう作ったか」を語る作品より、「何のために作り、どう成果につなげるか」まで語れる作品が選ばれます。卒業制作の作り替えとは、この視点を後から組み込む作業です。
卒業制作を「仕事が取れる1本」に作り替える5ステップ
順番どおりに進めてください。ステップ1を飛ばすと、残りの4つが飾りになります。
ステップ1: 上流工程からやり直す。誰の・何のためのサイトかを決める
まず、手元の卒業制作に「想定発注者」と「目的」を与え直します。汎用のカフェサイトなら、「駅前で個人経営する美容室が、新規客のネット予約を増やすためのサイト」のように、業種と目的を実在の水準まで具体化します。そのうえで、なぜこの業種か、オーナーはどんな課題を抱えているか、サイトで何を達成するかを1枚に書き出します。
これは書類づくりの練習ではありません。制作の前に意図・背景・目的を固める工程は、実務では要件定義と呼ばれる上流工程です。ここを語れる制作者は「言われたものを作る人」ではなく「一緒に考えられる人」として扱われ、単価の会話にも影響します。書き出した1枚は、後で提案文の骨子にそのまま流用できます。
ステップ2: 構成と中身を、目的から逆算して組み替える
目的が決まったら、構成・文言・導線を目的から逆算して並べ直します。新規予約が目的なら、ファーストビューに何を置くか、予約ボタンまで何回スクロールさせるか、料金とお客様の声をどの順で見せるか。判断の基準がすべて「目的に効くか」に変わるので、課題のレイアウトをなぞった構成から、「この配置には理由があります」と語れる構成になります。
添削でこの工程を挟むと、見た目の変化は小さくても、作品説明が別物になります。「課題で作りました」としか言えなかった作品に、語れる理由が生まれるからです。
ステップ3: 目を引くJavaScriptの動きを足す
並んだ候補作の多くは、テンプレートの流用や動きのない模写で止まっています。だからこそ、スクロールに連動するアニメーションや、ボタン・画像まわりの細かな動きを1〜2箇所仕込んだ1本は、開いた瞬間に他と区別がつきます。当校がカリキュラムのSTEP4で複雑な動きの実装まで扱うのは、高度なJavaScriptを使いこなせるという事実そのものが、受注の場面で差になるからです。
ただし、動きは目立つためだけに入れるものではありません。ステップ1で決めた目的への導線を邪魔しない範囲で、視線を誘導したい位置に置く。添削では逆のケースも見ます。動きを盛りすぎて、予約ボタンより演出のほうが目立ってしまった作品です。目的を尋ねると本人も答えに詰まり、相談のうえで動きを2つ外しました。目的と矛盾しない動きであれば、それ自体を設計意図として語れます。
ステップ4: Core Web Vitalsを整える。「速さ」は発注者にも伝わる
Core Web Vitalsは、Googleが定めるページの表示速度・応答性・レイアウト安定性の指標です(web.devに公式の解説があります)。発注者はこの言葉を知りません。それでも「開いた瞬間に表示される」「スマホで画面がガタつかない」は体感で伝わり、遅いサイトは体感で減点されます。
画像の圧縮と遅延読み込み、使っていないライブラリの削除といった基本の対処だけでも、卒業制作のスコアは大きく改善する余地があります。仕上げに、PageSpeed Insightsで計測したスコアを作品ページに載せてください。表示速度のスコアは非エンジニアの発注者にも読める数字で、見た目だけでなく性能まで配慮できる制作者の証明になります。
ステップ5: Web解析を仕込み、成果をデータで語れる状態にする
最後に、GA4などのアクセス解析やヒートマップを作品に設定し、「公開後に何を計測し、どう改善していくか」を作品ページに書き添えます。たとえば「予約ボタンのクリック率を計測し、押されていなければファーストビューの訴求を差し替える」。ここまで書ける制作者を、発注者は「作って納品したら終わりの人」と区別します。
実案件の経験が1つでもある人は、さらに進めてください。「公開後、問い合わせが月2件から7件に増えた」のように、クライアントの成果に貢献した数字を載せられれば、それは作品数本分の説得力を持ちます。友人の店や身内の事業のサイトでも構いません。数字で語れる実績が1つあるだけで、提案の説得力は一段上がります。
本数を増やすより、1本を実績に近づける
作り替えの途中で「本数が足りないのでは」と不安になる方は多いです。ですが、発注者は候補者の全作品を見ません。最初に開いた1本で、続きを見るかどうかまで決まります。
設計を語れない作品を急いで5本並べるより、上流工程から解析まで作り込んだ1本。さらに言えば、小さくても成果の数字がついた実績1つ。実際、量産しかけていた作品づくりを止めて1本に絞り、身内の店のサイトで小さな数字を作ってから提案に切り替えて、受注に至った受講生がいます。本数を積む時間があるなら、1本を実績に近づけることと、その1本を届けることに使ってください。増やすのは、提案を始めてからで間に合います。
仕上がったら、次は届け方です。ポートフォリオを提案に添えて自分から届ける考え方はポートフォリオを作っても案件が来ない理由の記事に、提案文の書き方から単価・継続案件化までは副業からフリーランスへの解説記事に書いています。
作り替えの段階で、スクールに頼っていい
在学中の方や、卒業後も質問できる期間が残っている方は、この作り替えこそ講師に壁打ちを頼む場面です。見てもらう観点は、実装の正しさよりも「発注者にどう見えるか」。設計意図の説明が通じるか、題材の業種は提案先として現実的か、を確かめてもらいます。
当校では、カリキュラムの最終段階に納期を設定したテスト案件を置き、商品レベルのサイトを一人で作り切れるかを確認しています。テスト案件に合格し、CTOとの面接を通った方と業務委託契約を結んで実務経験を積んでもらう制度もあります(制度の利用には条件があり、受講すれば必ず案件を得られるという保証ではありません)。スクールの実務支援をどう見極めるかは実務支援の解説記事にまとめています。
これから学び始める方は、順番を逆にしてください。卒業制作を「課題として何を作るか」から考えるのではなく、最初からステップ1の上流工程で決めた業種・目的で作る。学習の集大成と受注用の1本を、最初から同じものとして作れます。
よくある質問
- スクールの卒業制作を、そのままポートフォリオに載せてもいいですか？
- 設計を自分の言葉で説明できるなら、1本目として使えます。そのうえで、この記事の5ステップ(上流工程の言語化・目的逆算・JSの動き・表示速度・解析)を組み込んで作り替えると、課題の提出物ではなく受注用の判断材料として通用するようになります。
- 実案件の実績がゼロでも「成果への貢献」は示せますか？
- 示せます。実績の数字がなくても、何を計測しどう改善するかという計測計画と改善仮説を作品に添えれば、成果から逆算して考えられることは伝わります。あわせて、身近な実在の事業のサイトを1つ手がけて小さな数字を作る方法もあります。
- 発注者はGitHubやコードを見ますか？
- ほぼ見ません。GitHubや技術一覧は、エンジニア転職の採用担当者向けの材料です。発注者が実際に見るポイントはポートフォリオを作っても案件が来ない理由の記事に整理しています。代わりに、表示速度のスコアや計測計画といった、発注者にも読める材料を揃えてください。
- 在学中です。卒業制作の題材はどう選べばいいですか？
- 「作ってみたいもの」ではなく「提案しに行けそうな業種」から選んでください。提案先の顔が具体的に浮かぶ業界、たとえば前職の取引先や家族の商売なら、抱えている課題も使う言葉も知っています。題材選びの段階で講師に「この業種へ提案するつもりで作る」と伝えれば、添削も受注前提の視点になります。
まとめ｜作り替えた1本が、そのまま営業資料になる
要点を置いておきます。
- 卒業制作が仕事にならないのは出来が悪いからではなく、発注者の判断材料として設計されていないから。発注者が探しているのは「作れる人」ではなく「成果を出せる人」
- 作り替えは5ステップ。誰の・何のためかという上流工程の言語化 → 目的逆算の構成 → 目を引くJavaScriptの動き → Core Web Vitalsの改善 → Web解析と、成果をデータで語る準備
- 本数の量産より、作り込んだ1本と小さな実績1つ。仕上がったら磨き続けず、提案として届ける
作り替える前の卒業制作のままで構いません。当校の無料カウンセリングに持ち込んでもらえれば、5つのステップのどこから手を付けるべきか、題材をどの業種に設定し直すかを、その場で一緒に決めます。