|
|
<!DOCTYPE html> |
|
|
<html lang="ja"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>サービス | 未来ソリューション株式会社</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Noto Sans JP', sans-serif; |
|
|
} |
|
|
.blue-accent { |
|
|
color: #005BAC; |
|
|
} |
|
|
.bg-blue-accent { |
|
|
background-color: #005BAC; |
|
|
} |
|
|
.border-blue-accent { |
|
|
border-color: #005BAC; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-white text-gray-800"> |
|
|
|
|
|
<nav class="bg-white shadow-md py-4 sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-6 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="cpu" class="blue-accent mr-2"></i> |
|
|
<span class="text-xl font-bold blue-accent">未来ソリューション株式会社</span> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="index.html" class="font-medium hover:text-blue-600">ホーム</a> |
|
|
<a href="about.html" class="font-medium hover:text-blue-600">会社概要</a> |
|
|
<a href="services.html" class="font-medium blue-accent">サービス</a> |
|
|
<a href="contact.html" class="font-medium hover:text-blue-600">お問い合わせ</a> |
|
|
</div> |
|
|
<button class="md:hidden focus:outline-none"> |
|
|
<i data-feather="menu"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="relative bg-gradient-to-r from-blue-50 to-gray-50 py-20"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6" data-aos="fade-up">サービス</h1> |
|
|
<p class="text-xl text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">お客様のビジネス課題を解決する最適なソリューションを提供します</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid md:grid-cols-2 gap-12"> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up"> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="bg-blue-100 rounded-full p-3 mr-4"> |
|
|
<i data-feather="briefcase" class="blue-accent"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold mb-2">ITコンサルティング</h2> |
|
|
<p class="text-gray-600">業務効率化や新規事業支援</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">お客様のビジネス課題を徹底分析し、最適なIT戦略を提案します。デジタルトランスフォーーメーション(DX)推進から業務プロセス改善まで、幅広い分野で専門的なコンサルティングを提供します。</p> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>業務プロセス分析と改善提案</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>デジタルトランスフォーーメーション戦略</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>新規事業開発支援</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="bg-blue-100 rounded-full p-3 mr-4"> |
|
|
<i data-feather="cloud" class="blue-accent"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold mb-2">クラウド導入支援</h2> |
|
|
<p class="text-gray-600">AWS、Azure、Google Cloud などの導入</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">クラウド環境の設計から導入、運用までをワンストップでサポート。セキュリティとコスト効率を考慮した最適なクラウド戦略を提案します。</p> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>クラウド移行計画と実行</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>マルチクラウド環境構築</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>クラウドセキュリティ対策</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="bg-blue-100 rounded-full p-3 mr-4"> |
|
|
<i data-feather="code" class="blue-accent"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold mb-2">システム開発</h2> |
|
|
<p class="text-gray-600">Webアプリ、モバイルアプリの開発</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">お客様のニーズに合わせたオーーダーーメイドシステムを開発します。UX/UI設計からバックエンド開発まで、一貫した品質管理でプロジェクトを推進します。</p> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>Webアプリケーション開発</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>モバイルアプリ開発(iOS/Android)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>AI/IoTを活用したシステム開発</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="flex items-start mb-6"> |
|
|
<div class="bg-blue-100 rounded-full p-3 mr-4"> |
|
|
<i data-feather="shield" class="blue-accent"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h2 class="text-2xl font-bold mb-2">セキュリティ対策</h2> |
|
|
<p class="text-gray-600">安全性を確保するためのトータルサポート</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600 mb-6">サイバーセキュリティの専門家が、お客様のシステムやネットワークの脆弱性を診断し、最適なセキュリティ対策を提案・実施します。</p> |
|
|
<ul class="space-y-2 text-gray-600"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>セキュリティ診断と脆弱性評価</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>セキュリティポリシー策定支援</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="blue-accent mr-2 mt-1"></i> |
|
|
<span>インシデント対応トレーニング</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center" data-aos="fade-up">私たちのアプローチ</h2> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="bg-blue-100 rounded-full p-4 w-16 h-16 flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-xl font-bold blue-accent">1</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">ヒアリング</h3> |
|
|
<p class="text-gray-600">お客様の課題や目標を徹底的にヒアリング</p> |
|
|
</div> |
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="bg-blue-100 rounded-full p-4 w-16 h-16 flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-xl font-bold blue-accent">2</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">分析</h3> |
|
|
<p class="text-gray-600">現状を分析し、最適なソリューションを検討</p> |
|
|
</div> |
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="bg-blue-100 rounded-full p-4 w-16 h-16 flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-xl font-bold blue-accent">3</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">提案</h3> |
|
|
<p class="text-gray-600">具体的な解決策をわかりやすく提案</p> |
|
|
</div> |
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="400"> |
|
|
<div class="bg-blue-100 rounded-full p-4 w-16 h-16 flex items-center justify-center mx-auto mb-4"> |
|
|
<span class="text-xl font-bold blue-accent">4</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-2">実行</h3> |
|
|
<p class="text-gray-600">確実な実行と継続的なサポート</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-blue-accent text-white"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-6" data-aos="fade-up">サービスの詳細についてお知りになりたいですか？</h2> |
|
|
<a href="contact.html" class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-full transition duration-300 inline-flex items-center" data-aos="fade-up" data-aos-delay="100"> |
|
|
お問い合わせはこちら |
|
|
<i data-feather="arrow-right" class="ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">未来ソリューション株式会社</h3> |
|
|
<p class="text-gray-400">テクノロジーを通じて人々の生活を豊かにする</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">メニュー</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="index.html" class="text-gray-400 hover:text-white">ホーム</a></li> |
|
|
<li><a href="about.html" class="text-gray-400 hover:text-white">会社概要</a></li> |
|
|
<li><a href="services.html" class="text-gray-400 hover:text-white">サービス</a></li> |
|
|
<li><a href="contact.html" class="text-gray-400 hover:text-white">お問い合わせ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">サービス</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">ITコンサルティング</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">クラウド導入支援</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">システム開発</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white">セキュリティ対策</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">連絡先</h4> |
|
|
<p class="text-gray-400 mb-2">東京都新宿区西新宿1-1-1</p> |
|
|
<p class="text-gray-400 mb-2">03-1234-5678</p> |
|
|
<p class="text-gray-400">info@mirai-solutions.jp</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
|
|
<p>© 2023 未来ソリューション株式会社. All rights reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
