NWA Coding Lab
P03🎨ポートフォリオ・LP系中級

Designer Folio

デザイナーポートフォリオ

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

Client Brief

黒

黒田 蓮代表 / ディレクター

Studio Noir

件名: 新規制作のご依頼

事務所立ち上げ3年目で、ようやく実績が溜まってきた。攻めたデザインのポートフォリオサイトで、業界内の知名度を上げたい。

ご要望

  • 112案件以上を見せられる作品グリッド
  • 2クリックで詳細が見られるモーダル機能
  • 390年代のテックノアール的な雰囲気
  • 4他のデザイン事務所サイトと完全に差別化できること

予算

¥250,000

納期

1ヶ月

種別

新規制作

クライアントの人柄

尖ってる、David Carsonに影響を受けている、安全な選択を嫌う。

避けてほしいこと

Bootstrap感中央寄せの単調なレイアウトApple風のミニマル

成功指標

サイトを見た企業から月3件以上のブランディング案件相談が来ること

追加メモ

"ブラウザを開いた瞬間に『なんだこれ』って思わせたい。グリッチ、ノイズ、不規則なレイアウト、なんでもアリです。攻めてください。"

Preview

フル画面で開く →
/demo/P03-designer-folio/index.html

Learning Points

1

作品グリッド

2

モーダルウィンドウ

3

プロフィール

4

アニメーション

How to Build

01

Step 1: グリッド設計

60分

12カラムGridの配置計画を紙にスケッチ。span 4 / span 8のバリエーションを試す。モーダルの構造も設計。

成果物: グリッド配置図 + モーダル構造図

02

Step 2: HTML＋モーダル構造

90分

セクション構造とモーダルのHTMLを書く。data属性でカード情報を管理。aria-hiddenも忘れずに。

成果物: 完全なHTMLファイル

03

Step 3: ダーク配色＋テクスチャ

90分

深紺背景、ノイズテクスチャ（SVG filter）、タイポグラフィを実装。text-strokeで名前のアウトラインも。

成果物: ビジュアルベース完成

04

Step 4: JavaScript モーダル

90分

カードクリック → モーダル表示のロジックを実装。ESCキー・オーバーレイクリックでの閉じ処理も。

成果物: モーダル機能完成

05

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

60分

12カラム→2カラム→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>Saki Mori — Art Director &amp; Designer</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=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,500;12..96,700;12..96,800&family=Sora:wght@300;400;500;600&display=swap" rel="stylesheet">

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

  <!-- ============ HEADER ============ -->
  <header class="header">
    <a href="#" class="header__logo">SM<span class="header__logo-dot">.</span></a>
    <nav class="header__nav">
      <a href="#works" class="header__link">Works</a>
      <a href="#profile" class="header__link">Profile</a>
      <a href="#contact" class="header__link">Contact</a>
    </nav>
  </header>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <div class="hero__label">Art Director &amp; Designer — Tokyo</div>
    <h1 class="hero__name">
      <span class="hero__name-first">Saki</span>
      <span class="hero__name-last">Mori</span>
    </h1>
    <p class="hero__tagline">
      ブランドの「声」を視覚化する。<br>
      グラフィック、空間、デジタルを横断するアートディレクション。
    </p>
    <div class="hero__scroll">
      <span class="hero__scroll-line"></span>
      <span class="hero__scroll-text">Scroll</span>
    </div>
  </section>

  <!-- ============ WORKS ============ -->
  <section id="works" class="works">
    <div class="works__header">
      <h2 class="works__title">Selected Works</h2>
      <span class="works__count">6 Projects, 2023–2026</span>
    </div>

    <div class="works__grid">
      <article class="works__card works__card--lg" data-index="01">
        <div class="works__card-img">
          <img src="https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=1000&q=80" alt="ブランディングプロジェクト">
        </div>
        <div class="works__card-info">
          <h3 class="works__card-title">KUMO Fragrance</h3>
          <p class="works__card-cat">Branding / Package</p>
          <span class="works__card-year">2026</span>
        </div>
      </article>

      <article class="works__card" data-index="02">
        <div class="works__card-img">
          <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&q=80" alt="プロダクトビジュアル">
        </div>
        <div class="works__card-info">
          <h3 class="works__card-title">Audio Technica Campaign</h3>
          <p class="works__card-cat">Art Direction / Photo</p>
          <span class="works__card-year">2025</span>
        </div>
      </article>

      <article class="works__card" data-index="03">
        <div class="works__card-img">
          <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=800&q=80" alt="空間デザイン">
        </div>
        <div class="works__card-info">
          <h3 class="works__card-title">MUJI Lab Exhibition</h3>
          <p class="works__card-cat">Space / Exhibition</p>
          <span class="works__card-year">2025</span>
        </div>
      </article>

      <article class="works__card works__card--lg" data-index="04">
        <div class="works__card-img">
          <img src="https://images.unsplash.com/photo-1544967082-d9d25d867d66?w=1000&q=80" alt="エディトリアルデザイン">
        </div>
        <div class="works__card-info">
          <h3 class="works__card-title">Brutus Special Issue</h3>
          <p class="works__card-cat">Editorial / Print</p>
          <span class="works__card-year">2024</span>
        </div>
      </article>

      <article class="works__card" data-index="05">
        <div class="works__card-img">
          <img src="https://images.unsplash.com/photo-1493934558415-9d19f0b2b4d2?w=800&q=80" alt="ウェブデザイン">
        </div>
        <div class="works__card-info">
          <h3 class="works__card-title">Kyoto Ceramics Web</h3>
          <p class="works__card-cat">Web / UI Design</p>
          <span class="works__card-year">2024</span>
        </div>
      </article>

      <article class="works__card" data-index="06">
        <div class="works__card-img">
          <img src="https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800&q=80" alt="ロゴデザイン">
        </div>
        <div class="works__card-info">
          <h3 class="works__card-title">Nook Café Identity</h3>
          <p class="works__card-cat">Logo / VI</p>
          <span class="works__card-year">2023</span>
        </div>
      </article>
    </div>
  </section>

  <!-- ============ PROFILE ============ -->
  <section id="profile" class="profile">
    <div class="profile__inner">
      <div class="profile__photo">
        <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=600&q=80" alt="森咲希のポートレート">
      </div>
      <div class="profile__content">
        <h2 class="profile__heading">Profile</h2>
        <p class="profile__bio">
          1994年東京生まれ。武蔵野美術大学視覚伝達デザイン学科卒業後、都内デザイン事務所を経て2022年に独立。ブランディング、エディトリアル、空間デザインを横断的に手がけるアートディレクター。
        </p>
        <p class="profile__bio">
          「触感のあるデザイン」を信条に、デジタルとフィジカルの境界を曖昧にする表現を追求している。JAGDA新人賞2024ノミネート。
        </p>
        <div class="profile__awards">
          <h3 class="profile__sub">Recognition</h3>
          <ul class="profile__award-list">
            <li>JAGDA新人賞 2024 ノミネート</li>
            <li>Tokyo TDC 入選 2023</li>
            <li>D&AD New Blood Pencil 2022</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ CONTACT ============ -->
  <section id="contact" class="contact">
    <div class="contact__inner">
      <h2 class="contact__heading">
        Let's<br>Work<br>Together<span class="contact__heading-dot">.</span>
      </h2>
      <div class="contact__info">
        <p class="contact__text">新規プロジェクト・コラボレーションのお問い合わせはこちら。</p>
        <div class="contact__links">
          <a href="mailto:hello@sakimori.jp" class="contact__link">hello@sakimori.jp</a>
          <a href="#" class="contact__link">Instagram</a>
          <a href="#" class="contact__link">Behance</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <span class="footer__copy">&copy; 2026 Saki Mori</span>
    <span class="footer__note">Designed in Tokyo</span>
  </footer>

  <!-- ============ MODAL ============ -->
  <div class="modal" id="modal" aria-hidden="true">
    <div class="modal__overlay"></div>
    <div class="modal__content">
      <button class="modal__close" aria-label="閉じる">&times;</button>
      <div class="modal__body">
        <div class="modal__image">
          <img src="" alt="" id="modal-img">
        </div>
        <div class="modal__detail">
          <span class="modal__index" id="modal-index"></span>
          <h3 class="modal__title" id="modal-title"></h3>
          <p class="modal__cat" id="modal-cat"></p>
          <p class="modal__year" id="modal-year"></p>
        </div>
      </div>
    </div>
  </div>

  <script src="js/script.js"></script>
</body>
</html>

Self Check

0 / 11

Submit

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

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

Freelance Value

クリエイターポートフォリオ・個人事業主LP。相場：100,000〜250,000円

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