webデザイナーじゃないフリーランスでもできるポートフォリオサイトの作り方

Author: ウェブさえ |
2020年7月6日
カテゴリー フリーランスの生活・仕事術
本ページに記載の商品・サービスはプロモーションを含みます。
B!

ポートフォリオサイト 作り方

ウェブさえプロフィール画像

著者情報:この記事を書いた人

ウェブさえ x facebook 株式会社ウェブさえ 著者のプロフィール

web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。

「ポートフォリオ」の準備はできていますか?

ポートフォリオは、フリーランスが案件や職を得たいときに必ず求められるもの。

過去の実績を示すのはもちろん、これからの将来性もアピールできているようなポートフォリオであれば、仕事を得るのにさらに有利です。

じっさい、ぼくもたまに人事に関わることがあるのですが、採用/不採用の決断をするときの決め手になるのはいつもポートフォリオ。

だから、まだ活動を始めたばかりで過去の実績が少ないフリーランスさんも、早めにポートフォリオの準備に着手するのがよいと思います。

特に、URLを教えるだけでいろいろな人に見てもらえる「ポートフォリオサイト」は便利です。

作品の見せ方にアニメーションっぽい動きを加えたり、ブログを付けて近況の活動を更新したり、ウェブの技術を利用することで、オリジナリティに富んだポートフォリオを作ることができます。

しかし!

そんな表現したいままにポートフォリオサイトを作れるのは、ウェブの技術に詳しいwebデザイナーやエンジニアだけ。

……って、じつはそんなことはありません。

今回の記事の要点は以下の3つ。

  • 実は、簡単。いまどきのポートフォリオの作り方
  • 有利なポートフォリオを作るときのポイント
  • 参考になりそうなポートフォリオの事例

対象者は、以下のような「ウェブ制作」に詳しくない方々。

作家、モデル、ライター、エンジニア、美容師、デザイナー

作家/モデル/ライター/エンジニア/美容師・ヘアメイクアーティスト/グラフィックデザイナー/etc.

こうした職種のフリーランスさんでも最後まで読めば、簡単におしゃれなポートフォリオサイトを作れるようになります。

ポートフォリオを作るときのポイント

ポートフォリオ 重要ポイント

ポートフォリオを作る前に、簡単に案件への応募や就職活動で有利なポートフォリオを作るときの重要なポイントを説明しておきます。

一応、ポートフォリオを見る側としての意見を混ぜて、こんな風に作ると良い結果につながりやすいかな、といえるポイントです。

自分か見る人、どっちに合わせて作るか?

ポートフォリオを作るとき、

  1. 自分がアピールしたいことを優先して作る
  2. 企業やクライアントが求めていることに合わせて作る

まずはこの2通りの作り方があるかなと思います。

webライターを例にすると、

1. 様々なジャンルの文章を載せたウェブメディアの編集職への応募する場合なら、幅広い作品性をアピールできる過去の作品全集でも有利に働くかもしれません。

2. 一方で、弊社でたまに募集をかけている「ウェブ制作に関する記事を執筆できるライター」のような条件付きのときなら、そのジャンルに精通していることが伝わってくるポートフォリオのほうが採用の可能性は高まるでしょう。

「1」は幅広い作品性や強烈な個性をアピールしたほうが有利だと思える状況。
「2」は求められているスキルや作品性が決まっているような状況。
に適した作り方ということですね。

作品を並べるだけじゃだめ

作品づくりにどんなふうに取り組んだかを伝える説明も添えましょう。

作品をパッと見ただけでは、あなた独自の工夫やそのプロジェクトでクライアントへ提案したことまではわかりませんからね。

頑張ったところほど個性やオリジナリティが溢れているはずです。そこが、伝わらないのはもったいない。しっかり言葉に変えて説明しましょう。

分業の場合は、どの部分に関わっていたのかも伝える

ひとつのプロジェクトをスキル別に共有することが多いフリーランス。どこを担当したかを伝えることで、正確に自分が持つスキルをわかってもらえます。

情報発信があるとなおいい

ポートフォリオをウェブサイトの形式で作ることの利点は更新がしやすいところ。

ブログを設置して、直近の活動報告に使ったり、職種に関連する有益な情報を発信したりしているフリーランスの方もいますよね。

簡単に近況がわかるだけで、不思議と親近感が生まれますし、職業に関連する情報が多いと専門性の高さが伝わってきて信頼感を強めます。

親しみを感じない、信じられない相手と仕事はできませんよね。仕事は、結局のところ人と人とのつながりで生まれるものです。

ポートフォリオサイト 作り方5つ(事例も)

ポートフォリオを作るときの重要ポイントをおさえたところで、実際にポートフォリオサイトを作っていきましょう。

難しいスキルは不要です。ネット経由で登録を済ませればブラウザから簡単に作っていけます。

そんなポートフォリオサイトを作れるサービスを以下の5つ紹介します。

STUDIO

洗練されたデザインで始めよう。

無料でSTUDIOを試してみる

STUDIOは、「次世代のウェブサイト制作ツール」なんて呼ばれているサービス。

プログラミングコード不要でブラウザから自由にレイアウトを組み、ダイナミックなアニメーション効果を利用した表現力の溢れるサイトを作成できます。

本来は、デザイナーが思う存分、そのセンスを発揮できるサービスなのですが、ポートフォリオに適したテンプレートも用意されているので、非デザイナーでも今風でおしゃれなポートフォリオサイトを作ることが可能です。

STUDIO テンプレート例1

サイトを開き一番最初に目に飛び込んでくる部分をファーストビューと呼びます。

そのファーストビューを最も自信のある作品で覆われたポートフォリオサイト。インパクトは十分。

近況を報告できるブログを更新していくこともできます。

studio テンプレートGOGH

STUDIO テンプレート例2

こちらもファーストビューが写真で覆われたデザイン。

メイン画像の下にはタイル状に敷き詰められた写真たち。クリックすると拡大表示します。

モデルやヘアメイクアーティストのポートフォリオに良さそうです。

studio テンプレート2

STUDIO テンプレート例3

先に見せた2枚のテンプレートと異なっているのが、スクロールの方向。横スクロールで作品を回覧できます。

サイトの配色も作品である写真もモノクロで統一。色味がないのに質感がリアルに伝わってきます。

Studio 横型テンプレート

無料でSTUDIOを試してみる

MATCHBOX

すぐに使える、かんたんポートフォリオ

無料でマイナビクリエイターへ登録

MATCHBOXは、マイナビクリエイターへ登録すると無料で利用できるポートフォリオサービス。

画面上の質問へ答えていくだけで、自分のポートフォリオページを作れます。

非公開の設定にもできるので、特定のクライアントだけに見せることも可能。

履歴書も同時に作れたり、プリントアウトして使ったりもできます。まさに就職活動のためのポートフォリオサービスです。

MATCHBOX 事例

MATCHBOXでは、共通のレイアウトでポートフォリオページを作ります。共通のレイアウトだからこそ、作品の違いが目立つのかも。

作品について、関わり方やポイントなど補足で書き込めるところがいいですね。

Matchboxの事例

無料でマイナビクリエイターへ登録
(Matchboxはマイナビクリエイターへ登録後、無料で利用できます)

IM Creator

IM creatorはこちら

無料でIM Creatorを試してみる

実はポートフォリオに限らずあらゆる種類のウェブサイトを制作できるサービスですが、名前が示すとおりクリエイター向けのサービスで、テンプレートにはユニークでアーティスティックなものが並びます。

IM Creator テンプレート例1

このまま写真と文章を入れ替えるだけでも十分なクオリティ。

メールフォームを付けて、サイト訪問者からメッセージを送ってもらう機能もあります。

テンプレート例 モデル

IM Creator テンプレート例2

上のテンプレートとは違って、配色が明るくレイアウトもシンプルなものもあります。

まずはギャラリーっぽく一覧で見せておいて、気になる作品についてはクリックしてもらって詳細ページを見てもらう。そんなテンプレートです。

im creator テンプレート例2

無料でIM Creatorを試してみる

Salon.io

ドラッグ&ドロップだけであなたの作品を世界に出せる

無料でSalon.ioを試してみる

サービスサイトのトップページには、すでに作られたポートフォリオサイトが並んでいます。参考になりそうなものがたくさん。

使い方はメチャクチャ簡単で、ポートフォリオに載せたい写真をブラウザへドラッグ&ドロップするだけ。

広告が無料プランにも表示されないのが嬉しいです。

Salon.io 事例1

カラフルで親しみのあるイラストが、不規則な大きさで敷き詰められています。眺めていても飽きませんね。

salon ポートフォリオ事例

Salon.io 事例2

事例1とは異なり、今度は正確に並べられた写真たち。作品の性質に合わせたレイアウトにすることが重要です。

salon ポートフォリオ事例2

無料でSalon.ioを試してみる

Portfoliobox

あなた自身のオンラインポートフォリオウェブサイトを構築

無料でPortfolioboxを試してみる

クリエイターのポートフォリオサイトに必要な機能が揃ってます。そのなかには、なんとEコマースの機能も。

Eコマースとは簡単にいえばネットショップの機能。作品をファンに直接買ってもらうことができます。

ブログの更新も可能です。情報発信がクリエイターにも求められている時代。待っているだけじゃなく自ら情報を積極的に発信することでお客さんをサイトへ集めましょう。

Portfoliobox 事例2

トップページが物語っているように、実績のページではメッセージ性の強い写真が並びます。

Portfoliobox 事例

Portfoliobox 事例2

複数ページから成り立つ、しっかりしたポートフォリオサイトの例です。

写真や動画など豊富な実績が並び、その作品たちをオンラインで買うこともできます。

プロフィールサイトとしてもウェブストアとしてもとても良くできたサイトです。

Portfoliobox ポートフォリオ事例2

無料でPortfolioboxを試してみる


以上が、ウェブ制作以外のフリーランスでも簡単にポートフォリオサイトを作ることができる方法でした。

ポートフォリオを充実させるのは、フリーランスの成功と直結しています。

新米の頃からでも少しずつポートフォリオサイトを作っていけば、その途中でお仕事の依頼が舞い込んだり、ヘッドハンティングされたり、予期せぬ機会に恵まれる可能性も。

今回紹介した方法なら難しいスキルは不要なので、非デザイナーの方々もぜひポートフォリオサイトを作ってみてください。

読み終わったらシェア!

B!

ウェブさえの無料サービス

どちらでもお好きな方を。もちろん両方でも。

ダウンロード
Top
ウェブさえ
@websae2012
ウェブさえマガジン
>詳しくはこちら