moi labo
WEBSITE自社サイト

moi labo

想いをカタチに、心に届くデザインを。

フリーランスとしてのWeb制作・コーディングサービスを紹介する自社コーポレートサイト。 Next.js 15 / TypeScript / Tailwind CSS を使い、 パフォーマンス・SEO・セキュリティ・アクセシビリティを網羅して制作しました。

Next.jsTypeScriptTailwind CSSVercelコーポレートサイト
サイトを見る
moi labo コーポレートサイト トップページ

フレームワーク

Next.js 15

言語

TypeScript

スタイル

Tailwind CSS

ホスティング

Vercel

POINTS

制作のポイント

01

パフォーマンス最適化

Next.js の App Router・next/image による画像最適化・フォントの font-display: swap を採用。LCP・CLS を最小化し、快適な閲覧体験を実現しました。

App Routernext/imageCore Web Vitals
02

SEO・構造化データ

robots.txt・sitemap.xml の自動生成、JSON-LD による ProfessionalService スキーマ実装、OGP・Twitter Card 設定など、検索エンジン対策を網羅しています。

JSON-LDOGPsitemap.xml
03

お問い合わせフォーム

Zod によるクライアント・サーバー両側バリデーション、Cloudflare Turnstile によるボット対策、Resend を使ったメール送信を実装。レート制限も設けスパム対策も万全です。

ZodCloudflare TurnstileResend
04

アクセシビリティ対応

ARIA 属性・キーボード操作・prefers-reduced-motion 対応など、WCAG AA 基準を意識した実装。スクリーンリーダーでも正しく読み上げられる構造にしています。

ARIAWCAG AAreduced-motion
05

セキュリティ対策

X-Frame-Options・Content-Security-Policy・Referrer-Policy など、セキュリティヘッダーを next.config.ts で一括設定。XSS・クリックジャッキング対策を実施しています。

CSPX-Frame-OptionsPermissions-Policy
06

アニメーション・UX

framer-motion を使ったスクロールアニメーション、モバイルメニューのスムーズな開閉、ホバーエフェクトなど、細部まで丁寧に作り込んでいます。

framer-motionResponsiveUX
フリーランスWebデザイナー・エンジニアが作業するイラスト

ABOUT THIS WORK

自分自身のサービスを、
丁寧に、誠実に。

自社サイトだからこそ、妥協なく作りました。 コードの品質・デザインの一貫性・ユーザー体験のすべてにこだわり、 訪れた方に「このひとに頼みたい」と感じていただけるサイトを目指しています。

SEO・セキュリティ・アクセシビリティも実装済みで、 クライアントサイトと同じ水準で制作しています。

コーディング・開発のご相談はお気軽に

ご相談・お見積りは無料。
内容が固まっていなくても大丈夫ですので、まずはお気軽にご連絡ください。

お問い合わせはこちら