安心して任せられる
コーディングパートナー

学生時代は水泳で九州代表も経験。
現在ブログ500日以上継続。
体力・根性・継続力が武器です！

#HTML

#CSS

#制作会社向けコーディング対応

Toku's Portfolio

ココが違う！ わたしの３つの強み

責任感・継続力

・ブログ500日継続

・毎日Xでポスト

・10年以上 無遅刻・無欠勤

根性・体力

・真冬も半袖OK

・水泳九州代表

・水泳10段、潜水士免許

責任感・継続力

・スイミングスクール指導経験

・コミュニティのオフ会幹事

詳しいプロフィールを見る

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

Service 提供サービス

コーディング

デザインの意図を正確にくみ取り、保守性・拡張性を重視したコーディングを行います。

クラス設計には BEM や FLOCSS を採用し、第三者が見ても理解しやすい構造を意識しています。

表示速度やアクセシビリティにも配慮し、ユーザー視点でストレスのないWebサイトを実装します。

WordPress構築

オリジナルテーマによるWordPressサイト構築に対応しています。

デザインに合わせた完全オーダーメイドのテーマ制作から、既存のHTMLサイトを WordPressへ移行 する作業まで柔軟に対応可能です。

更新のしやすさを意識した設計で、運用しやすいサイトをご提供します。

サイト保守・修正

サイト公開後の軽微な修正や機能追加、表示崩れの対応など、保守・運用面もサポートします。

「ちょっとここを直したい」「急ぎで対応してほしい」といったご要望にも、状況に応じて丁寧に対応いたします。

継続的に安心して運用できるパートナーを目指しています。

Skill

HTML

CSS

Sass

JavaScript

jQuery

WordPress

gulp

Git

Contact ご相談はこちら

平日 / 土日祝日　8時間~

1営業日以内に必ずご返信します！

柔軟に対応できますので、お急ぎ
の場合も是非ご相談ください。

[email protected]

会社名（個人の方は不要です）

例：株式会社xxxxx

お名前

例：山田　太郎

メールアドレス

例：[email protected]

お問い合わせ内容

プライバシーポリシー

当サイトでは、お問い合わせ時にいただいた個人情報（名前、メールアドレスなど）を、ご相談への対応や連絡のためにのみ使用いたします。お預かりした情報は適切に管理し、第三者に譲渡・提供することはありません。安心してご利用いただけるよう、個人情報保護に努めてまいります。ご不明な点があれば、お気軽にお問い合わせください。