SHITAJI
使い方テンプレートパーツ料金メディアFAQログイン無料で登録する

← 使い方ガイド

WebGL演出をサイトに実装する

約4分・SHITAJIテンプレートのWebGL演出を選び、屋号・ひとことを入れて、StudioのBlankパーツか自分のサイトのHTMLへ貼り付けるまでの流れ。

マウスに反応して動く文字などのWebGL演出を、サイトを丸ごと作り直さずに、 いま持っているサイトへあとから足せます。実体は1個の埋め込みコード(<iframe>タグ)なので、Studioの「埋め込み」パーツの「Blank」に直接貼り付けるか、 ふつうの地図埋め込みや動画埋め込みと同じ要領で自分のサイトのHTMLへ貼り付けてから SHITAJI に読み込みます。

選ぶ

サイドバーの「SHITAJIテンプレート」→「WebGLテンプレート」タブを開くと、 演出の種類が並びます。すべて実際に動くプレビュー付きです。

SAMPLE
波紋グリッド
水面に浮かぶ文字に、カーソルを中心とした波紋が広がります。

カードをクリックすると詳細(ライブプレビュー・入力欄)が開きます

1

屋号・ひとこと・色を入れる

気に入った演出のカードを開き、屋号(メインテキスト)とひとこと(サブテキスト・任意)、文字色と背景色を入力します。入力・変更するたびにプレビューが更新され、 下の「埋め込み用のコード」も書き変わります。この入力にはログインが必要です(無料です)。 ログインしていない間は、見本(SAMPLE)のプレビューだけが見られます。

屋号(メインテキスト)
なぎさ動物病院
ひとこと(サブテキスト・任意)
毎日のことだから、いちばん近くに。
文字色
背景色
埋め込み用のコード
<iframe src="https://shitaji.org/api/webgl-hero?...&sig=..." style="width:100%;height:480px;border:0"></iframe>
コピーする

屋号・ひとこと・色を変えると、下のコードもその内容に更新されます

2

埋め込みコードをコピーする

「コピーする」を押すと、<iframe>タグ1行がコピーされます。 高さ(height)はご自分のヒーロー領域の大きさに合わせて数値を書き換えてかまいません。

3

貼り付ける(2つの方法)

すでにStudioで作業しているか、まだSHITAJIにサイトを読み込んでいないかで、 貼り付け先が変わります。

すでにStudioで編集中の場合

Studioの「埋め込み」パーツの「Blank」を追加し、コピーしたコードをそのまま貼り付ければ完成です。 地図・動画の埋め込みと同じ操作なので、SHITAJIへの読み込みは不要です。

まだSHITAJIに読み込んでいない場合

SHITAJI のエディタは読み込んだあとに新しい要素を追加することはできません (→ エディタで直せること・直せないこと)。 そのため、コピーしたコードはSHITAJI へ読み込む前に、 お使いの元のHTMLファイルへ貼り付けてください。ヒーロー(見出し・メインビジュアル)の 部分をこの<iframe>タグに置き換えるのが基本の使い方です。

4

SHITAJI に読み込み、Studio へ書き出す

前の手順でHTMLファイルに貼り付けた場合は、そのファイルを、いつもどおり 読み込んで ください。<iframe>はそのまま取り込まれます(地図・動画の埋め込みと同じ扱いです)。 あとは通常どおり文字・色・画像を整え、「Studio用に書き出す」→コピー&貼り付け(⌘V、Windowsは Ctrl+V)で Studio に追加すれば完成です(うまくいかないときは SHITAGAKI(Chrome拡張) も使えます)。Studioの「Blank」に直接貼り付けた場合は、この手順は不要です。

演出そのものは無料です(実費が掛からない仕組みで作っているため)。 クレジットが減るのは、いつもどおり「Studio用に書き出す」ときだけです (→ クレジットの数え方)。

SHITAJI

下地は、こちらで。デザインは、Studio で。

SHITAJI は、Studio 株式会社とは関係のない独立したサービスです。
同社の公式サービス・公認ツールではありません。
「Studio」は Studio 株式会社の商標です。

作例使い方コンセプトはじめ方テンプレートパーツ対応範囲料金メディアお知らせFAQサービス資料お問い合わせ利用規約プライバシーポリシー特定商取引法に基づく表記ログイン

© 2026 SHITAJI