FLAGLINE INC.

Our Works

Designing your life

CLIENT

DEMO_LP

TERM

約1週間

RESPONSIVE

Tailwind CSS のクラスを使用して、フレキシブルなレイアウトを実現

OVERVIEW

このコンポーネントは、複雑なアニメーションロジックと洗練されたビジュアル表現を組み合わせた高度なReactアプリケーションの一部です。SVGマスキング、ビデオ統合、そして精密に制御されたアニメーションシーケンスが特徴的です。

Corporate_page

コーポレートページ

CLIENT

TERM

約3日

FRAMEWORKS

Next.js: Reactベースのフレームワークで、サーバーサイドレンダリング（SSR）とスタティックサイト生成（SSG）を提供します。
React: UIコンポーネントを構築するためのJavaScriptライブラリです。

STYLING

Tailwind CSS: ユーティリティファーストのCSSフレームワークで、カスタマイズ可能なデザインシステムを提供します。
CSS Modules: コンポーネントスコープのCSSを可能にします。

ANIMATION

カスタムアニメーション: CSSアニメーションを使用して、様々な要素にアニメーション効果を適用しています。

CODE TYPES

React Components (.tsx files)
Utility Functions (.ts files)
Styling (Tailwind classes in .tsx files, global.css)
Configuration (next.config.js, tailwind.config.js)

OVERVIEW

このウェブサイトは、モダンなウェブ開発のベストプラクティスを採用し、パフォーマンス、アクセシビリティ、SEOに配慮した設計となっています。Next.jsとReactの組み合わせにより、高速で動的なユーザーエクスペリエンスを提供しつつ、サーバーサイドレンダリングの利点も活用しています。

AI_Solution_LP

AIソリューションのLP

CLIENT

TERM

約3週間

FRAMEWORKS

Next.js: Reactベースのフレームワークで、サーバーサイドレンダリングとルーティングを提供しています。
React: UIコンポーネントの構築に使用されています。
Framer Motion: アニメーションを実装するために使用されています。特にオープニングアニメーションとスムーズスクロールに活用されています。

STYLING

Tailwind CSS: ユーティリティファーストのCSSフレームワークで、レスポンシブデザインと迅速なスタイリングを可能にしています。
カスタムCSS: グローバルスタイルやフォント設定に使用されています。

ANIMATION

オープニングアニメーション: Framer Motionを使用して、初期ロード時のテキストアニメーションとパネルのトランジションを実装しています。
スクロールアニメーション: スムーズスクロール効果を実現するために、Framer Motionの`useTransform`と`useSpring`を使用しています。

RESPONSIVE

Tailwind CSSのユーティリティクラスを使用して、様々な画面サイズに対応するレスポンシブなレイアウトを実現しています。

PERFORMANCE

Next.jsの画像最適化機能を使用して、画像のロードを最適化しています。
コンポーネントの遅延ロードやコード分割を活用して、初期ロード時間を短縮しています。

ACCESSIBILITY

セマンティックなHTML構造を使用して、スクリーンリーダーなどの支援技術との互換性を確保しています。

CODE TYPES

TypeScript (.ts, .tsx): 型安全性を確保し、開発効率を向上させています。
CSS: グローバルスタイルやカスタムアニメーションの定義に使用されています。
JSON: 設定ファイル（package.json, tsconfig.json）に使用されています。

OVERVIEW

このウェブサイトは、最新のWeb開発技術を活用して、視覚的に魅力的でインタラクティブな体験を提供しながら、パフォーマンスとアクセシビリティにも配慮した設計となっています。

CONTACTお問い合わせ

お気軽にお問い合わせください。