プロフィールサイト用の、動くパーツ。元サイトと1コマずつ並べて合わせました。
どれもスクロールやマウスで動きます。開いて触ってみてください。
PARTS 01
ステッカーだらけのオレンジのシャッターで、ロゴが読み込みの%に合わせて塗られ、100%になると自動で1秒かけて上がる。
PARTS 02
黒とオレンジの斜めの帯がスクロールで横にずれ、主役のロボが抜け出して中央へ、帯が割れて黒い画面に「Your order has been received.」が浮かび、最後はオレンジの柱で白へ。
PARTS 02B
最初に作った版。黒とオレンジの帯そのものが流れ続け、スクロールで加速・戻すと逆走。
PARTS 03
大きな英字の見出しが、画面に入ると1文字ずつ下から生えるように出てくる。
PARTS 04
スクロールでステップのカードが横に流れ、線の上をバイクが少し遅れて追いかけ、戻すと反対を向く。
PARTS 05
「Portfolio.」のまわりに飾りステッカーがはずんで現れ、押した場所に裏紙がはがれる新しいステッカーが貼られ、リセットでオレンジの帯が画面を覆って消える。
PARTS 05B
最初に作った版。ステッカーをつまんで動かせ、離すとポンと貼り直る。
PARTS 13
顔が電光掲示板のロボのお店が引いてオレンジ一色になり、英文が流れ込み、カウンターが上がって「What Service Do You Need?」の丸枠へ吸い込まれる。
PARTS 14
まん中のロボのまわりを8つのアイコンが違う速さで上へ流れ、ロボの顔の文字が近くを通るアイコンの名前に切り替わる。
PARTS 15
白いカードの列がスクロールで横に流れ、1枚ずつ見出しだけの札に畳まれ、下からキーワードの丸ボタン一覧が上がってくる。
PARTS 16
黒い場面の終わりに、オレンジから白のグラデーションの柱が段々に昇ってきて白い画面に入れ替わる。
PARTS 17
丸い台の穴から小さなお店が次々と生えては沈み、配達員がまわりを一周する。スクロールで見出しが入れ替わりキャラがせり上がる。
PARTS 18
斜めで小さな黒い板が滑り込んでまっすぐ画面を覆い、中の作品の四角が手前に起き上がるように立ち上がる。
PARTS 19
黒い画面に白い実績カードが順に浮かび、王冠ロボのまわりに星とバッジが漂い、最後にオレンジの柱で白へ。
PARTS 20
扇に開いた3枚のカードが1枚に閉じ、白がめくれてオレンジに。カードの窓が画面いっぱいに広がって絵の世界を横に旅し、また戻る。
PARTS 21
背景が黒に変わってハート目のロボが飛び込み、画面のまん中に来たお客さまの声だけが順に明るくなる。
PARTS 22
ロゴが組み上がって左上へ縮み、オレンジの棒が回りながら中央へ、さらに回転して画面全体を覆い、白いカードが右から滑り込む。
PARTS 23
散らばった顔が整列し、飛び去って背景が黒と巨大な英文に変わり、残った顔がメンバー列の席に着地して大きなキャラが出る。
PARTS 24
下へスクロールで隠れて上で出るヘッダー、黒い箱が伸びるメニュー、いまの場面がオレンジになる左の点、右下の上へボタン。
PARTS 25
説明→大きなFAQ→右端の枠ボタン。質問の札が順に出て、乗せると伸びて薄いオレンジ、押すと答えが開く。
PARTS 08
黒から紫のグラデーションに大きなオレンジの英字、その下で顔が左右2か所に集まって浮かび、マウスで押しのけたり投げたりできる。
PARTS 30
見出しが下からせり上がり、まわりのステッカーがポンと出て裏紙がはがれるように絵が現れ、押した場所に新しいステッカーが貼られる。
PARTS 31
画面に入るとオレンジの見出しと文章が見えている1行ごとに0.1秒ずつずれて下からせり上がる(角丸の大きな写真つきの形も)。
PARTS 32
黒い背景に白いカードが5列で並び、マウスを乗せると四角がゆっくり丸になってキャラが立体版に入れ替わる。
PARTS 33
質問の帯が順に下から出て、乗せると横に伸びて薄いオレンジになり、押すと+が回って答えがスルッと開く。
PARTS 34
夜空から夕焼けのグラデーションに星と大きな「Contact Us」、オレンジの自販機と地面、すりガラスの連絡先板、上へ戻るボタン。
PARTS 06
最後まで来ると黒い画面に黄色が円で広がり、左右から腕が入ってグータッチ、遅れて「LET'S GO!」ボタンが出て、下でメールアドレスが流れ続ける
PARTS 07
右上の白いカプセルを押すと×に変わり、画面が黄色にフェード→白い板が右上から広がり→項目がふわっと出る。大項目は乗せると緑の矢印丸と斜体、小ボタンは文字が下から入れ替わる
PARTS 35
左上のロゴと丸枠ラベルの下を、画面幅の1/5の高さの極太文字がゆっくり左へ流れ続ける
PARTS 36
段が画面の真ん中に来ると、作品画像9枚がばらばらの順にポンと飛び出して重なり合う
PARTS 37
見出しが画面に入ると見えない枠の下からスッとせり上がり、横棒と太い斜体の強調語、右に本文と丸バッジが並ぶ
PARTS 38
縦長の作品動画を左右に、右だけ少し下げて段違いに並べる(音なし自動再生)
PARTS 39
左に傾いた白い帯2本が逆向きに流れ続け、お客様の声と丸い顔写真が交互に並ぶ
PARTS 40
乗せると*が消えて緑の矢印丸が出る白ボタン、文字が入れ替わる丸枠ボタン、緑が広がる丸ボタン、右下の相談ボタン
PARTS 41
大見出しがせり上がり、左に説明文・ボタン・道具アイコン、右に「できること」の2列一覧
PARTS 42
作品の段まで来ると背景が黄色→黒に切り替わり、見出しが2行ずつせり上がり、作品カードがまとめてふわっと現れる。乗せると画像が暗くなる
PARTS 09
音のON/OFFを選ぶと、名札の顔ロゴが弾んで出て口をパクパク、LOADING%→WELCOMEのあと上へ飛び、灰色の幕が丸く抜けて、下の段から顔が弾んで並び左右に流れ続ける
PARTS 10
画面に貼り付いたまま、次の色が下から丸く盛り上がって塗り替わり、言葉が1行ずつ下から上へ流れながら濃く薄くなる。右に場面の点、下にSKIP、最後はロゴとGO丸ボタン
PARTS 50
1画面スクロールするとロゴ・白いカプセルのメニュー・音の丸が順にぽよんと出る。乗せると赤く塗られて文字が入れ替わる。スマホは三本線から吹き出しカードのメニュー
PARTS 51
白い角丸の板が下から追いかけて上がり、写真カードが順に弾んで出る。乗せると青い縁と音マーク、押すと棒がはねて写真が入れ替わる
PARTS 52
ピーチ色の板の上で、画像が1.4倍からふわっと等倍に戻りながら現れ、乗せると縁が出て題名が上下に入れ替わる
PARTS 53
青い角丸の板に白い入力欄。種類は左右の丸ボタンで切り替え、送信ボタンは乗せると白く塗られて文字が入れ替わる。下に細い足元
PARTS 54
乗せると塗られて文字が上下に入れ替わるボタンのまとめ(SKIP・MORE・ALL WORKS・送信・GO・ON/OFF・メニュー・矢印丸・場面の点)
PARTS 55
白→ピーチ→青の角丸の板が、少し下・少し大きめから追いかけて重なり、前の板の中身はわずかに縮んで沈む(メンバー→実績→お問合せ→足元)
PARTS 11
白い画面のロゴ→灰色のラフがばらばらに浮かんで並び→青いカードが収まり→キャラが弧を描いて飛び乗り→吹き出し→見出しとボタンが出る、4.2秒の幕開け。
PARTS 12
青い面で左の目次が貼り付き、右のカードが右下から45°傾いて飛んできて重なり、下のカードは縮んで束になる。足元に流れる白抜き文字と足ぶみキャラ。
PARTS 60
上に固定のすりガラスのメニュー。乗せると青い丸がふくらみ、青い面ではロゴが白に。スマホは丸ボタンから青い全画面メニュー。
PARTS 61
壁の上にすりガラスの白い板がぷるんと広がり、ロゴ・見出し・本文・ボタンが順に下から出る。
PARTS 62
上が大きく丸いすりガラスの面に、イチオシ1件(PICK UP丸・ぼかしが晴れる写真)と3列カードが順に出る。スマホは横スワイプ+位置バー。
PARTS 63
黒い吹き出しアイコンがぽよんと出て、横長の吹き出しの文字が1字ずつのぞき、キャラが飛び込んで着地でつぶれる。記事カードは順に出る。
PARTS 64
青い角丸の板の角からキャラが降りてきて、名刺カードが左上から順に「ぽんっ」と出る。NEWシールは遅れてふくらむ。
PARTS 65
スクロールに合わせて大きな丸い山が降りてきて、吹き出しと「相談してみる」が出て、降りきるとキャラがストンと落ちてつぶれる。下に青いフッター。
PARTS 66
リンクを押すと灰色の幕に足ぶみキャラと咲く花が出て、次のページでは青いカードの形の窓が画面いっぱいに広がって紹介ページになる。