サイトを大幅リニューアル！新しいサイト構造とページをご紹介

はじめに

お久しぶりです！ずいぶん長らく記事を更新していなかったのですが、その間に何をしていたかというと…サイトを大幅にリニューアルしておりました！

今回は、新しくなったAsopi Techサイトの構造と各ページについてご紹介いたします。

リニューアルの背景

以前のサイトはシンプルなブログサイトでしたが、OSSプロジェクトの数が増えてきたことや、各プロジェクトの詳細を紹介したいという思いから、サイト全体を見直すことにしました。

主な変更点は以下の通りです。

• 多言語対応（日本語/英語）
• OSSプロジェクト紹介ページの追加
• サービス詳細LP（ランディングページ）の実装
• ナビゲーション・フッターの刷新
• コンテンツ管理システムの整備

新しいサイト構造

ホームページ

新しいホームページでは、3つのOSSプロジェクトを中心に紹介しています。

1. Alopex DB - 同じデータファイルで組み込みからクラスタまでシームレスに移行できるデータベース
2. JV言語 - Java糖衣構文でPython/Kotlin並みの使い勝手を実現するトランスパイラ
3. HC GraphRAG - AWS向けGraphRAG

ヒーローセクションでは、それぞれのプロジェクトの特徴を簡潔に紹介し、詳細ページへの導線を設けています。

サービス（プロジェクト）ページ

/services では、各OSSプロジェクトの一覧を表示しています。カテゴリごとにフィルタリングも可能です。

各プロジェクトには専用の詳細LP（ランディングページ）を用意しました。

• /services/alopex-db - Alopex DBの詳細
• /services/project-jv - JV言語の詳細
• /services/hc-graphrag - HC GraphRAGの詳細

これらのLPでは、以下のようなセクションで構成されています。

• Hero: プロジェクト概要とCTA
• Challenge: 解決しようとしている課題
• Outcome: 提供する価値
• Capabilities: 機能・特徴
• Tech Stack: 技術スタック
• Proof: 開発状況・リソース

ブログページ

ブログは従来通り /blog で提供していますが、新しく多言語対応を追加しました。

英語版は /en/blog でアクセスでき、日本語と英語の記事をそれぞれのロケールで表示できます。まだ英語記事は少ないですが、今後増やしていく予定です。

Aboutページ

/about では、GitHubリポジトリからデータを取得して、プロジェクトの情報を動的に表示しています。

Contactページ

/contact では、X（Twitter）とGitHub Issuesへの問い合わせ導線を用意しています。

個人開発者として、コンサルティングやサポートサービスは提供していませんが、バグ報告やフィードバックは歓迎しています！

多言語対応

今回のリニューアルで最も大きな変更の一つが多言語対応です。

URLの構造は以下のようになっています。

• 日本語（デフォルト）: /, /blog, /services など
• 英語: /en, /en/blog, /en/services など

サイトのナビゲーションやフッター、各ページのコピーなど、すべてのテキストが日本語と英語に対応しています。

コンテンツが片方の言語にしかない場合は、フォールバック機能で対応言語のコンテンツを表示するようにしています。

フッターの刷新

フッターも刷新しました。以下の3つのセクションで構成されています。

1. サイト - ホーム、サービス、ブログ、About、Contactへのリンク
2. プロジェクト - 各OSSプロジェクトへの直接リンク
3. リンク - X、GitHub Issues、各プロジェクトのドキュメントサイトへのリンク

外部リンクには適切に target="_blank" と rel="noopener noreferrer" を設定して、セキュリティにも配慮しています。

今後の予定

リニューアルはひとまず完了しましたが、まだまだ改善したい点はたくさんあります。

• 英語コンテンツの拡充
• OGP画像の自動生成機能の改善
• パフォーマンス最適化
• アクセシビリティの向上

引き続き、サイトの改善とOSSプロジェクトの開発を進めていきます！

まとめ

今回のサイトリニューアルでは、多言語対応やOSSプロジェクト紹介ページの追加など、大幅な変更を行いました。

技術的な詳細については、別記事「サイトリニューアルで活用したAstroの機能を技術解説」で詳しく解説していますので、そちらもぜひご覧ください！

それでは、新しくなったAsopi Techサイトをどうぞよろしくお願いいたします🙌