サイト制作制作サンプル 2026年2月

CleverLab ポートフォリオサイト

本サイト。幅広い技術・デザインパターンを盛り込んだ自社ポートフォリオ。ダークモード、View Transitions、13以上のUI技術を実装。

Astro Tailwind CSS v4 TypeScript View Transitions API

https://cleverlab.lol

今ご覧いただいているこのサイトです。
CleverLabの技術力とデザインセンスを体感していただくために、サイト自体を「最も雄弁な制作実績」として設計しました。

デザインのポイント

ダークモードをベースにした、モダンでプロフェッショナルな印象のデザインです。
グラスモーフィズム（すりガラス風の表現）やグラデーションを効果的に使い、
フラットすぎず装飾的すぎないバランスを追求しました。

ライトモード／ダークモードの両方に対応しており、お使いのデバイスの設定に合わせて自動で切り替わります。

パララックス、タイプライターアニメーション、スクロール連動、カウンター、タブUI、アコーディオン、フローティングラベルなど、さまざまな実装を1サイトに収録

実装パターンを技術デモとしてではなく、サイトの各セクションに自然に組み込んでいます

View Transitions APIにより、ページ間をスムーズに移動できるアプリのような体験を実現

必要な箇所以外ではJavaScriptを配信せず、Lighthouse全項目で90点以上を達成

OGP画像・構造化データ・サイトマップ・robots.txtなどを設定し、検索エンジンからの流入にも対応

ご要望に合わせて最適なプランをご提案します。まずはお気軽にご相談ください。