こんにちは、ラフデザインスクールの「ラフスクール運営事務局」です。

「HTML・CSSやFigmaの勉強はしているけど、次に何を作ればいいかわからない」 「ポートフォリオって、結局どんな制作物を載せればいいの？」

未経験からWebデザインの学習を始めた方から、こうしたご相談をよくいただきます。実は、目指すゴールが「転職」なのか「副業・フリーランス」なのかによって、最初に作るべき制作物は変わってきます。

今回は、独学でWebデザインを学んでいる初心者の方に向けて、転職・副業それぞれのケース別に「最初に作るべき制作物リスト」を具体的にご紹介します。

制作物選びで失敗しないための大前提

具体的なリストの前に、まず押さえておきたい大前提があります。それは「誰に見せるための制作物か」を明確にすることです。

Web制作会社の採用担当者に見せるのか、副業やフリーランスの案件でクライアントに見せるのかによって、評価されるポイントは大きく異なります。転職の場合は「基礎力の高さ」や「コーディングの正確さ」が重視されやすく、副業・フリーランスの場合は「実際の案件に近い実践力」や「提案力」が見られる傾向があります。

未経験の段階では、あれもこれもと手を広げるより、目的に合わせて制作物を絞り込むことが、限られた学習時間を有効に使うコツです。

【転職・キャリアチェンジ向け】最初に作るべき制作物3選

Web制作会社への転職や、社内でのキャリアチェンジを目指す方には、以下の3つがおすすめです。

1. 模写コーディング（既存サイトの再現） 実在するサイトのデザインを見ながら、HTML・CSSでコーディングを再現する練習です。基礎的なコーディングスキルを客観的に示せるため、未経験者の登竜門としてよく使われます。

2. オリジナルのランディングページ（LP） Figmaで自分でデザインしたLPを、実際にコーディングまで仕上げたものです。デザインからコーディングまで一気通貫でできることをアピールできます。

3. 複数ページ構成のWebサイト（コーポレートサイト想定） トップページ・会社概要・お問い合わせページなど、複数ページで構成された架空のコーポレートサイトです。情報設計やナビゲーション設計まで考えられているかが評価されやすいポイントです。

これらをまとめてポートフォリオとして提示することで、Web制作会社の採用担当者に「実務でも通用しそうだ」という印象を与えやすくなります。

【副業・フリーランス向け】最初に作るべき制作物3選

一方、副業やフリーランスとして早めに案件を獲得したい方には、少し違う視点での制作物選びが必要です。

1. 想定クライアントを設定したデザイン提案 「地域の美容室」「個人経営のカフェ」など、架空のクライアントを想定し、要望に応える形でデザイン・コーディングを行う制作物です。提案力や課題解決力をアピールできます。

2. レスポンシブ対応のサイト スマホ・タブレット・PCそれぞれで正しく表示されるレスポンシブデザインのサイトです。副業案件ではスマホ対応が必須条件になっていることが多く、対応できる証明として非常に有効です。

3. 修正・更新を想定したページ クライアントワークでは、公開後の修正依頼が発生することが一般的です。あらかじめ更新しやすいコード構成を意識して作った制作物があると、実務目線でのアピールにつながります。

副業・フリーランスの場合は、いきなり本格的なポートフォリオサイトを目指すより、こうした「実案件を想定した制作物」を1〜2点仕上げてから、クラウドソーシングなどで小さな案件に挑戦していくのがおすすめです。

制作物をポートフォリオにまとめるときのポイント

転職向け・副業向け、いずれの制作物を作った場合も、最終的にはポートフォリオとして1つにまとめて発信することが重要です。

ポートフォリオを作る際は、以下の点を意識してみてください。

• 制作物ごとに「制作意図」「工夫した点」を一言添える
• Figmaのデザインデータへのリンクも併記し、デザインプロセスが伝わるようにする
• HTML・CSSのコードは、GitHubなど第三者が確認できる形で公開する
• スマホでの見え方も必ず確認しておく

未経験の間は、制作物の「数」よりも「1つ1つの完成度と伝わりやすさ」を意識することで、Webデザイナーとしての第一歩を着実に踏み出せます。

まとめ

今回は、未経験からWebデザインを学ぶ方に向けて、転職・副業それぞれの目的別に「最初に作るべき制作物リスト」をご紹介しました。

私たちラフスクール運営事務局には、日々「何を作ればいいかわからず手が止まってしまう」という受講生からの相談が寄せられます。そのたびに感じるのは、独学でつまずきやすいのは技術そのものよりも、「次に何をすべきか」という道筋が見えないことだということです。

ゴールが転職なのか、副業・フリーランスなのかによって、必要な制作物やアピールすべきポイントは変わります。だからこそ、闇雲に手を動かすのではなく、目的から逆算して制作物を選ぶことが、遠回りに見えて実は一番の近道だと私たちは考えています。

ラフデザインスクールでは、Figmaでのデザイン制作からHTML・CSSのコーディング、そして転職・副業それぞれの目的に合わせたポートフォリオ作成まで、一人ひとりの状況に合わせてサポートしています。「何から手をつければいいかわからない」という初心者の方は、ぜひ一度私たちにご相談ください。