【カウントアップ】
数値に動きを与え、実績の信頼性と注目度を高めます。
【Gsap】
- スクロールで表示時にカウント開始
- 桁区切りと整数丸めで見やすく整形
- アニメーション無効設定時は静止値表示
CONCEPT
Design that conveys emotions
— not just beauty, but a story that stays with you. —
SERVICE
From design to realization
— bringing ideas to life through the web. —
「Webサイトを新しく作りたい」「想いをかたちにしたい」
その最初のイメージから、公開までを一貫してお手伝いします。
デザイン・コーディング・WordPress構築を通して、
目的に合わせた最適な表現をつくり上げます。
WORKS
Stories told through design.
SKILL
Behind every scene,
there’s craft that brings stories to life.
【CSSアニメーション】
repeating-linear-gradient と @keyframes を用いた無限ループ背景演出（映画フィルム風アニメーション）
【CSS】
- 画像を使わずに背景模様を生成
- @keyframes + repeating-linear-gradient による無限ループアニメーション
- 軽量かつGPUレンダリング最適化
【3Dカルーセル】
立体的な回転アニメーションを用いて、複数の画像・要素を視覚的に魅せる表現です。 空間の奥行きを利用することで、動きに印象が生まれます。
【CSS】
- CSS の transform: rotateY() を使った 3D 演出で、複数の画像を立体的に回転表示します。
- 平面では表現できない「奥行き」を与えることで、作品に没入感をプラス。
- CSS の 3D 変形を活用し、画像を円状に配置した立体スライダーを実装。
To be continuation
PRODUCTION FLOW
Behind every story, there's a process of creation.
-
01
ご相談・お見積もり
コンセプトや目的を
丁寧にお伺いし、
理想の形を一緒に
描いていきます。 -
02
構成・デザイン
想いを伝えるための体験を
デザインし、
物語を形にしていきます。 -
03
コーディング
デザインに命を吹き込み、
動きと温度を感じる
Webサイトへと仕上げます。 -
04
ご確認・調整
細部まで確認を重ね、
完成度を高めながら
最終調整を行います。 -
05
納品・公開
想いが込められた
作品を公開し、
“心を動かす”
Webとして届けます。
ABOUT
Behind the scenes
— A glimpse into my design story. —
デザインを始めたきっかけは、演劇のパンフレットづくりでした。
そのとき感じた「人の想いを形にできる喜び」が、今の原動力です。
制作では、最終的な目的を明確にし、
どうすれば理想の成果に近づけるかを常に考えています。
コーディングでは、アニメーションの一つひとつに意味を持たせ、
丁寧に仕上げることを心がけています。
クライアントと同じ視点で考え、共に創る。
その積み重ねが、より良いデザインを生むと信じています。
そのとき感じた「人の想いを形にできる喜び」が、今の原動力です。
制作では、最終的な目的を明確にし、
どうすれば理想の成果に近づけるかを常に考えています。
コーディングでは、アニメーションの一つひとつに意味を持たせ、
丁寧に仕上げることを心がけています。
クライアントと同じ視点で考え、共に創る。
その積み重ねが、より良いデザインを生むと信じています。