Client Brief
高
高橋 遥本人
個人（高橋 遥）
件名: 新規制作のご依頼
ヨーロッパ一人旅を記録する旅行ブログ。フィルム写真と紀行文で、読者に旅の空気感を届けたい。アフィリエイト収益化も視野に入れている。
ご要望
- 1記事詳細ページ（目次・本文・写真・引用）
- 2目次の自動生成と固定表示
- 3SNSシェアボタン
- 4関連記事の表示
予算
¥150,000
納期
3週間
種別
新規制作
クライアントの人柄
冒険家、文学好き、写真にこだわる
避けてほしいこと
旅行サイトの量産テンプレ感派手なバナー広告感軽いノリ
成功指標
月間PV1万、アフィリエイト月収5万円
追加メモ
"Cereal MagazineやKinfolkのような、紀行文学の品格がある世界観にしたい。フィルム写真の質感を活かして。"
Preview
/demo/M02-trip-log/index.html
Learning Points
1
記事詳細レイアウト
2
目次自動生成
3
SNSシェアボタン
4
アイキャッチ
How to Build
01
Step 1: 記事構造設計
40分目次・本文・写真・引用・シェアの配置を設計。h2のid属性設計。
成果物: 記事構造図
02
Step 2: HTML構造
90分ヒーロー→目次→本文（4セクション＋写真＋引用）→シェア→関連記事。
成果物: 完全なHTML
03
Step 3: エディトリアルCSS
90分Bodoni Moda見出し、生成り背景。max-width 720px中央配置。引用ブロック。
成果物: ビジュアル完成
04
Step 4: 目次JS
60分IntersectionObserverで目次のアクティブハイライト。スムーススクロール。
成果物: インタラクション完成
05
Step 5: レスポンシブ＋仕上げ
60分目次のモバイル配置、写真のフルブリード、関連記事の調整。
成果物: 完成版
Source Code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プラハの石畳と、時が止まった午後 | TRIP LOG</title>
<meta name="description" content="プラハ旧市街を歩き、カレル橋の朝霧に包まれ、カフェ・スラヴィアで珈琲を飲んだ。フィルムカメラとともに過ごした、時が止まったような午後の記録。">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,500&family=DM+Sans:wght@300;400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header ========== -->
<header class="header">
<div class="header__inner">
<a href="#" class="header__logo">TRIP LOG</a>
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item"><a href="#" class="header__nav-link">Destinations</a></li>
<li class="header__nav-item"><a href="#" class="header__nav-link">Stories</a></li>
<li class="header__nav-item"><a href="#" class="header__nav-link">About</a></li>
</ul>
</nav>
<button class="header__menu-btn" aria-label="メニューを開く">
<span class="header__menu-line"></span>
<span class="header__menu-line"></span>
<span class="header__menu-line"></span>
</button>
</div>
</header>
<!-- ========== Article Hero ========== -->
<section class="hero">
<div class="hero__image-wrapper">
<img
src="https://images.unsplash.com/photo-1541849546-216549ae216d?w=2000&q=80"
alt="プラハの旧市街を上空から見た街並み"
class="hero__image"
>
</div>
<div class="hero__content">
<div class="hero__meta">
<span class="hero__category">Central Europe</span>
<time class="hero__date" datetime="2025-09-14">2025.09.14</time>
<span class="hero__read-time">読了 8 min</span>
</div>
<h1 class="hero__title">プラハの石畳と、<br>時が止まった午後</h1>
</div>
</section>
<!-- ========== Article ========== -->
<main class="article">
<div class="article__container">
<!-- Table of Contents -->
<aside class="toc">
<p class="toc__heading">Contents</p>
<ol class="toc__list">
<li class="toc__item">
<a href="#old-town" class="toc__link" data-toc-link>プラハ旧市街</a>
</li>
<li class="toc__item">
<a href="#charles-bridge" class="toc__link" data-toc-link>カレル橋の朝</a>
</li>
<li class="toc__item">
<a href="#cafe-slavia" class="toc__link" data-toc-link>カフェ・スラヴィア</a>
</li>
<li class="toc__item">
<a href="#tram-sunset" class="toc__link" data-toc-link>路面電車と夕暮れ</a>
</li>
</ol>
</aside>
<!-- Article Body -->
<div class="article__body">
<!-- Section 1 -->
<section class="article__section" id="old-town">
<h2 class="article__heading">プラハ旧市街</h2>
<p class="article__text">
旧市街広場に足を踏み入れた瞬間、時間の流れが変わったのを感じた。石畳の継ぎ目ひとつひとつに、何世紀もの記憶が刻まれている。ティーン教会の黒い尖塔が空を突き刺し、天文時計の前では観光客たちが一様にカメラを構えていた。けれど僕は、広場の端に佇む名もない路地へと吸い込まれていった。
</p>
<p class="article__text">
路地裏は静かだった。壁の漆喰が剥がれ、その下から中世の煉瓦が顔を覗かせている。窓辺に置かれた鉢植えのゼラニウムだけが、ここに人の暮らしがあることを教えてくれた。フィルムカメラのシャッターを切る。ISO400のポートラが、この淡い光をどう記録するのか。現像するまでわからない、その不確かさが好きだった。
</p>
<p class="article__text">
角を曲がるたびに新しい風景が現れる。バロック様式の教会、アール・ヌーヴォーの装飾が施された建物、そして社会主義時代の無機質なコンクリート。プラハは時代の地層を隠さない。すべてがむき出しのまま、共存している。
</p>
<p class="article__text">
小さな広場に出ると、老人がアコーディオンを弾いていた。メロディはドヴォルザークの「新世界より」。異国の路地裏で聴く故郷への郷愁——彼にとってのそれが何であるかは知らない。けれど、その音色はこの街の空気に溶けて、石畳を伝い、僕の足元まで届いていた。
</p>
</section>
<!-- Section 2 -->
<section class="article__section" id="charles-bridge">
<h2 class="article__heading">カレル橋の朝</h2>
<figure class="article__figure">
<img
src="https://images.unsplash.com/photo-1519677100203-a0e668c92439?w=800&q=80"
alt="朝霧に包まれた石造りの橋"
class="article__figure-image"
>
<figcaption class="article__figure-caption">
朝6時のカレル橋。観光客がまだ眠っている時間、橋は霧と静寂に包まれる。
</figcaption>
</figure>
<p class="article__text">
朝6時。ホステルを抜け出し、まだ薄暗い石畳の道をカレル橋へ向かった。9月のプラハの朝は冷える。ヴルタヴァ川から立ち上る霧が橋の聖人像を幽玄に包み、対岸のプラハ城はシルエットだけを残していた。
</p>
<p class="article__text">
橋の上にはほとんど人がいなかった。地元のランナーが一人、息を白くしながら通り過ぎていく。僕は欄干に寄りかかり、川面を見つめた。水は黒く、深く、ゆっくりと流れていた。この橋が架けられたのは1357年。カール四世の命で建造が始まり、完成までに45年を要したという。
</p>
<p class="article__text">
フィルムを巻き上げる音が、静寂の中でやけに大きく響いた。デジタルカメラなら何百枚でも撮れるだろう。けれどフィルムの36枚という制約が、一枚一枚に意味を与えてくれる。この瞬間を本当に残したいのか、自分に問いかけてからシャッターを切る。その儀式のような行為が、旅の記憶をより鮮明にしてくれる気がしていた。
</p>
</section>
<!-- Blockquote -->
<blockquote class="article__blockquote">
<p>「旅の価値は、どれだけ遠くへ行ったかではなく、どれだけ深く、その場所に沈んだかで決まる。」</p>
<cite>― ある旅人の手記より</cite>
</blockquote>
<!-- Section 3 -->
<section class="article__section" id="cafe-slavia">
<h2 class="article__heading">カフェ・スラヴィア</h2>
<p class="article__text">
国民劇場の向かいに、カフェ・スラヴィアはあった。1881年創業。カフカ、リルケ、ハヴェル——この街の知性と芸術が通い詰めた場所だ。重厚な回転扉を押して中に入ると、アール・デコ様式の内装が薄暗い照明に照らされていた。
</p>
<figure class="article__figure">
<img
src="https://images.unsplash.com/photo-1514933651103-005eec06c04b?w=800&q=80"
alt="ヨーロッパの古いカフェの内装"
class="article__figure-image"
>
<figcaption class="article__figure-caption">
カフェ・スラヴィアの店内。大きな窓からヴルタヴァ川を望む席が、いつも一番先に埋まる。
</figcaption>
</figure>
<p class="article__text">
窓際の席に座り、トルココーヒーを注文した。銅のポットで供されるそれは、底に細かい粉が沈殿している。一口含むと、深い苦味の奥にかすかな甘みがあった。窓の外では、ヴルタヴァ川に沿って路面電車が走っていく。
</p>
<p class="article__text">
隣のテーブルでは、白髪の紳士が分厚い本を読んでいた。彼がページをめくる音と、遠くから聞こえるエスプレッソマシンの蒸気音だけが、この空間の時間を刻んでいた。僕はノートを開き、今朝見た霧のカレル橋のことを書き留めた。言葉にすることで、記憶の輪郭がより鮮明になっていく。
</p>
</section>
<!-- Section 4 -->
<section class="article__section" id="tram-sunset">
<h2 class="article__heading">路面電車と夕暮れ</h2>
<p class="article__text">
プラハの路面電車は、街の血管のようだ。赤と白の車体が石畳の上を滑るように走っていく。22番トラムに乗り、マラー・ストラナからプラハ城方面へ向かった。車窓から見える街並みは、午後の光を受けてオレンジ色に染まり始めていた。
</p>
<figure class="article__figure">
<img
src="https://images.unsplash.com/photo-1476362174823-3a23f4aa6d76?w=800&q=80"
alt="夕暮れの街路と路面電車の線路"
class="article__figure-image"
>
<figcaption class="article__figure-caption">
22番トラムの車窓から。夕暮れのプラハは、街全体がアンバーフィルターをかけたように染まる。
</figcaption>
</figure>
<p class="article__text">
終点で降り、ストラホフ修道院の裏手にある展望台まで歩いた。眼下にプラハの全景が広がっていた。赤い屋根の海。その向こうにヴルタヴァ川が蛇行し、カレル橋が今朝とはまったく違う表情でそこにあった。朝の幽玄さは消え、夕陽を浴びた橋は黄金色に輝いていた。
</p>
<p class="article__text">
最後の一枚のフィルムで、この風景を撮った。ファインダー越しに見るプラハは、すでに記憶のなかの風景のようだった。旅はまだ終わっていないのに、もう懐かしい。そういう街がある。プラハは、そういう街だった。
</p>
<p class="article__text">
カメラを鞄にしまい、しばらくそのまま立ち尽くしていた。風が冷たくなってきた。街灯がひとつ、またひとつと灯り始める。プラハの夜が始まろうとしていた。僕は石段をゆっくりと降り、宿へ向かう最後のトラムを探しに行った。
</p>
</section>
<!-- Map Placeholder -->
<div class="article__map">
<div class="article__map-inner">
<p class="article__map-label">Route Map</p>
<p class="article__map-description">旧市街広場 → カレル橋 → カフェ・スラヴィア → 22番トラム → ストラホフ修道院展望台</p>
<div class="article__map-placeholder">
<svg class="article__map-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/>
<circle cx="12" cy="9" r="2.5"/>
</svg>
<span>地図を表示する</span>
</div>
</div>
</div>
<!-- SNS Share -->
<div class="share">
<p class="share__label">Share this story</p>
<div class="share__buttons">
<a href="#" class="share__button share__button--twitter" aria-label="Twitterでシェア">
<span class="share__button-text">Twitter</span>
</a>
<a href="#" class="share__button share__button--facebook" aria-label="Facebookでシェア">
<span class="share__button-text">Facebook</span>
</a>
<a href="#" class="share__button share__button--line" aria-label="LINEでシェア">
<span class="share__button-text">LINE</span>
</a>
</div>
</div>
<!-- Author Bio -->
<div class="author">
<div class="author__inner">
<div class="author__info">
<p class="author__label">Written by</p>
<p class="author__name">Haruki Nomura</p>
<p class="author__bio">
東京を拠点に活動するフォトグラファー・ライター。フィルムカメラを片手に、世界各地の路地裏と喫茶店を巡る。著書に『遠回りの地図帳』（2024年）。
</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- ========== Related Articles ========== -->
<section class="related">
<div class="related__inner">
<h2 class="related__heading">More Stories</h2>
<div class="related__grid">
<article class="related__card">
<a href="#" class="related__card-link">
<div class="related__card-image-wrapper">
<img
src="https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=400&q=80"
alt="京都の寺院と紅葉"
class="related__card-image"
>
</div>
<div class="related__card-body">
<span class="related__card-category">East Asia</span>
<h3 class="related__card-title">京都、裏路地の秋</h3>
<time class="related__card-date" datetime="2025-11-03">2025.11.03</time>
</div>
</a>
</article>
<article class="related__card">
<a href="#" class="related__card-link">
<div class="related__card-image-wrapper">
<img
src="https://images.unsplash.com/photo-1504598318550-17eba1008a68?w=400&q=80"
alt="北欧の広大な自然風景"
class="related__card-image"
>
</div>
<div class="related__card-body">
<span class="related__card-category">Scandinavia</span>
<h3 class="related__card-title">ロフォーテン諸島の光と沈黙</h3>
<time class="related__card-date" datetime="2025-07-22">2025.07.22</time>
</div>
</a>
</article>
<article class="related__card">
<a href="#" class="related__card-link">
<div class="related__card-image-wrapper">
<img
src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?w=400&q=80"
alt="どこまでも続く一本道"
class="related__card-image"
>
</div>
<div class="related__card-body">
<span class="related__card-category">North America</span>
<h3 class="related__card-title">ルート66、終わらない地平線</h3>
<time class="related__card-date" datetime="2025-05-10">2025.05.10</time>
</div>
</a>
</article>
</div>
</div>
</section>
<!-- ========== Footer ========== -->
<footer class="footer">
<div class="footer__inner">
<div class="footer__top">
<a href="#" class="footer__logo">TRIP LOG</a>
<p class="footer__tagline">Film, words, and the roads between.</p>
</div>
<div class="footer__bottom">
<nav class="footer__nav">
<a href="#" class="footer__nav-link">Destinations</a>
<a href="#" class="footer__nav-link">Stories</a>
<a href="#" class="footer__nav-link">About</a>
<a href="#" class="footer__nav-link">Contact</a>
</nav>
<p class="footer__copyright">© 2025 TRIP LOG. All rights reserved.</p>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>Self Check
0 / 9
Submit
Discord #提出-media チャンネルに投稿
- 1デプロイURL
- 2GitHubリポジトリURL
- 3工夫した点3つ
- 4クライアントへの提案メッセージ案