BLOG

はじめに

このたび、ポートフォリオサイトリニューアルに伴い、ブログ機能を追加しました。

記念すべき最初の投稿として、今回のポートフォリオ制作がどのような過程を経て完成したのかをまとめてみようと思います。

制作を振り返ってみると、不安と試行錯誤の連続でした。

しかし同時に、多くの学びと達成感を得られたプロジェクトでもありましたので、誰かの参考になれば嬉しいですし、自分自身の記録としても残しておきたいと思います。

きっかけ｜既存サイトへの課題感

もともとポートフォリオサイト自体は持っていましたが、正直なところ、ずっと何か違う気がするし、他の方のポートフォリオの凄さに引け目を感じるというのが実際の状況でした。

特に悩んでいたのが【デザイン部分】

コーディングは自分でできても、デザインの細かい調整、どこにどれくらい余白を取るか、フォントサイズの比率をどう設定するか、色の使い方をどう統一するかといった部分になると、どう足掻いても自分で作るとめちゃくちゃ変になる。

「なんか違う気がするけど、何が違うのかわからない」という、改善しようにも手がかりを掴みにくい状態。

あるあるかもしれませんが、自分のセンスだけで突き進むことに限界を感じていました。

そこで今回、思い切ってデザイナーさんに依頼することを決めました。

ポートフォリオデザインへの挑戦と挫折｜Figmaを前に感じた無力さ

デザイナーさんに依頼する前に、自分でFigmaを使ってデザインを作ろうと試みていました。

ツール自体の基本操作から図形を置く、テキストを入力する、色を変える。そのような基本操作はなんとかできても、いざ「ゼロからデザインを考える」となった瞬間、完全に手が止まります。

• 何を置けばいいかわからない
• 余白をどれくらい取ればいいかわからない
• フォントの組み合わせが決まらない

色を選んでも「なんか違う」の連続で全く未来が想像できませんでした。

「操作できること」と「デザインができること」は全く別の話だと、身に染みて実感した瞬間でもあり、コードは書けても、デザインのセンスや引き出しは別で鍛えなければ身につかない。その現実を突きつけられた経験が、デザイナーさんへの依頼を決断する後押しになりました。

デザイナー選び｜1年前のDMが繋いだ縁

デザイナーさんへの依頼を決めたものの、次の問題は「誰に頼むか」でした。

知り合いのデザイナーがいるわけでもなく、クラウドソーシングで探すのも何か違う気がして、しばらく頭を悩ませていましたが、そんなとき思い出したのが約1年前にXのDMで届いていたデザイナーさんからの営業メッセージです。

その1年前に送ってくれていたのはデイトラのデザイナー【mikiさん(https://x.com/miki_webbb)】

当時DMをいただいた時は「今は必要ないかな」と返信はしたもののそのままにしていたのですが、まさかその1年後に自分から連絡を取ることになるとは思っていませんでした。

しかもそのデザイナーさんは、自分が受講していたデイトラの営業支援コースの先輩でもあることがわかりました。同じコミュニティで学んだ縁があるというのは、やはり安心感が違います。

スキルへの信頼はもちろん、こちらの仕事スタイルや考え方をある程度共有できるベースがある気がしたし、そのDMから人柄の良さが滲み出ていて「この人にお願いしよう」という気持ちが固まりました。

それに加えて、今回の依頼をきっかけに今後お互いに協業できるかもしれないという期待もありました。

デザインとエンジニアリング、それぞれの専門性を持ち寄って一緒に案件に取り組めたら、、、そんな将来的な可能性も頭に描きながら、依頼のメッセージを送りました。

そして今回の経験で、一つ大切なことを学びました。

1年前に届いた一通のDMが、実際に案件へと繋がったという事実です。

当時は返信はしたものの、あのメッセージが時間を経て縁になった。これは自分が営業をするうえでも大きな気づきになりました。

すぐに返事がなくても、すぐに仕事に繋がらなくても、諦めずに発信し続けることに意味がある。

相手の中にちゃんと残っていることがある。そのことを受け取る側になって初めて、リアルに実感できましたし、営業は即結果を求めるものではなく、長い目で見て営業し続けることが大切だと、今回のポートフォリオ制作を通じて身をもって感じました。

デザイナーとの協働｜ポートフォリオ制作にプロの視点が変えてくれたこと

デザイナーさんへの依頼は、結果として大正解でした。

単に「見た目をきれいにしてもらう」だけでなく、SEOの観点からの見直しも一緒に行ってくれたことが大きな収穫でした。

• 見出しの構造
• テキストの配置
• ページの情報設計
• 強みをどう見せるか
• SEO観点

こういった部分をデザインと同時に考えることで、「見た目が良くて、かつ検索エンジンにも伝わりやすいサイト」を目指すことができました。

また、デザイナーさんが特に印象的だったのは、納品して終わりではなく

「後々のことも一緒に考えてくれた事」

運用していくうえでコンテンツが増えたときにどう見えるか、またブログを育てていく中でSEOとして記事が上位に上がっていくような長期的な設計まで一緒に考えてもらえたこと。

そういった長期的な視点でのアドバイスをもらえたことで、今回のブログ機能追加もスムーズに設計できました。

デザインをプロに任せることで、自分はコーディングに集中できる。この役割分担の効果を、今回あらためて実感しました。

実装の壁｜アニメーションとの格闘

デザインが固まっていよいよ実装というフェーズで、今度は別の壁が立ちはだかりました。

今回のポートフォリオにはアニメーションの要素が多く組み込むことも予定していました。

スクロールに連動して要素がフェードインする演出、ホバー時のなめらかなトランジション、ページ遷移時の動き……

アニメーション実装は、CSSだけで対応できるものもあれば、JavaScriptやライブラリの知識が必要なものもあります。

これまでの案件でも多少は触れていましたが、これほど多くのアニメーションを一つのサイトに組み込んだ経験はなく、完成できるかどうかという漠然とした恐怖感がありました。

中でも一番時間を溶かしたのが、ファーストビューの鯨のアニメーションです。

以前どこかで見たサイトに、幾何学的なモチーフを使ったかっこいいアニメーションがあり、ずっと頭に残っていました。

そのサイトがどこだったかはもう辿り着けないのですが、「いつかこういうの作りたい」という気持ちだけは残っていたので、今回それを形にしようと思いました。

モチーフに鯨を選んだのは、自分が釣りが好きということもあり、鯨には大きな夢や目標の象徴として自然と頭に浮かんだからという理由でもあります。

幾何学的な図形を組み合わせて鯨の形を作り、それをアニメーションとして動かす。

いかにもエンジニアっぽいしかっこいい！ただそれだけの理由ですが、かなり苦労しました。

そこで積極的に活用したのがAIの力です。実装に詰まったとき、動きの仕組みを理解したいとき、コードの書き方に迷ったときAIに質問しながら一つひとつ解決していきました。

「なぜこのコードはこう動くのか」を都度理解しながら進めたことで、ただ動くものを作るだけでなく、自分の知識として積み上げていくことができたと感じています。

AIはあくまでサポートツールですが、使い方次第で学習効率が大きく変わる。そのことを身をもって体感したプロジェクトでした。

時間との戦い｜案件対応と並行しながら

制作を進めるうえで、もう一つ大変だったことがあります。それが時間の確保です。

昼間は会社員で働き、兼業で案件対応をしながらの自サイト制作はどうしても優先度が後回しになりがちです。

クライアントワークが立て込めば自サイトの作業は止まり、また再開するときには前回どこまでやったか確認するところから始まる……という繰り返し。思ったようにペースが上がらず、「いつ終わるんだろう」と感じる時期もありました。

それでもなんとか完成にこぎつけられたのは、「とにかく少しずつでも前に進める」という意識を持ち続けたからだと思います。

まとまった時間が取れないときでも、30分だけコードを書く、デザインの1セクションだけ確認する。そういう細切れの積み重ねが、最終的には完成につながりました。

自分のサイトだからこそ、納期がないぶん後回しにしやすい。

でもだからこそ、意識的に手を動かし続けることが大切だと改めて思いました。

完成して感じること

完成したポートフォリオを見たとき、素直に「作ってよかった」と思いました。

デザイナーさんとの協働で生まれたビジュアル、アニメーション実装を乗り越えて得た技術的な自信、AIを活用しながら知識を深めた過程すべてが積み重なって一つのサイトになっています。

そして、ポートフォリオサイトにブログ機能を搭載したので、制作の記録、日々の学び、技術的なTipsなど、これからここに少しずつ言葉を積み重ねていこうと思っています。

そして今現在、実際にその時出会ったデザイナーさんと本当に協業させていただいている事も事実です。

実際に仕事をし、デザインを頼むだけでなく本当に一緒に仕事をさせてもらっている。

スキルだけでなく結局は一緒に仕事をしていて気持ちいい人間味が一番大事なのではないかと、このポートフォリオ制作で新たな気づきになりました。

今回の気づきを忘れず、自分自身もそんな人間になれるよう精進いたします。

最後まで読んでいただき、ありがとうございました。