株式会社ジェイ・プラッカ

1. 01

   ヘッダー

   左にロゴ「J-PLACA」、右に黄色いピル型の「お問い合わせ」ボタンと黒いメニューボタン。下辺を破線で区切る。

2. 02

   ヒーロー

   画面幅いっぱいの白い英字「JOY TOGETHER」の上に、斜めに傾けた和文キャッチを重ね、下部に波打つ形の現場写真4点を高さ違いで並べる。

3. 03

   メッセージ帯

   白い帯の中を企業メッセージの一文が J マークを挟みながら横に流れるテキストマーキー。

4. 04

   NEWS

   左に大きな英字見出しと「お知らせ一覧」ボタン、右にサムネイル・日付付きのお知らせリスト。破線で区切った2カラム。

5. 05

   JOB OFFER

   指差しの手のイラストを添えた見出しの下に、赤・黄・水色・緑の枠付きサムネイルで求人カードを並べ、「求人一覧」ボタンで締める。

6. 06

   COMPANY

   筆文字風の J マークを背景に敷き、「人と人とのつながりを、一番に。」の見出しと会社紹介文、「会社概要」ボタンを配置。

7. 07

   事業紹介

   黄色の EVENT、橙色の SECURITY の2枚のカードを横並びにし、番号・写真・短い説明文と矢印ボタンを入れる。

8. 08

   関連チームロゴ

   スポーツチームのロゴを白いボックスに入れて3点横に並べる。

9. 09

   フッター

   黒い角丸パネルに赤い筆記体の「Let's」と極太英字「JOIN」を大きく置き、社名とリンク、ロゴを添える。

• 英字と写真の波打つ変形は、WebGL（Three.js 等）の平面メッシュの頂点を sin 関数で揺らす方法、または SVG の feDisplacementMap で再現できる。キャプチャからは実装方式までは特定できない
• ヒーロー背景はPCキャプチャで黄色、フルページキャプチャで緑になっており、表示ごとに背景色が切り替わる仕組みと思われる。CSS 変数に色を入れ、JS でランダムに差し替えると再現できる
• メッセージ帯は同じテキストを2つ並べ、CSS の @keyframes で translateX(-50%) までループさせる無限マーキーで実装できる
• ピル型ボタンは右端に白い丸の矢印アイコンを持つ。ホバー時に矢印を右へずらす transition を足すと操作感が出る

検出された技術:WordPress

• 01英字見出しは Big Shoulders のような縦長のコンデンス書体を画面幅いっぱいまで大きく使う
• 02ベースは生成り色（#ecebe7）と黒にし、黄・橙・緑などの原色はセクション単位の面にだけ使う
• 03セクションの区切りに破線（border-style: dashed）を使い、全体の枠組みをそろえる
• 04写真や見出しを水平にそろえず、傾き・変形・高さずれで動きを出す

1---
2title: "株式会社ジェイ・プラッカ 再現用デザイン仕様書"
3source: https://www.j-placa.jp/
4katapick: https://katapick.com/sites/j-placa
5category: コーポレート
6region: 国内 (JP)
7tags: [ビビッド, 大胆なタイポ, 写真主体, マーキー]
8launched: 2026-08
9verified: 2026-09-26
10difficulty: 3/5
11estimated_hours: 24
12generator: Katapick
13---
14 
15# 株式会社ジェイ・プラッカ — 再現用デザイン仕様書
16 
17> でっかい英字と現場写真が、旗みたいにうねってる。イベント運営・警備会社ジェイ・プラッカのコーポレートサイトは、極太英字「JOY TOGETHER」と現場写真を旗のように波打つ形へ変え、スタジアムの熱量をFVの一枚に閉じ込めている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ