エンジニアの私が、ポートフォリオサイトの閲覧数を3倍にした方法

デザイナー、イラストレーター、エンジニア、フォトグラファーなど、活動するジャンルを問わずさまざまな人がWeb上でポートフォリオを公開しています。

しかしポートフォリオサイトを作ったものの、あまり閲覧数が伸びていなかったり、または閲覧数を把握していなかったりする方も多いのではないでしょうか。

今回は、エンジニアである筆者自身のポートフォリオサイトをサンプルにしながら、閲覧数を伸ばす方法を解説します。人を惹きつけるポートフォリオサイトを制作したいエンジニアの方は、ぜひこの記事を参考にしてみてください。

筆者のポートフォリオサイトの実績

私は2016年9月1日に、自身のポートフォリオサイトを公開し始めました。Google Analyticsのデータを見てみると、2016年9月から2017年10月までの閲覧数は300件未満となっています。

そこで2017年10月にポートフォリオサイトを完全に作り直したところ、閲覧数は劇的に改善。リニューアル後初月の閲覧数は1861件で、それ以降もひと月あたり1000件程度をキープしています。

個人のポートフォリオサイトとしては、かなりいい数字ではないでしょうか。

冒頭でも触れたように、この記事では私自身のポートフォリオサイトを参考にしながら、構築のヒントなどをお伝えできればと思います。

なぜ初期のポートフォリオサイトは失敗したのか

新しいポートフォリオサイトに移る前に、まず初期のポートフォリオサイトを2つご紹介します。

ポートフォリオサイト1号

最初のポートフォリオサイトは、SASSとPugを使ってJekyllで作りました。ほとんどがC++でできています。

しかし、本来はこんなシンプルなWebページに、Jekyll、MaterializeCSS、SASS、Pugを使用する必要はありません。Gulpのセットアップが、実際に必要だったCSSよりも長くなっています。

コードを書くのが好きだったため、ポートフォリオサイトを制作する目的を「SASSやGulp、Jekyllを使用するための学習機会」としていたことが間違いでした。エンジニアの方はたくさんのコードに触れたいと思うでしょうが、それによってWebサイトの設計が複雑になってしまっては意味がありません。

またこのポートフォリオサイトのコンソールには、404が大量に表示されていました。リソースが見つからないことから起こるエラーなので、これも改善すべき点のひとつです。

また下の画像は自身が手掛けたプロジェクトのスクリーンショットですが、あまりいい見た目とは言えません。

閲覧数が伸びなかった原因として、以下のようなことが考えられます。

• プロジェクト一覧がコードで埋め尽くされている
• 画像が中途半端なところでトリミングされている
• フォントが小さすぎて、文字が読みづらい
• ソーシャルアイコンが目立っていない

ただし、成功している点もあります。

たとえば、略歴の中で強調したい単語をきちんと強調表示している点です。全体を読んでいなくても、伝えたいキーワードはユーザーに伝わっていたでしょう。

また、ポートフォリオサイトをレスポンシブにしていた点も評価できます。自身のポートフォリオサイトのトラフィックのうち、約3分の1がモバイルからだったため、レスポンシブ対策は効果的でした。どんなサイズの画面でも、ユーザーがストレスなくポートフォリオサイトを閲覧できるようにしましょう。

ポートフォリオサイト2号

ポートフォリオサイト2号は、HTMLとCSSで作りました。背景の水玉模様が動くデザインで、こちらから実際に閲覧できます。

このポートフォリオサイトには、いまでも愛着があります。ふわふわと漂う水玉、ホバーによる変化、ミニマルなデザイン。略歴もシンプルに掲載することで、より洗練された印象を与えています。

ただし、フォントがやや小さい点と、毎回新しいページに移動しなければいけない点は改善できそうです。また「PROJECTS」のページ内に、「Code Projects」と「Talks」の2つの要素があるのもバランスが悪いですね。

とはいえ、このポートフォリオサイト2号のさまざまな要素が、これからご紹介する新しいポートフォリオサイトにも活かされています。

新しいポートフォリオサイトで改善した点

私は2017年10月に、ポートフォリオサイトをゼロから作り直しました。こちらから実際に閲覧できます（※2020年6月現在、内容がやや更新されています）。

デザイナーやエンジニアなどの職種に関わらず、ポートフォリオサイトは自身のクリエイティビティを自由に発揮できる場です。今回の制作で、私はインタラクティブデザイン（IxD）とアニメーションを盛り込むことに決めました。

一例として、以下のようなデザインを採用しています。

• ポートフォリオサイト上の任意の場所をクリックすると、ランダムな形があらわれる
• 文字の上にマウスをおくと、文字が動く
• 自己紹介のページの写真にカーソルを合わせると、写真がスピンする

この新しいポートフォリオサイトは、HTMLとCSS、JavaScriptで構築しています。

JavaScriptのVueを使用しているため、ページ間の移動がシームレスになったことが特徴です。また、フォントサイズとソーシャルアイコンも以前より大きく表示しています。

Vueに移行して感じたメリットは、以下のとおりです。

• 新しいプロジェクトの追加が簡単になった
• Vue Routerによって、新しいページに移動する必要がなくなった

このようにポートフォリオサイトを改善した結果、閲覧者の滞在時間が増え、仕事の依頼も増加しました。 インタラクティブな仕掛けとデザインの工夫によって、人を惹きつけるポートフォリオサイトに変化したのです。

さらに改善できる点

• 連絡先ページのみにアイコンを表示している点
  連絡先ページだけでなく、各ページにアイコンを表示することを考えています。これは閲覧者を、ポートフォリオサイトからSNSに誘導する効果があるためです。

• 自身が携わった26個すべてのプロジェクトを掲載している点
  プロジェクトのスクリーンショットをすべて掲載すると、カラーパレットにばらつきが出てしまう可能性があるのです。しかし、実際のプロジェクトを掲載すればトラフィックは増加するので、いくつかをピックアップして掲載する選択があります。

ポートフォリオサイトを構築するためのヒント12選

• 自分自身をしっかりと表現する
• クリエイティビティを発揮する
• ドメインを購入する（NameCheap等を使えば、安価で購入可能）
• コンソールエラーがないことと、サイトにバグがないことを確認する
• 不必要な技術を過剰に使わない
• モバイルでの表示を確認する（スプリットスクリーンにも対応しておくのがおすすめ）
• Web開発者の場合、テンプレートを使わず自分のスキルで構築する
• 売り込みたいスキルをポートフォリオサイトに掲載する。（講演がしたい場合、講演の経歴を掲載する／C++にフォーカスしたい場合、その他のプロジェクトを削除するetc…）
• リンクが切れていないかを確認する
• 定期的に更新する（筆者はすくなくとも数ヶ月ごとに新しいプロジェクトを追加）
• デザインを客観的に捉えて改善する（筆者はコードにする前にSketchで下書きを作成）
• ページ速度に気を配る（筆者はLighthouseを使ってパフォーマンスを確認）

お手本にしたいポートフォリオサイト4選

1. Tom Becker

点をつないでイラストを作れるポートフォリオサイトです。遊びごころたっぷりなデザインにしたい方は、ぜひ参考にしてみてください。

Tom Becker

2. Nik Papic

シンプルでかわいいポートフォリオサイトです。

Nik Papic

3. Robby Leonardi

ゲーム要素が満載なポートフォリオサイトです。

Robby Leonardi

4. Dinesh Pandiyan

ミニマルなデザインが魅力なポートフォリオサイトです。

Dinesh Pandiyan

おわりに

今回は、エンジニアである筆者のポートフォリオサイトを軸に解説をしましたが、多くの点は他のジャンルで活躍している人にも当てはまるはず。お手本をチェックしつつ、自分らしいポートフォリオサイトを作ってみましょう。

（執筆：Ali Spittel　翻訳：Nakajima Asuka　編集：Kimura Yumi）