本文へスキップ
フォームでご相談

Menu

Caseウェブクラフト

ウェブクラフト

いまご覧いただいているこのサイトです。設計、デザイン、Astroでの実装から、公開後の計測・改善まで一貫して行っています。

ウェブクラフト トップページのスクリーンショット(PC表示)

サイト概要

島根・鳥取の事業者向けの事業サイトと、制作会社・デザイナー向けのパートナーページ(このページ)の2サイト構成です。静的サイトジェネレーターのAstroで構築し、事例や料金などの文言はTypeScriptのデータファイルに分離して管理しています。公開後もアクセス状況を見ながら、コピーや導線の改善を続けています。

実装で工夫した点

ビルド時に品質を確認できる静的サイト構成

Astroの静的生成を軸に、事例や料金などの文言をTypeScriptのデータファイルへ分離しています。ページ構成や重要な文言はビルドと合わせて検証スクリプトでチェックしていて、修正のたびに壊れていないかを機械的に確認できるようにしています。

画像まわりの自動最適化

画像はastro:assetsでWebPへ変換し、表示幅に応じたサイズを出し分けています。ビルドの最後には、どのページからも参照されなくなった画像を自動で削除するスクリプトを挟み、公開ファイルに不要な画像が残らないようにしています。

アクセシビリティの作り込み

本文へのスキップリンク、スライダーのキーボード操作対応、フォームエラー時のaria属性の明示など、WCAGを参照しながら細かく調整しています。スクロール連動の演出はOSの「視差効果を減らす」設定を尊重し、JSが無効な環境でもコンテンツはすべて表示されます。

検索エンジン向けの構造化データ

パンくずや事業者情報のJSON-LDをレイアウト側で自動生成しています。ページを追加するだけで正しい構造化データが出力されるため、運用しながらページを増やしても手作業での調整がいりません。

使用技術

  • Astro
  • TypeScript
  • Sass(FLOCSS)
  • GA4 / Search Console

Contact us

案件の内容や進め方に合わせてお見積もりします。
お見積もりは無料ですので、お気軽にお問い合わせください。