Webデザイナーやコーダーをはじめ、制作系の仕事に就くならポートフォリオは必須。
実務未経験で実績なしの学生はもちろん、独学で転職を考えている社会人でも同じです。
ウェブで公開出来るポートフォリオの事をポートフォリオサイトと呼び、制作スキルを証明するものです。
ポートフォリオサイトには、過去に携わった仕事の制作物やスキルを自己PRと共に掲載。いつでも更新出来るうえ、URLを伝えればすぐに見て貰えるので便利です。
今回は、未経験で実績なしのポートフォリオサイトの作り方を解説。レンタルサーバーからポートフォリオサイトの準備、掲載内容、掲載時の注意点まで全て解説していきます。
実績が無いので何を載せれば良いのか分からない方は以下も参考にしてくださいね。
相手に見せるにしても、紙のポートフォリオだと限界があります。サイトであれば、URLを伝えるだけで済みます。もちろん作品の追加や修正だってすぐ出来ます。
この記事の目次
そもそもポートフォリオとは？
就職や転職時に求められるポートフォリオは、今までの制作物をまとめたウェブサイト形式の作品集です。
ポートフォリオは履歴書や職務経歴書と同じかそれ以上に重要なもの。その評価によって面接の選考結果に大きな影響を与えます。
クリエイティブ職は資格や学歴よりも実力の世界。その能力を証明するものとしてポートフォリオを作ります。
グラフィックデザイナーなら紙に印刷したものをポートフォリオとして用意しますが、ウェブデザイナーやコーダーならウェブサイト形式で見せるポートフォリオサイトが適しています。
ウェブサイトに自分の作品やプロフィールを載せたものをポートフォリオサイトと呼び、ウェブ制作の業界ではこれが一般的です。
ポートフォリオをサイト形式で作るメリット
ポートフォリオサイトなら、URLを企業に送るだけで済みますし速いです。紙の様にかさばる事も無く迷惑になりません。
また、作ったウェブサイトを実際に触ってもらう事も出来ます。何より、制作者としては作品の追加や差し替えなどの管理が楽です。
一方、紙のポートフォリオならその都度印刷したり、企業に郵送する必要があります。手間と金銭的な事を考えると、断然ポートフォリオサイトの方が良いです。
コーダーもポートフォリオが必要？
コーダーもWebデザイナーと同じくポートフォリオは必要です。もしかしたら、コーダーもWebデザイナーみたいなデザイン作品が必要だと思っていませんか？
コーダーの場合、デザインよりも「ソースコードを書く上で工夫した点」や、「どんな事を意識してコーディングしたのか」の方が大事です。
レイアウトが崩れていないか？など、様々なデバイスで必ずチェックしておきましょう。ポートフォリオサイトならソースコードも見てもらえます。
ポートフォリオの注意点
Webデザイナーもコーダーも、ポートフォリオサイトには掲載した作品サイトのURLを書いておきます。
これは採用担当者が実際にサイトにアクセスして見る事がある為です。
ただし当然ながら、時間が経つと掲載したサイトが無くなったり、更新されてしまう事があります。ポートフォリオサイトに掲載した作品がどうなったかも忘れずに確認しましょう。
ポートフォリオサイトの作り方は大きく分けると２つ
ポートフォリオサイトは制作の仕事をしていく上でこの先もずっと活用できます。最初にきちんと作っておけば無駄になる事はありません。
以下の様な作り方があります。
- WordPressで作る、もしくは１から自作
- ポートフォリオサイト作成サービスを利用する
① WordPressで作る、もしくは１から自作
自分でサーバー借りて、ポートフォリオに適したテーマ（テンプレート）を使ってカスタマイズをすればOK。WordPressを簡単にインストール出来るレンタルサーバーも後程ご紹介します。
ワードプレスを自作するメリット
ウェブ制作系の人におすすめで、特に未経験者なら必須です。なぜなら、WordPress（無料）で作ったこと自体がアピールポイントだからです。当然独自ドメイン取得も必須です。フリーランスで活動されている方なら個性を出して差別化を図れます。
ワードプレスを自作するデメリット
レンタルサーバー代とドメイン代が月に数百円掛かります。ですが、本気でやるならこれくらいの出費は必要です。
② ポートフォリオサイト作成サービスを利用する
ポートフォリオサイトという位なのでサイトを作る必要があるのですが、そんなの作ったことないって方も多いと思います。ウェブ制作系でなければサービス（無料・有料）を利用する選択肢もあります。
検索すれば色んなサービスが出てきますが、それぞれメリットやデメリットがあります。
無料サービスのメリット
- 分かり易い管理画面があるので、HTMLやCSSの知識が不要。
- サーバーを借りたりする必要もなく、すぐ始められる。
コーダーにとってはメリットでは無いかも知れませんが。
無料サービスのデメリット
- オリジナリティがなく、没個性になってしまう。
- 掲載できる画像や作れるページ数に制限がある。
- 独自ドメインが使えない。
- カスタマイズをする時は結局有料になる。
諸々掛かる費用を考えると、やはりWordPressが良いと思います。レンタルサーバー代とドメイン代の方がお得です。
ちなみに、レンタルサーバーとドメインは同じ会社で取得するのがおすすめ。管理と設定が楽です。
ノーコードでポートフォリオを作るのはアリ？
流行りのノーコードでウェブサイトを作れるサービスもありますが、結論から言うとウェブ制作をしたいのならお勧めしません。
ウェブデザイナーやコーダーであれば、当然自分でサイトを作れるスキルが必要です。
従来通りの作り方が圧倒的に主流なので、HTMLやCSS、JaveScriptなどは使える必要があります。
ポートフォリオ自体もスキルのアピールになるので頑張って作りましょう。ウェブ系以外の人は使ってみても良いと思います。
Adobeユーザーなら、Adobe Portfolioが無料で使えます。（日本語対応）
Behance（ビハンス）はどちらかと言うとクリエーター向けのSNSっぽい感じです。
最低限ポートフォリオに載せるべき情報
職種によって掲載すべき内容も違いますが、最低限あったほうが良い情報があります。
WEBデザイナーを例に説明すると、
- サイト制作ならサイト名、URL、コンセプトやターゲット
- 作品の写真やキャプチャ画像
- 自分が携わった作業内容（担当した個所や制作期間、使用したツールなど）
- 作品説明とコメント（自身でどのように考え、工夫したのかなど）
未経験だと作品数は少ないかもしれませんが、無理に全部載せず自身のある物だけに絞りましょう。
もしレンタルサーバーを借りて自分でポートフォリオサイトを作ったなら、その事もアピールしましょう。その経験自体が仕事に通じるものだからです。
皆はどんなものを載せているの？
実務未経験で実績が無い場合は以下の物を載せている人が多いです。
- スクールで作った課題や卒業制作のウェブサイトやバナーなどのパーツ
- 架空のウェブサイト（この場合、ターゲットやコンセプトもしっかり用意）
- 同じく、バナーやアイコン等のパーツ
- 趣味であってもアピール出来るレベルであれば、イラストや写真など
載せる物が少ないからと言って、何でも載せて良い訳ではありません。自信のあるものだけに絞り、その分しっかりとした説明を付けておく方が良いです。
ポートフォリオにおすすめのレンタルサーバー
Webデザイナーやエンジニアがポートフォリオサイトを作成するのにおすすめのレンタルサーバーを紹介します。
この記事で紹介するレンタルサーバーは全て僕が実際にポートフォリオ作成やウェブサイト制作でも使った事があり、本当におすすめ出来るものを紹介しています。
ポートフォリオサイトにおすすめのレンタルサーバーの条件
価格が安い
ポートフォリオ作成が目的なので、それ程高機能・高価格でなくても大丈夫です。
容量などもそれ程使いませんし、大量にアクセスがあってサーバーに負荷がかかるといった事もありません。
WordPressが使える
ウェブ制作に関わる人ならば、自分でWordPressを構築出来る方が好ましいとは思います。
ただ、おすすめしているレンタルサーバー全てにWordPressを簡単にインストール出来る機能があります。便利な物は利用すれば良いと思いますので、ポートフォリオ制作に時間を使いましょう。
無料で独自SSLを導入できる
おすすめレンタルサーバーでは当たり前に利用出来ます。加えて、独自ドメインも取得しましょう。
大手のサーバーである
人気のない廃れたレンタルサーバーも沢山あります。そういった所は、管理画面が使いづらかったり、上記で紹介した機能やサービスが無かったりします。
迷ったら選べるプランの多い『ロリポップ』
Webデザイナーとして実際に業務でもよく使うサーバーでもあります。中小規模やお店などのサイトが多い気がします。
ここからどうぞ → ロリポップ！スペック表
今のうちに使い慣れておくのも良いですね。以下、詳細記事もご覧くださいね。
速度と実績もバツグンの『エックスサーバー』
ロリポップと並ぶ老舗のレンタルサーバー会社です。高機能で実績もあるので企業のサーバでもよく見かけます。
公式：エックスサーバー
以下、詳細記事が参考になります。
ポートフォリオのレイアウトは？
1．トップページは一覧型
結論から言うと、シンプル イズ ベスト！
よくありがちなミスは、こだわりたいからと、奇抜なレイアウトにしてしまう事です。
それよりも掲載作品が見やすくなるレイアウト（構成）がおすすめ。こだわりは作品で表現しましょう。
2．鉄板！ 作品をリスト形式で並べよう
「サムネイル＋概要テキスト」のワンセットをリスト形式で並べるのが一番分かり易くおすすめです。
作品数が少ない時はパターン2の様に、1つ1つの作品を大きくするのもアリです。
作品のカテゴリー分けをして見出しにするか、「概要テキスト」の所にカテゴリー名を付けると凄く分かり易いですよ。
3．詳細ページの構成内容を考える
カテゴリー
紙媒体（名刺、フライヤー）、ウェブ（バナー、ウェブサイト）、写真などカテゴリーやジャンルで分けてラベリングします。作品説明の所にでも必ず入れておきましょう。
コンセプトや工夫した点の説明
ここはかなり重要なのですが、初心者がありがちな典型的なダメな説明パターンがあります。
例えば、制作した物やどんなデザインをしたかの説明しか書いていないパターンです。
色の話に限らず、考え抜いたデザインには何故その様にしたのか必ず理由があります。それを書きましょう。
担当箇所
作品によっては、部分的にしか制作に携わっていないなんて事も。その場合は誤解を与えない様に、担当箇所を枠で囲むなどし、説明文でその旨を補足しておきましょう。
制作期間
いつ制作したのか？また、制作にどれくらいの時間が掛かったのかを書きましょう。
また、一覧には新しい作品や自信のある作品から載せていくのがおすすめです。採用担当者も忙しいので、上から下まで全て見てくれるとは限らないからです。
サイトURL
例えばウェブサイトならURLを記載しておきます。だだし、古いものだとリニューアルされて残っていない場合もあります。必ずサイトをキャプチャして、担当箇所を記載しておくのをお忘れなく。
SNSボタン設置
面接においてSNSは必須ではありませんが、フリーランスなら必須です。
「ポートフォリオサイト＋SNS」でPRすれば立派な販促ツールです。
4．プロフィールとお問い合わせフォーム
名前と自己PR
就活で使うなら名前は入れておいた方が良いかもしれません。併せて一般的な志望動機とデザインに対する想いの様なものを書けばOK。
フリーランスなど個人活動をするなら名前と連絡先は必ず入れましょう。住所や電話番号を出したくないならお問い合わせフォームを設置しておきます。
過去の実績と絡めて得意なものを積極的にアピールします。別ページにしても良いですね。
スキルや資格
作品詳細ページでもスキルは載せるべきですが、すべてのスキルや資格をまとめた一覧があると親切です。スキルの棚おろしにもなり、意外な自己発見に繋がりますよ。
どんな風に見せるのかもセンスが出せる部分です。テキストで箇条書きするよりも視覚化したほうが伝わりやすいかも知れませんよね。
よく見かけるアイデアは、
- ツールをアイコンで表示
- スキルレベルを星マークでランク付け
- 自分らしいモチーフに置き換える
いわゆるインフォグラフィックスってやつですよね。
作品をアピールする為にやった方が良い事
作品のスクリーンショットは必須
作品の画像が無くては始まりません。どの様なカテゴリーの作品でも必須です。
ウェブサイトであればPCとスマホで見え方が変わりますので、両方のスクリーンショットがあれば良いですね。
スクリーンショット（キャプチャ）ツール紹介
以下、おすすめスクリーンショットツールです。
ページ下部にスキルと資格をまとめておく
作品詳細ページで、使用したツールやスキルを書くのがおすすめですが、プロフィール部分にも使用できるツールや資格をまとめておくと見やすくて親切です。
クリエイティブ系の職種は資格よりも使用できるツールの方が重要かもしれません。
見てくれる人への配慮をする
正直な所、個性的過ぎるものは見辛いものが多いです。たとえ中身が良くても見てもらえません。それがウェブデザイナー志望なら尚更です。
ポートフォリオのベース部分は、作品の見やすさに注力しましょう。ここで大事なのは見てくれる人への配慮です。
言うまでもなく、見てくれる人とは採用担当者やクライアントの事です。
配慮のないダメなパターン
- 文字サイズがやたら小さい。
- カテゴリーなどで分類されていない。
- 作品の説明の仕方が間違っている。
①文字サイズがやたら小さい
文字が小さいと、何となくオシャレに見えますよね。グラフィックデザイナーにありがちです。
PCやスマホで表示するのと印刷物とでは可読性が違います。
本文だと小さくても14px～15px位でしょうか。大きすぎてもアレですが、小さ過ぎると読むのが大変です。リンクも押せません。
②カテゴリーなどで分類されていない
ポートフォリオの掲載内容はある程度決まっています。並べる作品がバラバラでは統一感がありません。見やすさの為にジャンルやカテゴリー毎にまとめて配置したほうが良いです。
カテゴリーで分けて、その中で最新の作品を上に持ってくるのがおすすめ。カテゴリー毎のアイコンを付けてラベリングすると完璧。
カテゴリ名を色分けするだけでもかなり違ってきますよ。
➂作品の説明の仕方が間違っている
詳細ページの所でも書きましたが、作品の説明の仕方を間違えている人が多いです。
作品の内容だけ説明しても伝わりません。
どんな理由や考えがあってそのデザインにしたのか？その思いや考えが説得力を生みます。
そして、その思いや考えをデザインに落とし込めているかを見たいんです。
レンタルサーバーでWordPress（ワードプレス）を準備
前回の未経験Webデザイナーで実績無し – ポートフォリオは必要？でも書きましたが、ポートフォリオサイトを作るにはワードプレスが一般的で最適です。
サーバーはロリポップ、エックスサーバー、コノハウィングあたりだと簡単にワードプレスを始める機能があります。
難しければ有料テーマを購入しましょう。
紹介したお問い合わせフォームもプラグインを使えば簡単です。
ポートフォリオサイトはクリエイターの資産です。長く運用するだけの価値はあります。
知っておくと幸せになれるかも
ここではポートフォリオに載せる物を「作品」と呼んでいます。
完全に個人ワークの場合もあれば、クライアントへの制作物の場合もあるかと思います。
今時いないかもしれませんが、クライアントワークを「作品」と呼ぶ事に対して悪く捉える人もいます。
ここでは便宜上「作品」と書いていますが、面接の場合は呼び方も気にしたほうが良いかもしれませんね。
心証はものすごく大事です。制作に対する姿勢や考え方は、「人として」や「仕事」に対する考え方でもあります。
例えば、ネットでダウンロードしたフリー素材を「落ちている」とか「拾った」と表現する人は、著作権やライセンスに対して考えが緩い人だと伝わります。言うまでもなく、フリー素材は好意で配布されている物です。
このあたりのリテラシーが低い人はリスクの高い人です。一緒に仕事は出来ないですよね。
まとめ
ポートフォリオサイトは、未経験でも制作スキルがどれくらいあるのか証明するもの。面接選考においては必須です。
スクールで作った課題や自主制作したものは掲載しましょう。自分でドメインとサーバーを借りてポートフォリオサイトを作る事自体もアピールになります。
note
重要度： ポートフォリオ・実績 ＞ どんな努力をしたのか ＞ 学歴・資格・年齢