moi labo
想いをカタチに、心に届くデザインを。
フリーランスとしてのWeb制作・コーディングサービスを紹介する自社コーポレートサイト。 Next.js 15 / TypeScript / Tailwind CSS を使い、 パフォーマンス・SEO・セキュリティ・アクセシビリティを網羅して制作しました。
フレームワーク
Next.js 15
言語
TypeScript
スタイル
Tailwind CSS
ホスティング
Vercel
POINTS
制作のポイント
パフォーマンス最適化
Next.js の App Router・next/image による画像最適化・フォントの font-display: swap を採用。LCP・CLS を最小化し、快適な閲覧体験を実現しました。
SEO・構造化データ
robots.txt・sitemap.xml の自動生成、JSON-LD による ProfessionalService スキーマ実装、OGP・Twitter Card 設定など、検索エンジン対策を網羅しています。
お問い合わせフォーム
Zod によるクライアント・サーバー両側バリデーション、Cloudflare Turnstile によるボット対策、Resend を使ったメール送信を実装。レート制限も設けスパム対策も万全です。
アクセシビリティ対応
ARIA 属性・キーボード操作・prefers-reduced-motion 対応など、WCAG AA 基準を意識した実装。スクリーンリーダーでも正しく読み上げられる構造にしています。
セキュリティ対策
X-Frame-Options・Content-Security-Policy・Referrer-Policy など、セキュリティヘッダーを next.config.ts で一括設定。XSS・クリックジャッキング対策を実施しています。
アニメーション・UX
framer-motion を使ったスクロールアニメーション、モバイルメニューのスムーズな開閉、ホバーエフェクトなど、細部まで丁寧に作り込んでいます。
ABOUT THIS WORK
自分自身のサービスを、
丁寧に、誠実に。
自社サイトだからこそ、妥協なく作りました。 コードの品質・デザインの一貫性・ユーザー体験のすべてにこだわり、 訪れた方に「このひとに頼みたい」と感じていただけるサイトを目指しています。
SEO・セキュリティ・アクセシビリティも実装済みで、 クライアントサイトと同じ水準で制作しています。