ロゴ・ポートフォリオサイトサイトを全面リニューアルしました。
目次
この度、ロゴ・ポートフォリオサイトサイトを全面リニューアルしました。
2年前からリニューアルしようと決意していたものの、忙しくてなかなか着手できずにおりましたが、知り合いのデザイナーさんの協力もあり、ようやくリリースすることができました。
今回のリニューアルは、私のWebサイト制作歴12年の集大成ともいえるようなサイトが出来上がったと思っています。
リニューアルの背景と目的
2年前の2023年頃から、WebGLを活用した実装の依頼が増加しました。しかし、基礎知識はあったものの、実案件を受けるには技術力が不足していました。そこで、2023年にWebGLスクールに参加し、技術力向上を図ることを決意。実案件前の練習として、WebGLを使用したポートフォリオサイトの制作に取り組みました。
旧サイトの課題点は以下の通りです：
- デザインの質
自分でデザインを行っていたため、洗練されていませんでした。 - 技術の陳腐化
2021年にNext.jsをベースに作成していたため、新技術やトレンドに対応できていませんでした。 - ビルド時間の長さ
ビルド時間が遅く、開発効率が低下していました。 - 更新の煩雑さ
更新作業が煩雑で、サイトが放置されがちでした。
これらを改善し、発信力とイメージの強化を図ることを目指しました。
今回のリニューアルでは、デザイナーさんと密に連携し、「MONOLITH -new code J-」というコンセプトのもと、サイト全体のビジュアルとユーザー体験を一新しました。
新デザインのコンセプト
デザイナーと連携し、「MONOLITH -new code J-」というコンセプトのもと、サイト全体のビジュアルとユーザー体験を一新しました。
コンセプト：「MONOLITH -new code J-」
映画『2001年宇宙の旅』の「モノリス」にインスパイアされ、人類に叡智を授ける存在として、新たな知識や技術に触れることで新世界が広がるイメージを表現。ユーザーが新たな発見やインスピレーションを得られるデザインを目指しました。
デザインの特徴
- レイアウト
スタイリッシュかつサイバー感のあるレイアウトを採用。インタラクティブなギミックを実装し、未来的で洗練された印象を与えます。 - フォント
日本語：Noto Sans
英語：Industry （Adobe Fonts）
シンプルで読みやすいフォントを選定し、統一感を高めました。 - カラーパレット
白 / 黒 / グレー / グリーン（#b8ff00）
少なめの色使いを基本とし、グリーンをアクセントに視覚的なインパクトを強調。
レイアウト仕様
トップページは「コックピット視点」をイメージし、ブラウザウィンドウの縁に擬似コックピット風の窓を固定。ユーザーが探索する際の没入感を演出。ローディング後、3つのアルファベットエリアへ移行すると、ロゴとメニューが追従します。
アニメーションの工夫
- ローディングアニメーション
深海を思わせる暗闇からシステム起動を連想させるテキストやローディングバーが表示。完了後、遷移シャッターが現れメインタイトルへ移行。シャッターにはロゴの一部を使用し、ブランドイメージを維持。 - メインビジュアル
シャッターが開くとメインタイトルが表示され、背景は深海から大地へ変化。エアーズロック（ウルル）を背景に、大自然のモノリスとしてのイメージを強調。ロゴは3Dに浮き上がり始め、スクロールで次のエリアへ移行。
デザインに対するアプローチ
- 3D表現の活用
視覚的な奥行きと動きを加え、ダイナミックな体験を提供。 - カラーバリエーション
基本色は少なめに抑え、3色程度のバリエーションで統一感とアクセントを両立。 - 挑戦的なデザイン
高品質なデザインを追求。アニメーションやインタラクションにも積極的に挑戦し、表現力豊かなサイトを実現。 - ゲームやパチンコの演出を参考にした表現
デザインやアニメーションにおいて、単なるWebサイトのギミックに留まらず、ゲームやパチンコの演出を参考にし、ユーザーにとってより面白く魅力的な表現を追求しました。これにより、訪問者がサイトを楽しみながら新たな発見を得られるよう工夫しています。
使用技術と開発プロセス
最新技術を取り入れ、将来的にも陳腐化しにくく使いやすいフレームワークやライブラリを選定しました。以下のツールを基にサイトを構築しています：
- Astro
高速なパフォーマンスと柔軟なコンポーネントアーキテクチャを提供。静的サイト生成と動的コンテンツの効率的な扱いが可能。 - TypeScript
型安全性を確保し、コードの可読性とメンテナンス性を向上。 - GSAP
高度なアニメーションをスムーズに実装。直感的なAPIで複雑なアニメーションも効率的に作成可能。 - Three.js
インタラクティブな3Dコンテンツを簡単に実装。 - Lenis
滑らかなスクロール体験を提供し、自然な動きを実現。 - microCMS
ヘッドレスCMSとして、フロントエンドとの連携が容易。コンテンツの更新や管理が直感的に行えます。
開発中に直面した技術的な課題とその解決方法
リニューアルプロジェクトでは、各ページやコンポーネントごとに多くの技術的課題に直面しました。以下に主要なポイントをまとめます：
- クオリティの追求
アニメーションやインタラクションに細部までこだわりました。 - 表現力の重視
多様な技術に挑戦し、新しいアイデアや実装方法を積極的に試しました。 - パフォーマンスと表現のバランス
アニメーションや3D表現を多用しつつ、可能な限り軽量化を図り、必要な部分では表現を優先しました。 - チャレンジ精神
未知の技術や難易度の高い実装にも積極的に挑戦し、技術スキルの向上とサイトの独自性を高めました。
今後のブログ記事で、各ページやコンポーネントごとに直面した具体的な課題やその解決方法を詳しく紹介する予定です。
コンテンツの充実と整理
新しいポートフォリオサイトでは、ユーザー体験の向上を目指し、コンテンツの充実と整理に注力しました。各コンテンツを個別のページに分けることで、以下のメリットを実現しました。
ページ分割のメリット
- 回遊性の向上
各コンテンツを独立したページに分け、関連ページ同士をリンクさせることで、ユーザーが目的の情報に迅速にアクセスできるようになりました。また、自然なサイト内の流れを作り出し、ユーザーの滞在時間を延ばす効果があります。 - 見やすさの向上
情報を整理することで、各ページがシンプルかつ明確になり、ユーザーが必要な情報を迷わずに見つけやすくなりました。これにより、全体としてのサイトの印象が格段に向上しました。 - 更新のしやすさ
コンテンツ管理システム（CMS）としてmicroCMSを採用し、制作実績やブログの更新を効率化しました。これにより、最新の情報を迅速に反映させることが可能となりました。 - 表示速度の改善
各ページにdynamic importを導入し、JavaScriptを分割することで1ページあたりのデータ量を削減し、ページの読み込み速度を向上させました。これにより、ユーザーエクスペリエンスがさらに快適になりました。
コンテンツ管理の効率化
microCMSの採用により、コンテンツ管理が大幅に効率化されました。特に「Works」や「Blogs」など、頻繁に更新が必要なセクションでは以下の利点があります。
- 直感的な編集
管理画面から簡単にコンテンツの追加・編集ができるため、時間をかけずに最新情報を反映させることが可能です。 - 自動アップロード
GitHub Actionsを経由してサーバーへ自動的にアップロードする仕組みを構築し、スムーズなデータ取得と表示を実現しました。
これにより、コンテンツの追加や更新作業が効率的に行えるようになり、常に新鮮で価値のある情報を提供し続けることが可能となりました。
ユーザーエクスペリエンス（UX）の向上
新しいポートフォリオサイトでは、ユーザーが触れて楽しく、新たな発見があるようなユニークな体験を提供するために、さまざまなギミックを取り入れました。以下に主な工夫点をご紹介します。
様々なギミック
- アクセントカラーのリアルタイム変更
ユーザーの操作に応じて、サイトのアクセントカラーがリアルタイムで変化します。視覚的な楽しさと動的な印象を与えます。 - ナビゲーションのプレビュー表示
ナビゲーションを開いた際に、現在のページと移動先のページのプレビューを表示します。ユーザーは次にどのページに移動するのかを視覚的に確認できます。 - コナミコマンドでアニメーション
「↑↑↓↓←→←→BA」というコナミコマンドを入力すると、特別なアニメーションが発動します。隠し要素として、ユーザーに遊び心を提供します。 - コンソールにロゴ表示
ブラウザのコンソールにロゴを表示する機能を実装しました。開発者や興味を持ったユーザーが発見することで、サイトへの興味を引き立てます。 - ページ内パーツのドラッグ機能
ページ内の特定のパーツをドラッグして動かせる機能を追加しました。インタラクティブにサイトを操作でき、楽しさを感じられます。
こだわりポイント
特にナビゲーションについては、他のサイトでは見たことがない独自のデザインと機能を採用しました。ユーザーが直感的に操作できるよう工夫しつつ、驚きと楽しさを提供することを目指しました。また、デザインやアニメーションに関しては、Webサイトを参考にしただけでなく、ゲームやパチンコの演出を参考にし、面白い表現にこだわりました。これにより、ユーザーにとってより楽しく、記憶に残る体験を提供しています。
これらのギミックに関する詳細なこだわりや実装方法については、後日ブログにて詳しく紹介する予定です。
制作におけるチャレンジと学び
今回のリニューアルプロジェクトでは、さまざまなチャレンジと学びがありました。以下に主なポイントをまとめます。
デザインのクオリティ向上
プロジェクト開始当初は自分でデザインを行っていましたが、高品質なサイトを目指すには現状のデザインスキルでは不十分であることに気づきました。知り合いのデザイナーに協力を依頼し、ロゴや名刺を含む全面的なリニューアルを実現。納得のいく洗練されたデザインに仕上がりました。
技術的な挑戦とスキル向上
リニューアルでは、Three.jsを用いたWebGLの実装を多く取り入れ、WebGLのスキルを大幅に向上させました。さまざまなインタラクションの実装中、多くの技術的課題に直面しましたが、AIの活用を通じて解決策を見つけ出し、いくつかの機能を実装しました。しかし、一部の機能は実装が難しく、諦めざるを得ませんでした。
今後の展望と目標
今後は、WebGLを活用したプロジェクトに積極的に取り組むとともに、その他のインタラクション技術も仕事に取り入れていきたいと考えています。これにより、ユーザーにより良い価値を提供できるサイトを目指します。また、「Playgrounds」ページを通じて、さまざまな試作や実験的なプロジェクトを発信し、ユーザーの心に残る魅力的なウェブサイトを提供していきます。
