polidog lab

Hugoブログのリニューアル - Tailwind CSSとClaudeのプロンプトエンジニアリングで実現したデザイン改善

claudeai hugo tailwindcss デザイン webデザイン

はじめに

最近、当ブログのデザインをリニューアルしました。デザインの参考元として Tailwind UI の Spotlight テンプレート を使用し、AI アシスタント Claude と対話しながら改修を行いました。今回は、そのプロセスと技術的な側面について共有します。

リニューアルの目的

ブログのリニューアルには主に以下の目的がありました：

  1. モダンでクリーンなデザインの実現
  2. レスポンシブ対応の強化
  3. 読みやすさの向上
  4. ダークモード対応

使用した技術

  • Hugo: 静的サイトジェネレーター
  • Tailwind CSS: ユーティリティファーストのCSSフレームワーク
  • Claude AI: プロンプトを通じたコード生成と改修支援

リニューアルのプロセス

1. 環境構築

まず、既存のHugoブログに対してTailwind CSSを導入するための環境を整えました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// tailwind.config.js
module.exports = {
  content: [
    "./layouts/**/*.html",
    "./themes/polidog/layouts/**/*.html",
    "./content/**/*.md",
    "./content/**/*.html"
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          // プライマリカラーの設定
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
          950: '#082f49',
        }
      },
      typography: {
        DEFAULT: {
          css: {
            maxWidth: '65ch',
            color: 'var(--tw-prose-body)',
            a: {
              color: 'var(--tw-prose-links)',
              textDecoration: 'underline',
              fontWeight: '500',
            },
          },
        },
      },
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

また、ビルドプロセスも設定しました：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// package.json
{
  "scripts": {
    "dev": "hugo server",
    "build": "hugo --minify",
    "build:css": "tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/style.css",
    "watch:css": "tailwindcss -i ./assets/css/tailwind.css -o ./assets/css/style.css --watch"
  },
  "dependencies": {
    "@tailwindcss/typography": "^0.5.10",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.33",
    "postcss-cli": "^11.0.0",
    "tailwindcss": "^3.4.0"
  }
}

2. ベーステンプレートの改修

Hugoのベーステンプレート（baseof.html）をTailwind CSSに対応するように修正しました。

修正前：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html lang="ja">
<head>
  {{ partial "head.html" . }}
</head>
<body>
  <header>
    <div class="container">
    {{ partial "header.html" . }}
    </div>
  </header>
  <main>
    <div class="container">
      {{ block "main" . }}{{ end }}
    </div>
  </main>
  <footer>
    {{ partial "footer.html" . }}
  </footer>
</body>
</html>

修正後：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html lang="ja" class="h-full antialiased">
<head>
  {{ partial "head.html" . }}
</head>
<body class="flex min-h-full bg-white dark:bg-slate-900">
  <div class="w-full">
    <header class="relative">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {{ partial "header.html" . }}
      </div>
    </header>
    <main>
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16">
        {{ block "main" . }}{{ end }}
      </div>
    </main>
    <footer class="border-t border-gray-200 dark:border-gray-800 mt-16">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
        {{ partial "footer.html" . }}
      </div>
    </footer>
  </div>
</body>
</html>

3. ヘッダーとフッターの改修

ナビゲーションメニューを含むヘッダー部分も改修しました。

修正後のヘッダー：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<div class="flex items-center justify-between py-6">
  <div class="flex items-center">
    <a href="/" class="text-2xl font-bold text-gray-900 dark:text-white">{{ site.Title }}</a>
  </div>
  <div class="ml-auto flex items-center gap-6">
    <nav class="hidden md:block">
      <ul class="flex items-center gap-8">
        <li><a href="/archives" class="text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Archives</a></li>
        <li><a href="/tags" class="text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">Tags</a></li>
        <li><a href="/about" class="text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">About</a></li>
      </ul>
    </nav>
    <!-- ソーシャルリンクとモバイルメニューボタン -->
  </div>
</div>

フッターもシンプルでモダンなデザインに変更しました。

4. 記事一覧の改善

記事一覧ページでは、画像を表示せず、タイトル、日付、カテゴリ、タグのみを表示するシンプルなデザインにしました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<article class="group py-3">
  <div class="flex flex-col">
    <h2 class="text-lg font-semibold text-gray-900 group-hover:text-primary-600 dark:text-white dark:group-hover:text-primary-400">
      <a href="{{ .RelPermalink }}" class="hover:underline">
        {{ .Title }}
      </a>
    </h2>
    <div class="flex flex-wrap items-center justify-between mt-2 text-sm">
      <div class="text-gray-500 dark:text-gray-400">
        <time datetime="{{ .Date.Format "2006-01-02T15:04:05-07:00" }}">
          {{ .Date.Format "2006年1月2日" | replaceRE "^0" "" }}
        </time>
        
        {{ if .Params.categories }}
        <span class="ml-1"></span>
        <span>
          {{ range first 1 (.GetTerms "categories") }}
          <a href="{{ .RelPermalink }}" class="text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-300">{{ .Name }}</a>
          {{ end }}
        </span>
        {{ end }}
      </div>
      
      {{ if .GetTerms "tags" }}
      <div class="flex flex-wrap gap-x-2 gap-y-1">
        {{ range first 3 (.GetTerms "tags") }}
        <a href="{{ .RelPermalink }}" class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
          {{ .Name }}
        </a>
        {{ end }}
      </div>
      {{ end }}
    </div>
  </div>
</article>

5. 記事詳細ページの改善

記事詳細ページでは、コンテンツの読みやすさを重視したデザインにしました。@tailwindcss/typography プラグインを活用して、美しいタイポグラフィを実現しています。

1
2
3

<div class="mt-10 prose prose-slate max-w-none dark:prose-invert prose-headings:font-semibold prose-headings:tracking-tight prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-pre:p-0 prose-pre:bg-transparent prose-pre:overflow-x-auto prose-code:text-primary-700 dark:prose-code:text-primary-300">
  {{ .Content }}
</div>

6. コードブロックのシンタックスハイライト改善

コードブロックのシンタックスハイライトも改善し、見やすさを向上させました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* シンタックスハイライト用スタイル */
.highlight {
  background-color: #1a1a2e;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  overflow-x: auto;
  width: 100%;
}

.highlight pre {
  padding: 1rem;
  margin: 0;
  overflow-x: auto;
  tab-size: 4;
  -moz-tab-size: 4;
  -o-tab-size: 4;
}

.highlight code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #f8f8f2;
  display: grid;
  white-space: pre;
  letter-spacing: normal;
}

7. ページネーションの改良

ページネーションを視覚的に分かりやすくしました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<nav class="mt-12 flex flex-wrap items-center justify-center border-t border-gray-200 pt-8 dark:border-gray-800">
  <div class="flex items-center space-x-1 sm:space-x-2">
    <!-- ページネーションのコントロール -->
    {{ range $paginator.Pagers }}
      {{ if and (ge .PageNumber $lower_limit) (le .PageNumber $upper_limit) }}
        {{ if eq . $paginator }}
        <span class="inline-flex h-10 w-10 items-center justify-center rounded-md border border-primary-500 bg-primary-50 text-sm font-medium text-primary-600 focus:outline-none dark:border-primary-400 dark:bg-primary-900/20 dark:text-primary-400">
          {{ .PageNumber }}
        </span>
        {{ else }}
        <a href="{{ .URL }}" class="inline-flex h-10 w-10 items-center justify-center rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300">
          {{ .PageNumber }}
        </a>
        {{ end }}
      {{ end }}
    {{ end }}
  </div>
</nav>

8. 月別アーカイブの追加

月別アーカイブ機能を新たに追加して、コンテンツの整理を改善しました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="space-y-8">
  {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) 30 }}
  {{ $groupedPages := $paginator.Pages.GroupByDate "2006-01" }}
  
  {{ range $groupedPages }}
  <div class="mb-6">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
      {{ $dateParts := split .Key "-" }}
      {{ index $dateParts 0 }}年{{ index $dateParts 1 }}月
    </h2>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
      {{ range .Pages }}
      <li class="py-2">
        <a href="{{ .RelPermalink }}" class="flex justify-between items-center group">
          <span class="text-gray-900 group-hover:text-primary-600 dark:text-white dark:group-hover:text-primary-400">{{ .Title }}</span>
          <span class="text-sm text-gray-500 dark:text-gray-400">{{ .Date.Format "2006年1月2日" | replaceRE "^0" "" }}</span>
        </a>
      </li>
      {{ end }}
    </ul>
  </div>
  {{ end }}
</div>

9. 記事間ナビゲーションの改善

記事の前後へのナビゲーションをより直感的なカード形式に変更しました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<nav class="mt-12 mb-8">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    {{ if .NextInSection }}
    <a href="{{ .NextInSection.Permalink }}" class="group flex p-4 rounded-lg border border-gray-200 hover:border-primary-300 hover:bg-primary-50 dark:border-gray-700 dark:hover:border-primary-600 dark:hover:bg-primary-900/10 transition-all duration-200">
      <div class="mr-4 flex-shrink-0 self-center text-gray-400 group-hover:text-primary-600 dark:text-gray-500 dark:group-hover:text-primary-400">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="flex-1">
        <p class="text-sm font-medium text-gray-500 group-hover:text-primary-600 dark:text-gray-400 dark:group-hover:text-primary-400">前の記事</p>
        <p class="mt-1 text-base font-semibold text-gray-900 group-hover:text-primary-600 dark:text-white dark:group-hover:text-primary-400 line-clamp-1">{{ .NextInSection.Title }}</p>
      </div>
    </a>
    {{ else }}
    <div></div>
    {{ end }}
    
    {{ if .PrevInSection }}
    <!-- 次の記事へのリンク -->
    {{ end }}
  </div>
</nav>

Claudeとのプロンプトエンジニアリング

このリニューアルの過程で、Claude AIにいくつかの具体的なプロンプトを使用しました。以下に、効果的だったプロンプトの例を示します。

ベースデザインの改修プロンプト

1

自分のブログをいい感じにしたい。 https://spotlight.tailwindui.com/articles/introducing-animaginary このURLのサイトを参考に修正してもらえますか？ Hugoを使ってブログを構築しています。

このプロンプトにより、Tailwind UIのSpotlightデザインを参考にした基本的なレイアウト構造が提案されました。

シンプルな記事一覧への変更

1

記事一覧はシンプルに、タイトル、日付、カテゴリ、タグのみ表示にしたいですね。

このプロンプトで、記事一覧のデザインをよりシンプルにし、本当に必要な情報のみを表示するように変更しました。

コードハイライトの修正

1

コードのシンタックスハイライトが崩れているようです。

このプロンプトにより、コードブロックのシンタックスハイライトの問題が修正されました。

月別アーカイブの追加

1

月ごとの一覧とかってHugo作れないんだっけ？

このプロンプトを通じて、月別アーカイブ機能の実装方法が提案されました。

記事間ナビゲーションの改良

1

ここをもう少しわかりやすくする方法ないかな？

このシンプルな問いかけにより、記事間のナビゲーションが視覚的により分かりやすいカードスタイルに改善されました。

学んだこと

このリニューアルプロセスを通じて、以下のことを学びました：

  1. Tailwind CSSの効率性: ユーティリティクラスベースのアプローチは、カスタムCSSを書く時間を大幅に削減します。

  2. AIとの協働: 明確なプロンプトを使用することで、AIは効果的なコード提案を生成できます。

  3. 段階的な改善: 一度にすべてを変更するのではなく、一つずつ問題を解決していくアプローチが効果的でした。

  4. ユーザーエクスペリエンスの重視: デザインの美しさだけでなく、読みやすさや使いやすさを優先しました。

まとめ

Hugoブログを現代的でユーザーフレンドリーなデザインにリニューアルすることができました。Tailwind CSSのユーティリティクラスとAIアシスタントの力を組み合わせることで、効率的に高品質なデザイン改善を実現できました。

次のステップとしては、コンテンツの質の向上や、SEO対策の強化などを検討しています。ブログは常に進化し続けるプロジェクトであり、今後も継続的に改善していく予定です。

自分のブログをカスタマイズしたい方にとって、今回のプロセスが参考になれば幸いです。

カテゴリ

tech
この記事をXで共有
comments powered by Disqus