Creative Dev Blog

背景・ビジュアル表現系

JUNKBRANDING Editorial Landing

静的なランディングページの構図を React のコンポーネント構成に置き換え、ブランドタイポとパネル群を一体で見せる記事です。

Y

Yutaka Kizaki

@junkbranding

2026年5月23日

読了時間: 6分

構成 / File Structure

</>Code Viewer

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

function JunkBrandingLanding() {
  const rootRef = React.useRef(null)
  const backdropRows = [
    [
      ['JUNKBRANDING', 'JUNKBRANDING', 'JUNKBRANDING', 'JUNKBRANDING'],
      ['テキストテキスト、、、', 'テキストテキスト、、、'],
      ['テキストテキスト、、、', 'テキストテキスト、、、'],
      ['JUNKBRANDING'],
      [':::..:::.::::..:::'],
    ],
    [
      ['テキストテキスト、、、'],
      ['// / / ///// / / / ///'],
      ['JUNKBRANDING / 17%'],
      ['テキストテキスト、、、', 'テキストテキスト、、、'],
      ['テキストテキスト、、、', 'テキストテキスト、、、'],
      ['JB-01'],
    ],
  ]

React.useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.set('.jb-copy-line, .jb-status-line, .jb-hero-word', {
        yPercent: 100,
      })

gsap.set('.jb-circle-track, .jb-circle-progress', {
        strokeDasharray: 974,
        strokeDashoffset: 974,
      })

const timeline = gsap.timeline({ defaults: { ease: 'power3.out' }, delay: 0.6 })

timeline
        .to('.jb-copy-line', {
          yPercent: 0,
          duration: 0.72,
          stagger: 0.035,
        })
        .to(
          '.jb-circle-track',
          {
            strokeDashoffset: 0,
            duration: 1.75,
            ease: 'power2.inOut',
          },
          '<'
        )
        .to(
          '.jb-circle-progress',
          {
            strokeDashoffset: 140,
            duration: 1.75,
            ease: 'power2.inOut',
          },
          '<0.08'
        )
        .to(
          '.jb-status-line',
          {
            yPercent: 0,
            duration: 0.72,
            stagger: 0.06,
          },
          '-=0.72'
        )
        .to('.jb-preloader-shell', {
          scale: 0.92,
          duration: 1.2,
          ease: 'power2.inOut',
        })
        .to(
          '.jb-preloader',
          {
            clipPath: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)',
            duration: 1.25,
            ease: 'power4.inOut',
          }
        )
        .to(
          '.jb-hero-revealer',
          {
            clipPath: 'polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)',
            duration: 1.25,
            ease: 'power4.inOut',
          },
          '<'
        )
        .to(
          '.jb-hero',
          {
            scale: 1,
            duration: 1.2,
            ease: 'power4.out',
          },
          '<0.06'
        )
        .to(
          '.jb-hero-word',
          {
            yPercent: 0,
            duration: 0.95,
            ease: 'power3.out',
          },
          '<0.12'
        )
    }, rootRef)

return () => ctx.revert()
  }, [])

return (
    <section ref={rootRef} className="jb-landing">
      <div className="jb-preloader-backdrop" aria-hidden="true">
        {backdropRows.map((columns, rowIndex) => (
          <div key={`row-${rowIndex}`} className="jb-backdrop-row">
            {columns.map((lines, columnIndex) => (
              <div key={`col-${rowIndex}-${columnIndex}`} className="jb-backdrop-col">
                {columnIndex === 3 && rowIndex === 0 ? (
                  <div className="jb-logo-mark" />
                ) : (
                  lines.map((line, lineIndex) => <p key={`line-${lineIndex}`}>{line}</p>)
                )}
              </div>
            ))}
          </div>
        ))}
      </div>

<div className="jb-preloader">
        <div className="jb-preloader-row">
          <p><span className="jb-copy-line">JUNKBRANDING</span></p>
        </div>

<div className="jb-preloader-row">
          <div className="jb-preloader-col">
            <div className="jb-preloader-sub-col">
              <p><span className="jb-copy-line">テキスト</span></p>
              <p><span className="jb-copy-line">テキスト</span></p>
            </div>

<div className="jb-preloader-sub-col">
              <p><span className="jb-copy-line">テキスト</span></p>
              <p><span className="jb-copy-line">テキスト</span></p>
            </div>
          </div>

<div className="jb-preloader-col">
            <p><span className="jb-copy-line">JB-01</span></p>
          </div>
        </div>

<div className="jb-preloader-shell" aria-hidden="true">
          <div className="jb-logo-core" />
          <div className="jb-status-copy">
            <span className="jb-status-line">JUNKBRANDING</span>
          </div>
          <div className="jb-status-copy jb-status-copy-outro">
            <span className="jb-status-line">テキストテキスト、、、</span>
          </div>

<svg viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle
              className="jb-circle-track"
              cx="160"
              cy="160"
              r="155"
              stroke="#2b2b2b"
              strokeWidth="2"
            />
            <circle
              className="jb-circle-progress"
              cx="160"
              cy="160"
              r="155"
              stroke="#fff"
              strokeWidth="2"
            />
          </svg>
        </div>
      </div>

<section className="jb-hero">
        <div className="jb-hero-revealer" aria-hidden="true" />
        <h1>
          <span className="jb-word-wrap">
            <span className="jb-hero-word">JUNKBRANDING</span>
          </span>
        </h1>
        <p className="jb-hero-meta">テキストテキスト、、、</p>
      </section>
    </section>
  )
}

企画メモ

今回はこれ以外: preloader -> card align -> central visual expand の多段構成以外
今回の主役: ブランドタイポと情報パネルを同時に立ち上げるファーストビュー
差分: ローディング起点ではなく初期表示のスタッガー / 5枚整列ではなく左右 2 カラム / 見せ場は 1 画面内

実装の狙い

静的な見た目をそのまま持ち込むのではなく、配列マップでナビやパネルを組み直す形にしておく。後で差し替える前提なら、ここを React 側で管理できる方が楽。

見出しやブランドラベルは JUNKBRANDING に寄せて、本文は テキストテキスト、、、 に統一。見た目の空気だけ先に残して、中身はあとで差し替える想定。

組み合わせのポイント

ブランドタイポ、情報パネル、軌道オブジェクトを同時に立ち上げて 1 画面内で密度を作る
左側は文字、右側はカード群に分けて、役割を明確にしたまま同時進行で見せる
ナビ、メトリクス、パネルを同じブランドトーンで揃えて、差し替え前提の雛形にする
初期表示だけで空気を作り、ローディングやスクロール依存にはしない

実装のポイント

繰り返し要素は配列で持ち、JSX で map して差し替えやすくする
初期表示アニメーションは gsap.context() 内に集約して、セレクタ管理を閉じる
タイポ、カード、軌道で初期値を変えて、同じ timeline でも見え方に段差を作る
モバイルではレイアウトを縦積みに落として、同じコンポーネントのまま崩れを防ぐ

React化したポイント

繰り返し要素は配列化して JSX 側で持つ
初期表示アニメーションは useEffect と GSAP timeline に寄せる
見た目の雰囲気は残しつつ、カードとパネルは再利用しやすくしておく

タグ

CSSJavaScriptUIUXアニメーション

表現タイプから探す

スクロール連動

スクロールに連動する多彩な表現を集めました。

パララックス系

奥行き感や視差効果で没入感を高める表現です。

カード・UIパーツ系

カードやUIパーツのインタラクティブ表現。

テキスト演出系

文字を魅せるための多彩なテキスト表現。

ページ遷移・画面切り替え系

ページやセクションのスムーズな切り替え表現。

ローディング系

読み込みを楽しく魅せるローディング表現。

マウス・インタラクション系

カーソル操作に反応するインタラクティブ表現。

背景・ビジュアル表現系

背景やビジュアルで魅せるダイナミックな表現。

3D・WebGL寄り

WebGLや3Dを活用したリッチな表現カテゴリ。

ボタン・CTA系

CTAやボタンを魅力的にするアニメーション表現。

関連記事

GSAPアニメーションUI

Particle Glass Background Shift

背景のパーティクルアニメーションとガラス風パネルを重ねて、情報面を際立たせるビジュアル表現です。

2026年5月19日

GSAPUIインタラクションアニメーション

Magnetic Cards Stagger

カードの登場アニメーションに、ホバー時のマグネット挙動を組み合わせた UI 表現です。

2026年5月19日

GSAPSplitTextCSSJavaScriptプリローダーアニメーション

Buckssauce Landing Page Reveal React

円形clip-pathの多層カラーリビールからフード画像を放射状に散らし、ズーム退場でSplitTextヒーローへ繋ぐランディング導入をReactへ移植しました。

2026年7月10日