未来をつくる会社
行ごとに立ち上がる
下から1行ずつせり上がる。いちばん外さない出し方で、企業サイトの見出しの定番。
Motion Catalog
作れるモーション
背景・文字・ボタン・グラフ・画像の動きを、種類ごとに並べました。 すべてこのページの中で実際に動きます。ボタンを押したり、カーソルを乗せたりして確かめてください。
- すべて自作HTML / CSS / WebGL。有料の素材や外部ライブラリは使っていません
- そのまま組み込める既存のサイトにも、必要な部分だけ足せます
- 止められる「動きを減らす」設定の端末では、自動で静かな表示に切り替わります
01 / Background
背景を動かす
画面いっぱいの背景を、WebGLで描いています。どれもカーソルに反応します。 下のボタンで切り替えて見比べてください。
- すべて自作three.js などのライブラリは使わず、数十行のGLSLを直接書いています。
- どれも触れる15種すべてがカーソルの位置と速さを受け取って形を変えます。
- 重い端末では落とすWebGLが使えない端末と「動きを減らす」設定では、静止した背景に切り替わります。
- 文字が読める明るさ見出しが載る中央はどれも沈めてあるので、上に白文字を置けます。
★ 重い端末では自動で軽い描き方に落とします。WebGLが使えない端末では静止した背景になります。
02 / Typography
文字を見せる
見出しやキャッチコピーの出し方です。カードの「もう一度」を押すと、その場で動きます。 読ませる文章には使わず、見出し1つに絞るのが効きます。
ひとつずつ、ていねいに
1文字ずつ起き上がる
文字が奥から倒れた状態で立ち上がる。ブランドサイトや特設ページ向け。
DIGITAL PARTNER
文字化けから解ける
でたらめな字が左から確定していく。IT・製造・セキュリティの見出しに合う。
上質を、あたりまえに
光の帯が通る
文字の中を白い光がゆっくり横切る。止まっている時は単色なので読みやすい。
50年、地域とともに
下から流し込む
塗りが下から満ちて文字が現れる。周年・実績の見出しに落ち着いて効く。
SYSTEM ONLINE
一瞬だけ乱れる
赤と水色がずれて画面が荒れる。頻度を落として使うと近未来の気配だけが残る。
さわって確かめる
カーソルで太くなる
近づいた文字だけ太く大きくなる。カーソルを乗せて動かしてみてください。
0社の導入実績
数字が数え上がる
実績の数字が0から回る。桁を揃えて動かすので、途中で幅がガタつかない。
一枚ずつ、めくる
横から拭き出す
色の板が左から右へ抜け、通り過ぎた所に文字が残る。展示会・イベントの告知に。
静かに、確かに
ぼけから合う
ピントが外れた状態から合っていく。写真の上に重ねる見出しと相性がいい。
ひろがる可能性
字間がひらく
詰まった文字が息を吸うように広がる。短い英字のロゴタイプに効く。
上と下で、ずれる
上下に割れて合う
文字が上半分と下半分に割れた状態から噛み合う。見出し1行だけに使う。
★ 複製した文字はすべて読み上げから外し、見出し本体だけが読まれるようにしています。 「動きを減らす」設定では、最初から出来上がった文字が置かれます。
04 / Data
数字・グラフ
実績や調査結果を、読み取れる形にします。 目盛りと数値を必ず出し、点や棒にカーソルを乗せる（キーボードでも辿れる）と内訳が出ます。
推移を見せる（折れ線）
左から線が引かれ、下の面が満ちる。点に触れるとその月の値が出る。お問い合わせ数・売上の推移に。
比べる（棒グラフ）
2つの年を並べて立ち上げ、棒の上に数値を出す。前年比・店舗別の比較に。
内訳を見せる（ドーナツ）
弧が順に描かれ、触れた部分だけ前に出る。流入元・年齢層の内訳に。
★ どのグラフも、同じ内容を表としても持たせています。画面には出しませんが、 読み上げソフトでは数値がそのまま読まれるので、グラフが「見える人だけのもの」になりません。
05 / Media
画像・カード
写真の見せ方と、並べたカードの動きです。支給写真が平凡でも、置き方と動きで印象は変わります。
BAKERY
傾くカード
カーソルの位置に合わせて奥行きが変わり、光が差す向きも変わる。商品カードや実績一覧に。
前後をくらべる
つまみを左右に動かすと、2枚が入れ替わる。リニューアルの前後や、施術・施工の比較に。キーボードの左右キーでも動きます。
寄って、説明が出る
カーソルを乗せると写真が静かに寄り、下から説明が現れる。実績一覧の定番。
HTML / CSSJavaScriptWebGLWordPressReactFigma
技術的SEOMEOAEO / GEOアクセシビリティ表示速度
流れる帯
2段が逆方向にゆっくり流れる。取引先のロゴや対応範囲を、場所を取らずに見せる時に。
WEB SITE
企業サイト一式
詳しく見る →
縁の光が回るカード
カードの後ろに置いた色の板を180度回し、その手前でぼかす。料金表やプラン紹介の「おすすめ」1枚だけに使う。
制作
運用
改善
重なったガラスが開く
ふだんは3枚が重なっていて、触れると扇のように開く。サービスが3つある会社の入口に。
月額プランカーソルを乗せる
¥38,000 / 月更新・修正・解析まで込み
めくれるカード
裏に答えを置いて、触れた時だけ見せる。料金・スタッフ紹介・よくある質問に。キーボードでもめくれます。
COMPANY
SINCE 2019
DESIGN & DEVELOPMENT
枠と字間が開くカード
触れると内側に枠が引かれ、ロゴの右に社名が伸びて、下の英字の字間が開く。会社紹介の顔として。
CREDIT
4921 88•• •••• 3047
T. HARAI / 09 / 30
314
カードをめくる
表と裏を1枚で見せる。決済まわりの説明や、遊びのある会社紹介に。キーボードでもめくれます。
98Lighthouse スコア
中で色が動くカード
すりガラスの裏で光の玉が回り続ける。数字1つを大きく見せたい時に、止まって見えない。
並ぶアイコンが開く
ふだんは1枚の板。触れるとタイルが離れてアイコンが浮き出る。フッターのSNS一覧に。
23°
東京・晴れ
触ると詳しく出るカード
ふだんは要点だけ。触れた時に下から続きが滑り出る。ダッシュボードや店舗情報の一覧に。
★ 流れる帯は、後半の複製を読み上げから外しています（同じ言葉が2回読まれないようにするため）。
06 / Loading
読み込み中の見せ方
待ち時間は必ず発生します。何も出ないと「壊れた」と思われるので、 どれくらい待つのかが伝わる形を選びます。 短い処理は回るもの、長い処理は進み具合が分かるものに。
階段を跳ねる
玉が潰れて伸びながら段を上がる。1〜3秒で終わる処理に。長いと同じ動きの繰り返しが気になる。
輪を走査する
線の長さと位置が同時に変わるので、同じ絵が戻ってこない。5〜20秒の処理に向く。
速さの違う3本の弧
周期が揃わないので、長く見ていても飽きない。回線が遅い環境の保険に。
3つの点
いちばん控えめ。ボタンの中やフォームの送信中など、狭い場所に置ける。
積み上がるバー
音の波形のように上下する。動画・音声の処理中など「重い作業」の合図に。
輪郭をなぞる
ロゴや図形の線を描き足していく。待ち時間そのものをブランドの見せ場にできる。
0%
数字で残りを見せる
30秒を超える処理には必ず数字を出す。回るだけだと「すぐ終わる」と約束したことになる。
中身の形で待たせる
出来上がりの形を先に置いておく。読み込み後に画面が飛び跳ねないので、いちばん親切。
8つの点が回る
丸く並んだ点が順に膨らむ。1周の途中で消えないので、長い待ち時間でも落ち着いて見ていられる。
立方体が回る
4枚の面をZ方向に押し出して箱にし、軸ごと回す。製造・建築・3Dを扱う会社の待ち画面に。
ページがめくれる
紙が1枚ずつ倒れていく。資料・カタログ・記事の読み込みに合わせると、待つ理由が伝わる。
荷物が走る
道だけが流れ、車は上下に揺れる。物流・EC の「配送状況を調べています」に。
洗濯機が回る
途中で速さが変わって脱水に入る。長く待たせる処理ほど、見ていて飽きないものを置く。
三つ巴
全体が回りながら、3つの玉が別々に上下する。小さくしても形が崩れないので、ボタンの中にも置ける。
ゆりかご
両端だけが振れ、間の玉は動かない。全部動かすと、運動が伝わっているように見えなくなる。
四角が回る
8つの四角が外周を1マスずつ送られていく。角ばった見た目なので、工業・建設系の待ち画面に合う。
タイプライター
紙が1行ずつ送られ、打ち終わると本体が跳ねる。原稿・記事を書き出している最中の画面に。
線が一周する
折れ線の上を短い線が走り抜ける。心電図や計測に近い見た目なので、医療・検査の待ち画面に。
回し車のハムスター
画像は1枚も使わず、CSSの角丸と切り抜きだけで描いています。待ち時間そのものを話題にできるので、30秒以上かかる処理に。ふざけた印象になるため、選べる場面は限られます。
速さの違う4つの輪郭
4つの形が別々の速さで回り、端まで行くと向きを変えて戻ります。周期が噛み合わないので同じ絵が返ってこない。10秒以上かかる処理でも見ていられます。
下から昇る玉
線から玉が湧いて、上へ抜けながら消えます。上向きの動きは「送っている」感じが出るので、アップロード中や送信中に。
★ どれも role="status" を付けて、読み上げソフトに「読み込み中」と伝わるようにしています。
「動きを減らす」設定では回転を止め、静かな表示に切り替えます。
07 / Layout
並べ方・組み方
動きだけでなく、どう並べるかでも伝わり方は変わります。 よく使う組み方を、実際の寸法のまま置きました。
高さの違う写真を隙間なく（メーソンリー）
縦横がバラバラの写真でも、切らずにそのまま並べられる。作品集・施工事例に。
重なって積まれるカード
スクロールすると次のカードが上に重なり、前のカードは奥へ下がる。手順や特長を順に見せる時に。
写真と文章を左右交互に
同じ形を繰り返しながら左右を入れ替える。項目数が増えても飽きず、スマホでは自動で縦一列に。
- 1ご相談
- 2お見積り
- 3制作
- 4公開
手順を1本の線で見せる
スクロールに合わせて線が伸び、通過した丸が灯る。「依頼してから公開まで」の説明に。
★ どれも中身の量が変わっても崩れない組み方にしています（高さの決め打ちをしていません）。