ポートフォリオを100倍魅力的に!作成のコツとホームページ実例集


自分の営業用にポートフォリオがあるホームページを作りたい。
かっこよくて参考になるホームページあるかな?

転職・就職活動中、フリーランスによらず、デザイナーの方にとって必要不可欠なものがポートフォリオです。

ポートフォリオの出来ひとつで、仕事を得られるかどうかは大きく変わってきますので、気になるところですよね……。この記事では、あなたの作品の魅力を100倍にも高められるポートフォリオを作るため、

  • ポートフォリオの参考になるおすすめホームページ
  • ポートフォリオの作成のコツ


主に上記の2点について解説します。より魅力的なポートフォリオ作成のため、ぜひぜひご参考になさってください。

ポートフォリオとは?

ポートフォリオにはもともと「財産目録」あるいは「資産一覧」などの意味がありますが、この言葉が使用される場面や業界によって意味が変わってきます。

Webの世界においては「作品集」のような意味合いで使われます。「どんなスキルがあるのか?」「どんな制作実績(サイトやアプリ、Webサービス)があるのか?」を分かりやすく伝えるために使います。

制作実績や、参加したプロジェクトの実績や作品などを、自分のホームページやブログ、もしくは印刷物などにまとめるのが一般的です。転職・就職活動にはもちろんですが、フリーランスの方にとっても必要不可欠なものです。

ポートフォリオを作るべき理由・メリット

画像:ShutterStock

ポートフォリオを作成すると以下のように多くのメリットがありますので、デザイナーにとっては必須なものです。

仕事の獲得に有利になる

自分のスキルや実績をわかりやすくアピールできるため、会社員ならば就職・転職に、フリーランスなら仕事の獲得に有利になります。

デザイナーを採用する際に、面接官や人事担当が何を一番重視するかといえば、やはり実績・スキルです。過去の制作物などがあるとないでは、絶対的にあった方がスキルの確認が容易ですし、採用される率もあがるでしょう。

自分のスキルを再確認でき、スキルアップできる

定期的にポートフォリオを見直すと、自分のスキルを再確認することができます

「あぁ自分はまだこの技術が弱いな」「ここをもう少しこうすれば、もっと良いものが作れるな!」などと振り返れば、自分の技術や実績を客観視することができ、スキルアップに繋がります。

アップデートしていくことで、さらにポートフォリオの質も高まりますので、一石二鳥です。

名刺代わりになる

仕事を獲得する機会は、企業との面接だけではありません。勉強会やミートアップ、交流会でも仕事を獲得するチャンスがあります。

名刺には自分のホームページへのリンクを記載しておきましょう。そして、そこからポートフォリオを兼ねた自分のホームページを見てもらえれば、より具体的に自分のスキルや実績が相手に伝わります。

これで取引やビジネスにつながるケースが少なくありません。

営業資料になる

ポートフォリオはそれ自体が営業資料です。自身で仕事を獲得する場合はもちろんですが、ホームページで実績を公開しておくことで

  • 検索エンジン(GoogleやYahoo)からのアクセス
  • SNS上で拡散される


といった経路で、自分が営業しなくても勝手に仕事を獲得してくれる、いわば営業資料や営業マン的な活躍をしてくれます。

職業別・魅力あふれるポートフォリオ(ホームページ)の実例

画像:ShutterStock

ではここからは、職業別にポートフォリオ(ホームページ)の実例を紹介していきます。どれも魅力が溢れる参考になるものばかりです。気になるものから見ていってください。

デザイナー系のポートフォリオ(ホームページ)

Mana’s Portfolio Website

Webデザイナー御用達の人気サイト・Webクリエイターボックスの管理人であるManaさんのホームページです。海外向けに英語で作られており(日本語にも切り替え可)、大まかなコンテンツは「About」「Works」「Contact」のみ。

シンプルな構成ですが、洗練された美しいデザインと使いやすさを両立しています。

→Mana’s Portfolio Website
http://www.webcreatormana.com/

UNDERLINE

UNDERLINEは、大阪を拠点にデザイン、コーディングなどを手掛けるフリーランス、徳田 優一さんのポートフォリオサイトです。こちらもシンプルな構成になっていて、制作実績がわかりやすく掲載されています。

ブログも美しいデザインになっており、徳田さんご自身が撮影した写真がふんだんに使われていて、見ているだけで穏やかな気持ちになる内容になっています。

→UNDERLINE
https://u-d-l.jp/

coton design

グラフックデザイナー酒井博子さんのホームページです。今まで手掛けた100種類以上の作品が、整然と並べられており、一目で実績が把握できるようになっています。

それぞれの写真をクリックすると、作品が拡大表示され、詳細も見ることができるようになっています。左側のメニューには、グラフィック、ポスター、パッケージなどジャンル別で作品が切り替えられるようになっていて、使いやすさも抜群です。

→coton design
http://coton-design.com/

Takumi Hasegawa

エンジニアでもありテクニカルディレクターでもある、ハセガワタクミさんのポートフォリオサイトです。実績には錚々たる大企業のサイトが並び、独特のエフェクトでサイト訪問者を楽しませてくれる仕掛けが施してあります。

さらに、プロフィールのページではご自身のスキル(扱えるプログラミング言語)を全て掲載しており、どんな仕事が任せられるかのイメージがつきやすい構成になっています。

→Takumi Hasegawa
https://tkmh.me/

OBANA DAISUKE

目黒区在住のGraphic & Web デザイナー、尾花 大輔さんのホームページです。TIOページがポートフォリオになっていて、今まで手掛けた作品・仕事が縦スクロール形式で時系列で配置されています。

一目で分かりやすく、また左サイドバーにあるメニューから、WEB系、 DM/カードなど ジャンル別に実績が見られるような仕様にもなっていて、使いやすいのも特徴です。

→OBANA DAISUKE
http://d-obana.com/

KATOSHUN.com

Webデザイナーである加藤俊司さんのポートフォリオです。「WORKS」「ABOUT」「MESSAGE」が左のメニューバーから選べるようになっており、また、作品は横スクロールで、PC・タブレット・スマホとそれぞれの表示形式でパッとひと目でわかるように配置されています。

さらにブログでは、Webデザインのノウハウも発信しており、単に作品集というだけではなくWebデザインの読み物としても優秀なサイトに仕上がっています。

→KATOSHUN.com
http://katoshun.com/

Dinner for Five.

デザイナー、エンジニアとして活躍するMITSUGU TAKAHASHIさんのポートフォリオサイトです。白と黒を基調にしたモノトーンの配色で、制作実績がより際立つデザインになっています。スクロールすると画面がなめらかに動き、技術力も上手にPRできています。

PhotoshopやWordPressなど、自分が扱えるスキルやツールの説明、WebディレクションやUI/UXデザインなどの「受けられる仕事の種類」も記載されています。

→Dinner for Five.
https://dff.mitsugutakahashi.com/

フォトグラファー(写真家)のポートフォリオ(ホームページ)

ヨシダ ナギ

アフリカをはじめとする世界中の少数民族の撮影をメインに行うフォトグラファー、ヨシダ ナギさんのポートフォリオサイトです。タイル状に並んだ写真をクリックで拡大、というシンプルでわかりやすい形式のポートフォリオになっています。

上部メニューでは、タンザニア 、ナミビアなど被写体の国籍別で写真の表示を分けることができるようになっていて、見る人の利便性も配慮されています。

→ ヨシダ ナギ
http://nagi-yoshida.com/

Ittetsu Matsuoka

松岡一哲さんのホームページです。まず目を引くのがトップページで、スクロールする度に写真がランダムに消え、表示されるという面白い動きをします。

加えてコンテンツは自身のプロフィールのある「About」と実績ページの「Works」のみの非常にシンプルな構成です。ご自身の世界観がうまく表現されています。

→Ittetsu Matsuoka
http://ittetsumatsuoka.com/

Takumi Taniguchi

谷口巧さんのホームページです。ポートフォリオの他に、ブログや写真展などのお知らせも掲載されていて、直感的に使いやすいスタンダードな構成です。

ポートフォリオでは上部に小さなサムネイル画像がスライドメニューで表示されており、それをクリックまたはスライドさせると、下部に大きく表示されるという表示形式です。ブログでも日々撮影した写真がアップされており、こちらも第2のポートフォリオのような印象です。(よりご自身の日常に近い感じです)

→Takumi Taniguchi
http://www.takumitaniguchi.com/

村上 健

村上健さんのポートフォリオサイトは、ほぼTOPページ1枚だけで構成されていてとてもシンプルです。タイル形式に写真が並べてあり、クリックするとゆったりとローディングされて拡大表示されます。

プロフィールはページ最下部に経歴とメールアドレスが記載されてあるのみ。サイト上で迷子にならないシンプルな構成です。

→村上 健
http://murakami-ken.com/

山本 タカシ

山本タカシさんのホームページは、目線が左から右に横に流れる一般的なサイトと異なり、上から下へ目線が流れるサイトになっています。

プロフィールページも縦書きで、ポートフォリオページも帯状に連なった写真が上から下に並べられており、サムネイルをクリックすると拡大表示されます。主張は控えめながら、印象的なポートフォリオになっています。

→山本 タカシ
http://yamamototakashi.jp/

黒岩 正和

黒岩正和さんのホームページは、TOPページで大胆に全画面で表示される写真が非常に印象的です。ポートフォリオのページはスタンダードなサムネイルで小さく表示→クリックすると拡大表示という形式。ブログでは写真を大きく使い、自身の写真の世界観をうまく表現できる構成になっています。

→黒岩 正和
http://kuroiwamasakazu.com/

ポートフォリオ(ホームページ)の作り方のコツ

画像:ShutterStock

ここからは魅力的なポートフォリオを作成するコツについて書いていきます。

プロフィールを載せる

自分の氏名・経歴・簡単な実績・スキルなどは必ず書いておきましょう。自分の名刺のようなもので、上記で紹介したポートフォリオサイトにも必ずプロフィールは掲載されています。長すぎてもだめなので、情報を整理してすっきりとまとめましょう。

またFacebookやTwitter、InstagramなどのSNSアカウントも合わせて載せておきましょう。連絡先になるとともに、フォロワーになってもらえれば集客源としても役に立ちます。

作品

手がけた作品はもちろん忘れずに。以下のポイントを守ると良いでしょう。

  • 載せる作品の数:10個以内
  • 作品の名前(サイトや作品等のタイトル、参加したプロジェクトなど)
  • 作品のビジュアル(サイトのTopページビジュアルや写真、ポスターなど)
  • 作品のコンセプトやターゲット
  • 制作期間
  • 制作に使用したスキルやソフト
  • 工夫した点や、作品のポイント

問い合わせ先

ポートフォリオを作る目的は「仕事をもらうため」です。仕事をもらうためには、ホームページやポートフォリオを見た相手から連絡をもらわなければなりません。

そのため、メールアドレスや問い合わせフォーム、前述したSNSのアカウントなどを記載しておくようにしましょう。なおSNSアカウントは全てのユーザーからDMを送れるように設定をしておくのを忘れずに。

その他工夫したいポイント

上記3つは基本的なポイントです。それに加えて以下のポイントを盛り込めば、より魅力的なポートフォリオ(ホームページ)になるはずです。

  • 自分の作品の特徴や長所を表す肩書やキャッチフレーズを加える
  • サイトの使い勝手を上げるメニュー(グローバルナビ等)を加える
  • 作品をカテゴリ別に分ける
  • イメージカラーを統一しブランディングする
  • ブログを作成し日常を発信し、親近感を持ってもらう

手軽にポートフォリオ作成! 無料で使えるホームページ作成サービス

ポートフォリオの作成は今やそれほど難しくありません。以下のホームページ作成サービスを使えば簡単にポートフォリオを作成できるでしょう。

Wix(ウィックス)

Wix(ウィックス)はマウスのドラッグ&ドロップだけで簡単にホームページが作れるサービスです。基本無料で作ることができます。現代的なデザインの豊富なテンプレートと数千種類ものフリー素材が用意されているため、様々なテイストのサイトが作れます。

さらに、SNSアカウントとの連携も簡単にでき、ホームページの知識がほとんどないという方におすすめです。SEO(検索流入)からの集客には弱いので、Googleなどの検索エンジンからの集客を検討している方には向かないかもしれません。

→ Wix(ウィックス)
https://ja.wix.com/

Jimdo(ジンドゥー)

Jimdo(ジンドゥー)もWixと同じく無料で簡単にホームページを作成できるサービスです。このJimdoとWixで世界的に人気を二分しています。

こちらも、豊富なテンプレートがあり、ドラッグ&ドロップのマウス操作だけでほとんどの作業が済んでしまう初心者向けのサービスです。プログラミングの知識は一切必要ありません。

オンラインショップも作れるという特徴もあり、ポートフォリオだけでなく、その作品を販売したいという目的の方にはぴったり。そして、やはりWixと同じく検索エンジンからの集客には課題がある点には注意です。

→Jimdo(ジンドゥー)
https://jp.jimdo.com/

Ameba Ownd(アメーバオウンド)

日本最大の無料ブログサービスAmebaが運営するホームページ作成サービスAmeba Ownd(アメーバオウンド)でもポートフォリオが作成できます。こちらはシンプルでオシャレなテンプレートが豊富なのが最大の特徴です。日本発のサービスということもあり使い勝手は最も優れています。

こちらもドラッグ&ドロップの簡単な操作でデザイン性に優れたサイトが作れるので、有名人も多く使用しています。ブランディングを気にする方には最もおすすめできるポートフォリオ作成サービスです。

→Ameba Ownd(アメーバオウンド)
https://www.amebaownd.com/

RESUME(レジュメ)

RESUME(レジュメ)は、ポートフォリオ作成に特化したWebポートフォリオ作成サービスです。フラットデザインを採用したシンプルで現代風なポートフォリオを、誰でも直感的な操作で作成することが可能です。

1つの作品を「WORK」という形式で追加していき、自分のページを育てていくような形式になっており、作り方もマウス操作と簡単なテキスト入力のみでOKです。ホームページというよりはSNSに近いためテンプレートもなく個性が出しにくいのですが、まだ始まって間もないこともあり、市場を開拓しやすいかもしれません。

→RESUME(レジュメ)
https://www.resume.id/

WordPress(ワードプレス)

WordPress(ワードプレス)は無料でブログやホームページが作れるソフトウェアで、世界最大のシェアを誇るWebサイト構築ツールです。ドメインやレンタルサーバーを自分で用意する必要があるため、その費用はかかりますが、ソフトを利用すること自体は無料です。

他を圧倒する圧倒的なデザインテンプレート(テーマ)があり、カスタマイズ情報も豊富。さらにGoogle検索などからの集客にも有利と、メリットが沢山あります。操作には慣れが必要ですが、慣れてしまえば最も自由度が高いポートフォリオが作成できるでしょう。

→WordPress(ワードプレス)
https://ja.wordpress.com/

より魅力的に仕上げる! ポートフォリオ作成に必要な言語

画像:ShutterStock

よりこだわったポートフォリオを作成するためには、プログラミング言語の習得がおすすめです。ホームページでよく使われる以下3つの言語を覚えておくといいでしょう。

HTML/CSS

HTML/CSSはホームページ作成の基本となる言語です。Webサイトの見た目のデザインを作るために使用し、これがなければ始まりません。

「HTML」とはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webサイトを作るために開発された言語です。

普段、あなたが見ているインターネット上のWebサイトのほとんどは、HTMLでできています。

「CSS」とはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、HTMLと組み合わせて使用することが多く、Webサイトの見た目を装飾するための言語です。

詳細は下記記事をご覧ください。

PHP

PHPは様々なWebサービスやWebサイトが作れる、世界でも最も人気のプログラミング言語のひとつです。

初心者でも比較的容易に習得・使用することが可能です。先述したWordPressにも使用されているため汎用性が高く、覚えておくと非常に便利です。

詳細は下記記事をご覧ください。

JavaScript/jQuery

JavaScriptは、ホームページに「動き」を加えるためのプログラミング言語で、それを発展させた技術をjQueryと呼びます。

JavaScript/jQueryの詳細は下記記事をご覧ください。

ポートフォリオ作成に必要な言語が学べる「侍エンジニア塾」

上記のプログラミング言語をマスターし、自分だけのポートフォリオサイトが作りたい! と思ったら、弊社「侍エンジニア塾」をお試しください。

経験豊富な現役エンジニア講師が、完全マンツーマンでオンラインレッスンを行っていますので、場所と時間を選ばずに自分のペースで学習をすすめることができます。

あなたの目的に応じたカリキュラムを完全オーダーメイドで作成し、魅力的なポートフォリオを作成するためのお手伝いもさせていただきます。無料体験レッスンを行っていますので、ぜひ一度お越しいただき、疑問や悩み・要望をお聞かせください!

まとめ

ご参考になりましたか?あなたの実績を最大限に引き出す魅力的なポートフォリオを作成し、ぜひあなたが活躍できるお仕事を獲得してください。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナカガワダイキ

ナカガワダイキ

侍エンジニア塾ブログ編集部のナカガワです。ホテル業界に9年間従事し、未経験からIT業界へ転身。
初心者目線で、誰が読んでも分かりやすく読みやすい記事の執筆を心がけています。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説