- ブログ
Webデザイナーのポートフォリオとは？内定がもらいやすくなるコツも解説！
「Webデザイナーのポートフォリオの具体的な作り方が知りたい」
Webデザイナーとして就職活動をする際、ポートフォリオが必要とされていますが、どのような作品を用意すべきか悩んでいませんか？
この記事では、Webデザイナー向けのポートフォリオに関する基礎知識や、作り方について詳しく解説しています。
最後まで読むことで、クライアントや制作会社から内定がもらいやすい作品作りをマスターできるでしょう。
ポートフォリオは「ただの作品集」ではなく、Web制作の実力を可視化し、自分を売り込むための武器になります。
クライアントが欲しがる人材としてアピールできるよう、基本を押さえて丁寧に作品作りを進めていきましょう。
未経験・初心者・学生必見！Webデザイナーに必要なポートフォリオの基本
Webデザイナーに必須とされるポートフォリオの基本について解説します。
- ポートフォリオって何？作成する目的とは？
- ポートフォリオは紙とWebのどちらで提出すべき？
- 未経験webデザイナーはポートフォリオ・作品なしだと面接で落とされる？
- 未経験・初心者のwebデザイナーがポートフォリオに載せる作品数は？
- 未経験・初心者のWebデザイナーでも採用されるポートフォリオのレベルとは？
ポートフォリオって何？作成する目的とは？
Webデザイン業界で示すポートフォリオとは、これまでWebデザイナーが制作してきた作品を指します。
就職や転職の際、面接官に自分の制作技術やデザインセンスを具体的に伝えるのが目的です。
また、新規案件受注に向けてブログなどの個人媒体に制作物を掲載し、訪問者に確認してもらうケースもあります。
ポートフォリオは紙とWebのどちらで提出すべき？
Webデザイナーのポートフォリオは、オンライン上にアップロードしたWebサイトか、印刷した紙媒体で用意します。
理想的なのはどちらか一方ではなく、Webと紙媒体の両方を用意することです。
近年はオンラインを通じて仕事の受注や就職活動をおこなうケースが増えたため、Webサイトを活用するのが一般的になりました。
ただし、企業側の都合やネット環境の不具合などで、紙媒体を求められることもあります。
不測の事態でも臨機応変に対応できるよう、あらかじめ両パターン用意しておくと安心です。
【紙媒体が用いられるケース】
- 直接就職先に赴き、大勢の面接官と対面する場合
- オフライン環境で作品を提示する場合
- クライアントが紙媒体のポートフォリオを希望した場合
【Webサイトが用いられるケース】
- 遠方のクライアントとWebツールを通してコンタクトを取る場合
- クラウドソーシングや転職エージェントで仕事を受注する場合
- ブログやSNS、個人サイトから仕事を受注する場合
未経験webデザイナーはポートフォリオ・作品なしだと面接で落とされる？
サイト制作の実務経験がある・なしにかかわらず、Webデザイナーが就職や営業活動をする際はポートフォリオが必須です。
作品を用意していないと、未経験者の場合は高い確率で面接時に不採用となるでしょう。
なぜなら、口頭や文章による説明だけでは、自分がどの程度制作スキルを持っているか相手に伝わらないからです。
例えば、面接時に「WordPressで動的なサイトを作成できる」と説明しても、どの程度動きのあるサイトなのか実物でないと伝わりづらいのです。
また、ポートフォリオを見せられないWebデザイナーは「仕事に対する意志が弱く、活動力の少ない」と印象づけてしまうので注意しましょう。
未経験・初心者のwebデザイナーがポートフォリオに載せる作品数は？
ポートフォリオの作品数に特別な基準は設けられていませんが、Webデザインの場合は10〜20点ほど用意するのが望ましいです。
紙媒体に印刷する場合は、1枚あたりWebサイト1〜2ページほど掲載します。
ポートフォリオ作りで注意すべき点は、作品数よりも品質にこだわることです。
多くの作品を用意するのが難しい場合は5点以内に数を絞り、丁寧に作りこむことで審査員への好感度が高まります。
未経験・初心者のWebデザイナーでも採用されるポートフォリオのレベルとは？
サイト制作が未経験のWebデザイナーに求められる制作物のレベルは「手取り足取り指導しなくても、基礎的なデザインと実装ができる」程度です。
具体的に以下の作業をクリアできれば問題ないでしょう。
- Photoshopでデザインカンプが作れる
- サイトに使用するバナーやボタンをIllustratorで作成できる
- 基礎的なマークアップ言語を理解しており、ひととおりコーディングができる
Web制作には、コーディングができなくても応募できる求人・案件があります。
ただし、デザインの実装ができないと仕事の選択肢が少なくなるため、可能な限りコーディングスキルを習得しておきましょう。
未経験・学生必見！Webデザイナーが参考にすべきポートフォリオサイト一例
Webデザイナーのポートフォリオ作りに参考となるサイトをご紹介します。
平尾誠さんのサイト
平尾誠さんは、株式会社ARUTEGAの代表を務めるWebデザイナーです。彼はWebデザイナーのほか、フロントエンドエンジニアとしても活躍しています。
平尾さんのポートフォリオサイト「Code is Design」は、黒を基調とした躍動感のあるコミカルなデザインが特徴です。
過去の実績や企業理念などの紹介ページには、動的な要素が用いられており、まるで制作現場にいるかのようなリアリティを感じられます。
平尾誠さんのポートフォリオサイト｜Code is Design
田渕将吾さんのサイト
田淵将吾さんは、クリエイティブカンパニーAID-DCCに所属しているWebデザイナー兼フロントエンドエンジニアです。
田淵さんのポートフォリオサイトは、星空を連想させる群青色の背景にフォトグラフやアルファベットが大きく配置され、存在感があります。
企業紹介のページでは、原色の強いカラーリングや大胆な構図が用いられています。
しかし、巧みにレイアウトが計算されているため、訪問者にまったく違和感を感じさせません。
配置された要素同士が邪魔することなく互いの良さを引き出せているのは、彼の類い稀な才能といえるでしょう。
長谷川寛さんのサイト
長谷川寛さんは、Webサイトを中心に制作活動をおこなっているWebデザイナーです。
1998年に新潟大学を卒業した後、ソフトウェア会社で編集やWebデザイナーとして活動をはじめました。
2004年に個人事業主として独立した後は、ショップや不動産会社のサイト作成など、多方面で活躍しています。
加藤俊司さんのサイト
加藤俊司さんは、株式会社クライマークスに所属しているWebデザイナーです。
彼は東京大学卒業後、通信会社に勤務していましたが、30歳を過ぎてからWeb業界に転身しました。
加藤さんのポートフォリオサイトは和をイメージさせる繊細なデザインで、シンプルなサイト構成です。
アニメーションなどの派手なパフォーマンスはなく、すっきりと情報整理されたレイアウトはユーザーの目に心地よさと癒しを与えます。
加藤俊司さんのポートフォリオサイト｜KATOSHUN.com
Manaさんのサイト
Manaさんは、海外で活躍しているWebデザイナーです。
花や生物をモチーフにした気品溢れるデザインは、国内外問わず愛される作品として知られています。
彼女は国内で約2年間、グラフィックデザイナーとして活動した後、バンクーバーのWeb制作学校を卒業しました。
現在は、Webデベロッパーとしても活躍しています。
未経験・初心者・学生必見！webデザイナー向けポートフォリオの作り方
Webデザイナー向けの基本的なポートフォリオの作り方を解説します。
オリジナルで作る場合
オリジナルで作る場合は、以下の手順をご参照ください。
- Webサイトを作成する目的やコンセプトを決める
- Webサイトに使用する画像素材を集める
- ポートフォリオ作りに参考にしたいWebサイトを探す
- どのような構成にするかサイトマップを考案する
- どこにどのような素材を配置するかワイヤーフレームを作成する
- オンラインでWebサイトが機能するようコーディングをおこなう
- ドメインやサーバーを契約してWebサイトをアップロードする
上記の手順でサイト作りは進められますが、Web制作が初めての人には難しいのが現実です。
制作やスキル習得時間を短縮するためにも、可能であればスクール受講で一連の流れをマスターするのがよいでしょう。
クリエイタースクール「Campus」でも、作品づくりのサポートをおこなっているので、サイト制作に不安がある場合は検討してみてください。
ポートフォリオ作成サイトを活用する場合
仕事や学業でポートフォリオ作りに時間が割けない場合は、以下のサービスの活用がおすすめです。
- PORTFOLIOBOX
- Strikingly
- Wix
- WordPress
作り方はシンプルで、会員登録した後にサイト側が示す手順にしたがって作業を進めます。
HTMLやCSSなどのコーディングスキルが不要なため、早い人で30分〜1時間程度でオリジナルサイトが完成するでしょう。
ただしポートフォリオ作成サイトには以下の欠点もあるため、特徴を認識したうえで活用してください。
- 無料で使用できるサイトは機能制限がある
- 使用できるテンプレートが限られるため、オリジナリティを演出しづらい
未経験・初心者・学生必見！webデザイナーのポートフォリオ作りのポイント
Webデザイナーのポートフォリオ作りに意識すべきポイントを解説します。
ひとつの作品として設計にこだわる
Webデザインのポートフォリオは見映えだけでなく、コーディングなど作品設計にもこだわって取り組みましょう。
制作現場で働いた経験がないデザイナーの場合、ユーザー目線を無視した自己満足な作品になる傾向があります。
どんなに美しいビジュアルでも情報が見づらい、情報が表示されるまでに時間がかかるといったデメリットはユーザーにとってストレスです。
サイト作成の目的やターゲットを明確にすることはもちろんのこと、ユーザーやクライアントが求める使いやすいサイト設計を心がけましょう。
作品の意図や目的を明確に説明する
ポートフォリオを作成した意図や目的などを明確に伝えましょう。
どのようなターゲットに向けて作ったのか、デザインコンセプトは何かなど、面接時に質問される内容を予測して答えを準備しておきます。
目次・プロフィール・連絡先など基本情報を掲載する
ポートフォリオには、サイトの目次や作成（運営）者のプロフィールも忘れず掲載しましょう。
コラム記事などのポートフォリオサイトは、何を伝えているサイトかファーストビューでわかる目次が必要です。
また、読者が読みたい・見たいと思った項目にすぐアクセスできるよう、目次の項目ごとにリンクを貼りつけておきましょう。
サイト制作・運営者のプロフィールは基本情報に限らず、習得している制作スキルや所有している資格も細かく記載します。
【プロフィールの基本情報】
- 氏名
- 生年月日
- 職歴・実績
- 顔写真
- デザイン制作スキル（Webに限らずDTPなどもあれば記載）
- 使用できるデザインツール（Illustrator、Photoshop、Adobe XDなど）
- 所有している資格
- 得意分野 など
また、Webデザインや就職先を志望した動機、サイト制作に対する熱意も記載し、積極的にアピールすることが大切です。
Campusなら未経験Webデザイナーのポートフォリオ作りを徹底サポート！
ポートフォリオ作りを支援してくれるクリエイタースクールの「Campus」をご紹介します。
クリエイタースクールCampusとは？
オンライン講座は、パソコンがあればどこででも受講可能なので、自分の好きなように学習できる点が魅力的です。
しかし、オンライン講座は10万円以上のものがほとんどであり、一括で支払うのが困難な講座が多いです。
そんな方におすすめのオンライン講座が、「Campus」です。
Campusはサブスクリプション型のオンラインスクールで、月額5,500円を支払うだけで受講できます。
オンライン講座を受けるのであれば、ぜひ「Campus」を検討してみてください。
Campusなら選ばれるポートフォリオの作り方を専任講師から学べる！
「Campus」なら、IT業界出身の専任講師から就職に有利なポートフォリオ作りの手厚い指導が受けられます。
- 「Webサイトのポートフォリオは作ったことがない」
- 「Webサイトの仕くみがよく理解できておらず、作品づくりに不安を感じている」
- 「どんなWebサイトを作ればいいのか、まったく見当がつかない」
このような作品づくりに関する悩みや不安を感じたら、Web制作に強い講師たちに相談してみてください。
未経験・初心者・学生必見！Webデザイナーのポートフォリオ作りの注意点
Webデザイナーのポートフォリオ作りの注意点について解説します。
個人・機密情報の取り扱いには注意する
アルバイト先などから制作依頼された過去の作品を実績として用いる場合は、個人・機密情報が公にされていないか十分配慮しましょう。
Webサイトに表示された機密情報はダミー情報に置き換えてボカすなど、一手間加えることで情報漏洩を防げます。
このほか、情報漏洩防止のために見られたくないページを非公開にするのもおすすめです。
また、ポートフォリオサイトは関係者以外が閲覧できないようアクセス制御をかけておくと、さらに安全性を強化できます。
著作権侵害に注意する
制作した作品が著作権を侵害していないか、十分注意しましょう。
【著作権を守るためのポイント】
- 過去の作品を活用する場合は依頼主（企業・個人など）に許可を取る
- 過去に企業に提出して不採用となった作品はできるだけ公にしない
- 出典・引用元はもれなく記載する
サイトデザインに限らず、すべての作品には著作権が発生します。原則として、著作権は作品制作を依頼した企業または個人に帰属するため注意してください。
まとめ｜Webデザイナー未経験者はポートフォリオ作りに注力しよう
Webデザイナー未経験者はポートフォリオ作りに力を入れましょう。Webデザインに限らず、クリエイティブ職の営業や転職活動にはポートフォリオが不可欠です。
ポートフォリオは、自分の強みをクライアントに知ってもらうための重要な資料になります。作品は数よりも品質を重視して、ほかのWebデザイナーとの差別化を目指していきましょう。
クリエイタースクール「Campus」では、Web制作が初めてでもポートフォリオが作れるよう、丁寧な指導をおこなっています。
月額5,500円（税込）で気軽に勉強できるので、少しでも作品作りに不安を感じたらぜひ受講を検討してみてください。
投稿者プロフィール
-
未経験からWebスキルを学び半年で月収100万円達成、その後スクールを一から立ち上げ２年で500人が受講。
トリンドル玲奈さんとテレビで対談、日経電子版「私のみちしるべ」へ掲載。
最新の投稿
お知らせ2024.05.13Japan Qualityへ掲載されました！- お知らせ2024.02.06「メタトレンディ」にてCampusスクールが紹介されました。
お知らせ2024.01.22おすすめのWEBデザインスクール7選「口コミや評判をもとに徹底比較運営事務局」にてCampusが紹介されました。- お知らせ2023.12.20副業レビューサイト「サギコイ」にてCampusが紹介されました。