【コピペでOK】ポケモンZA公式サイトのオシャレフレーム

『Pokémon LEGENDS Z-A M次元ラッシュ』の公式サイトではメガシンカグラデーションのおしゃれなフレームが使われている

出典： 強力な「異次元レベル」のポケモンたち ｜ 『Pokémon LEGENDS Z-A M次元ラッシュ』公式サイト より

Reactコンポーネントコード

このフレームを汎用的に使えるようReactコンポーネント化したものがこちら（TailwindCSSv4併用）

See the Pen ZAFrame by hrel11 (@hrel11) on CodePen.

ZAFrameコンポーネント

interface ZAFrameProps {
  children?: React.ReactNode;
}

const ZAFrame = ({ children }: ZAFrameProps) => {
  return (
    <div className="relative w-fit h-fit">
      {/* background */}
      <div className="absolute inset-0 [--padding:30px] [--rounded:9px] m-[calc(-1*var(--padding))] border-solid border-(length:--padding) border-transparent rounded-[calc(var(--padding)+var(--rounded))] [mask:linear-gradient(#000_0_0)_border-box,linear-gradient(#000_0_0)_padding-box] mask-size-[100%] mask-center mask-no-repeat mask-subtract">
        <div className="[--rounded:9px] relative w-full h-full rotate-2 before:absolute before:inset-[-4px] before:block  before:bg-linear-[90deg,#c0ff00_0%,#00ff47_33%,#2e83dc_66%,#ca41dd_100%] before:blur-[4px] before:rounded-(--rounded) before:content-[''] after:absolute after:inset-0 after:block after:opacity-85 after:bg-[rgba(66,60,60,0.85)] after:rounded-(--rounded) after:content-['']"></div>
      </div>

      {/* content */}
      <div className="rounded-xl relative overflow-hidden bg-[rgba(66,_60,_60,_0.85)] after:w-[90px] after:absolute after:right-0 after:bottom-0 after:bg-[linear-gradient(315deg,_rgb(25,_95,_50)_0%,_rgb(0,_68,_81)_15%,_rgba(0,_68,_81,_0)_50%)] after:aspect-square">
        <div className="relative">{children}</div>
      </div>
    </div>
  );
};

レイヤー構造

before/afterの疑似要素を駆使して表現されている

便宜上以下の通り番号を振っている

• [1] メガシンカ色シャドー
• [2] 傾き背景
• [3] コンテンツ背景
• [4] コンテンツ
• [5] アクセント

各種スタイルの詳細

傾き

[1:メガシンカ色シャドー] と [2:傾き背景] の傾き表現は 生成元div要素に付与された rotate-2 によるもの。
これを使って傾きを好きなように変化させよう

See the Pen Untitled by hrel11 (@hrel11) on CodePen.

ページの背景色

[1:メガシンカ色シャドー] の存在感を際立たせるには黒色系の背景が最適。
白系では発光の境界がぼやけて見える

グラデーション＋ブラー

[1:メガシンカ色シャドー] では bg-linear と blur を併用することでネオン調の光源が表現されている。
特にブラー効果による印象の変化は大きい

See the Pen ZAFrame - blur demo by hrel11 (@hrel11) on CodePen.

コンテンツの背景色

[4:コンテンツ] が背景透過画像である場合：

• [3:コンテンツ背景] を白色系にするとフレーム部分とのコントラストにより角度ズレの表現が分かりやすくなる
• [3:コンテンツ背景] を黒色系にすると [5:アクセント] が自然に溶け込みやすい。背景色に応じて [5:アクセント] を白色系に設定するのもあり

疑似要素のレイヤー

[5:アクセント] はafter疑似要素であり、デフォルトでは [4:コンテンツ] よりも手前のレイヤーに表示される

• もし [5:アクセント] がbeforeならば [4:コンテンツ] よりも後ろのレイヤーに表示される。
• position 等によりstacking contextが変わる場合はその限りではない

コピーライト

©2025 Pokémon. ©1995-2025 Nintendo/Creatures Inc. /GAME FREAK inc.
ポケットモンスター・ポケモン・Pokémonは任天堂・クリーチャーズ・ゲームフリークの登録商標です。