投稿①自信が無くてもポートフォリオを作るということ

技術ブログ

投稿①自信が無くてもポートフォリオを作るということ

公開日:2025年5月19日

最終更新:2026年3月7日

私は私をどう紹介すればいい？

就労支援B型でお世話になっているパソコン教室で、ポートフォリオを作ること（そしてそれを実際のサーバーにアップロードすること）を提案された時、正直私は気後れしていました。なんなら今でもそうです。

ポートフォリオとは何か。「私はこれこれこういうもので、このくらいの物を作ったことがあります、このくらいの事ができます」と自己PRを行うためのもの、PR先に見てもらう資料であると思われます。そのPR、アピールすべきもの、それに足るものを提示せよ……というのがとても高いハードルに感じたのでした。端的に言えば自信が無い。実績も大してない。

これまで教室経由で４・５件のお仕事（主にホームページ・サイトの作成コーディング）を手伝わせていただいたものの技術不足勉強不足を何度となく感じ、また「自分でホームページの形を考える」ことが特に難しいと思っていました。自分のポートフォリオを作るとなれば、クライアントもしくはその方面担当から大まかなデザイン・仕様を提示してもらい、それに沿ってページを構成するとはいきません。先人の皆様はどうやって自分を表す「これだ」という形を決められたのでしょうか。

一度はそれまでに学び、お仕事でやってきたような「縦に長くスクロールするページ」を作ろうとしました。しかしどうにもしっくり来ず、ボツにしています。そのページで試していたあれこれも、現在のサイトにいくらか活きてはいますが。

「私のかたち」探し

方々のサイト・デザインを見て回って、良いところを持ってくる。要は「真似て、パクる」ことを教室の先生に勧められたものの、先人が作り上げた数々の凄さにむしろ圧倒されるばかりでした。しかしそんな中でもいくつか、気になるものが見つけられました。確かなんとなく「ゲーム的な」UIのページを探していた時だったか……。

マウスカーソルを追従するマウスストーカーを自作する【JavaScript / jQuery】
マウスで移動させたカーソルの位置に追従するアニメーション。
お化け屋敷
マウスホイールのスクロール量に応じて変化するデモ。
Space safari to the planet Erikte
一定量スクロールさせた時にだけ変化する要素。
平尾誠ポートフォリオ
横方向にだけスクロールするデザイン
アプリファクトリーはるni株式会社
ドラッグ＆ドロップに反応して回転するCGグラフィック。
Turn.jsを用いて雑誌や本のようなページを作成してみよう！ #JavaScript – Qiita
Turn.js: HTML5 のページめくり効果

こういったギミック・処理がどのような記述・機能によって行われているのか調べたり、ボツページで試したりしている内に……いつの段階だったかはっきりと思い出せませんが、「教室に通い出して以来ずっと復習用のメモ書きに使っているB5サイズのノート（二代目）をモチーフにしよう」というアイデアにたどり着きました。ドラッグ＆ドロップ操作に応じてノートの頁を左右にめくるような、縦方向には一切スクロールしないサイトです（実際にはフロントページだけですが）。

（画像の四角形一枚一枚が画面と同じ幅・高さを持ち、z-indexにより重ね合わされている）

この形を考えるにあたっては、これまでやってきた課題やお仕事の中でいわゆる「ハンバーガーメニュー（モバイル系統でよく使われる、クリック・タッチ操作によって画面全体に開閉されるナビゲーション）」をよく作ったことが少なからず影響しているように思います。ボタンひとつで画面全体を覆い隠すようなモーダルを最初から何枚も重ねておき、「上」から順に隠して「下」にあるものを見せたり逆に戻したりという、私にとっては基礎の延長線上にあるものとして。

今の私にできること。

そのようなイメージを実際に作ってみるにあたって、多くの試行錯誤がありました。どこで詰まって、どのように解決していったかについては、後の記事に記していこうと思います。そうして作っている内に私の中に浮かんできた考えは、こうです。
「それまでやってきたことに自信が持てないのなら、今やっている【これ】自体に現在進行形の学びを注ぎ込めばいい」んじゃないか、と。

ポートフォリオで紹介・PRするべき内容に自信が持てないのなら、いっそポートフォリオ自体をPR要素とする……いやPR要素にならないポートフォリオとは、という話ですが。サイトのデザインにも、実装するべき機能にも誰からも指示がない、もらえないのであればこそ、さながら実験場のようにあれやこれやと試すことができました。そうこうしていると相当に時間がかかってしまいましたが、最初に作ろうとした縦長スクロールより個人的満足度は高く、制作経験としても良い勉強になったと思います。

結び：これは自己PRになる（なった）か？

それは、Conversion（ホームページ訪問者がサイトの目的に当たるアクションを起こしてくれること）に繋がるまでわかりません。私が見聞きする範囲で、類例があまりないものを作れたとは思っていますが……それがサイトとして魅力的かは別問題でもあり（一般的でスタンダードな形にはユーザーに馴染み深く閲覧しやすいという大きな利点がある）、少し奇をてらった程度で余人から見て有効かどうかは不安なところです。先述したように、制作経験自体は身になったと思いますが。

そして、一度完成したとなっても終わりではない。ローカル環境で作ったサイトを実際のサーバーに設置するにあたっても、設置後も、調整の余地・気になるところ手を入れたいところが際限なく発生するのでした。仮にでもこれで完成と区切ること自体も容易ならず、その上で更新を続けること。その果てしない道のりを自分で振り返るためにも、制作記録を残していこうと思います。

Next/投稿②

コメント入力欄（1件）を表示する