AstroWindは、AstroとTailwind CSSを組み合わせたウェブサイトデザインのためのフリーテンプレートです。AstroWindの各コンポーネントは、ウェブサイトの様々なセクションを効果的に表示するための使いやすい方法を提供しています。
この記事ではAstroWindの各コンポーネントのプロパティと具体的な利用例を解説します。
デモサイト
この記事に登場するコンポーネントはデモサイトで確認できます。
Content.astro
コンポーネント
- コンテンツ表示に特化:
Content
コンポーネントは、豊富なテキストコンテンツや画像を含む詳細な情報を表示するのに特化しています。これは、製品の詳細、サービスの説明、教育的なコンテンツなど、情報が豊富なセクションに適しています。 - 柔軟なレイアウト:
Content
は、コンテンツと画像の配置を柔軟に調整できるオプションを提供し、異なるタイプの情報を効果的に伝えることができます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | コンテンツセクションのタイトル | "私たちのサービス" |
subtitle | String | タイトルの下に表示されるサブタイトル | "お客様の満足を追求" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "品質と信頼性" |
content | String / Slot | コンテンツエリアに表示される詳細テキスト(またはカスタムスロット) | <p>詳細な説明</p> / <Fragment slot="content">...</Fragment> |
callToAction | Object | アクションを促すボタンやリンクの設定 | { text: '詳細を見る', href: '/details' } |
items | Array | コンテンツアイテムのリスト(各アイテムは title , description を含む) | [{ title: '特徴1', description: '説明1' }] |
columns | Number | アイテムを表示する列の数 | 2 |
image | String / Object | コンテンツセクションの画像または画像要素 | { src: 'content.jpg', alt: 'コンテンツ画像' } |
isReversed | Boolean | 画像とテキストの配置順を逆にするかどうか | false |
isAfterContent | Boolean | コンテンツの後に画像を表示するかどうか | true |
id | String | コンポーネントのID | "content-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Content
title="私たちのサービス"
subtitle="お客様の満足を追求"
tagline="品質と信頼性"
content="<p>私たちは品質と信頼性を最優先に考えています。</p>"
callToAction={{
text: '詳細を見る',
href: '/details'
}}
items={[
{
title: '高品質なサービス',
description: '私たちのサービスは業界最高水準です。'
},
{
title: '顧客満足',
description: 'お客様のニーズに応えるために努力しています。'
}
]}
columns={2}
image={{
src: '/images/content.jpg',
alt: 'コンテンツ画像'
}}
isReversed={false}
isAfterContent={true}
/>
Content
コンポーネントは、詳細な情報や画像を組み合わせたコンテンツを効果的に表示します。テキスト
、画像、ボタンを使用して、情報を視覚的かつ分かりやすく伝えることができます。柔軟なレイアウトオプションにより、コンテンツをより魅力的に配置することが可能です。
Features.astro
コンポーネント
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | 特徴セクションのタイトル | "私たちのサービス" |
subtitle | String | タイトルの下に表示されるサブタイトル | "最高の機能を提供" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "特別なサービス" |
items | Array | 特徴のリスト(各アイテムは title , description , icon を含む) | [{ title: '...', description: '...', icon: '...' }] |
columns | Number | アイテムを表示する列の数 | 2 |
defaultIcon | String | デフォルトのアイコン名 | "tabler:circle-check" |
id | String | コンポーネントのID | "features-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Features
id="features-section"
title="私たちのサービス"
subtitle="最高の機能を提供"
tagline="私たちが提供する特別なサービス"
items={[
{
title: '高速かつ安定',
description: '高速なロード時間と最適化されたパフォーマンス。',
icon: 'tabler:speedboat'
},
{
title: 'レスポンシブデザイン',
description: 'すべてのデバイスで完璧に表示されるデザイン。',
icon: 'tabler:device-desktop'
}
]}
columns={2}
defaultIcon="tabler:circle-check"
isDark={false}
classes={{ container: 'my-custom-class' }}
bg="#f0f0f0"
/>
Features2.astro
コンポーネント
Features
との違い
- デザイン:
Features2
は、Features
に比べてより洗練されたデザインと異なるレイアウトを提供します。Features2
は、特にビジュアルアピールを重視したデザインに適しています。 - 列の数:
Features2
はデフォルトで 3 列のレイアウトを提供し、Features
は 2 列です。これにより、Features2
はより多くのアイテムを同時に表示することができます。 - 背景とスタイリング:
Features2
では、背景やスタイリングのカスタマイズオプションがさらに強化されています。これにより、より複雑なデザインニーズに対応できます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | 特徴セクションのタイトル | "私たちの特徴" |
subtitle | String | タイトルの下に表示されるサブタイトル | "私たちが提供するもの" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "特別なサービス" |
items | Array | 特徴のリスト(各アイテムは title , description , icon を含む) | [{ title: '...', description: '...', icon: '...' }] |
columns | Number | アイテムを表示する列の数 | 3 |
defaultIcon | String | デフォルトのアイコン名 | "tabler:circle-check" |
id | String | コンポーネントのID | "features2-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Features2
id="features2-section"
title="私たちの特徴"
subtitle="私たちが提供するもの"
tagline="特別なサービス"
items={[
{
title: '迅速な対応',
description: '迅速かつ効率的なサービス提供。',
icon: 'tabler:alarm'
},
{
title: '革新的なソリューション',
description: '最新の技術を駆使したソリューション。',
icon: 'tabler:atom'
},
{
title: '顧客重視',
description: '顧客のニーズに合わせたカスタマイズ。',
icon: 'tabler:award'
}
]}
columns={3}
defaultIcon="tabler:circle-check"
isDark={false}
classes={{ container: 'my-custom-class' }}
bg="#f0f0f0"
/>
Features3.astro
コンポーネント
Features3
コンポーネントは、ウェブサイトの重要な特徴や機能を視覚的に際立たせるための効果的な方法を提供します。明確なタイトル、サブタイトル、アイコン付きの機能リストを通じて、製品やサービスの主要な利点を紹介します。image
プロパティを利用して、セクションにビジュアルアピールを加えることができ、bg
オプションにより背景スタイルをカスタマイズすることも可能です。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | 機能セクションのタイトル | "革新的な特徴" |
subtitle | String | タイトルの下に表示されるサブタイトル | "最先端のテクノロジー" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "未来を形作る" |
image | String / Object | セクションの画像または画像設定 | { src: 'image.png', alt: 'カラフルなイメージ' } |
items | Array | 機能のリスト(title , description , icon を含む) | [{ title: '特徴1', description: '説明1', icon: 'icon-name' }] |
columns | Number | アイテムを表示する列の数 | 3 |
defaultIcon | String | アイテムに使用するデフォルトのアイコン | "tabler:check" |
isBeforeContent | Boolean | 画像をコンテンツの前に表示するかどうか | false |
isAfterContent | Boolean | 画像をコンテンツの後に表示するかどうか | true |
id | String | コンポーネントのID | "features2-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Features3
title="革新的な特徴"
subtitle="最先端のテクノロジー"
tagline="未来を形作る"
items={[
{
title: '特徴1',
description: '説明1',
icon: 'tabler:check'
},
{
title: '特徴2',
description: '説明2',
icon: 'tabler:check'
}
]}
image={{
src: '/images/feature3-image.png',
alt: 'カラフルなイメージ'
}}
columns={3}
defaultIcon="tabler:check"
isBeforeContent={false}
isAfterContent={true}
bg={{
src: '/images/features3-bg.jpg',
alt: '背景画像'
}}
/>
Hero.astro
コンポーネント
- 目的:
Hero
コンポーネントは、ウェブサイトのメインビジュアルやインパクトのあるイントロダクションを提供するために使用されます。一般的にページの最上部に配置され、強い印象を与えるためのデザインが特徴です。 - ビジュアル要素:
Hero
は大きな画像や鮮明なタイトル、アクションを促すボタンを含むことが多く、訪問者の注意を引きつけるために重要な役割を果たします。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
id | String | コンポーネントのID | "hero-section" |
title | String | ヒーローセクションの大きなタイトル | "ウェルカム トゥ アワ サイト" |
subtitle | String | タイトルの下に表示されるサブタイトル | "あなたの旅はここから始まります" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "次世代のウェブ体験" |
content | String | コンテンツエリアに表示される追加テキスト | "ここに詳細な説明を入れます" |
actions | Array | アクションボタンのリスト(text , href , variant などのプロパティを含む) | [{ text: 'もっと見る', href: '/about', variant: 'primary' }] |
image | String / Object | ヒーローセクションの背景画像または画像要素 | { src: 'hero.jpg', alt: 'ヒーロー画像' } |
使用例
<Hero
id="hero-section"
title="ウェルカム トゥ アワ サイト"
subtitle="あなたの旅はここから始まります"
tagline="次世代のウェブ体験"
content="<p>ここに詳細な説明を入れます。</p>"
actions={[
{
text: 'もっと見る',
href: '/about',
variant: 'primary'
}
]}
image={{
src: '/images/hero.jpg',
alt: 'ヒーロー画像'
}}
/>
Hero2.astro
コンポーネント
Hero
との違い
- デザインとレイアウト:
Hero2
は、Hero
コンポーネントと比較して、異なるデザインとレイアウトを提供します。これにより、ウェブサイトのメインビジュアルにさらなるバリエーションを加えることができます。 - 追加スロット:
Hero2
は、追加のスロット(例えばカスタマイズされたタイトルやサブタイトルのスロット)を提供することで、より複雑なレイアウトやデザインニーズに対応できます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String / Slot | ヒーローセクションの大きなタイトル(またはカスタムスロット) | "ウェルカム トゥ アワ サイト" / <Fragment slot="title">...</Fragment> |
subtitle | String / Slot | タイトルの下に表示されるサブタイトル(またはカスタムスロット) | "あなたの旅はここから始まります" / <Fragment slot="subtitle">...</Fragment> |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "次世代のウェブ体験" |
content | String / Slot | コンテンツエリアに表示される追加テキスト(またはカスタムスロット) | <p>詳細な説明</p> / <Fragment slot="content">...</Fragment> |
actions | Array | アクションボタンのリスト(text , href , variant などのプロパティを含む) | [{ text: 'もっと見る', href: '/about', variant: 'primary' }] |
image | String / Object | ヒーローセクションの背景画像または画像要素 | { src: 'hero.jpg', alt: 'ヒーロー画像' } |
使用例
<Hero2
title={<Fragment slot="title">ウェルカム トゥ アワ サイト</Fragment>}
subtitle={<Fragment slot="subtitle">あなたの旅はここから始まります</Fragment>}
tagline="次世代のウェブ体験"
content={<Fragment slot="content"><p>ここに詳細な説明を入れます。</p></Fragment>}
actions={[
{
text: 'もっと見る',
href: '/about',
variant: 'primary'
}
]}
image={{
src: '/images/hero.jpg',
alt: 'ヒーロー画像'
}}
/>
HeroText.astro
コンポーネント
Hero
との違い
- テキスト中心のデザイン:
HeroText
コンポーネントは、画像よりもテキストコンテンツに焦点を当てたデザインです。これは、メッセージやコピーが重要な役割を果たす場合に特に適しています。 - シンプルなレイアウト:
Hero
が画像や大きなビジュアルを重視するのに対し、HeroText
はシンプルでテキストベースのレイアウトを提供します。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | ヒーローセクションの大きなタイトル | "ウェルカム トゥ アワ サイト" |
subtitle | String | タイトルの下に表示されるサブタイトル | "あなたの旅はここから始まります" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "次世代のウェブ体験" |
content | String / Slot | コンテンツエリアに表示される追加テキスト(またはカスタムスロット) | <p>詳細な説明</p> / <Fragment slot="content">...</Fragment> |
callToAction | Object | アクションを促すボタンやリンクの設定 | { text: 'もっと見る', href: '/about' } |
callToAction2 | Object | アクションを促すボタンやリンクの設定 | { text: 'もっと見る', href: '/about' } |
使用例
<HeroText
title="ウェルカム トゥ アワ サイト"
subtitle="あなたの旅はここから始まります"
tagline="次世代のウェブ体験"
content="<p>ここに詳細な説明を入れます。</p>"
callToAction={{
text: 'もっと見る',
href: '/about'
}}
/>
HeroText
コンポーネントは、主にテキスト情報を伝えるためのシンプルながらも効果的な方法を提供します。タイトル、サブタイトル、タグラインを通じて、ウェブサイトの主要なメッセージやコンセプトを訪問者に伝えることができます。また、callToAction
プロパティを使用して、特定のアクション(例えばページへのリンクやボタンクリック)を促すことができます。
Steps.astro
コンポーネント
- プロセス表示:
Steps
コンポーネントは、プロセスや手順を順序立てて表示するのに特化しています。例えば、サービスの利用方法や製品の機能説明など、ステップバイステップの情報提供に適しています。 - インタラクティブな要素:
Steps
は、インタラクティブな要素(例えばプログレスバー、ナンバリングされたステップなど)を含むことができ、情報をダイナミックかつ視覚的に伝えることができます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | ステップセクションのタイトル | "スタートガイド" |
subtitle | String | タイトルの下に表示されるサブタイトル | "初めての方へ" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "簡単な3ステップ" |
items | Array | ステップのリスト(各アイテムは title , description , icon を含む) | [{ title: 'ステップ1', description: '説明1', icon: 'icon-name' }] |
image | String / Object | ステップセクションの背景画像または画像要素 | { src: 'steps.jpg', alt: 'ステップ画像' } |
isReversed | Boolean | ステップの表示順を逆にするかどうか | false |
id | String | コンポーネントのID | "steps-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Steps
id="steps-section"
title="スタートガイド"
subtitle="初めての方へ"
tagline="簡単な3ステップ"
items={[
{
title: 'ステップ1: 登録',
description: '無料でアカウントを作成します。',
icon: 'tabler:user-plus'
},
{
title: 'ステップ2: 設定',
description: 'プロフィール情報を設定します。',
icon: 'tabler:settings'
},
{
title: 'ステップ3: 開始',
description: 'サービスを利用し始めます。',
icon: 'tabler:play'
}
]}
image={{
src: '/images/steps.jpg',
alt: 'ステップ画像'
}}
isReversed={false}
/>
Steps2.astro
コンポーネント
Steps
との違い
- レイアウトの多様性:
Steps2
はSteps
と比較して、異なるレイアウトとデザインオプションを提供します。これにより、より多様なビジュアルスタイルでステップを表示することができます。 - 追加のカスタマイズオプション:
Steps2
では、異なるスタイリングと構成の選択肢が提供され、より具体的なデザインニーズに対応できます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | ステップセクションのタイトル | "お問い合わせプロセス" |
subtitle | String | タイトルの下に表示されるサブタイトル | "お気軽にお問い合わせください" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "簡単3ステップでお問い合わせ" |
callToAction | Object | アクションを促すボタンやリンクの設定 | { text: 'お問い合わせ', href: '/contact' } |
items | Array | ステップのリスト(各アイテムは title , description , icon を含む) | [{ title: 'ステップ1', description: '説明1', icon: 'icon-name' }] |
isReversed | Boolean | ステップの表示順を逆にするかどうか | false |
id | String | コンポーネントのID | "steps-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Steps2
title="お問い合わせプロセス"
subtitle="お気軽にお問い合わせください"
tagline="簡単3ステップでお問い合わせ"
items={[
{
title: 'ステップ1: フォーム入力',
description: '必要情報をフォームに入力してください。',
icon: 'tabler:edit'
},
{
title: 'ステップ2: 内容確認',
description: '入力内容を確認してください。',
icon: 'tabler:check'
},
{
title: 'ステップ3: 送信',
description: 'フォームを送信して完了です。',
icon: 'tabler:send'
}
]}
callToAction={{
text: 'お問い合わせ',
href: '/contact'
}}
isReversed={false}
/>
CallToAction.astro
コンポーネント
CallToAction
コンポーネントは、ウェブサイトの訪問者に対して、特定の行動をとるよう促すことに特化しています。強調されたタイトル、サブタイトル、ボタンを通じて、ユーザーの注意を引き、ウェブサイトの目的に沿ったアクションを奨励します。背景オプションにより、コンポーネントのビジュアルインパクトをさらに高めることができます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String / Slot | コール・トゥ・アクションのタイトル(またはカスタムスロット) | "アクションを起こす" / <Fragment slot="title">...</Fragment> |
subtitle | String / Slot | タイトルの下に表示されるサブタイトル(またはカスタムスロット) | "今すぐ始めよう" / <Fragment slot="subtitle">...</Fragment> |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "特別オファー" |
actions | Array | アクションボタンのリスト(text , href , variant などを含む) | [{ text: '詳細はこちら', href: '/details', variant: 'primary' }] |
id | String | コンポーネントのID | "steps2-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<CallToAction
title={<Fragment slot="title">アクションを起こす</Fragment>}
subtitle={<Fragment slot="subtitle">今すぐ始めよう</Fragment>}
tagline="特別オファー"
actions={[
{
text: '詳細はこちら',
href: '/details',
variant: 'primary'
}
]}
bg={{
src: '/images/cta-bg.jpg',
alt: '背景画像'
}}
/>
FAQs.astro
コンポーネント
FAQs
コンポーネントは、ウェブサイト訪問者の一般的な疑問や懸念に対する回答を提供するための効果的な方法を提供します。視覚的に魅力的なレイアウトとインタラクティブな要素により、訪問者が必要な情報を簡単に見つけることができます。また、背景オプションにより、セクションのビジュアルインパクトをさらに高めることが可能です。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | FAQセクションのタイトル | "よくある質問" |
subtitle | String | タイトルの下に表示されるサブタイトル | "ご不明点を解消しましょう" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "お客様からの一般的な質問" |
items | Array | 質問とその回答のリスト(各アイテムは title , description を含む) | [{ title: 'Q1', description: 'A1' }] |
columns | Number | アイテムを表示する列の数 | 2 |
id | String | コンポーネントのID | "faqs-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<FAQs
title="よくある質問"
subtitle="ご不明点を解消しましょう"
tagline="お客様からの一般的な質問"
items={[
{
title: '商品の返品方法は?',
description: '商品到着後30日以内であれば、無条件で返品が可能です。'
},
{
title: '支払い方法にはどのようなものがありますか?',
description: 'クレジットカード、PayPal、銀行振込をご利用いただけます。'
}
]}
columns={2}
bg={{
src: '/images/faq-bg.jpg',
alt: '背景画像'
}}
/>
Testimonials.astro
コンポーネント
Testimonials
コンポーネントは、実際のユーザーや顧客の声を通じて、製品やサービスの価値を訪問者に伝える効果的な方法を提供します。各テスティモニアルは、ユーザーの体験談、名前、職業、写真を含むことができ、信頼性とリアリティを提供します。また、背景オプションにより、セクションのビジュアュアルインパクトをさらに高めることが可能です。callToAction
プロパティを使用することで、訪問者に対して他の顧客の声をさらに探求する機会を提供し、エンゲージメントを促進します。このコンポーネントは、製品やサービスの実際の影響を証明し、新規訪問者の信頼を築くのに役立ちます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | テスティモニアルセクションのタイトル | "お客様の声" |
subtitle | String | タイトルの下に表示されるサブタイトル | "私たちを選んだ理由" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "実際のユーザーの体験談" |
testimonials | Array | ユーザーの体験談や推薦文のリスト(testimonial , name , job , image を含む) | [{ testimonial: '...', name: '...', job: '...', image: {...} }] |
callToAction | Object | アクションを促すボタンやリンクの設定 | { text: 'もっと声を聞く', href: '/testimonials' } |
id | String | コンポーネントのID | "testimonials-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Testimonials
title="お客様の声"
subtitle="私たちを選んだ理由"
tagline="実際のユーザーの体験談"
testimonials={[
{
testimonial: 'この製品は私の日常を変えました。非常に使いやすく、効果的です。',
name: '山田太郎',
job: 'マーケティングマネージャー',
image: {
src: '/images/user1.jpg',
alt: '山田太郎'
}
},
{
testimonial: 'サービスの質に満足しています。顧客サポートも素晴らしい。',
name: '佐藤花子',
job: '起業家',
image: {
src: '/images/user2.jpg',
alt: '佐藤花子'
}
}
]}
callToAction={{
text: 'もっと声を聞く',
href: '/testimonials'
}}
bg={{
src: '/images/testimonials-bg.jpg',
alt: '背景画像'
}}
/>
Contact.astro
コンポーネント
Contact
コンポーネントは、ウェブサイト訪問者が簡単に問い合わせやコメントを送信できるようにするための効果的な方法を提供します。明確なタイトル、サブタイトル、そしてインタラクティブなフォームを通じて、訪問者に対して直接的なコミュニケーションのチャンネルを提供します。これにより、訪問者との対話を促進し、より深いエンゲージメントを生み出すことが可能になります。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | コンタクトセクションのタイトル | "お問い合わせ" |
subtitle | String | タイトルの下に表示されるサブタイトル | "ご質問やコメントはこちら" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "お気軽にご連絡ください" |
inputs | Array | フォームの入力フィールドのリスト(type , name , placeholder などを含む) | [{ type: 'text', name: 'name', placeholder: 'お名前' }] |
textarea | Object | テキストエリアの設定(name , placeholder などを含む) | { name: 'message', placeholder: 'メッセージ' } |
disclaimer | String | 免責事項や追加情報などのテキスト | "個人情報の取り扱いについて" |
button | Object | 送信ボタンの設定(text などを含む) | { text: '送信' } |
description | String | フォームの上または下に表示される追加の説明テキスト | "24時間以内にご返信いたします。" |
id | String | コンポーネントのID | "contact-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Contact
title="お問い合わせ"
subtitle="ご質問やコメントはこちら"
tagline="お気軽にご連絡ください"
inputs={[
{
type: 'text',
name: 'name',
placeholder: 'お名前'
},
{
type: 'email',
name: 'email',
placeholder: 'メールアドレス'
}
]}
textarea={{
name: 'message',
placeholder: 'メッセージ'
}}
disclaimer="個人情報の取り扱いについて"
button={{
text: '送信'
}}
description="24時間以内にご返信いたします。"
/>
Brands.astro
コンポーネント
Brands
コンポーネントは、協力ブランドやパートナー企業のロゴを視覚的に魅力的な方法で表示し、信頼性や協力関係を示します。複数のロゴやアイコンを効果的に配置することで、ビジネスの広範なネットワークや業界内での立ち位置を強調できます。また、背景やスタイリングオプションにより、セクションのビジュアルインパクトをカスタマイズすることが可能です。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | ブランドセクションのタイトル | "パートナーブランド" |
subtitle | String | タイトルの下に表示されるサブタイトル | "私たちと協力する企業" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "信頼と協力" |
icons | Array | 表示するブランドのアイコンのリスト(name を含む) | [{ name: 'brand1' }, { name: 'brand2' }] |
images | Array | 表示するブランドの画像のリスト(src , alt を含む) | [{ src: 'logo1.png', alt: 'ブランド1' }] |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: 'my-custom-class' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'brands-bg.jpg', alt: '背景画像' } |
使用例
<Brands
title="パートナーブランド"
subtitle="私たちと協力する企業"
tagline="信頼と協力"
icons={[
{ name: 'brand1' },
{ name: 'brand2' }
]}
images={[
{ src: '/images/logo1.png', alt: 'ブランド1' },
{ src: '/images/logo2.png', alt: 'ブランド2' }
]}
isDark={false}
classes={{ container: 'my-custom-class' }}
bg={{
src: '/images/brands-bg.jpg',
alt: '背景画像'
}}
/>
Pricing.astro
コンポーネント
Pricing
コンポーネントは、サービスや製品のさまざまな価格プランを効果的に提示し、訪問者が自分のニーズや予算に合ったプランを選択できるようにします。各プランには、価格、期間、特徴、購入オプションが明確に示され、比較や選択を容易にします。背景オプションにより、セクションのビジュアルインパクトをさらに強化することができます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | 価格プランセクションのタイトル | "プランと価格" |
subtitle | String | タイトルの下に表示されるサブタイトル | "あなたにぴったりのプランを選ぼう" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "お得なオプションをご用意" |
prices | Array | 価格プランのリスト(title , price , period , features , callToAction を含む) | [{ title: 'Basic', price: '9.99', period: '月額', features: ['機能1', '機能2'], callToAction: { text: '選ぶ', href: '/buy' } }] |
id | String | コンポーネントのID | "pricing-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Pricing
title="プランと価格"
subtitle="あなたにぴったりのプランを選ぼう"
tagline="お得なオプションをご用意"
prices={[
{
title: 'ベーシック',
price: '9.99',
period: '月額',
features: ['機能1', '機能2'],
callToAction: {
text: '選ぶ',
href: '/buy-basic'
}
},
{
title: 'プレミアム',
price: '19.99',
period: '月額',
features: ['機能1', '機能2', '機能3'],
callToAction: {
text: '選ぶ',
href: '/buy-premium'
}
}
]}
bg={{
src: '/images/pricing-bg.jpg',
alt: '背景画像'
}}
/>
Stats.astro
コンポーネント
Stats
コンポーネントは、組織やプロジェクトの主要な成果や数値を示すことによって、信頼性と専門性を強調します。ビジュアル要素(アイコンや数値)を使用して、重要な情報をダイナミックかつ魅力的な方法で提示します。背景オプションにより、セクションのビジュアルアピールをさらに強化し、訪問者の注意を引きつけます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
title | String | 統計セクションのタイトル | "私たちの成果" |
subtitle | String | タイトルの下に表示されるサブタイトル | "数字で見る成功のストーリー" |
tagline | String | タイトルの上に表示される小さなテキストまたはタグライン | "成長と実績" |
stats | Array | 統計情報のリスト(amount , title , icon を含む) | [{ amount: '10K+', title: 'ユーザー数', icon: 'tabler:user' }] |
id | String | コンポーネントのID | "pricing-section" |
isDark | Boolean | ダークモードを有効にするかどうか | false |
classes | Object | CSSクラスのカスタマイズ | { container: '...' } |
bg | String / Object | 背景のカスタマイズ(色、画像など) | "#f0f0f0" / { src: 'bg.jpg', alt: '背景画像' } |
使用例
<Stats
title="私たちの成果"
subtitle="数字で見る成功のストーリー"
tagline="成長と実績"
stats={[
{
amount: '10K+',
title: 'ユーザー数',
icon: 'tabler:user'
},
{
amount: '98%',
title: '顧客満足度',
icon: 'tabler:thumbs-up'
},
{
amount: '50+',
title: '提携企業',
icon: 'tabler:building'
}
]}
bg={{
src: '/images/stats-bg.jpg',
alt: '背景画像'
}}
/>
Note.astro
コンポーネント
Note
コンポーネントは、ウェブサイト上で特別なお知らせや通知を訪問者に伝えるための簡潔かつ効果的な方法を提供します。シンプルなデザインとオプショナルなアイコンを使用して、メッセージの重要性や緊急性を強調することができます。これにより、訪問者の注意を引きつけ、特定の情報やアップデートに対する意識を高めることが可能です。
プロパティ
なし(未実装)
使用例
<Note
text="新しいアップデートがあります!"
icon="tabler:alert-circle"
/>
Announcement.astro
コンポーネント
Announcement
コンポーネントは、ウェブサイト上で重要な告知やニュースを効果的に伝えるための方法を提供します。目立つタイトル、詳細なコンテンツ、そして関連するアクションボタンを通じて、訪問者に情報を伝達し、関連ページやリソースへのアクセスを促進します。背景オプションにより、告知のビジュアルインパクトをさらに強化し、訪問者の関心を引きつけることができます。
Note
との違い
- 告知目的の特化:
Announcement
コンポーネントは、特定のイベント、キャンペーン、または重要な情報の告知に特化しています。これは、新しい製品のリリース、特別なオファー、または重要なニュースの発表などに使用されます。 - 注目を集めるデザイン:
Announcement
は、訪問者の注意を引くためのより目立つデザイン要素を持ち、告知内容を強調します。
プロパティ
なし(未実装)
使用例
<Announcement
title="重要なお知らせ"
content="<p>新製品がリリースされました!</p>"
actions={[
{
text: '詳細を見る',
href: '/new-product',
variant: 'primary'
}
]}
bg={{
src: '/images/announcement-bg.jpg',
alt: '背景画像'
}}
/>
Header.astro
コンポーネント
Header
コンポーネントは、ウェブサイトのナビゲーションとブランドアイデンティティを訪問者に提示します。リンクのリスト、アクションボタン、オプショナルなテーマ切り替えやRSSフィードリンクを通じて、ウェブサイト内のさまざまなセクションへのアクセスを容易にします。isSticky
オプションにより、ヘッダーを画面上部に固定し、ユーザビリティを高めることができます。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
id | String | ヘッダーのID | "header" |
links | Array | ナビゲーションリンクのリスト(text , href を含む) | [{ text: 'ホーム', href: '/' }] |
actions | Array | アクションリンクのリスト(通常はボタン形式で、text , href を含む) | [{ text: 'お問い合わせ', href: '/contact' }] |
isSticky | Boolean | ヘッダーを画面上部に固定するかどうか | true |
isDark | Boolean | ダークモードスタイルを使用するかどうか | false |
isFullWidth | Boolean | ヘッダーを全幅で表示するかどうか | false |
showToggleTheme | Boolean | テーマ切り替えボタンを表示するかどうか | false |
showRssFeed | Boolean | RSSフィードリンクを表示するかどうか | false |
position | String | 表示位置 | center |
使用例
<Header
id="header"
links={[
{ text: 'ホーム', href: '/' },
{ text: '製品', href: '/products' },
{ text: 'サービス', href: '/services' }
]}
actions={[
{ text: 'お問い合わせ', href: '/contact' }
]}
isSticky={true}
isDark={false}
isFullWidth={false}
showToggleTheme={false}
showRssFeed={false}
/>
Footer.astro
コンポーネント
Footer
コンポーネントは、ウェブサイトの最下部で訪問者に追加情報を提供し、ウェブサイトのナビゲーションとリソースへのアクセスを容易にします。複数のリンクグループ、ソーシャルメディアリンク、および重要な法的情報が含まれ、ウェブサイトのプロフェッショナルな外観を補完します。また、theme
プロパティにより、フッターのビジュアルスタイルをカスタマイズすることが可能です。
プロパティ
プロパティ名 | 型 | 説明 | 例 |
links | Array | ナビゲーションリンクのグループ(title , links を含む) | [{ title: '製品', links: [{ text: '新製品', href: '/new-products' }] }] |
secondaryLinks | Array | サブナビゲーションリンク(text , href を含む) | [{ text: 'プライバシーポリシー', href: '/privacy' }] |
socialLinks | Array | ソーシャルメディアリンク(icon , href を含む) | [{ icon: 'tabler:facebook', href: '<https://facebook.com>' }] |
footNote | String | フッターの注記や著作権情報 | "© 2024 My Website" |
theme | String | フッターのテーマ(light または dark ) | "dark" |
使用例
<Footer
links={[
{
title: '製品',
links: [{ text: '新製品', href: '/new-products' }]
},
{
title: '企業情報',
links: [{ text: '私たちについて', href: '/about' }]
}
]}
secondaryLinks={[
{ text: 'プライバシーポリシー', href: '/privacy' },
{ text: '利用規約', href: '/terms' }
]}
socialLinks={[
{ icon: 'tabler:facebook', href: '<https://facebook.com>' },
{ icon: 'tabler:twitter', href: '<https://twitter.com>' }
]}
footNote="© 2024 My Website"
theme="dark"
/>