自分のポートフォリオサイトをつくって公開した背景と作り方について

Kohei Kadowaki (@kadoppe)
Kadoppe’s Blog
Published in
7 min readSep 18, 2018

といっても、現状ポートフォリオはこのブログしかない。

作ったサイトは以下。

誰のためになるかはわからないけど、今回作った背景・目的とどうやって作ったのかについてメモ程度に残しておく。

背景

自分が今目指していること、これまでの経験やつくってきたものに関する情報をどこかにまとめておきたかった。いわゆるプロフィールサイト、もしくはポートフォリオサイトに載せるような内容。

これまでは、LinkedIn や Wantedly のプロフィールページに情報を整理していたんだけど、ウェブ上の複数の場所に自分のプロフィールが存在している状態が少し嫌だった。更新するときに二重管理の問題発生するし、更新し忘れて古い情報がそのまま公開されっぱなしになることもある。

どこか一箇所にまとめる。そこだけを更新すればいいようにする。そこだけを見てもらえれば、なんとなく自分のことがつたわるようにする。そういう状態を作りたいと考えていた。

ちょうど、オンラインで会話していた人に、自分がどういう人であるかを伝えたいシーンがあり、いい機会だから今作ってしまおうと思った。作ったものを相手に渡すことをもって自己紹介を完了する、そういうモチベーションだった。

(余談だけど、これに関しては今の仕事で「問い合わせにそのまま回答するのではなく、プロダクトやサポートサイトの改善をもってして返す」というのを意識するようになったというのが大きいかも。)

目的

なにを作るにしても、それによってどういう目的を達成したいか、あるいはどういう課題を解決したいかについて考えておくことは重要だ。

今回ポートフォリオサイトを作る上で、簡単にだけど以下のように目的を整理してみた。

目的であること

  • リアルなコミュニティや、Twitter などの SNS、ブログ記事などで自分と接点があって、自分のことに少し興味が湧いた人に、自分のことをもう少し詳しく知ってもらう。
  • 知ってもらうことで、コミュニティやSNS、ブログ記事経由で発生するコミュニケーションの幅を広げる、量を増やす。
  • それによって、面白い人やコミュニティ、活動と新たに出会う可能性を広げたり、それらと触れ合って自分の形を少しずつ変えていくキッカケにする。

目的ではないこと

  • 自然流入な人(SNSやブログ記事での自分との接点がこれまでない人)に自分のことを知ってもらうこと。
  • ポートフォリオサイト経由でダイレクトな連絡(お仕事の以来やスカウトなど)をもらうこと。
  • ポートフォリオサイトそのもので、自分の世界観やスキルを表現すること。ものすごく凝った表現の、素晴らしいポートフォリオサイトを見かけるが、そこにはまだチャレンジしない。(してみたいが)

作り方

Squarespace

「ポートフォリオサイトそのもので、自分の世界観やスキルを表現すること」が目的ではない。サイトに訪れればそこにコンテンツがあること、そのコンテンツをアジャイルに更新・変更できること2点が満たされていればそれでよかった。

なので、フルスクラッチでサイトをデザイン・構築するのではなく、CMSをつかって楽にサイトを構築することにした。

今回使ったのは、Squarespace という CMS。いわゆる「自分でコーディングすることなくWebサイトがつくれる」系のサービスだ。

Template の選定

サービスが公開しているテンプレートには、個人的にステキなデザインだと思える、こだわったものが多い。管理画面もしっかりユーザーの体験を考えてしっかりデザイン・設計されていると思う。そのあたりが類似の他ツールとの差分だと感じた。

公開されているテンプレートの中から「Portfolio」というキーワードで検索し、その中からシンプルでカスタマイズ性も高そうな以下のテンプレートをベースに自分の Portfolio サイトを作っていくことにした。

管理画面とエディタ

Squarespace の管理画面では、いわゆる WYSIWYG エディタで Web サイトのレイアウトやコンテンツを編集することができる。Squarespace の WYSIWIG エディタは、使っていてほぼなんのストレスも感じることなく、必要なコンテンツを Web サイト上にスムーズに配置・反映していくことができた。

自由度は高いけど、できることは直感的に理解できる。動作もきびきびしており、パフォーマンスがよい。そのあたりのバランスの良さに魅力を感じたのかな。種類は違うけど、仕事でWYSIWYG エディタのようなものに関わることがあるので、参考になったし、もっと頑張らないとだし、悔しい気持ちにもなった。もっと磨きこみたい。オーナーシップをもってプロダクトのことを真剣に考える時間が今の仕事になって増えたからか、いろんなプロダクトを使った時に感じる目線が変わってきたような気がする。

Web サイトのデザインについてはほぼテンプレートをそのまま使った形。カスタマイズは一部フォントの種類やサイズ、文字間隔や行間を微調整しただけにとどまった。

サイトのドメイン

Squarespace では独自ドメインを使うことができる。 kadoppe.com の向き先のコンテンツが死んでいたこともあり、今回そのドメインの向き先を新しいポートフォリオサイトに向けることにした。

独自ドメインの設定にはドメインの管理を Squarespace に移管する方法と、よくある CNAME レコードをつかった方法がある。移管は面倒なのと、まだずっと使い続けるのかわからないこともあり、後者の方法で独自ドメインを使うことにした。

支払いと料金

Squarespace は有料サービス。一番安い Personal プランでも、月額12ドルかかる。高いっちゃ高いけど、上述の目的を達成した時のメリットや、フルスクラッチでサイトを作ったときと比べてメンテナンスコストが十分下がりそうなことを考慮すると、妥当な投資だと判断したため、支払うことにした。最近、お酒を控えめにしてることもあるが、飲み会代と比べると知れてる出費だと思う。

おわりに

そんなこんなでひとまずサイトの構築を始めて、一晩すこし夜更かしする程度の時間で、割と形ができたので公開してみた次第。

目的はまだ達成していないし、コンテンツも目的に即したものになっているかというとそうじゃないので、今後もどんどん修正・追加・削除を繰り返していく必要がある。つまりまだ完成はしていない。ポートフォリオももっとたくさん載せたい。過去のものもあるっちゃあるけど、せっかくなのでこれから作るものにフォーカスしたい。

自分のことをより深く知ってもらう、それがキッカケで得られるなにかしらの機会を求めている。そんな人は、自分のポートフォリオサイトつくってみてもいいんじゃないかなって思う。ポートフォリオがない?サイトを公開してから、作ってみればいいんじゃないかな?

--

--