Works 制作実績

デザインの意図を崩さないことを第一に、余白やアニメーションのタイミングまで丁寧に再現することを心がけています。

わかば個別指導塾

わかば個別指導塾

学習塾サイト

・担当範囲：コーディング

・使用技術：HTML、CSS（Sass）、JavaScript

・制作期間：14日間

・概要
パララックス表現や背景固定、モーダルウィンドウなど複数の技術を用い、ユーザー体験を意識した動きのある実装を行っています。

ワンダーグローブ

Wonder Globe

観光サイト

・担当範囲：コーディング

・使用技術：HTML、CSS（Sass）、JavaScript

・制作期間：10日間

・概要
UIの印象を高めるため、複数のアニメーションを実装し、上質感のある表現を意識しました。

グローバルスタンダード

Global Standard

学習塾サイト

・担当範囲：コーディング

・使用技術：HTML、CSS（Sass）、JavaScript、WordPress

・制作期間：14日間

・概要
FLOCSS設計を採用し、長期運用を想定した保守性・拡張性の高いCSS構成を意識しました。WordPressではカスタム投稿タイプを用い、クライアントの使いやすさを考慮した実装を行っています。

ホームへ戻る

わかば個別指導塾 学習塾サイト、自主制作

パララックス表現や背景固定、モーダルウィンドウなど複数の技術を用い、ユーザー体験を意識した動きのある実装を行っています。

サイトを見る

ID:demo

PW:demo

わかば個別指導塾
フェードイン

GSAPによる「時間差フェードイン」と繊細なイージング制御

GSAPを用いてアニメーションを制御し、複数要素を時間差でフェードインさせる演出を実装しています。各要素の開始タイミングやイージングを調整することで、流れのある自然な表示を意識しました。

#GSAP

#JavaScript

パララックス

「円形マスク」スライダーとモーション演出

パララックス効果を取り入れ、スクロールに応じて要素ごとに異なる動きを付けた演出を実装しています。 奥行き感を意識しつつ、過度にならないよう速度やタイミングを調整しました。

#GSAP

#CSS

バリデーションエラー

入力離脱を防ぐJSによる「リアルタイムバリデーション」

JavaScriptを用いてフォームの制御を行い、入力内容に応じたバリデーションエラーを実装しています。 必須項目の未入力や入力形式の不備をリアルタイムで検知し、ユーザーが迷わず修正できるよう配慮しました。

#JavaScript

#EFO

背景固定

Sticky 背景と GSAP フェードインによるスクロール演出

position: sticky; を使用して背景を固定し、スクロールに合わせた視覚的な演出を実装しています。 あわせてGSAPを用いたフェードインアニメーションを組み込み、表示タイミングや動きにメリハリを持たせました。

#GSAP

#JavaScript

フェードイン

GSAPによる「時間差フェードイン」と繊細なイージング制御

GSAPを用いてアニメーションを制御し、複数要素を時間差でフェードインさせる演出を実装しています。各要素の開始タイミングやイージングを調整することで、流れのある自然な表示を意識しました。

#GSAP

#JavaScript

製作詳細

担当範囲：

コーディング（デザインはFigma支給）

使用技術：

HTML、CSS（Sass）、JavaScript

制作期間：

14日間

制作概要：

・実際のクライアントワークを想定し、要件の確認や修正対応を含め、実務に近い形で制作を進めました。

・パララックス表現や背景固定、モーダルウィンドウなど複数の技術を用い、ユーザー体験を意識した動きのある実装を行っています。

ご依頼までの流れ

Step 01
ご相談、お見積り

まずはご要望や課題、サイトの目的をヒアリングさせていただきます。制作内容やスケジュール、実装範囲を整理したうえで、作業工数をもとにしたお見積りをご提示いたします。不明点が残らないよう、事前に認識をすり合わせてから制作に入ります。

問い合わせフォーム メール X
Step 02
コーディング制作

ヒアリング内容をもとに、設計を意識したコーディングを行います。BEM・FLOCSSを用いたクラス設計をベースに、保守性・拡張性を考慮したフロントエンド実装を進めます。必要に応じてWordPressへの組み込みも行います。

Step 03
ご相談、お見積り

まずはご要望や課題、サイトの目的をヒアリングさせていただきます。制作内容やスケジュール、実装範囲を整理したうえで、作業工数をもとにしたお見積りをご提示いたします。不明点が残らないよう、事前に認識をすり合わせてから制作に入ります。

Step 04
納品、サイト公開

最終確認完了後、データの納品またはサーバーへのアップロードを行います。WordPressサイトの場合は本番環境へ公開し、正常に表示・動作することを確認して完了となります。

Wonder Globe 観光サイト

UIの印象を高めるため、複数のアニメーションを実装し、上質感のある表現を意識しました。

サイトを見る

ID:demo

PW:demo

WonderGlobe
スケール

opacityとtransformを組み合わせた複合アニメーション制御

背景要素に対し、opacityとtransform: scale()を同時に制御する複合アニメーションを実装しています。レンダリング負荷を考慮し、GPUアクセラレーションを活用するプロパティを使用。視覚的な奥行きとパフォーマンスの両立を意識した設計です。

#CSS

#JavaScript

バリデーションエラー

入力検証ロジックを用いたフロントエンドバリデーション

JavaScriptで必須項目チェックや形式検証を実装。条件分岐によりエラー内容を出し分け、ユーザーに適切なフィードバックを表示します。DOM操作を通じてエラー状態を明示し、UXを損なわない設計としています。

#CSS

#JavaScript

ドロワーメニュー

状態管理を伴うドロワーナビゲーション実装

JavaScriptでクラスの付与・削除を制御し、表示状態を管理しています。CSSのtransitionを組み合わせることでフェードイン効果を実装。オーバーレイやスクロール制御も考慮し、実用性の高いUIとして構築しました。

#CSS

#JavaScript

アコーディオンメニュー

高さ計算を伴うアコーディオンUIのJavaScript実装

JavaScriptで要素のscrollHeightを取得し、高さを動的に制御するアコーディオンを実装しています。display: noneに頼らず、トランジション可能な設計にすることで滑らかな開閉アニメーションを実現しました。

#CSS

#JavaScript

スライダー

@keyframesによるアニメーション設計とSwiper制御

CSSの@keyframesを用いてテキストのスライドアップアニメーションを設計しています。表示タイミングや移動量、イージングを細かく調整し、初期表示の視線誘導を意識しました。画像スライダーにはSwiperを導入し、JavaScriptで挙動を制御することでスムーズかつ安定した切り替えを実現しています。

#CSS

#JavaScript

左右からフェードイン

スライドインとフェードを組み合わせた動的レイアウト演出

左右からのスライドインにはtransform: translateX()を使用し、再描画コストを抑えた実装としています。テキストにはopacityを組み合わせ、段階的に表示させることで視線の流れをコントロール。アニメーションの同期タイミングを調整し、統一感のある動きを設計しました。

#CSS

#JavaScript

フェードイン

ディレイ制御による段階的フェードイン実装

各アイテムに対してanimation-delayを設計し、時間差で表示させるフェードインアニメーションを実装しています。単純な一括表示ではなく、表示順序と間隔を計算することで情報の読みやすさを最適化しました。

#CSS

#JavaScript

製作詳細

担当範囲：

コーディング（デザインはFigma支給）

使用技術：

HTML、CSS（Sass）、JavaScript

制作期間：

10日間

制作概要：

・WonderGlobeは、旅への期待感を高めることを目的に制作した旅行サイトです。 訪問した瞬間から「次の目的地を探したくなる体験」を提供できるよう、UIデザインとアニメーション表現に力を入れました。

・サイト全体には、スクロールに連動したフェードインや動きのあるトランジションを取り入れ、単調にならないリズムを設計しています。過度な演出にならないよう調整しながら、上質で洗練された印象を与える表現を意識しました。

ご依頼までの流れ

Step 01
ご相談、お見積り

まずはご要望や課題、サイトの目的をヒアリングさせていただきます。制作内容やスケジュール、実装範囲を整理したうえで、作業工数をもとにしたお見積りをご提示いたします。不明点が残らないよう、事前に認識をすり合わせてから制作に入ります。

問い合わせフォーム メール X
Step 02
コーディング制作

ヒアリング内容をもとに、設計を意識したコーディングを行います。BEM・FLOCSSを用いたクラス設計をベースに、保守性・拡張性を考慮したフロントエンド実装を進めます。必要に応じてWordPressへの組み込みも行います。

Step 03
ご相談、お見積り

まずはご要望や課題、サイトの目的をヒアリングさせていただきます。制作内容やスケジュール、実装範囲を整理したうえで、作業工数をもとにしたお見積りをご提示いたします。不明点が残らないよう、事前に認識をすり合わせてから制作に入ります。

Step 04
納品、サイト公開

最終確認完了後、データの納品またはサーバーへのアップロードを行います。WordPressサイトの場合は本番環境へ公開し、正常に表示・動作することを確認して完了となります。

Global Standard コーポレートサイト

FLOCSS設計を採用し、長期運用を想定した保守性・拡張性の高いCSS構成を意識しました。WordPressではカスタム投稿タイプを用い、クライアントの使いやすさを考慮した実装を行っています。

サイトを見る

ID:demo

PW:demo

globalstandard
ボタンホバー

複数プロパティを連動させたホバーインタラクション設計

ホバー時に背景色・テキスト色・アイコン色を同時に変化させることで、統一感のあるインタラクションを設計しています。さらにアイコンにtransform: translateX()を適用し、右方向へ移動させる動きを追加。各要素のtransitionを同期させることで、違和感のない滑らかなアニメーションを実現しました。

#CSS

#JavaScript

バリデーションエラー

入力検証ロジックを用いたフロントエンドバリデーション

JavaScriptで必須項目チェックや形式検証を実装。条件分岐によりエラー内容を出し分け、ユーザーに適切なフィードバックを表示します。DOM操作を通じてエラー状態を明示し、UXを損なわない設計としています。

#CSS

#JavaScript

バリデーションエラー

入力離脱を防ぐJSによる「リアルタイムバリデーション」

JavaScriptを用いてフォームの制御を行い、入力内容に応じたバリデーションエラーを実装しています。 必須項目の未入力や入力形式の不備をリアルタイムで検知し、ユーザーが迷わず修正できるよう配慮しました。

#JavaScript

#EFO

アコーディオン

高さ計算を伴うアコーディオンUIのJavaScript実装

JavaScriptで要素のscrollHeightを取得し、高さを動的に制御するアコーディオンを実装しています。display: noneに頼らず、トランジション可能な設計にすることで滑らかな開閉アニメーションを実現しました。

#CSS

#JavaScript

svgアニメーション

SVG制御によるインタラクティブな矢印アニメーション

ボタンホバー時に、SVGで構成した矢印が伸びるアニメーションを実装しています。strokeやtransformを制御し、滑らかな動きを実現。単なる色変化ではなく、動きによって操作可能であることを視覚的に伝える設計としています。

#CSS

#JavaScript

トップへ戻るボタン

Intersection Observerによる高パフォーマンスな表示制御

Intersection Observer APIを用いてスクロール位置を監視し、特定の位置を超えたタイミングでボタンを表示させる設計としています。クリック時にはスムーススクロールを実装し、自然な動きでトップへ戻る挙動を制御。表示判定とスクロール処理を分離することで、可読性と保守性にも配慮しています。

#CSS

#JavaScript

製作詳細

担当範囲：

コーディング（デザインはFigma支給）

使用技術：

HTML、CSS（Sass）、JavaScript、WordPress

制作期間：

14日間

制作概要：

・実際のクライアントワークをCSS設計にはFLOCSSを採用し、構造の明確化と責務の分離を徹底しました。これにより、複数人での開発や将来的な改修にも対応しやすい、保守性・拡張性の高いスタイル設計を実現しています。想定し、要件の確認や修正対応を含め、実務に近い形で制作を進めました。

・WordPress実装ではカスタム投稿タイプを活用し、更新頻度の高いコンテンツをクライアント側で管理しやすい構成にしました。管理画面の分かりやすさにも配慮し、専門知識がなくてもスムーズに運用できることを意識しています。

・デザイン面だけでなく、「運用しやすさ」まで含めて価値提供することを目標に制作しました。

ご依頼までの流れ

Step 01
ご相談、お見積り

まずはご要望や課題、サイトの目的をヒアリングさせていただきます。制作内容やスケジュール、実装範囲を整理したうえで、作業工数をもとにしたお見積りをご提示いたします。不明点が残らないよう、事前に認識をすり合わせてから制作に入ります。

問い合わせフォーム メール X
Step 02
コーディング制作

ヒアリング内容をもとに、設計を意識したコーディングを行います。BEM・FLOCSSを用いたクラス設計をベースに、保守性・拡張性を考慮したフロントエンド実装を進めます。必要に応じてWordPressへの組み込みも行います。

Step 03
ご相談、お見積り

まずはご要望や課題、サイトの目的をヒアリングさせていただきます。制作内容やスケジュール、実装範囲を整理したうえで、作業工数をもとにしたお見積りをご提示いたします。不明点が残らないよう、事前に認識をすり合わせてから制作に入ります。

Step 04
納品、サイト公開

最終確認完了後、データの納品またはサーバーへのアップロードを行います。WordPressサイトの場合は本番環境へ公開し、正常に表示・動作することを確認して完了となります。

Animation アニメーション

ファーストビュー

「円形マスク」スライダーとモーション演出

clip-pathを使用した円形アニメーションから、画面全体へ広がる拡大スライダーを実装しています。切り替わりの際には光のアニメーションを加えることで、視線を自然に誘導。また、要所には「ぴょん」と跳ねる動きを取り入れ、硬くなりすぎない、親しみやすい演出を意識しました。

#JavaScript

#MicroInteraction

フェードイン

GSAPによる「時間差フェードイン」と繊細なイージング制御

GSAPを用いてアニメーションを制御し、複数要素を時間差でフェードインさせる演出を実装しています。各要素の開始タイミングやイージングを調整することで、流れのある自然な表示を意識しました。

#GSAP

#JavaScript

パララックス

「円形マスク」スライダーとモーション演出

パララックス効果を取り入れ、スクロールに応じて要素ごとに異なる動きを付けた演出を実装しています。 奥行き感を意識しつつ、過度にならないよう速度やタイミングを調整しました。

#GSAP

#CSS

バリデーションエラー

入力離脱を防ぐJSによる「リアルタイムバリデーション」

JavaScriptを用いてフォームの制御を行い、入力内容に応じたバリデーションエラーを実装しています。 必須項目の未入力や入力形式の不備をリアルタイムで検知し、ユーザーが迷わず修正できるよう配慮しました。

#JavaScript

#EFO

背景固定

Sticky 背景と GSAP フェードインによるスクロール演出

position: sticky; を使用して背景を固定し、スクロールに合わせた視覚的な演出を実装しています。 あわせてGSAPを用いたフェードインアニメーションを組み込み、表示タイミングや動きにメリハリを持たせました。

#GSAP

#JavaScript

フェードイン

GSAPによる「時間差フェードイン」と繊細なイージング制御

GSAPを用いてアニメーションを制御し、複数要素を時間差でフェードインさせる演出を実装しています。各要素の開始タイミングやイージングを調整することで、流れのある自然な表示を意識しました。

#GSAP

#JavaScript

ご依頼までの流れ

Step 01
ご相談、お見積り

まずはご要望や課題、サイトの目的をヒアリングさせていただきます。制作内容やスケジュール、実装範囲を整理したうえで、作業工数をもとにしたお見積りをご提示いたします。不明点が残らないよう、事前に認識をすり合わせてから制作に入ります。

問い合わせフォーム メール X
Step 02
コーディング制作

ヒアリング内容をもとに、設計を意識したコーディングを行います。BEM・FLOCSSを用いたクラス設計をベースに、保守性・拡張性を考慮したフロントエンド実装を進めます。必要に応じてWordPressへの組み込みも行います。

Step 03
ご相談、お見積り

まずはご要望や課題、サイトの目的をヒアリングさせていただきます。制作内容やスケジュール、実装範囲を整理したうえで、作業工数をもとにしたお見積りをご提示いたします。不明点が残らないよう、事前に認識をすり合わせてから制作に入ります。

Step 04
納品、サイト公開

最終確認完了後、データの納品またはサーバーへのアップロードを行います。WordPressサイトの場合は本番環境へ公開し、正常に表示・動作することを確認して完了となります。

ホームへ戻る