このポートフォリオサイトの作り方

2025年10月3日

　私のポートフォリオサイトへお越しいただきありがとうございます。 このサイトを作るに至った経緯及びその過程をここに記録しておきます。

このサイトを作るに至った経緯

　博士進学を決めてから、また自分で作品を作るようになってから、自分の業績や作品をどこかに記録としてまとめて公開しておきたいと思うようになりました。私がポートフォリオサイトに求めるものはただ「業績、研究・作品を掲載し、ブログを投稿できるようにすること」と「日本語と英語両方のページを作ること」です。

　最初はGoogle Sitesでポートフォリオを作ったのですが、日本語と英語の切り替えができないためやめて、でもHTMLとかそういうのは全く分からなかったので、シンプルにHugoのテンプレートをGitLab Pagesで走らせることにしました。Hugo + GitLab Pagesでブログを始めるを読めば自分で好きなテンプレートを選んでサイトを作ることができると思います。

　ただ、Hugoのテンプレートはなかなかに厄介で、自分が望んだように見せるには複雑なことができるテンプレートを選ばないといけないのですが、そうするとそのテンプレートの更新が止まるとHugoのバージョンに対応しなくなってページを実行できなくなってしまうことがあります。これまで覚えている限りでは、FeelItやBlowfishなどを使いました。

　Blowfishは現在も更新が継続的でよかったのですが、いつかは更新も止まるだろうし、テンプレートに振り回されるこんな日々は嫌だなと思っていたちょうどその頃、大学のサークルの同級生との飲み会で「LLMとウェブサイトの相性が良すぎる」という話を耳にしました。今まで紆余曲折あった私は早速、Geminiを使ってHugoとGitLab Pagesでテンプレートを用いずに自分でサイトを作ってみることにしました。

　すると話の通り、問題なく2日ほどで望んだ機能を持つサイトを構築することができました。そもそも私が望むサイトはそこまで込み入ったものではなかったので、いわゆる標準的なもので済むのも良かったのかもしれません。

参考にしたポートフォリオサイト

　このサイトを作るにあたり色んな人のサイトを参考にしました。ありがとうございました。

Geminiに与えるべき必要最低限の情報

　以下、私がGeminiとの会話の履歴を改めて整理し、サイトの骨格を作るうえで必要最低限の情報をリストアップします。最初に、AIに以下のようなサイトの全体像を伝えるとスムーズに開発が進みます。

  • どんな環境で作るか？
    • Hugo（静的サイトジェネレーター）と GitLab Pages（ホスティングサービス）を利用する。テンプレートは使わずゼロから構築する。
  • サイトの基本情報は？
    • サイトのタイトル、著者名、サイトのURL。
    • 多言語対応の有無（今回は日本語と英語）。どちらをデフォルトの言語にするか。
  • ページの構成は？
    • どのようなページが必要か（例：自己紹介、研究、ブログ）。
    • 階層構造（例：トップページがあり、その下にabout, research, docsが来るように）。 
          / (ホームページ)
    ├── /about/ (自己紹介ページ)
    ├── /research/ (研究テーマ一覧ページ)
    │   └── /research/my-first-research/ (個別の研究ページ)
    └── /docs/ (ブログ記事一覧ページ)
        └── /docs/my-first-post/ (個別の記事ページ)
    • 各ページにどのような要素を表示したいか（例：トップページはプロフィール写真と自己紹介を2カラムで表示）。
  • 基本的なデザインの希望は？
    • 全体の配色（アクセントカラーなど）。
    • 使用したいフォント。
    • ヘッダーやフッターに何を表示したいか（ソーシャルリンクなど）。

さらに加えたこのサイトにオリジナルな機能・設定

　AIとの対話を通じて、基本的な骨格に加えて以下のような機能を実装していきました。多くのエラーと修正を繰り返しましたが、その過程も記録として残します。

  • ページ構成と多言語対応
    • テンプレートの分担: サイトの骨格となるbaseof.html、ホームページ用のindex.html、セクション一覧用のlist.html、個別記事用のsingle.htmlを作成し、役割を分担させました。
    • 多言語対応: hugo.tomlで英語と日本語を設定。当初は日本語がメインのURLでしたが、途中から英語をメイン(savoia-mech.gitlab.io/about/)、日本語をサブディレクトリ(savoia-mech.gitlab.io/ja/about/)に切り替えました。日付のフォーマットも言語ごとに変更しています。
  • デザインとレイアウト
    • ヘッダーの追従（スティッキーヘッダー）: スクロールしてもヘッダーが画面上部に固定されるようにしました。CSSのposition: stickyを使い、コンテンツがヘッダーに隠れないように本文側にmargin-topを設定するのがポイントです。また、記事タイトル部分の<header>タグと区別するために、ID (#site-header) を使ってスタイルを適用しました。
    • フォントと配色: フォントは当初「游ゴシック」を試しましたが、最終的にWebフォントの「Noto Sans JP」をGoogle Fontsから読み込む形に落ち着きました。アクセントカラー（#41A9D1）をCSS変数として定義し、サイト全体で統一感を持たせています。
    • 2カラムのプロフィール: ホームページに、左に画像、右に自己紹介文が並ぶレイアウトを実装しました。CSSのdisplay: flexを使い、画面幅が狭い場合は縦に並ぶように@mediaクエリで調整しています。
    • レスポンシブ対応（ハンバーガーメニュー）: スマートフォンなどの画面が狭いデバイスでは、ナビゲーションメニューを三本線の「ハンバーガーアイコン」に格納し、クリックすると全画面メニューが開くようにしました。これにはHTML、CSS、JavaScriptを組み合わせた修正が必要で、特にCSSの優先順位の問題（#site-header .main-navとbody.nav-open .main-navのどちらが強いか）で何度かデバッグを行いました。
  • コンテンツ表示の強化
    • 目次（Table of Contents）: 記事の見出し（##, ###）を自動で抽出し、画面右側に追従するサイドバーとして表示。MarkdownのフロントマターにshowToc: falseと記述すれば、ページごとに非表示にすることも可能です。タイトルの「目次 / Table of Contents」は多言語対応させましたが、最終的に不要と判断し削除しました。
    • 画像表示のショートコード: 画像の幅をパーセントで指定できるfigureショートコードや、複数の画像を横に並べるgalleryショートコードを自作しました。これにより、Markdown内での画像配置が柔軟になりました。
    • ソーシャルメディアアイコン: 自己紹介文の下に、XやGitHubなどのアイコンを配置。SVGコードをテンプレートに直接埋め込み、CSSのfill: currentColorで文字色と連動させることで、ダークモードにも自動で対応するようにしています。
  • インタラクティブ機能
    • ダークモード切替: 右上のアイコンでライトモードとダークモードを切り替えられるようにしました。JavaScriptで<body>タグに.dark-modeクラスを付け外しし、ユーザーの選択はlocalStorageに保存して次回訪問時も引き継がれるようにしています。最初はOSの設定に連動していましたが、「最初は必ずライトモードで表示」という仕様に変更しました。
  • 公開とSEO
    • GitLab Pagesへのデプロイ: .gitlab-ci.ymlファイルを記述し、mainブランチにプッシュされると自動でサイトがビルド・公開されるように設定しました。
    • ファビコン: 多くのデバイスに対応できるよう、RealFaviconGeneratorでファビコン一式を作成し、staticフォルダに配置しました。
    • SEO対策: 検索結果に表示されやすくなるよう、descriptionメタタグの追加、robots.txtの設置、そしてGoogle Search Consoleへの登録とサイトマップ送信を行いました。