0

LOADING SHOWCASE

SHOWCASE SHOWCASE SHOWCASE

CRAFT

私たちが作るWebサイトを体感

SCROLL

アニメーション演出

動きで魅せる — サイトに命を吹き込む表現技術

粒子エフェクト

パーティクル演出

ホバーで粒子が浮き上がる動的背景

構造から設計し、

価値を正しく伝える。

タイプライター

タイプライター効果

テキストが打ち込まれるアニメーション

スムースアニメーション

スムーズモーフィング

形状が滑らかに変形するCSS表現

0

Projects Delivered

カウントアップ

数字アニメーション

数値が勢いよくカウントされる演出

SVGアニメーション

パス描画エフェクト

線画が一筆書きで描かれる

← カードをタップで体感 →

インタラクション

触れて感じる — ユーザーの操作に応答するUI技術

3Dインタラクション

3Dティルト効果

マウスに追従する立体的なインタラクション

リップルエフェクト

ホバーリップル

触れた場所から波紋が広がる

HOVER ME

マグネット効果

マグネットボタン

マウスに吸い寄せられるUI要素

カーソル演出

カーソルトレイル

マウスの軌跡が光の尾を引く

← カードをタップで体感 →

デザイン＆テクノロジー

見た目と技術の融合 — 先進的なビジュアル表現

データ可視化

データビジュアライズ

数値を視覚的に伝えるチャート表現

メッシュグラデ

グラデーションメッシュ

有機的に溶け合うカラー背景

MOBILE VIEW

レスポンシブ

デバイス対応

PC→スマホにリアルタイムで変形

← カードをタップで体感 →

HOW WE BUILD

1つのサイトが完成するまで — クリックでプロセスを体感

1

Step 01

構造設計

サイトマップと導線をワイヤーフレームで設計

2

Step 02

ビジュアルデザイン

ブランドに合わせたオリジナルデザインを制作

3

Step 03

コーディング

セマンティックHTML・CSS・JSで構築

4

Step 04

レスポンシブ対応

全デバイスで美しく表示されることを確認

5

Step 05

公開・運用開始

最終チェック後、本番環境へデプロイ

onecraft-ne.jp

OC

One Craft

<header class="header">

<nav class="header__nav">

<a href="#philosophy">Philosophy</a>

</nav>

</header>

<section class="hero">

<h1>御社の価値を、構造から。</h1>

<a class="hero__btn">ご相談</a>

</section>

✓

SITE IS LIVE

GET STARTED

想像してください。
御社のサイトが変わる未来を。

お問い合わせ

🩺 AI 無料診断