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

My Profile

自己紹介サイト

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

Client Brief

田

田中 ゆき本人

田中 ゆき

件名: 新規制作のご依頼

新しい仕事の問い合わせ用に、シンプルな自己紹介サイトが欲しい。古い雑誌やZINEのようなエディトリアルな雰囲気が好み。

ご要望

  • 1写真と簡単なプロフィールが載せられる1ページ構成
  • 2タイポグラフィが主役の静かなデザイン
  • 3スマホでも美しく読めること

予算

¥30,000

納期

1週間

種別

新規制作

クライアントの人柄

言葉を選ぶタイプ。装飾過多を嫌い、余白と書体で語るデザインを好む。

避けてほしいこと

派手なグラデーションアニメーション過剰テンプレ感

成功指標

問い合わせフォームから月1件以上の新規案件相談が来ること

追加メモ

"Pinterestで集めたエディトリアル系の参考画像を共有します。Frauncesっていうフォントが気になってて、もし使えたら嬉しいです。"

Preview

フル画面で開く →
/demo/P01-my-profile/index.html

Learning Points

1

HTML基本構造

2

見出し・段落

3

リンク・画像

4

基本的なCSS

How to Build

01

Step 1: 構造設計

30分

完成形を見ながら、どんなHTMLタグを使うかをノートに書き出す。section, article, headerなど。

成果物: HTML構造のラフスケッチ

02

Step 2: HTML骨組み

60分

スタイルなしでHTMLだけを書く。コンテンツが正しい順序で表示されることを確認。

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

03

Step 3: タイポグラフィ設定

45分

Google Fontsを読み込み、見出しと本文のフォントサイズ・行間を整える。

成果物: 文字組みが整ったページ

04

Step 4: 装飾とレイアウト

90分

罫線、余白、グリッドレイアウトを実装。エディトリアルな雰囲気を作る。

成果物: ほぼ完成形

05

Step 5: レスポンシブ対応

45分

メディアクエリでスマホ表示を整える。PCとスマホで両方崩れないことを確認。

成果物: 完成版

Source Code

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Yuki Tanaka — Profile</title>
  <meta name="description" content="田中ゆうき。Webデザイナー / コーダー。東京在住。">

  <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=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700;9..144,900&family=IBM+Plex+Sans:wght@300;400;500;600&family=Shippori+Mincho:wght@400;500;600&display=swap" rel="stylesheet">

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

  <!-- ============ HEADER ============ -->
  <header class="header">
    <span class="header__number">01</span>
    <nav class="header__nav">
      <a href="#about" class="header__link">About</a>
      <a href="#skills" class="header__link">Skills</a>
      <a href="#works" class="header__link">Works</a>
      <a href="#contact" class="header__link">Contact</a>
    </nav>
  </header>

  <!-- ============ HERO ============ -->
  <section class="hero">
    <div class="hero__grid">
      <div class="hero__title-block">
        <p class="hero__issue">Issue N°01 — 2026</p>
        <h1 class="hero__name">
          <span class="hero__name-line">Yuki</span>
          <span class="hero__name-line hero__name-line--indent">Tanaka</span>
        </h1>
        <p class="hero__role">Web Designer<br>&amp; Coder</p>
      </div>
      <div class="hero__photo">
        <img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=800&q=80" alt="ポートレート">
      </div>
      <div class="hero__meta">
        <dl class="hero__facts">
          <div class="hero__fact">
            <dt>Location</dt>
            <dd>Tokyo, JP</dd>
          </div>
          <div class="hero__fact">
            <dt>Born</dt>
            <dd>1998</dd>
          </div>
          <div class="hero__fact">
            <dt>Focus</dt>
            <dd>UI / Web</dd>
          </div>
        </dl>
      </div>
    </div>
    <div class="hero__rule"></div>
  </section>

  <!-- ============ ABOUT ============ -->
  <section id="about" class="about">
    <div class="about__grid">
      <div class="about__number">
        <span class="section-number">02</span>
      </div>
      <div class="about__content">
        <h2 class="section-heading">About</h2>
        <p class="about__lead">
          東京を拠点に活動するWebデザイナー。美大でグラフィックデザインを学んだ後、独学でフロントエンド開発を習得。紙媒体の構成力とWebの技術を掛け合わせたエディトリアルなWeb制作を得意とする。
        </p>
        <p class="about__text">
          好きなものは古い雑誌と活版印刷。休日は神保町の古書店を巡っています。「余白が語る」デザインを信条に、情報を削ぎ落とすことで本質を際立たせるアプローチを大切にしています。
        </p>
      </div>
    </div>
  </section>

  <!-- ============ SKILLS ============ -->
  <section id="skills" class="skills">
    <div class="skills__grid">
      <div class="skills__number">
        <span class="section-number">03</span>
      </div>
      <div class="skills__content">
        <h2 class="section-heading">Skills</h2>
        <div class="skills__columns">
          <div class="skills__column">
            <h3 class="skills__category">Design</h3>
            <ul class="skills__list">
              <li>Figma</li>
              <li>Adobe Illustrator</li>
              <li>Adobe Photoshop</li>
              <li>タイポグラフィ設計</li>
            </ul>
          </div>
          <div class="skills__column">
            <h3 class="skills__category">Development</h3>
            <ul class="skills__list">
              <li>HTML / CSS</li>
              <li>JavaScript</li>
              <li>WordPress</li>
              <li>Git</li>
            </ul>
          </div>
          <div class="skills__column">
            <h3 class="skills__category">Other</h3>
            <ul class="skills__list">
              <li>ライティング</li>
              <li>写真撮影</li>
              <li>印刷入稿</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ WORKS ============ -->
  <section id="works" class="works">
    <div class="works__grid">
      <div class="works__number">
        <span class="section-number">04</span>
      </div>
      <div class="works__content">
        <h2 class="section-heading">Works</h2>
        <div class="works__list">
          <article class="works__item">
            <span class="works__index">001</span>
            <h3 class="works__title">Coffee Stand Branding</h3>
            <p class="works__desc">個人カフェのロゴ・ショップカード・Web制作</p>
            <span class="works__year">2025</span>
          </article>
          <article class="works__item">
            <span class="works__index">002</span>
            <h3 class="works__title">Literary Magazine "Mado"</h3>
            <p class="works__desc">文芸同人誌のエディトリアルデザイン・組版</p>
            <span class="works__year">2025</span>
          </article>
          <article class="works__item">
            <span class="works__index">003</span>
            <h3 class="works__title">Ceramic Studio Site</h3>
            <p class="works__desc">陶芸工房のWebサイトリニューアル</p>
            <span class="works__year">2024</span>
          </article>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ CONTACT ============ -->
  <section id="contact" class="contact">
    <div class="contact__grid">
      <div class="contact__number">
        <span class="section-number">05</span>
      </div>
      <div class="contact__content">
        <h2 class="section-heading">Contact</h2>
        <p class="contact__text">お仕事のご相談はメールまたはSNSからお気軽にどうぞ。</p>
        <div class="contact__links">
          <a href="mailto:hello@yukitanaka.jp" class="contact__link">hello@yukitanaka.jp</a>
          <a href="#" class="contact__link">Instagram</a>
          <a href="#" class="contact__link">Twitter</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ============ FOOTER ============ -->
  <footer class="footer">
    <div class="footer__inner">
      <span class="footer__colophon">Designed &amp; Coded by Yuki Tanaka</span>
      <span class="footer__copy">&copy; 2026</span>
    </div>
  </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

自分のポートフォリオページ、簡易プロフィールページ案件。相場：20,000〜50,000円

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