NWA Coding Lab
P02🎨ポートフォリオ・LP系入門

Lens Gallery

フォトグラファー

想定時間4h
技術HTML / CSS
完成形を見るソースコードを見る

Client Brief

佐

佐々木 玲奈本人

佐々木 玲奈

件名: 新規制作のご依頼

来月の個展に合わせて、自分の作品をオンラインでも見せたい。装飾は不要、写真の質感を活かせるシンプルな構成希望。

ご要望

  • 1写真をグリッドで見せる構成
  • 2モノクロを基調とした硬派なデザイン
  • 3クリックで拡大表示ができると嬉しい（任意）

予算

¥80,000

納期

2週間

種別

新規制作

クライアントの人柄

寡黙、審美眼が鋭い、説明よりも『見せる』ことを重視。

避けてほしいこと

カラフルな配色ポップなフォント余計な説明文

成功指標

個展来場者の半数以上がサイトを見て『また撮ってもらいたい』と感じること

追加メモ

"私が憧れているのは『Toiletpaper』や『Apartamento』のような雑誌の世界観。Webでこれを実現してくれたら最高です。"

Preview

フル画面で開く →
/demo/P02-lens-gallery/index.html

Learning Points

1

CSS Grid基礎

2

object-fit

3

画像最適化

4

ミニマルデザイン

How to Build

01

Step 1: ギャラリー設計

20分

写真の枚数・サイズバリエーション・配置パターンをスケッチ。tall/wideの組み合わせを考える。

成果物: ギャラリーグリッドのラフスケッチ

02

Step 2: HTML骨組み

40分

figure/figcaptionで画像群をマークアップ。セマンティックな構造を意識。

成果物: プレーンなHTMLファイル

03

Step 3: 黒背景＋タイポ

40分

ダーク配色の設定、DM Serif Displayの読み込み、ヒーローの巨大テキスト配置。

成果物: 黒背景に白文字のベース

04

Step 4: CSS Gridギャラリー

60分

grid-template-columnsとgrid-row: spanでマサンリー風のレイアウトを組む。object-fitで画像をトリミング。

成果物: ギャラリー完成

05

Step 5: レスポンシブ＋仕上げ

40分

3カラム→2カラム→1カラムの切り替え。ホバーでgrayscale解除エフェクト追加。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LENS — Photography by Ren Aoki</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=DM+Serif+Display:ital@0;1&family=Manrope:wght@300;400;500;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">
</head>
<body>

  <!-- ============ HEADER ============ -->
  <header class="header">
    <a href="#" class="header__logo">LENS</a>
    <nav class="header__nav">
      <a href="#gallery" class="header__link">Gallery</a>
      <a href="#about" class="header__link">About</a>
      <a href="#contact" class="header__link">Contact</a>
    </nav>
  </header>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <h1 class="hero__title">
      <span class="hero__title-line">Photo</span>
      <span class="hero__title-line">graphy</span>
    </h1>
    <div class="hero__caption">
      <p>Ren Aoki — Tokyo, 2024–2026</p>
      <p>Architecture / Urban / Still Life</p>
    </div>
  </section>

  <!-- ============ FEATURED IMAGE ============ -->
  <section class="featured">
    <figure class="featured__figure">
      <img src="https://images.unsplash.com/photo-1486325212027-8081e485255e?w=2000&q=80" alt="都市の幾何学的な建築">
      <figcaption class="featured__caption">Tokyo Metropolitan — 35mm, 2025</figcaption>
    </figure>
  </section>

  <!-- ============ GALLERY ============ -->
  <section id="gallery" class="gallery">
    <h2 class="gallery__heading">Selected Works</h2>

    <div class="gallery__grid">
      <figure class="gallery__item gallery__item--tall">
        <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=80" alt="霧に包まれた森">
        <figcaption>Fog Forest — 2025</figcaption>
      </figure>

      <figure class="gallery__item gallery__item--wide">
        <img src="https://images.unsplash.com/photo-1511818966892-d7d671e672a2?w=1200&q=80" alt="コンクリートの壁面">
        <figcaption>Concrete Wall — 2025</figcaption>
      </figure>

      <figure class="gallery__item">
        <img src="https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?w=800&q=80" alt="水面の反射">
        <figcaption>Reflection — 2024</figcaption>
      </figure>

      <figure class="gallery__item gallery__item--tall">
        <img src="https://images.unsplash.com/photo-1518005020951-eccb494ad742?w=800&q=80" alt="階段とガラス">
        <figcaption>Staircase — 2024</figcaption>
      </figure>

      <figure class="gallery__item gallery__item--wide">
        <img src="https://images.unsplash.com/photo-1490730141103-6cac27aaab94?w=1200&q=80" alt="日没の風景">
        <figcaption>Dusk — 2025</figcaption>
      </figure>

      <figure class="gallery__item">
        <img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?w=800&q=80" alt="山頂からの眺望">
        <figcaption>Summit — 2024</figcaption>
      </figure>

      <figure class="gallery__item gallery__item--tall">
        <img src="https://images.unsplash.com/photo-1508739773434-c26b3d09e071?w=800&q=80" alt="夕焼けの空">
        <figcaption>Skyline — 2025</figcaption>
      </figure>

      <figure class="gallery__item">
        <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80" alt="雪山">
        <figcaption>Alpine — 2024</figcaption>
      </figure>
    </div>
  </section>

  <!-- ============ ABOUT ============ -->
  <section id="about" class="about">
    <div class="about__inner">
      <div class="about__portrait">
        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&q=80" alt="青木蓮のポートレート">
      </div>
      <div class="about__text">
        <h2 class="about__name">Ren Aoki</h2>
        <p class="about__bio">
          1996年生まれ。東京在住のフォトグラファー。建築と都市風景を中心に、フィルムとデジタルの両方で制作。被写体の「構造」を抽出し、日常に潜む幾何学を写し出すことをテーマとしている。
        </p>
        <p class="about__bio">
          写真集『Concrete Garden』（自費出版、2025）。個展「Surface」（gallery MONO、2025）。
        </p>
        <dl class="about__details">
          <div class="about__detail">
            <dt>Camera</dt>
            <dd>Leica M6 / Sony α7IV</dd>
          </div>
          <div class="about__detail">
            <dt>Film</dt>
            <dd>Kodak Tri-X 400, Portra 400</dd>
          </div>
          <div class="about__detail">
            <dt>Based in</dt>
            <dd>Tokyo, Japan</dd>
          </div>
        </dl>
      </div>
    </div>
  </section>

  <!-- ============ CONTACT ============ -->
  <section id="contact" class="contact">
    <h2 class="contact__heading">Contact</h2>
    <p class="contact__text">展示・撮影依頼・コラボレーションのお問い合わせ</p>
    <div class="contact__links">
      <a href="mailto:hello@renaoki.com">hello@renaoki.com</a>
      <a href="#">Instagram</a>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <span>&copy; 2026 Ren Aoki</span>
    <span>All photographs &copy; Ren Aoki</span>
  </footer>

</body>
</html>

Self Check

0 / 10

Submit

Discord #提出-portfolio チャンネルに以下を投稿

  1. 1デプロイURL（Vercel or Netlify、無料でOK）
  2. 2GitHubリポジトリURL
  3. 3実装で工夫した点を3つ箇条書きで
  4. 4クライアントへの提案メッセージ案（実際に納品するつもりで）

Freelance Value

フォトグラファー・クリエイターポートフォリオ。相場：50,000〜120,000円

ポートフォリオ・LP系の他の課題を見る