Portfolio

2024/12 -
HTML Pure CSS JavaScript Astro Figma

当サイトを作成するにあたって、使用した技術や、開発の経緯をまとめました。

当サイトの開発の経緯

フリーランスになり早2年。
今まで、お世話になっている知人から案件を引き受けてきました。
しかし、知人に依存している現在の仕事の仕方から脱却するために、
自分でお仕事を探す必要が出てきました。
そこで、対外的に実績を公開するために、ポートフォリオサイトを作成しました。

使用技術

フロントエンド

  • Astro v5.1.2
    • SSGによる高速なページ生成
    • 最小限のJavaScriptによる軽量化
    • アイランドアーキテクチャの活用
  • Pure CSS
    • Every Layoutの設計原則に基づいたコンポーネント設計
    • CSSカスタムプロパティによる柔軟なスタイリング
  • 最適化
    • avif/webpフォーマットによる画像最適化
    • Webフォントの最適化
    • アセットの遅延読み込み

バックエンド

  • Netlify
    • 継続的デプロイメント
    • エッジファンクションによるサーバーレス機能
    • 高速なCDNによる配信
alt text

当サイトの特色

デザイン

時間を掛けてクリエイティブなデザインを追求することよりも大事ですが、
今回の目的が、対外的に実績を公開することでした。
そのため、デザインに時間を掛けすぎず、早めに公開することを優先しました。

スピード重視しすぎて、作業的にデザインするのも自分の学習にならないと考えたので、
最低限のデザインシステムを構築するにあたって、こちらの記事のデザインシステムの構築の仕方を参考にしました。

限られた時間の中でも最低限は私の特色を出すために、プロフィールで使用している自分のイメージ画像はNintendo GameboyのPocket Cameraで撮影したものをパソコンに取り込んで使用しています。
私がレトロゲームや、昔のクリエイティブならではの雰囲気が好きだからです。
このカメラは、写真を撮るときに、おもちゃのようなカメラのようなフィルターをかけることができます。
このフィルターをかけた写真を、Figma上で編集して、サイトのデザインに使用しました。

サイト公開後はじっくり腰を据えて、デザインを改善していきたいと考えています。

Every Layoutに基づいたコンポーネント設計

当サイトでは、Every Layoutの設計原則に基づいて以下のような再利用可能なレイアウトコンポーネントを実装しました：

  • Stack: 垂直方向の要素の積み重ね
  • Center: コンテンツの中央寄せ
  • Cluster: 水平方向の要素の配置
  • Cover: 画面の高さに合わせたカバーレイアウト
  • Box: パディングと背景色を持つコンテナ
  • Sidebar: サイドバーレイアウト
  • Switcher: レスポンシブな要素の切り替え

これらのコンポーネントは、CSSカスタムプロパティを活用することで、使用する場所に応じて柔軟にカスタマイズできるようになっています。
また、メディアクエリを最小限に抑えることで、よりメンテナンスしやすいコードベースを実現しています。

簡易的なパスコード機能

非公開の作品を限定公開するために、簡易的なパスコード機能を実装しました。
この機能は以下の特徴を持っています：

  • クッキーベースの認証管理
  • 1時間の有効期限
  • 開発環境と本番環境での適切なセキュリティ設定
  • Base64エンコーディングによるトークン管理

セキュリティ面では、以下の点を考慮しました：

  • トークンの有効期限設定
  • 無効なトークンの自動削除
  • secure属性とsameSite属性の適切な設定
  • 環境に応じたセキュリティレベルの調整

パフォーマンス

Lighthouseで計測した結果、すべてのスコアが100点を維持しています。(2025/02/17時点)
これは以下の最適化によって実現しています：

  • 画像の最適化
    • avif/webpフォーマットの採用
    • 適切なサイズと圧縮率の設定
    • Picture要素による最適なフォーマットの提供
  • Webフォントの最適化
    • フォントサブセット化
    • font-display: swapの設定
    • プリロード設定
  • 最小限のJavaScript
    • アイランドアーキテクチャの活用
    • 必要な箇所のみのハイドレーション

フレームワーク選定の理由と開発体験

以前使用していたGatsbyと比較して、Astroを選択した理由は以下の通りです：

  • より直感的なコンテンツ管理
    • GatsbyのGraphQL層は強力ですが、学習コストが高い
    • Astroのコンテンツコレクションは直感的で扱いやすい
  • パフォーマンスの向上
    • Lighthouseスコアの大幅な改善
    • クライアントサイドJavaScriptの削減
    • 必要な箇所のみのハイドレーション
  • 開発体験の向上
    • シンプルなファイル構造
    • 最小限の設定で開始可能
    • モダンな開発体験

今後の展望と技術選定

私のデザイナーとしてのバックグラウンドを活かし、以下の要素を重点的に改善していく予定です：

  1. インタラクティブな要素の実装
    • Framer Motionによるスムーズなアニメーション
    • View Transition APIを活用したページ遷移
    • Intersection Observer APIによる要素の出現アニメーション
    • CSS Custom Propertiesを活用したインタラクティブな要素
  2. ビジュアル面での強化
    • Three.jsやWebGLを活用した3Dエフェクト
    • CSS Grid Animationによるレイアウトアニメーション
    • SVGアニメーションの実装
    • モダンなスクロール体験の実現
  3. 回遊性の向上
    • 関連コンテンツの動的な表示
    • インタラクティブなタグクラウド
    • スムーズなページ遷移
    • コンテンツの文脈に応じた推薦システム

これらの実装にあたっては、以下のような技術を積極的に検討していきます：

  • CSS Scroll-Driven Animations
  • Container Queries
  • CSS Nesting
  • View Transitions API
  • Web Animations API

ただし、これらの改善は段階的に行い、まずは実績となる案件や個人開発プロジェクトの充実を優先していきます。
サイトの改善は、新しい技術への挑戦の場として位置づけ、実験的な実装を通じて技術力の向上を図っていきたいと考えています。