Client Brief
佐
佐々木 翔太本人
個人（佐々木 翔太）
件名: 新規制作のご依頼
本の感想や日々の暮らしを発信する個人ブログを作りたい。noteやはてなブログでは物足りず、自分だけのデザインで書きたい。
ご要望
- 1記事一覧とサイドバーの2カラム構成
- 2カテゴリとタグで整理できる
- 3読了時間の表示
- 4品のあるシンプルなデザイン
予算
¥80,000
納期
2週間
種別
新規制作
クライアントの人柄
内省的、読書家、文章にこだわりがある
避けてほしいこと
派手な装飾広告だらけの印象テンプレ感
成功指標
月間PV3000以上、noteからの読者移行
追加メモ
"The New Yorkerのような、文章が映える品のあるデザインがいい。余白多めで。"
Preview
/demo/M01-daily-note/index.html
Learning Points
1
2カラムレイアウト
2
記事カード
3
サイドバー
4
カテゴリ・タグ
How to Build
01
Step 1: 2カラム設計
30分記事エリアとサイドバーの幅比率、サイドバーの固定挙動を設計。
成果物: レイアウト設計メモ
02
Step 2: HTML骨組み
60分ヘッダー→メインコンテンツ（記事一覧+サイドバー）→フッター。article/aside の使い分け。
成果物: プレーンHTML
03
Step 3: タイポ＋配色
90分Spectral見出し、Work Sans本文。オフホワイト背景に深緑アクセント。
成果物: ビジュアル完成
04
Step 4: カード＋サイドバー
90分記事カード（画像＋テキスト横並び）、サイドバー（プロフィール・カテゴリ・タグ）。sticky。
成果物: ほぼ完成形
05
Step 5: レスポンシブ
60分768pxで1カラム化。カード縦並びに変更。
成果物: 完成版
Source Code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daily Note — 日々のこと、静かに綴る</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=Spectral:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600&family=Zen+Kaku+Gothic+New:wght@400;500;700&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">
<span class="header__logo-text">Daily Note</span>
</a>
<nav class="header__nav" aria-label="メインナビゲーション">
<ul class="header__nav-list">
<li class="header__nav-item">
<a href="#" class="header__nav-link header__nav-link--active">Blog</a>
</li>
<li class="header__nav-item">
<a href="#" class="header__nav-link">About</a>
</li>
<li class="header__nav-item">
<a href="#" class="header__nav-link">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- ========== Hero ========== -->
<section class="hero">
<div class="hero__inner">
<h1 class="hero__title">日々のこと、静かに綴る</h1>
<p class="hero__subtitle">
本のこと、旅のこと、台所のこと。<br>
朝のカフェで書くような、ささやかな手記。
</p>
</div>
</section>
<!-- ========== Main ========== -->
<main class="main">
<div class="main__inner">
<!-- Articles Column -->
<section class="articles" aria-label="記事一覧">
<article class="card">
<a href="#" class="card__link">
<div class="card__image-wrapper">
<img class="card__image" src="https://images.unsplash.com/photo-1512820790803-83ca734da794?w=600&q=80" alt="開かれた本のページ" loading="lazy">
</div>
<div class="card__body">
<time class="card__date" datetime="2026-04-05">2026.04.05</time>
<span class="card__category card__category--reading">読書</span>
<h2 class="card__title">四月の朝に読み返す、須賀敦子の文章</h2>
<p class="card__excerpt">春の光が窓辺に差し込む時間に、何度目かの『ミラノ 霧の風景』を開く。言葉のひとつひとつが、静かに胸に沁みてくる。</p>
<span class="card__meta">3 min read</span>
</div>
</a>
</article>
<article class="card">
<a href="#" class="card__link">
<div class="card__image-wrapper">
<img class="card__image" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80" alt="霧に包まれた山々の風景" loading="lazy">
</div>
<div class="card__body">
<time class="card__date" datetime="2026-04-02">2026.04.02</time>
<span class="card__category card__category--travel">旅</span>
<h2 class="card__title">霧の中の尾瀬、春を待つ湿原を歩く</h2>
<p class="card__excerpt">まだ雪の残る木道を、ゆっくりと歩いた。遠くで水芭蕉が揺れている。誰もいない朝の湿原は、世界の始まりのように静かだった。</p>
<span class="card__meta">3 min read</span>
</div>
</a>
</article>
<article class="card">
<a href="#" class="card__link">
<div class="card__image-wrapper">
<img class="card__image" src="https://images.unsplash.com/photo-1493770348161-369560ae357d?w=600&q=80" alt="美しく盛り付けられた料理" loading="lazy">
</div>
<div class="card__body">
<time class="card__date" datetime="2026-03-28">2026.03.28</time>
<span class="card__category card__category--cooking">料理</span>
<h2 class="card__title">春キャベツと塩だけのスープ、その豊かさについて</h2>
<p class="card__excerpt">素材がよければ、調味料はほとんどいらない。春キャベツを丸ごと煮込んだスープは、甘くて、やさしくて、少し切ない味がする。</p>
<span class="card__meta">3 min read</span>
</div>
</a>
</article>
<article class="card">
<a href="#" class="card__link">
<div class="card__image-wrapper">
<img class="card__image" src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?w=600&q=80" alt="ピアノの鍵盤のクローズアップ" loading="lazy">
</div>
<div class="card__body">
<time class="card__date" datetime="2026-03-24">2026.03.24</time>
<span class="card__category card__category--music">音楽</span>
<h2 class="card__title">坂本龍一のピアノを、夜更けに聴く理由</h2>
<p class="card__excerpt">眠れない夜に『async』を流す。音と音の間にある沈黙が、むしろ雄弁に語りかけてくる。音楽は時に、言葉よりも正確だ。</p>
<span class="card__meta">3 min read</span>
</div>
</a>
</article>
<article class="card">
<a href="#" class="card__link">
<div class="card__image-wrapper">
<img class="card__image" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80" alt="穏やかな表情の男性のポートレート" loading="lazy">
</div>
<div class="card__body">
<time class="card__date" datetime="2026-03-20">2026.03.20</time>
<span class="card__category card__category--life">暮らし</span>
<h2 class="card__title">三十代半ばで気づいた、「何もしない」という贅沢</h2>
<p class="card__excerpt">予定のない日曜の朝。コーヒーを淹れて、窓の外をぼんやり眺める。それだけで十分に満たされる日があることを、ようやく知った。</p>
<span class="card__meta">3 min read</span>
</div>
</a>
</article>
</section>
<!-- Sidebar -->
<aside class="sidebar">
<!-- Author Profile -->
<div class="sidebar__section sidebar__author">
<img class="sidebar__author-photo" src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&q=80" alt="著者のプロフィール写真">
<h3 class="sidebar__author-name">藤井 奈緒</h3>
<p class="sidebar__author-bio">東京在住のフリーライター。本と珈琲と旅が好き。日々の小さな気づきを、ゆっくり言葉にしています。</p>
</div>
<!-- Categories -->
<div class="sidebar__section sidebar__categories">
<h3 class="sidebar__heading">Categories</h3>
<ul class="sidebar__category-list">
<li class="sidebar__category-item">
<a href="#" class="sidebar__category-link">暮らし<span class="sidebar__category-count">12</span></a>
</li>
<li class="sidebar__category-item">
<a href="#" class="sidebar__category-link">読書<span class="sidebar__category-count">9</span></a>
</li>
<li class="sidebar__category-item">
<a href="#" class="sidebar__category-link">旅<span class="sidebar__category-count">7</span></a>
</li>
<li class="sidebar__category-item">
<a href="#" class="sidebar__category-link">音楽<span class="sidebar__category-count">5</span></a>
</li>
<li class="sidebar__category-item">
<a href="#" class="sidebar__category-link">料理<span class="sidebar__category-count">8</span></a>
</li>
</ul>
</div>
<!-- Tags -->
<div class="sidebar__section sidebar__tags">
<h3 class="sidebar__heading">Tags</h3>
<div class="sidebar__tag-cloud">
<a href="#" class="sidebar__tag">エッセイ</a>
<a href="#" class="sidebar__tag">珈琲</a>
<a href="#" class="sidebar__tag">散歩</a>
<a href="#" class="sidebar__tag">季節</a>
<a href="#" class="sidebar__tag">映画</a>
<a href="#" class="sidebar__tag">詩</a>
<a href="#" class="sidebar__tag">手紙</a>
<a href="#" class="sidebar__tag">朝の時間</a>
<a href="#" class="sidebar__tag">古本屋</a>
<a href="#" class="sidebar__tag">日記</a>
</div>
</div>
<!-- About This Blog -->
<div class="sidebar__section sidebar__about">
<h3 class="sidebar__heading">About This Blog</h3>
<p class="sidebar__about-text">Daily Noteは、日々の暮らしの中で見つけた小さなことを綴る個人的な手記です。読書の感想、旅の記憶、台所での発見。静かな朝のカフェで書くように、ゆっくりと言葉を紡いでいます。</p>
</div>
</aside>
</div>
</main>
<!-- ========== Footer ========== -->
<footer class="footer">
<div class="footer__inner">
<p class="footer__copyright">© 2026 Daily Note. All rights reserved.</p>
<ul class="footer__sns">
<li class="footer__sns-item"><a href="#" class="footer__sns-link" aria-label="Twitter">Twitter</a></li>
<li class="footer__sns-item"><a href="#" class="footer__sns-link" aria-label="Instagram">Instagram</a></li>
<li class="footer__sns-item"><a href="#" class="footer__sns-link" aria-label="Note">note</a></li>
</ul>
</div>
</footer>
</body>
</html>
Self Check
0 / 8
Submit
Discord #提出-media チャンネルに投稿
- 1デプロイURL
- 2GitHubリポジトリURL
- 3工夫した点3つ
- 4クライアントへの提案メッセージ案