コンポーネントギャラリー
タイガーテックのUIコンポーネントおよびデザインパターンの総合ガイド。
Design System
AI時代の、「人間よりも人間らしい」ものづくり。
スピードはAIに。魂はシステムに。
AIによるWeb制作は、ともすれば「誰でも作れる」「個性のない」ものになりがちです。
タイガーテックは、厳格なデザインシステムをAIに学習・遵守させることで、比類なき一貫性と品質を担保しています。
このサイト自体が、その実証実験です。
Consistency
一貫したデザインでブランドの信頼感を醸成し、ユーザーを迷わせないUIを実現します。
Scalability
事業の成長に合わせて、スピーディかつ安全に新しい機能やページを追加できます。
Maintainability
アドホックな修正を排し、長期運用でも壊れにくい高品質なコードを維持します。
00. Typography
見出し、階層構造、装飾、リストなどのテキスト表現。
UI Headings
Heading Level 1
Heading Level 2
Heading Level 3
Rich Text / Prose
コンテンツの見出し
これは 強調テキスト、下線付きテキスト のサンプルです。
- 徹底したコミュニケーション
- 現場主義のシステム開発
01. Buttons
用途に合わせたスタイルとサイズのバリエーション。
02. Tabs
情報を切り替えて表示するためのインタラクティブなパーツ。
Standard Tabs (Text Content)
概要のテキストをここに配置します。ホワイトタイガーテーマに基づいた洗練されたタブ切り替えが可能です。
Rich Content Tabs (Cards & Tables)
Speed Opt
Fast loading speed for better UX.
Secure
Top-notch security standards.
03. Form Components
一貫したデザインのフォーム入力パーツ。
返信方法
興味のある分野
Compact Form Usage
04. Table
各種用途に対応するテーブル表現。
05. Modal
詳細情報を重畳表示するパーツ。
06. Card
あらゆるコンテンツに対応する万能カード。
Visionary Development
We build systems that shape the future.
Key Statistics
- ✔ 200% Performance Boost
- ✔ 1.5x Conversion
07. NavigationHub
08. Process Flow
手続きや工程のステップ表示。
Vertical Flow (Timeline)
お問い合わせ
フォームよりお気軽にご連絡ください。担当者より24時間以内に返信いたします。
ヒアリング
現状の課題や実現したいゴールについて、オンラインで詳しくお伺いします。
ご提案・お見積り
要件に基づいた最適なプランと概算のお見積りをご提示します。
Vertical Flow (Dark Variant)
Planning
Define requirements and scope.
Development
Agile implementation cycle.
Deploy
Release to production environment.
Horizontal Flow (Process)
要件定義
ビジネスゴールを明確化
設計・デザイン
UI/UXとアーキテクチャ
開発・実装
高品質なコード作成
テスト・納品
品質保証とリリース
09. FAQ / Accordion
よくある質問などの開閉式コンテンツ。
Standard Variant
開発期間はどのくらいですか？
既存システムの改修は可能ですか？
保守サポートはありますか？
Ghost Variant (Minimal)
お見積りは無料ですか？
対応エリアを教えてください。
Dark Variant
Security Standards
Cloud Infrastructure
10. Article Content Components
記事や導入事例で使用する共通のコンテンツブロック。
Article Box (Emphasis Content)
重要なポイント
このように、記事の中で特に強調したい内容やリストをまとめる際に使用します。
Article Details (Expandable Deep Dive)
🏢 【当社の見解】詳細はこちらをクリック
記事の詳細な解説や、当社のスタンス、専門的な見解などを隠しておくための開閉可能なブロックです。
👉 詳細ページへのリンク例11. Image And Movie Guidelines
タイガーテックのビジュアルデザイン方針（トンマナ）。
Cyber Tiger Aesthetic
タイガーテックでは、Webサイト内で使用する画像・イラストについて、社名の由来である「Tiger（虎）」と「Tech（テクノロジー）」を体現する一貫したトーン＆マナーを設定しています。
- 基本モチーフ：ホワイトタイガー
- 世界観：近未来、サイバーパンク、先進性
- テーマカラー：漆黒やダークネイビーといった深い暗色を基調空間とし、アクセントカラーとして「ブルーサファイアのネオン」や「発光するデータ回路網」を配置します。
- 表現手法：あえて実写を多用せず、アイソメトリックや3Dレンダリングといった質感の高い抽象表現を用いることで、システム開発特有の「堅牢さ」「最新技術のキャッチアップ」「無駄のないシームレスな体験」を直感的に伝達します。
文字による説明（機能的価値）に、このビジュアルによる直感的理解（情緒的価値）を掛け合わせることで、ユーザーのサイトスキャンを助け、ブランドへの信頼感・先進感を醸成します。
利用シーン
- ・ サービス強み（6つの特長など）のアイキャッチ
- ・ システムアーキテクチャや概念図のキービジュアル
- ・ ページを切り分ける背景アクセントレイヤー
Technical Specifications (Generative AI)
アスペクト比の厳守
トリミング（クロップ）による意図せぬ見切れやテキスト要素の欠落を防ぐため、配置箇所に合わせたネイティブのアスペクト比で生成します。
- ✔ スマホ用カード・縦動画 ＝ 9:16
- ✔ PC用ヒーロー・横動画 ＝ 16:9
動画フォーマット最適化
再生時のパフォーマンスを確保するため、軽量な WebM 形式を採用します。また、ポスター画像として0秒目の WebP 形式をセットで書き出し、初期表示のCLS（レイアウトシフト）を防ぎます。