以前にポートフォリオについての記事を書いたり、ポートフォリオナイトにて登壇してお話をしてきました。

この際に「ポートフォリオも”作品のひとつ”にする」という旨を書いたのですが、この起点で今まで作っていなかった（サボっていた）ポートフォリオサイトを形にしてみようと思い、作り始めました。
（記事の内容と実際の動きがあべこべになっているのはお察しください）

ポートフォリオサイト概要

デザイン：Illustrator / XD
実装：html / css(sass) / php / javascript
サーバ：heroku
ビルド：gulp(sassまわり)」

「テーマ・考え」について

今回のポートフォリオサイトについて、クライアント「俺」さんは以下の要望を出してきました（頭の中で思考を切り離してスタイル）

・主に記録用のポートフォリオだけど、魅せるとこは魅せたい
・プロセスやメッセージを書けるようにしたい
・非開示情報なども管理したい

「売るポートフォリオ」というよりは、一旦は記録用に近いもの、だけどTOP画面は良い感じのものを残したい。うーん！欲張りですね！！
記録用のポートフォリオというのは、非開示の作品や、僕の場合は年齢制限（アダルトコンテンツ制限）もあるので、認証ページを設ける必要がありそうです。

今回の「裏テーマ」

これは仕事でも試してみたりするのですが、テーマと違う、裏テーマを設けることがあります。

ちなみに、今回はCMSを使わない。
以前の記事で「ポートフォリオを作る、という行為も作品にできる」ということを改めて体現しようと思い、自身のポートフォリオサイトで実行しました（この過程の詳細はポートフォリオサイト内でも後日公開しますｂ）

そして、今回はデザインよりも先に「実装力」と「意欲」を先行させて作っています（同時に悪いクセでもあるのですが…）

・できるだけお金をかけない
・レンタルサーバーを使わない
・PHPを使う・サーバーの立ち上げとgitでの実装
・JSONを使ったリスト管理

要件定義とUI

テーマで書いた要望をざっくりまとめるとこんな感じ

魅せる所は魅せる
　- 特定の値が付与されている作品のみTOPページに表示される
　- 表示はphpで条件分岐
プロセスやメッセージの記入
　- JSONで管理
非開示、年齢制限コンテンツも管理
　- ログイン機構。ログイン状態によって表示の出し分けをする
できるだけお金をかけない / レンタルサーバーを使わない
　- herokuで実装してみる

この辺も加味しつつ、非常にざっくりとXDを使ってUIを作る→少し崩して微調整を繰り返して作成をしていきます。

そして飽きる

はい。そしてUIを書くことに飽きました。
「早く作りたい早く作りたい早く作りたい」となったしまったため、超基礎的なフレームを作った後はheroku側のセッティングをしながらコーディングを開始。
ヘッダーとフッターとか共通化できるのほんと便利…と思いながら作成をしていました。

直実装ならではのトラブル

雛形もできて試しにheroku masterにpushしたら、真っ白。
「なあんでよおおおおおおおお」と思って色々と調べたら開発環境と本番環境のphpのverが違ったのが原因。

これ、さくらのスタンダードプラン等のレンタルサーバーならサクっと解決できますが、herokuでの解決では結構かかりました。
新たなトラブルは新たな知識になるので良い知見！

（一応）できた！

php上でのトライ＆エラーをしながら、JSONに作品データを記録・画像を作成しつつ、要件の最低限をクリアしたポートフォリオサイトができました。
※URLはセキュア的な部分の安全確認や作品情報が不十分なので、ここでの公開は伏せます。下の動画でお楽しみください！！
※有料記事でURLを開示していますが、近いうちにnoteやtwitterでも公開します。

https://montblanc.design/portfolio/

また、Twitterでもアップしたのですが、ポートフォリオサイトをマイiPhoneやiPadのホーム画面からワンタッチアクセスができるようにしてあります。

意図はこんな感じ。

「人に見せる時にiPadとかiPhoneでサクッと見せれるぞ！」
「アプリっぽく見せれる個人的満足感〜★」
「ポートフォリオに愛着出る〜♥」

今回がんばったこと・感じたこと

めちゃめちゃ計画性のないポートフォリオサイト作成ですが、こんなことを頑張ったりとか、作りながら感じることがありました。

今後の作品追加をサクっと行いたい
サクッというのは手間ではなく、時間。
自分の場合、手間を省く手段がWordpressになるのですが、編集時の動作時間がもたもたする。スピードを考えると管理画面以外の所を触ることになるので、複数の作品を一気に更新するために敢えて今回のような実装を試しました。
たぶん、もっと早い実装方法はあると思うけどそれは次の改善に

フロント・サーバーまわりの知識と理解を実地獲得
会社員デザイナーとして働いていて、一緒に実装作業をしてくれるエンジニアさんの苦労が見えるけど理解しきれない、というのがあり、サーバーをたてgitを使いデプロイをする、ということを体で覚えようと思い、heroku+git+gulp+terminalというゴリゴリの実装をしてみました（エンジニアさんから見ればゴリゴリではないか...）
結果、前述した開発と本番のphpのバージョン違う問題や、そもそもターミナルで悪戦苦闘したり、Qiitaやエンジニアブログを飛び回りつつ、形にすることができました。
もうこれをサクっと行えるレンタルサーバーサービスとそのGUIには感謝の極みしかない。

振り返り
今回のポートフォリオサイトを作るにあたり、作品や実績ごとに「どういう意図で作ったのか」「プロセスはどうだったのか」などを振り返り、可視化するようにしています。
この振り返りを行うことで、自分がどういったデザイナーなのかを改めて把握したり「前にこんなやつ作ったんだから、今の俺もっとできる」といった活力を得ることができました。振り返り、やっぱ大事。

一旦作ってみて、これからカイゼン

まず作ってみる。作った後で考える。

結構考えすぎて頭が沸騰して「やめるか〜」となってしまう性格の人間なので「やりたい→じゃあやるぞ！」の気概で作ってみました。

僕の場合、「phpやりたい！」「herokuでサーバーの仕組みしりたい」という複数の目的があったため、作業工程や作業量としての量は結構ありますが、作品を公開したい！仕事ほしい！とかの文脈の方はameba owndでもtumblrでもwordpressでも良いので、アップしてから考えるのが良いと思っています。

「UIデザイナーがUIしっかりしてないポートフォリオ作って大丈夫なん？」と思うのであれば、その微妙と思うUIでも1回形として吐き出して、改善を行う、そして、そのプロセスをポートフォリオの材料として使うと一石二鳥ですｂ
（今回は自分もそんな文脈で作成しました）

gitでの管理ってcommit自体にコメントが書ける上にその内容が振り返りになるので、昔の自分がどう思ったのか、それ踏まえてどう改善するかのプロセスを可視化できて良いですね。

今後のカイゼン予定
・OGP系の設定（まだdescriptionが「いいい」とかになってる）
・自己紹介、スキルセットのページを具体化（インフォグラフィックなど）
・同じページリンクへアクセスすると真っ白になるのを防ぐ
・ログイン状態によってのトンマナ切り替え
・カテゴリ機能（デザインジャンルのソートと活動分野のソード）
・各インタラクション実装

せっかくなので、色々実験したりもしたいので、ガチャガチャ改造していきたいと思います〜（こういうの好き）