Design System

LuMEME
Design System

デザイントークン・タイポグラフィ・コンポーネントのカタログです。

Page Hero

.l-page-hero（下層ページ共通ヒーロー）

top  / about

April 2026 OPEN!!

about

LuMEMEについて

LuMEMEは、人生の節目に宿る想いを、写真と映像を通して誠実にすくい取り、"その人らしさ"として美しく残すチームです。

set_query_var( 'hero_data', [
    'image_id' => $image_id,
    'title'    => 'about',
    'subtitle' => 'LuMEMEについて',
    'notice'   => 'April 2026 OPEN!!',  // 任意
    'desc'     => '右下説明テキスト',   // 任意
    'anchors'  => [                     // 任意
        ['label' => 'concept', 'href' => '#concept'],
        ['label' => 'brand',   'href' => '#brand'],
    ],
] );
get_template_part( 'template-parts/common/page-hero' );

Colors

Brand

Primary

#1a1a1a

$color-primary

Secondary

#8b7355

$color-secondary

White

#ffffff

$color-white

Black

#000000

$color-black

Background / Border

BG

#faf9f7

$color-bg

BG Dark

#1a1a1a

$color-bg-dark

Border

#e0dbd3

$color-border

Text

Text

#333333

$color-text

Text Light

#888888

$color-text-light

Gray 100

#f5f5f5

$color-gray-100

Gray 200

#e8e8e8

$color-gray-200

Typography

Font Families

LuMEME — ABCDEFGHIJKLMNOPQRSTUVWXYZ — 0123456789

Hunter local — $font-family-en — 欧文見出し・ブランド

¥12,000 — 0123456789 — ABCDEFG

Azeret Mono Google — $font-family-mono — 価格・数値

ルメム — あいうえおかきくけこ — 美容・サロン・ヘアケア

Zen Old Mincho Google — $font-family-base — 和文本文

Type Scale

Display 64px — $font-size-4xl
Heading 1 48px — $font-size-3xl
Heading 2 32px — $font-size-2xl
Heading 3 24px — $font-size-xl
Heading 4 20px — $font-size-lg
Body — ボディテキストです。読みやすい行間で長文コンテンツを表示します。 16px — $font-size-base
Small — キャプションや補足テキスト。 14px — $font-size-sm
X-Small — ラベル・タグなど。 12px — $font-size-xs

Line Height

line-height: 1.3
見出し向け。

$line-height-tight: 1.3

line-height: 1.8
本文向け。長い段落テキストに適しています。

$line-height-base: 1.8

line-height: 2.0
ゆったりとした読み心地。高級感のある表現に。

$line-height-loose: 2.0

Spacing

$spacing-1 4px
$spacing-2 8px
$spacing-3 12px
$spacing-4 16px
$spacing-5 20px
$spacing-6 24px
$spacing-8 32px
$spacing-10 40px
$spacing-12 48px
$spacing-16 64px
$spacing-20 80px
$spacing-24 96px
$spacing-32 128px

Buttons

.c-btn--primary

view more contact reserve 
<a class="c-btn c-btn--primary" href="#">view more</a>

.c-btn--border

view more contact 
<a class="c-btn c-btn--border" href="#">view more</a>

.c-btn--white-border dark BG

view more contact 
<a class="c-btn c-btn--white-border" href="#">view more</a>

Cards

.c-card

Accordion

.c-accordion

この回答は最初から表示されています。

Filter Tabs

.c-filter-tabs

Price Table

.c-price-table（プランカード）

Basic

ベーシックプラン

¥30,000

  • 撮影時間 2時間
  • データ数 30カット

Standard

スタンダードプラン

¥55,000

  • 撮影時間 3時間
  • データ数 60カット

Premium

プレミアムプラン

¥95,000

  • 撮影時間 5時間
  • データ数 全カット＋動画

※ 料金は予告なく変更する場合があります。

Photo Label Strip

.c-photo-label-strip（写真帯 + 縦書きラベル + 2カラムテキスト）

Photo 1
Photo 2
Photo 3
Photo 4
Photo 5
Photo 6
Photo 7
婚礼前撮りから 七五三 お宮参りまで

婚礼前撮りから七五三・お宮参りまで、人生の節目となるさまざまなシーンをロケーション撮影で丁寧に残しています。思い出の場所や、季節の移ろいを感じられる自然の中で、形式にとらわれすぎない、その人らしい表情や空気感を大切に撮影。

事前のヒアリングを通してご希望や想いを共有し、一組一組に寄り添いながら進めていきます。ご家族で過ごす何気ない時間や、その日ならではの空気も含めて写真に残すことで、時間が経っても色あせない一枚をお届けします。

From pre-wedding shoots to Shichi-Go-San and Omiyamairi celebrations, we carefully capture life's meaningful milestones through on-location photography. In places filled with personal memories or in nature that reflects the changing seasons, we focus on natural expressions and a sense of atmosphere that feels true to each individual, without being bound by rigid formality.

<div class="c-photo-label-strip">
  <div class="c-photo-label-strip__photos">
    <div class="c-photo-label-strip__track js-photo-strip-track">
      <div class="c-photo-label-strip__photo"><img src="..." alt=""></div>
      <!-- 6〜8枚、JSが自動複製してループ -->
    </div>
  </div>
  <div class="c-photo-label-strip__content">
    <div class="c-photo-label-strip__labels">
      <span class="c-photo-label-strip__label">婚礼前撮りから</span>
      <span class="c-photo-label-strip__label">七五三</span>
      <span class="c-photo-label-strip__label">お宮参りまで</span>
    </div>
    <div class="c-photo-label-strip__text">
      <p class="c-photo-label-strip__body">左カラムテキスト</p>
      <div>
        <p class="c-photo-label-strip__body">右カラムテキスト</p>
        <p class="c-photo-label-strip__en">English text</p>
      </div>
    </div>
  </div>
</div>

Top About

.p-top-about（グラデ背景 + 縦書きキャッチコピー + テキスト + 写真）

想いの温度を 写真と映像で そっと未来へ
LuMEMEは、人生の節目に宿る想いを、
写真と映像を通して誠実にすくい取り、
"その人らしさ"として美しく残すチームです。

幸せを演出するのではなく、
そっとにじむ「おめでとう」や「ありがとう」の温度を写すこと。
その一日を、未来に続く大切な記憶として紡ぐこと。
それが、LuMEMEの変わらない姿勢です。
Deep within the recesses of Aso in Kumamoto Prefecture, Kyushu,
Lies the mystical haven — "Kurokawa Onsen".
Here, each individual residing in Batoyama gazes upon this land,
deeply intertwined with the local area, living in harmony with nature,
we earnestly contemplate a life of happiness in this land.
view about
Photo
<section class="p-top-about">
  <div class="p-top-about__inner l-container">
    <div class="p-top-about__body">
      <div class="p-top-about__catchcopy">
        <span>想いの温度を</span>
        <span>写真と映像で</span>
        <span>そっと未来へ</span>
      </div>
      <div class="p-top-about__texts">
        <div class="p-top-about__text-ja">...</div>
        <div class="p-top-about__text-en">...</div>
        <a class="c-link-arrow" href="...">view about</a>
      </div>
    </div>
    <div class="p-top-about__image"><img src="..." alt=""></div>
  </div>
</section>

Top Information

.p-top-information（お知らせ一覧）

information

view all 
<section class="p-top-information">
  <div class="p-top-information__inner l-container">
    <h2 class="p-top-information__title">information</h2>
    <ul class="p-top-information__list">
      <li class="p-top-information__item">
        <a class="p-top-information__link" href="...">
          <time class="p-top-information__date">
            <span class="p-top-information__date-year">2026</span>
            <span class="p-top-information__date-bottom">
              <span class="p-top-information__date-month">March</span>
              <span class="p-top-information__date-day">18</span>
            </span>
          </time>
          <span class="p-top-information__item-title">タイトル</span>
        </a>
      </li>
    </ul>
    <a class="c-link-arrow" href="...">view all</a>
  </div>
</section>

Section Heading

.c-section-heading（英字大見出し＋日本語サブテキスト）

コアメンバー

<div class="c-section-heading">
  <p class="c-section-heading__en" aria-hidden="true">core member</p>
  <h2 class="c-section-heading__ja">コアメンバー</h2>
</div>

Top Service

.p-top-service（サービス4枚カード）

service

view service
wedding ウェディング
family ファミリー
portrait ポートレート
location ロケーション 
<section class="p-top-service">
  <div class="p-top-service__header l-container">
    <h2 class="p-top-service__title" aria-label="サービス">service</h2>
    <a class="c-link-arrow" href="...">view service</a>
  </div>
  <div class="p-top-service__grid">
    <a class="p-top-service__card" href="...">
      <div class="p-top-service__card-bg" style="background-image:url('...')"></div>
      <span class="p-top-service__card-badge">NEW</span> <!-- 任意 -->
      <div class="p-top-service__card-label">
        <span class="p-top-service__card-name-en">wedding</span>
        <span class="p-top-service__card-name-ja">ウェディング</span>
      </div>
    </a>
  </div>
</section>

Top Contact

.p-top-contact（ダーク背景 + テキスト + ボタン）

撮影に関するご相談・ご予約は
お気軽にお問い合わせください。

contact 
<section class="p-top-contact">
  <div class="p-top-contact__inner l-container">
    <p class="p-top-contact__text">テキスト</p>
    <a class="c-btn c-btn--border" href="...">contact</a>
  </div>
</section>

About Member

.p-about-member（メンバーカードグリッド）

core member

Photo

Photographer

Hanako Yamada

山田 花子

光と影が交差する瞬間を追い続けています。

  • 写真
  • 映画
  • 旅行
Photo

Videographer

Taro Tanaka

田中 太郎

動画で残す、その日ならではの空気感。

  • 写真
  • 映画
  • 旅行
Photo

Coordinator

Yuki Suzuki

鈴木 ゆき

お客様の想いに寄り添いながら。

  • 写真
  • 映画
  • 旅行

+ その他、スタッフを募集中です 採用情報はこちら →

<section class="p-about-member">
  <div class="p-about-member__inner l-container">
    <h2 class="p-about-member__title" aria-label="コアメンバー">core member</h2>
    <div class="p-about-member__grid">
      <article class="p-about-member__card">
        <div class="p-about-member__card-photo"><img src="..." alt=""></div>
        <div class="p-about-member__card-body">
          <p class="p-about-member__card-role">Photographer</p>
          <p class="p-about-member__card-name-en">Hanako Yamada</p>
          <p class="p-about-member__card-name-ja">山田 花子</p>
          <p class="p-about-member__card-catchcopy">キャッチコピー</p>
          <ul class="p-about-member__card-hobbies">
            <li class="p-about-member__card-hobby">写真</li>
          </ul>
        </div>
      </article>
    </div>
  </div>
</section>

Company

.p-company（会社概要テーブル + 画像）

company

会社名株式会社 LuMEME
代表者山田 花子
所在地〒860-0000 熊本県熊本市中央区○○ 1-2-3
電話番号096-000-0000
設立2024年4月
事業内容写真・映像撮影サービス、フォトスタジオ運営
Image 1
Image 2
<section class="p-company">
  <div class="p-company__inner l-container">
    <h2 class="p-company__title" aria-label="会社概要">company</h2>
    <div class="p-company__layout">
      <div class="p-company__table-wrap">
        <table class="p-company__table">
          <tr><th>会社名</th><td>株式会社 LuMEME</td></tr>
        </table>
      </div>
      <div class="p-company__images">
        <img src="..." alt="">
      </div>
    </div>
  </div>
</section>

Flow

.p-flow（撮影の流れ 3ステップ）

flow

  1. 01

    お問い合わせ・ご相談

    フォームまたはお電話にてご連絡ください。日程・ご要望・ロケーション候補などをヒアリングします。

  2. 02

    お打ち合わせ・プラン決定

    詳細をすり合わせ、衣装・場所・スタイリングなどを決めていきます。

  3. 03

    撮影当日

    当日はリラックスしてお越しください。自然な表情や空気感を大切に撮影します。

<section class="p-flow">
  <div class="p-flow__inner l-container">
    <h2 class="p-flow__title" aria-label="撮影の流れ">flow</h2>
    <ol class="p-flow__steps">
      <li class="p-flow__step">
        <span class="p-flow__step-number">01</span>
        <h3 class="p-flow__step-title">お問い合わせ</h3>
        <p class="p-flow__step-desc">説明テキスト</p>
      </li>
    </ol>
  </div>
</section>

Service Price

.p-service-price（料金セクション）

price

Basic

ベーシックプラン

¥30,000

  • 撮影時間 2時間
  • データ数 30カット

Standard

スタンダードプラン

¥55,000

  • 撮影時間 3時間
  • データ数 60カット

Premium

プレミアムプラン

¥95,000

  • 撮影時間 5時間
  • データ数 全カット＋動画

options

  • アルバム追加¥15,000〜
  • 衣装レンタル¥8,000〜
  • ヘアメイク¥10,000〜
  • データ納期：撮影後2週間
  • 交通費別途
  • 消費税込み
<section class="p-service-price">
  <div class="p-service-price__inner l-container">
    <h2 class="p-service-price__title" aria-label="料金">price</h2>
    <div class="p-service-price__plans">
      <!-- c-price-table ×プラン数 -->
    </div>
    <div class="p-service-price__options">
      <h3 class="p-service-price__options-title">options</h3>
      <ul class="p-service-price__options-list">
        <li><span>オプション名</span><span>¥0,000〜</span></li>
      </ul>
    </div>
    <ul class="p-service-price__checklist">
      <li>注記テキスト</li>
    </ul>
  </div>
</section>

Output Products

.p-output-products（アウトプット商品グリッド）

output

Image

フォトアルバム

高品質な用紙に印刷した本格的なフォトアルバム。

サイズ
A4〜A3
価格
¥5,000〜
Image

データDVD

全データをDVDにてお渡しします。

サイズ
A4〜A3
価格
¥5,000〜
Image

フォトパネル

お好きな1枚をパネルに仕上げます。

サイズ
A4〜A3
価格
¥5,000〜
<section class="p-output-products">
  <div class="p-output-products__inner l-container">
    <h2 aria-label="アウトプット商品">output</h2>
    <div class="p-output-products__grid">
      <div class="p-output-products__item">
        <img src="..." alt="">
        <p class="p-output-products__item-name">フォトアルバム</p>
        <p class="p-output-products__item-desc">説明</p>
        <dl class="p-output-products__item-meta">
          <dt>サイズ</dt><dd>A4〜A3</dd>
        </dl>
      </div>
    </div>
  </div>
</section>

Outfits

.p-outfits（衣装グリッド）

outfit

Image

ドレス A

Image

ドレス B

Image

和装 A

Image

和装 B

<section class="p-outfits">
  <div class="p-outfits__inner l-container">
    <h2 aria-label="衣装">outfit</h2>
    <div class="p-outfits__grid">
      <div class="p-outfits__item">
        <img src="..." alt="">
        <p class="p-outfits__item-label">ドレス A</p>
      </div>
    </div>
  </div>
</section>

Studio Access

.p-studio-access（アクセス情報 + 地図）

access

〒860-0000
熊本県熊本市中央区○○ 1-2-3
○○ビル 2F

営業時間：10:00〜18:00（水曜定休）

外観
入口
Google Map
<section class="p-studio-access">
  <div class="p-studio-access__inner l-container">
    <h2 aria-label="アクセス">access</h2>
    <div class="p-studio-access__layout">
      <div class="p-studio-access__info">
        <p class="p-studio-access__address">住所</p>
        <p class="p-studio-access__hours">営業時間</p>
        <div class="p-studio-access__images"><img ...></div>
      </div>
      <div class="p-studio-access__map">
        <iframe src="..." ...></iframe>
      </div>
    </div>
  </div>
</section>

Wedding Products

.p-wedding-products（ウェディング商品リスト）

products

Image

Album

フォトアルバム

大切な記憶を1冊に。

高品質な印刷と美しい製本で、一生の思い出を残すフォトアルバム。写真の選定からレイアウトまで丁寧に制作します。

Standard

スタンダード

¥45,000

  • ページ数30P
<section class="p-wedding-products">
  <div class="p-wedding-products__inner l-container">
    <h2 aria-label="商品">products</h2>
    <div class="p-wedding-products__item">
      <div class="p-wedding-products__item-header">
        <img src="..." alt="">
        <div>
          <p class="p-wedding-products__item-name-en">Album</p>
          <p class="p-wedding-products__item-name-ja">フォトアルバム</p>
          <p class="p-wedding-products__item-catch">キャッチ</p>
          <p class="p-wedding-products__item-desc">説明</p>
        </div>
      </div>
      <div class="p-wedding-products__plans">
        <!-- c-price-table -->
      </div>
    </div>
  </div>
</section>

Family Menu / Area

.p-family-menu（メニューグリッド）+ .p-family-area（エリアリスト）

menu

Image

七五三

大切な節目をロケーションで丁寧に残します。

Image

お宮参り

大切な節目をロケーションで丁寧に残します。

Image

百日記念

大切な節目をロケーションで丁寧に残します。

area

熊本県内を中心に、ご希望のロケーションで撮影いたします。

<!-- Family Menu -->
<section class="p-family-menu">
  <div class="p-family-menu__inner l-container">
    <h2 aria-label="メニュー">menu</h2>
    <div class="p-family-menu__grid">
      <div class="p-family-menu__item">
        <img src="..." alt="">
        <h3 class="p-family-menu__item-title">七五三</h3>
        <p class="p-family-menu__item-desc">説明</p>
      </div>
    </div>
  </div>
</section>

<!-- Family Area -->
<section class="p-family-area">
  <div class="p-family-area__inner l-container">
    <h2 aria-label="エリア">area</h2>
    <p class="p-family-area__text">エリア説明</p>
  </div>
</section>

Location Area

.p-location-area（ロケーションエリアリスト）

area

  • 熊本市内
  • 阿蘇エリア
  • 天草エリア
  • 黒川温泉エリア 
<section class="p-location-area">
  <div class="p-location-area__inner l-container">
    <h2 aria-label="エリア">area</h2>
    <ul class="p-location-area__list">
      <li class="p-location-area__list-item">
        <span class="p-location-area__area-name">熊本市内</span>
      </li>
    </ul>
  </div>
</section>

Recruit Message

.p-recruit-message（採用メッセージ + フォトグリッド）

一緒に、想いを記録しよう。

Let's capture memories together.

Photo 1
Photo 2
Photo 3
Photo 4
LuMEMEでは、写真・映像の力を信じ、人生の大切な瞬間を丁寧に残すことに情熱を持つ仲間を求めています。
経験よりも、想いと姿勢を大切にしています。一緒に成長しながら、お客様の記憶に残る仕事をしましょう。
<section class="p-recruit-message">
  <div class="p-recruit-message__inner l-container">
    <h2 class="p-recruit-message__catchcopy-ja">キャッチコピー</h2>
    <p class="p-recruit-message__catchcopy-en">English</p>
    <div class="p-recruit-message__grid">
      <!-- 画像4枚 -->
    </div>
    <div class="p-recruit-message__columns">
      <div class="p-recruit-message__col">左カラム</div>
      <div class="p-recruit-message__col">右カラム</div>
    </div>
  </div>
</section>

Recruit Jobs

.p-recruit-jobs（求人情報リスト）

recruitment

フォトグラファー（正社員）

勤務地
熊本市内（スタジオ）/ ロケーション各地
勤務時間
10:00〜19:00（実働8時間）
休日
週2日（シフト制）
給与
月給 220,000円〜
Image 1
Image 2
応募する → 
<section class="p-recruit-jobs">
  <div class="p-recruit-jobs__inner l-container">
    <h2 class="p-recruit-jobs__title" aria-label="採用職種">recruitment</h2>
    <article class="p-recruit-jobs__item">
      <h3 class="p-recruit-jobs__item-type">職種名</h3>
      <dl class="p-recruit-jobs__item-detail">
        <dt>勤務地</dt><dd>熊本市内</dd>
        <dt>給与</dt><dd>月給 000,000円〜</dd>
      </dl>
      <div class="p-recruit-jobs__item-images"><img ...></div>
      <a class="c-btn c-btn--primary" href="...">応募する →</a>
    </article>
  </div>
</section>