スタジオfirefly

制作の背景

気になる技術を気軽に試せる技術検証サイトが欲しいというのが先にあり、せっかく作るなら実用的なものにしようと思い、ポートフォリオサイトを制作しました。

こだわりポイント

HTMLファーストな開発環境

AHAスタック(Astro+htmx+Alpine.js)と Tailwind CSSを組み合わせた、HTMLファーストな開発環境を採用しました。
これにより以下を実現でき、実案件にも通じる知見を得られました。

• 開発スピードの高速化 シンプルな構造で効率的に開発を進められる。
• 容易なメンテナンス性 HTML主体の設計により、コードの可読性と保守性が向上。
• 拡張性への対応 必要に応じて柔軟に機能を追加できる。

ビュートランジションによるシームレスなアニメーション

試してみたい技術としてAstroのViewTransitionsコンポーネントを使用し、ビュートランジションを採用しました。
特筆すべき点として、スキルセットページのモーダルを開く際や制作事例一覧ページから詳細ページへ遷移する際に、前後の関係性がより分かりやすくなり、ユーザー体験の向上につながる可能性を感じました。
導入は簡単に行えましたが、DOMContentLoadedの代わりにastro:page-loadを使用する等注意すべき点が多々あり、実案件で採用する場合はより理解を深めておく必要があると感じました。

<script>
  document.addEventListener('astro:page-load', function () {
    // 処理を書く
  })
</script>

サーバーレス化により運用コストを最小限に

サイト規模が小さいこととサーバーレス環境を試してみたいという理由からCloudflareを採用しました。
レンタルサーバーが不要なため、運用コストはドメイン登録費用のみとなり、ドメインの登録も原価で提供しているCloudflare Registrarを利用したため、ドメイン登録サービスによっては発生するサービス調整費のようなコストも発生することなく、最小限のコストでの運用を可能にしました。

主な使用技術一覧