未経験からWeb制作ポートフォリオを作る手順

最初から3作品を作ろうとしない

未経験者向けの情報では「ポートフォリオには3作品必要」と書かれていることがあります。ただ、完成度の低い作品を急いで三つ作るより、一つを公開し、説明できる状態まで仕上げる方が学びは深くなります。

最初の一つは、架空のカフェ、美容室、地域の教室など、利用者を想像しやすい題材がおすすめです。誰に何を伝えるサイトなのかが決まると、色やレイアウトを選ぶ理由も説明しやすくなります。

いきなりデザインツールを開かず、次の四つをメモします。

たとえば個人経営のカフェなら、目的は「近所の人に営業時間と場所を知ってもらい、来店してもらう」。この目的があれば、トップに置く情報の優先順位が決まります。

参考サイトを探すときは、色や写真だけでなく、「なぜこの順番なのか」を見ます。最初に商品を見せているのか、安心材料を先に出しているのか、予約ボタンはどこで出てくるのか。理由を言葉にすると、丸写しではなく自分の設計に使えます。

参考にするときのメモ例「スマホでは営業時間が最初に見える」「メニュー写真の直後に地図がある」「予約ボタンが画面下に固定されている」のように、動きや順番を記録します。

実際の閲覧はスマホが中心になる案件も多いため、PCだけ整っていてスマホで崩れる作品は評価されにくくなります。トップページを組んだら、早い段階で390px前後の幅を確認してください。

文字が小さすぎないか、ボタンを押しやすいか、画像が切れすぎていないか。見た目だけでなく、使う人の立場で確認します。

自分のパソコンで動くだけでは、相手は確認できません。GitHub PagesやVercelなどを使い、URLを送れば見られる状態へ公開します。公開時には、画像の読み込み切れ、リンク切れ、フォームの動作も確認します。

公開作業でつまずく経験も、Web制作では大切です。ファイル名の大文字・小文字や相対パスなど、ローカルでは気づきにくい問題が見えてきます。

採用担当者や依頼者が知りたいのは、完成画面だけではありません。次の項目を短くまとめます。

完璧だったように見せる必要はありません。問題に気づき、調べ、直した過程の方が、その人の考え方を伝えます。

最低限ここを確認

CodeTutorでは、題材決めから公開、説明文の整理まで1対1で確認します。作りかけの作品を持ち込んでの相談も可能です。