当サイトはアフィリエイト広告を利用しています。
LIFE

未経験Webデザイナーのポートフォリオ作成|作品例と見せ方のコツ

「Webデザイナーに応募したいけれど、実務作品がない」「ポートフォリオには何を載せればいい?」と悩んでいませんか。

未経験の場合は、自主制作で何を考え、どこまで制作できたかを伝える方法があります。作品数を増やす前に、一つの作品を説明できる形に整えたいですね。

▶本記事の概要

  • 未経験のポートフォリオは応募職種から考える
  • 自主制作の作品例と取り組み方
  • 作品紹介ページの構成と説明例
  • 提出前の確認と制作環境の整え方
  • まとめ

未経験のポートフォリオは応募職種から考える

ポートフォリオは、作品とその説明を通して制作スキルを伝える資料です。実務経験がなくても、自主制作を材料にできるでしょう。

最初に応募先の募集要項を読み、仕事内容と提出指定を確認します。Webデザイン中心か、コーディングやバナー制作も担当するかで、見せたい内容が変わりますね。

  • 制作するもの:Webサイト・LP・バナーなど
  • 担当範囲:デザインのみか、実装や更新も含むか
  • 求められるツールやスキル
  • 提出形式:URL・PDF・指定フォームなど

自主制作を、企業から依頼された実案件のように紹介しないことが大切です。学習課題や共同制作も、制作の背景が分かる表示にしたいですね。

参考:レバテッククリエイター「未経験者向けポートフォリオの作り方」

経験が少ない場合の応募書類は、職務経歴書に書くことがないときの整理方法でも解説しています。作品集には制作内容、職務経歴書にはこれまでの業務経験を整理すると役割を分けやすいでしょう。

自主制作の作品例と取り組み方

題材は、自分が目的と利用者を説明できるものから選びます。次の3つは、このページ用に考えた自主制作の例ですね。

  • 架空の店舗サイトで情報を整理する
  • 架空のイベントページで行動を案内する
  • 同じ企画のバナーを条件に合わせて作る

架空の店舗サイトで情報を整理する

例えば、架空のパン店のサイトを作る課題です。初めて来店する人が、営業時間・場所・主な商品を見つけられる構成を考えるとよいでしょう。

  1. 想定する利用者と来店前の疑問を書き出す
  2. 必要な情報を優先順に並べる
  3. 画面構成をラフで描く
  4. パソコンとスマートフォンの見え方を作る
  5. 案内が分かりにくい箇所を見直す

架空の店舗であることを、作品紹介と公開ページの分かる位置に記載します。実在する店舗のロゴや写真を、そのまま自分の作品へ使わないようにしたいですね。

架空のイベントページで行動を案内する

体験教室などを題材に、対象者・日時・料金・参加方法の配置を考える練習です。見た目に加え、申込みまで迷わず進めるかを説明できるとよいでしょう。

実際には申込みを受け付けないデモなら、その点を明記します。入力欄を置く場合も、不要な個人情報を集めない設計にしたいですね。

同じ企画のバナーを条件に合わせて作る

一つのイベント告知を、横長と正方形の2種類で制作する例です。表示領域が変わっても、伝える順序を保つ工夫が見せられるでしょう。

「文字が読めるよう写真の位置を変えた」「日時より参加対象を先に見せた」など、変更理由を残します。数だけ増やすより、判断の過程が分かるほうが説明しやすいですね。

作品紹介ページの構成と説明例

作品紹介には、完成画面だけでなく制作条件も添えます。次の項目をそろえると、見る人が内容を追いやすいでしょう。

項目 架空の店舗サイトの記入例
制作区分 自主制作・架空店舗
目的 初めて来店する人に場所と営業時間を伝える
想定する利用者 外出先でスマートフォンから調べる人
担当範囲 情報整理・画面デザイン。実装は未対応
制作環境 実際に使ったソフトと作業期間
工夫 営業時間と地図への案内を早く見つけられる配置
課題 商品点数が増えた場合の分類を再検討

デザインのみなら、実装まで完成しているようには書かないことが基本です。共同制作の場合も、自分が担当した範囲を分けたいですね。

成果は、確認できた事実で説明します。実際に計測していない「売上が増えた」「申込み率が上がった」という数字は使えません。

代わりに「初見の友人に営業時間を探してもらい、見つけにくいと言われた箇所を修正した」など、実施した確認と改善を記載する方法です。検証していない場合は、狙いと今後の確認事項に分けると正直な説明になるでしょう。

接客経験なら利用者への説明、事務経験なら情報整理など、過去の仕事と制作をつなげる視点もあります。転職の自己分析で経験を整理する方法から材料を見つけたいですね。

提出前の確認と制作環境の整え方

応募先の指定形式を確認したうえで、相手が閲覧できる状態かをチェックします。自分のアカウントで開けるだけでは、相手も見られるとは限りません。

  • URLが正しく、閲覧権限が設定されているか
  • PDFの容量・ファイル名が指定に合うか
  • 画像と文字がスマートフォンでも読めるか
  • リンク切れや空のページがないか
  • 素材の利用条件・表示条件を確認したか
  • 個人情報や公開できない制作物が含まれていないか

制作に使う道具は、今ある環境の不足から考える方法があります。購入を検討する場合は、次の2点が候補ですね。

  • 外付けSSD:制作データの複製保存用。端子・容量・別の保存先との併用を確認
  • ノートPCスタンド:画面位置を調整する用途。安定性と、必要に応じた外付け入力機器を確認

作品づくりと求人の検討を並行したい場合は、type転職エージェントの特徴と注意点も確認できます。未経験職種の紹介やポートフォリオへの助言が受けられるかは、個別に確かめたいですね。

まとめ

未経験のWebデザイナーのポートフォリオでは、作品と一緒に考え方を伝えます。まず一つの作品を、目的から改善点まで説明できる形に整えると取り組みやすいですね。

▶本記事の振り返り

  • 募集職種と提出形式を先に確認する
  • 自主制作は架空・学習課題などの区分を明記する
  • 目的・担当範囲・工夫・課題を作品に添える
  • 閲覧権限・表示・素材の利用条件を確認する

ABOUT THE WRITER

この記事を書いた人

yaruki 運営者・執筆者

yarukiblog

自分に合った働き方を考え、実体験から発信する個人ブロガー

yarukiblogの運営者です。アルバイト勤務と複数ブログの運営経験をもとに、転職・就職・アルバイトに関する疑問を整理しています。公的機関や企業の公式案内を確認し、読者が次の行動を選びやすい記事づくりを目指しています。詳しくは「運営者情報」をご覧ください。

  • アルバイト経験 約5年
  • ブログ2サイト運営
  • 音楽制作
運営者プロフィールを詳しく見る