Webサイトテンプレート

Grayscale

A multipurpose one page Bootstrap theme created by Start Bootstrap

このテンプレートの説明はまだ日本語に対応していないため、英語で表示しています。

Landing Page · 無料

ライブデモを開くソースリポジトリを見る

ページ

ライブデモのページごとのスクリーンショットです。枠内をスクロールするとページ全体を見られます。

Grayscale Webサイトテンプレート、/startbootstrap-grayscale/ ページ、2 番目 — /startbootstrap-grayscale/Grayscale - Start Bootstrap Theme

デザイン解説

このテンプレートのデザインを AI が読み解いたものです：配色、書体、余白、セクション、特徴的なディテール。テンプレートを使うと Ottermind はここから始めます。

この解説はまだ日本語に対応していないため、英語で表示しています。

Overall: landing page, minimalist, low density, dark
Palette: background #ffffff; surfaces [#f8f9fa, #000000, #64a19d]; text #000000; muted text #ffffff; primary #64a19d; accents []
Type: headings Varela Round, 500, uppercase; body Nunito, 16px; scale h1 104px / h2 20px / h3 16px
Shape & spacing: button/card radius 6px, no borders, subtle drop shadows, section spacing 80px, content width 1224px
Sections (top to bottom): Hero — full-width grayscale mountain image overlay, centered headline "GRAYSCALE" in large uppercase, subheading in sentence-case, teal CTA button "GET STARTED", navigation bar with logo and links at top-right
Feature — dark background, centered heading "Built with Bootstrap 5", paragraph text below, tablet mockup angled at bottom right showing theme preview
Portfolio — grid of four black-and-white landscape images with alternating text blocks on white or black backgrounds, each with title and description, vertical teal accent line on left of first block
Newsletter — dark background with foggy mountain backdrop, centered email input field and teal "NOTIFY ME!" button, subscription prompt above
Footer — three light cards with icons (address, email, phone), contact details, social icons (Twitter, Facebook, LinkedIn), copyright text centered
Signature details: Monochromatic grayscale imagery throughout
Teal accent color used sparingly for CTAs and highlights
Clean sans-serif typography with contrast between bold headings and soft body text
Floating tablet mockup with transparent screen effect
Minimalist card layout with consistent padding and rounded corners
Subtle gradient overlays on hero and footer sections
Other pages: /about: not shown
/projects: not shown
/contact: not shown

テンプレート情報

カテゴリ: Landing Page
技術: Bootstrap, HTML5
ライセンス: MIT
作者: Start Bootstrap
掲載元: Start Bootstrap
価格: 無料

bootstrap
bootstrap-4
bootstrap-5
bootstrap-5-template
bootstrap-template
bootstrap-theme
bootstrap4
bootstrap5
bootstrap5-template
css
free
html

オリジナルデザイン：Start Bootstrap（Start Bootstrap に掲載）。Ottermind はテンプレートのコードをコピーせず、ブリーフをもとに新しいサイトを作ります。

Ottermind が起点にするブリーフ

Studio で下書きとして開きます。送信前にブランド、対象者、ページを書き足してください。

Build a landing page website inspired by the "Grayscale" template. Reference brief: A multipurpose one page Bootstrap theme created by Start Bootstrap Style and features to reflect: bootstrap, bootstrap-4, bootstrap-5, bootstrap-5-template, bootstrap-template, bootstrap-theme. Use original copy and imagery for my brand rather than the reference's placeholder content.