Webデザイナー必見!ポートフォリオサイトの作り方とポイント

 Webデザイナー必見!ポートフォリオサイトの作り方とポイント

Webデザイナーが就職活動で自分をアピールする際に欠かせないものが、「ポートフォリオ」です。制作物やその背景、自分の能力などをまとめたポートフォリオを見れば、デザイナーの能力が一目で分かります。

Webデザイナーのポートフォリオは、冊子やメディア形式よりも、動的表現が見せられるWebサイト形式にするべきです。そこで今回は就職や転職を考えているWebデザイナーの方に向けて、ポートフォリオサイトの作り方とそのポイントをご紹介します。ポートフォリオの作り方に決まったルールはありませんが、1つの例として参考にしてください。

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

目次

まずは内容を考えよう

まずは内容を考えよう

ポートフォリオサイトを作る際は、まず掲載する作品数や構成要素、掲載する項目と内容について考えましょう。いきなりサイトを作り始めるのではなく、掲載する内容を固めておくことにより、スムーズにポートフォリオサイトを制作できます。制作実績が多い場合は、見る側の負担にならない量を考え、いくつか抜粋して載せることがおすすめです。

また、ポートフォリオサイトを制作する前に、他人のポートフォリオサイトをチェックしてみてください。レイアウトやカラーリング、構成要素などで気に入ったものがあれば、自分のポートフォリオサイトを考える際に参考にすると良いでしょう。

作品だけ載せても、相手には伝わらない

作品だけ載せても、相手には伝わらない

ポートフォリオサイトに、これまでに制作したWebサイトのタイトルとスクリーンショットだけを掲載しても、自身の能力をアピールするためには材料不足です。どのようなサイトを・どのくらいの期間で・どのようなデザインで制作できるかが伝われば、閲覧者も評価がしやすくなります。ポートフォリオサイトには、以下のような項目を掲載しましょう。

  • 自分のプロフィール、スキルシート
  • サイト名、サイトのURL、サイトのスクリーンショット
  • 制作期間、自分が制作した箇所(デザイン、コーディング)、使用ソフト
  • サイトのコンセプトやアピールポイントを簡潔にまとめた文章

採用担当者が知りたいことをイメージして、記載する情報を考えることがポイントです。ポートフォリオサイトを通じて、相手が求めている情報を伝えま しょう。採用担当者は同時期に大量のポートフォリオサイトをチェックします。長すぎる文章は最後まで読まれない可能性が高いため、要点は簡潔にまとめてください。伝えたい情報を見やすく、分かりやすくまとめる力も採用担当者は評価します。

また、ポートフォリオサイトに掲載する過去実績は、さまざまなジャンルのサイトを掲載することが大切です。企業のコーポレートサイトから一般消費者向けのライトな内容のサイトまで、案件の幅が広いことをアピールしましょう。

ポートフォリオサイトのレイアウトを考える

ポートフォリオサイトのレイアウトを考える

掲載する内容がまとまったら、ポートフォリオサイトのレイアウトを考えます。他人のポートフォリオサイトを見て勉強したり、自分の考えたデザインを知人に見てもらったりすれば、自分1人で考えるよりも良いデザインが浮かぶかもしれません。レイアウトを考える際は、見た目の美しさや機能性だけにこだわ らず、相手にとって見やすいレイアウトを意識することがポイントです。

ポートフォリオサイトのレイアウトを決めた後は、コーディングを行います。その後、ポートフォリオサイトが完成したら、OSやブラウザの環境によっ て表示が崩れることはないか、記載内容に間違いがないかなどを必ずチェックしてください。問題がなければ、サーバーにアップロードしてポートフォリオサイトの完成です。

閲覧者を限定したい場合は、認証を掛けましょう。ベーシック認証という設定を行うことで、アクセスにIDとパスワードの入力が必要なWebサイトにすることが可能です。

また、ポートフォリオはWebだけではなく、プリントアウトして冊子にまとめておくことも重要です。紙のポートフォリオを持っていれば、面接の場で面接官に見てもらいながら自分のスキルをアピールすることができます。

Webデザイン系 人気コースランキングTOP3

  1. Webデザイナー入門コース
  2. Webデザイナーコース
  3. Webデザイナー総合コース

おわりに

今回は、Webデザイナー必見のポートフォリオサイトの作り方の一例とポイントをご紹介しました。ここでは内容やレイアウトを決めてからコーディングしていますが、人によってはレイアウトを作ってから中身を決めていく方がスムーズに進むこともあるかもしれません。自分に合った進め方で、ポートフォリオサイトを制作しましょう。

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム