Webサイトテンプレート

PaperMod

A fast, clean, responsive Hugo theme

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

Portfolio · Blog · 無料

PaperMod

ページ

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

/hugo-PaperMod/PaperMod
PaperMod Webサイトテンプレート、/hugo-PaperMod/ ページ、1 番目
/hugo-PaperMod/aboutAbout | PaperMod
PaperMod Webサイトテンプレート、/hugo-PaperMod/about ページ、1 番目PaperMod Webサイトテンプレート、/hugo-PaperMod/about ページ、2 番目

デザイン解説

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

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

Overall

blog, clean, minimal, light

Palette

background #f5f5f5; surfaces [#ffffff, #1e1e1e]; text #1e1e1e; muted text #6c6c6c; primary #000000; accents []

Type

headings (-apple-system, 700, title case); body (-apple-system, 16px); scale (h1: 34px, h2: 24px, h3: 18px)

Shape & spacing

button radius 18px, card radius 8px, no borders, no shadows, section spacing 40px, content width 718px

Sections (top to bottom)
  • Header — horizontal nav bar with logo, language selector, and menu links, white background
  • Hero — centered headline, subheading, bullet list, social icons (GitHub, Discord, Twitter, Coffee), white background
  • Article cards — three stacked cards with titles, excerpts, metadata, white background, rounded corners
  • Pagination — "Next 2/4" button, black pill-shaped, right-aligned
  • Footer — centered copyright and attribution text, light gray
Signature details
  • Minimalist layout with generous whitespace
  • Rounded card corners and pill-shaped buttons
  • Consistent use of -apple-system font across all text
  • Social icons as inline SVGs with uniform size
  • Clean, unobtrusive pagination control
  • Language toggle in header with flag icon
Other pages
  • /about: full-width content with table of contents, feature list, images, and call-to-action buttons

テンプレート情報

カテゴリ
Portfolio, Blog, Starter Kit
技術
Hugo
ライセンス
MIT
作者
Aditya Telange
掲載元
Hugo Themes
価格
無料
  • blog
  • dark
  • light
  • minimal
  • multilingual
  • personal

オリジナルデザイン:Aditya Telange(Hugo Themes に掲載)。Ottermind はテンプレートのコードをコピーせず、ブリーフをもとに新しいサイトを作ります。

Ottermind が起点にするブリーフ

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

Build a portfolio website inspired by the "PaperMod" template. Reference brief: A fast, clean, responsive Hugo theme Style and features to reflect: blog, dark, light, minimal, multilingual, personal. Use original copy and imagery for my brand rather than the reference's placeholder content.

このテンプレートの使い方

  1. 1

    「このテンプレートを使う」をクリックすると、ブリーフ入りで Ottermind Studio が開きます。

  2. 2

    ブリーフにブランド、対象者、ページ、内容を書き足します。

  3. 3

    Ottermind がこのデザインに着想を得た新しいサイトを作ります。チャットで続けて調整できます。