当ブログに続いて制作したポートフォリオサイト。 そのデザインがまとまるまでは長い歳月と紆余曲折を要しましたが、試行錯誤の末、お気に入りの場所が完成しました。

制作の経緯

「作りかけてはボツ」を続けてきた

ポートフォリオサイト。
それは、エンジニア、デザイナー、イラストレーター…何らかの職人さもなくば表現者として生きていくならば自ずと必要になる、己の居場所です。
またの名を営業サイトといい、そこに掲げられた実績やポリシーが誰かに響けばお仕事に繋がることもあるでしょう。

むろん私もその重要性にはプログラミング学習開始時から気づいていました。
しかし、「どんな仕事を、どれくらいの金額で受けるのか？」「事業主としての自分の価値って？」なんてことを考えれば考えるほど深みにはまり、 デザインを起こしてはボツ、起こしてはボツ…を繰り返すだけの無為な日々を送っていました。

PHP

黒歴史のボツ案はこっちの記事にまとめてあるぜ。

JavaScript

見てほしいような、見てほしくないような…。

2023.08.12

お蔵入りしたポートフォリオサイト案を眺めてみる

そんなある日、同僚のデザイナーさんのサイトを拝見して衝撃を受けます。
具体的な金額や依頼フローなどは全く書いていないのに、ご本人のアーティスティックな雰囲気がこれでもかと伝わるんです。 温厚なお人柄を知っているので「こんな一面もあるんだ！」と素直に興味が深まる。

考えてみれば、Web上だけで集客するわけでもありません。 面識があってある程度の信頼を置いている相手なら、多くの情報は必要ないのかもしれないですね。
そんなわけで「まずは名刺として出せるようなサイトを作ろう」と心のハードルを下げに下げて作り始めたのが、今回のポートフォリオサイトです。

開発環境

• デザイン：Adobe XD
• 言語：JavaScript & TypeScript
• ライブラリ: Vue3, Nuxt3, Sass
• ホスティング: Netlify

既にNuxt3をアプリケーション基盤としたブログサイト（ここですね）を立ち上げていたので、ルートディレクトリに配置することにしました。

デザインについて

イメージ

もともとは屋号をサイト名にするつもりでした。その名も「Tuttofare(トットファーレ: イタリア語で「何でも屋」「器用貧乏」)」。
「いろんな職業を経験してきたので、割となんでもやれちゃうかもね！（どれも及第点レベルだけど）」というなんとも優柔不断なメッセージが込められた、その場しのぎの屋号です。「徒然日誌」なんて名前のブログと同じ。ポリシーがない。

これが、まるでデザインに起こせない。
ビジュアルが浮かばないんですよね。色も、モチーフも、見えてこない。
まずはサイトのイメージ、ひいては世界観を熟考する必要がありました。

あらためて自分が好きな雰囲気とか、仕事を通して得たい特別な感情って何だろうと考えました。メタルギアソリッド３のコブラ部隊みたいですね。それで思ったのが、『夢中になって徹夜して、ヤッター完成だ〜！と一息ついて窓の外を見たら、夜が明けていた』って瞬間がすごく好きだなと。

時間を忘れて何かを作りきるのは楽しいし、達成感もある。なにより夜明けってシンプルに綺麗じゃないですか。夜明けの空の淡いピンク色を『ドーンピンク(Dawn Pink)』と呼ぶらしいです。これだ。ザ・ドーンの誕生です。

ぴったりの動画をPixabayで見つける。

サイトの構成

これまでのボツ案の反省を生かして、今回は「やらないこと」をしっかり定めました。

• ファーストビューにテキスト入れない
• メインリードで難しいこと言わない
• 金額や依頼フローは入れない
• Webエンジニアとしての営業サイトを想定
• イラストは「あ〜描く人なのね」くらいの印象が醸せればOK
• 翻訳はバックグラウンドに留める

結果、以下６つのセクションに絞りました。

• ファーストビュー： 雰囲気を醸す
• メインリード： 概要と世界観をシェア
• 制作実績: スキルを伝えるメインコンテンツ
• ブログの導線： 人となりを知ってもらうサブコンテンツ
• 簡単なプロフィールと問い合わせ先（メール）

また、裏テーマとして決めたのが

• 細部まで気が済むまで作り込むこと。

サイト自体がフロントエンドエンジニアやUIデザイナーとしてのポートフォリオの１つになるよう、こだわり抜きました。 なんてたって時間は無限にある！（とか言ってたら制作開始から数ヶ月経ってしまった）

※以下、近日清書予定！

UIへのこだわり - スマホ編

SPは普通にスクロールしたい。スマホで見てる時は焦ってるというか、基本シュパシュパやりたいと思うんですよ。余計な待ち時間は極力削りました。 PCはスクロールでセクション移動

UIへのこだわり - PC編

PCはゆったり構えて見ると思うので、結構凝りました。波の音声を出してみたり。雰囲気！オフにできないと困るのでゲームのスタート画面を意識して（当時ハマってたモンハンワールド）

ゲームのスタート画面によくある"Press Any Button"をイメージしたファーストビュー。クリックすると夜が明けます。

制作実績

やっぱり実績リストは欲しい。
フロントエンドの成果物をいかに見せるか？コードは見せられない、本番環境は消える場合もある＆飛ぶのが面倒。でも動きを見せたい。
というわけで、再生ボタンを押して動画キャプチャを見られるギャラリー形式に。
個人開発かつキー秘匿がちゃんとできたらGitHubのリンクを載せてもいいと思っている。

スマートフォン型スライダー

一番お気に入り。

• UI：スマホは横スワイプが一番
• 実装：ライブラリは一切使ってません
  コードを一部掲載する。

ノートPC型スライダー

MacBookProだよねこれ？

• UI：スマホは横スワイプが一番
• 実装：ライブラリは一切使ってません

ブログ紹介

ブログのピックアップ記事を掲載するセクションです。 こちらもUIを考え抜くのが楽しくて、SP/PCで全く違う操作になっています。
カードを切り替えるたびにアイキャッチ画像がランダムな位置に貼られる。フレームから大きくはみ出したり、うまくいけば中央に貼られたりする。 雑誌から得たアイデア。思わずスワイプしてみたくなる。

SP:横スワイプ検知

裏で色々やってます。

• UI:やっぱりスマホは横スワイプ
• 実装：制作実績のスマホ横スワイプと違い、順番や件数を見えなくしたい。そのため前後無限スワイプさせたい。それ用のコードを書きました（一部掲載）気をつけたことは、

PC:アルバムカートリッジ型

シャコって挿入すると表示が切り替わる感じ。気持ちいい。

• UI:PCはクリックと縦スクロール。縦スクロールはセクション移動に使っている。となればやはりクリック一択。
• 実装: