固定サイドバーと縦長レイアウトを採用したワンページテンプレート「Prologue」徹底レビュー｜機能と構成を解説
Prologueは、作品や自己紹介を1ページでコンパクトに魅せたいクリエイター向けのテンプレートです。固定サイドバーとスクロール連動ナビゲーション、問い合わせフォームを搭載しています。画面遷移を行わずに主要な情報へ素早くアクセスできる構成です。
テンプレート概要
| テンプレート名 | Prologue |
|---|---|
| 配布元 | HTML5 UP |
| カテゴリ | ポートフォリオ |
| レスポンシブ | 対応 |
| ライセンス | Creative Commons Attribution（クレジット表記で商用利用可） |
| デモページ | デモを見る |
こんな方におすすめ
- 過去の制作物や作品を1ページでまとめて紹介したいデザイナー
- プロフィールと問い合わせ口をシンプルに配置したサイトを構築したいフリーランス
- スクロール移動と連動したメニューで操作性を高めたい個人事業主
- スマートフォンやPCなど異なる画面サイズで一元表示したいクリエイター
このテンプレートの特徴
画面端に固定されるサイドメニュー
画面左側にプロフィール写真や名前、ナビゲーションが常に固定表示されます。ページを下にスクロールしてもメニューが画面外に消えないため、閲覧者がいつでも別のセクションへ移動できます。
スクロールに連動するナビゲーション機能
ページをスクロールして表示位置が変わると、サイドバー内の対応するメニュー項目が自動的にハイライトされます。閲覧者が現在ページのどの位置を見ているかを把握しやすい構造です。
一覧性に優れた作品ギャラリー枠
ポートフォリオセクションにはグリッド状の画像配置エリアが用意されています。制作実績や写真作品を敷き詰めて掲載でき、視覚的に実績をアピールできます。
標準搭載の問い合わせフォーム
ページ下部に名前、メールアドレス、メッセージ本文を入力できる問い合わせフォームが配置されています。外部サイトへ遷移させることなく、閲覧者からの連絡を直接受け取ることができます。
閲覧環境に応じた表示の自動最適化
スマホ・タブレット・PCすべてで見やすいレイアウトに自動調整されます。画面幅の狭い端末ではサイドメニューの配置が最適化され、小さな画面でも可読性が維持されます。
Font Awesomeによる視覚的アイコン表示
ナビゲーションメニューや各セクションの目印としてアイコンフォントが組み込まれています。文字だけの表示に比べて直感的な操作をサポートします。
技術仕様
| フレームワーク | 独自HTML/CSS |
|---|---|
| 使用技術 | HTML5, CSS3, JavaScript |
| ページ数 | 1ページ（トップ（Intro / Portfolio / About Me / Contact）） |
| 主要ライブラリ | jQuery, Font Awesome |
類似テンプレートとの比較
| テンプレート | 配布元 | 特徴 | 詳細 |
|---|---|---|---|
| Prologue（本記事） | HTML5 UP | 独自HTML/CSS / 1ページ | - |
| おしゃれなポートフォリオ向け 無料ホームページテンプレート tp_portfolio1_photographer | Template Party | Template Party提供のテンプレート。ポートフォリオ用途で、リンクウェア（著作表示必須/有料で外せる）で利用可能。 | 詳細を見る |
| おしゃれなポートフォリオ向け 無料ホームページテンプレート tp_portfolio1_furniture | Template Party | Template Party提供のテンプレート。ポートフォリオ用途で、リンクウェア（著作表示必須/有料で外せる）で利用可能。 | 詳細を見る |
| おしゃれなポートフォリオ向け 無料ホームページテンプレート tp_portfolio1_cosme | Template Party | Template Party提供のテンプレート。ポートフォリオ用途で、リンクウェア（著作表示必須/有料で外せる）で利用可能。 | 詳細を見る |
ライセンスについて
Creative Commons Attributionライセンスのもとで配布されており、製作者のクレジット表記を行うことで商用利用および改変が可能です。
ポートフォリオの比較記事もチェック
デザイナー・カメラマン・フリーランス向け ポートフォリオ無料テンプレート10選【2026年版】
この記事で紹介した「Prologue」と他のポートフォリオテンプレートを比較しています。自分のお店や用途に合うか迷っている方は、あわせてご覧ください。
比較記事を読む