Article

CLYRのホームページ、ついに更新!

Kotaro Takada
リニューアルしたCLYRのホームページ

こんにちは!CLYRのホームページが新しくなりました。「もっと使いやすく、もっと楽しく」。この思いを胸に、リニューアルに取り組んでみました。今日は、その舞台裏をお話しします。技術的な詳細から使いやすさの向上まで、幅広くご紹介していきます。

使いやすさ追求、UXデザインの徹底

まず取り組んだのは、サイトの使いやすさです。今までのペライチのサイトではなく、様々な情報を組み込んで行きたかったので、サイト全体の構造を見直しました。

情報アーキテクチャの最適化

これからコンテンツを充実させていくにあたり、最も頻繁にアクセスされるコンテンツを特定しました。その結果に基づいて、以下の改善を行いました:

  • ナビゲーション構造の再設計:主要なセクションへのアクセスを容易にするため、メインメニューを簡素化し、サブメニューを効果的に配置しました。

レスポンシブデザインの強化

モバイルファーストの設計思想を採用し、様々なデバイスで最適な表示を実現しました:

  • Flexboxとグリッドレイアウトを活用し、画面サイズに応じて柔軟に変化するレイアウトを実現。
  • ビューポートに基づいた単位(vw, vh)を使用し、デバイスに依存しない一貫したデザインを維持。

これらの改善により、デスクトップからスマートフォンまで、シームレスな閲覧体験を提供できるようになりました。

待つのはイヤ!最新技術でパフォーマンス向上

ページの読み込み速度は、ユーザー体験とSEOの両面で極めて重要です。そこで、最新のWeb技術を駆使してパフォーマンスを大幅に向上させました。

Astroフレームワークの採用

静的サイト生成(SSG)の利点を最大限に活かすため、Astroフレームワークを採用しました。Astroの主な利点は以下の通りです:

  1. ゼロJSアプローチ:必要最小限のJavaScriptのみを配信し、初期ロード時間を大幅に短縮。
  2. 部分的ハイドレーション:インタラクティブな要素のみを必要に応じてハイドレーション。
  3. ビルド時最適化:コンポーネントレベルでの最適化により、不要なコードを排除。

これらの特徴により、ページの読み込み速度が大幅に向上しました。

画像最適化とレイジーローディング

画像は、Webサイトのパフォーマンスに大きな影響を与えます。以下の最適化を実施しました:

  1. WebPフォーマットの採用:従来のJPEGやPNGと比較して、ファイルサイズを平均30%削減。
  2. 画像のレイジーローディング:ビューポート外の画像の読み込みを遅延させ、初期ロード時間を短縮。
  3. srcset属性の活用:デバイスの解像度に応じて最適なサイズの画像を提供。

これらの施策により、ページサイズが大幅に削減され、特にモバイル環境での読み込み速度が向上しました。

見た目も大事!最新のデザイントレンドを取り入れて

ユーザーを惹きつけ、ブランドイメージを強化するため、デザイン面でも大幅な刷新を行いました。

モダンなUI/UXデザイン

  1. ニューモーフィズムの採用:立体感のあるデザインにより、視覚的な魅力を向上。
  2. マイクロインタラクションの実装:ホバーエフェクトやスムーズなアニメーションにより、ユーザーエンゲージメントを促進。
  3. カラーパレットの最適化:アクセシビリティガイドラインに準拠しつつ、ブランドカラーを効果的に使用。

3Dグリッドアニメーションの実装

サイトの背景に、Three.jsを使用した3Dグリッドアニメーションを実装しました。

CLYRに込めた思いを視覚的に表現しています。

アクセシビリティの向上:誰もが使いやすいサイトへ

ウェブアクセシビリティガイドライン(WCAG)2.1のレベルAAに準拠することを目標に、以下の改善を実施しました:

  1. キーボードナビゲーションの最適化:全ての機能をキーボードのみで操作可能に。
  2. ARIAランドマークの適切な使用:スクリーンリーダーユーザーのナビゲーションを支援。
  3. コントラスト比の調整:テキストと背景のコントラスト比を4.5:1以上に設定。
  4. 代替テキストの徹底:全ての非テキストコンテンツに適切な代替テキストを提供。

さらに、ダークモードにも対応し、ユーザーの環境設定や時間帯に応じて自動で切り替わる機能を実装しました。これにより、長時間の使用でも目の疲労を軽減できます。

コミュニケーションの円滑化:フィードバックループの構築

ユーザーとのコミュニケーションを重視し、以下の機能を新たに実装しました:

  1. インラインフィードバックフォーム:各ページに簡易的なフィードバックフォームを設置。
  2. ユーザー行動分析:Hotjarを導入し、ヒートマップやユーザーセッション録画を分析。

これらの施策により、ユーザーの声をリアルタイムで収集し、継続的な改善につなげる体制を整えました。

CLYRへ、ようこそ!

最新のWeb技術と使いやすさを追求したデザイン、そしてユーザーの皆様との対話を大切にする姿勢。これらを通じて、より多くの方々にCLYRの価値を届けたいと考えています。

CLYRは、皆様に「わくわく」を届けられるよう、努力を重ねていきます。新しくなったCLYRを、どうぞよろしくお願いします。