スキル・ツール
デザイン再現から運用まで対応可能
コーディング・CSS設計
- セマンティックなマークアップ（W3C準拠）
- FLOCSS / BEM を用いた予測しやすいクラス命名
- PerfectPixel を用いたデザイン再現
WordPress 構築
- オリジナルテーマ構築（PHP実装）
- Advanced Custom Fields (ACF) を用いた更新しやすい管理画面
- セキュリティ対策・お問い合わせフォーム設置
JavaScript / アニメーション
- 可読性と保守性を重視した記述
- GSAP / Swiper.js 等の実務定番ライブラリの活用
- 操作性を向上させるUIアニメーション
開発環境・ツール
- Git / GitHub を用いたバージョン管理
- デザインツール：Figma / Adobe XD / Photoshop / Illustrator
- コミュニケーション：Slack / Chatwork / Zoom
品質管理
納品前の多角的なテストにより、バグや修正の手間を最小化します
実機・ブラウザ検証の徹底
- W3C Validator による構文エラーチェック
- 画像の軽量化・最適化（WebP対応など）
- リンク切れ・コンソールエラーの確認
構文・パフォーマンスチェック
- Chrome / Safari / Firefox / Edge 最新版
- Mac / Windows 両OSでの挙動チェック
- レスポンシブ崩れの徹底検証
WordPress / 動作テスト
- お問い合わせフォームの送受信・バリデーション確認
- 管理画面の入力・更新テスト
- OGP設定・SNSシェア時の表示確認
- メタデータ（title/description）の設定確認
安全な納品データ作成
- 未使用の画像・CSSの徹底削除
- インデントや改行の整形・統一
- 指定サーバーへのアップロード作業
制作実績：わかば個別指導塾 様
実装のこだわり
1.複雑なアニメーション制御（GSAP / CSS）
- ファーストビューでは clip-path を用いた画像の出現演出や、テキスト・ボタンの複合アニメーションを実装。
- CTAセクションにはGSAPによるパララックス効果を導入し、ユーザーの目を引く動的な演出を実現。
2.ピクセルパーフェクト
- ツール「PerfectPixel」を使用し、デザインカンプと実装画面を重ね合わせてズレを徹底修正。
3.徹底した品質管理とレスポンシブ
- 独自の品質チェックシートに基づき、PC/SP/タブレット各端末での表示崩れを入念に検証。
- あらゆる画面幅において、レイアウトが破綻しないコーディングを実施。
※その他、Web上で公開できない実績も多数ございます。面談時に詳しくご紹介可能です。
アニメーション実装例
ローディングとファーストビューをつなぐ導入アニメーション
レイアウトに合わせたカスタムスライダー
スクロールに応じてカードが重なって切り替わる演出
- クリップパスを用いた画像の出現演出
- テキストの跳ねる動きやボタンの発光
実装技術だけではない、「円滑なプロジェクト進行力」
予期せぬトラブルを防ぎ、ディレクター様の負担を軽減します
意図を汲み取るヒアリング
- 介護職で培った傾聴力を活かし、言語化しにくいニュアンスを汲み取ります。
- 「言われた通り」ではなく「背景にある意図」を理解して実装します。
手戻りを防ぐ「予見行動」
- 着手前にデザインや仕様の不明点を洗い出し、質問リスト化します。
- 曖昧な場合には、実装者の視点からの提案を行います。
即レス・安定稼働の徹底
- 連絡は土日祝も含め毎日確認。緊急時もスムーズに対応します。
- 進捗は毎日テストサーバーにて更新し、「見えない不安」を解消します。
制作の進め方
- ご相談・ヒアリング
- 情報共有シートで要件・確認事項整理
- デザイン仕様確認・見積
- 制作開始
- 進捗共有
- 品質チェック
- 納品
情報共有シートで要件整理
ご相談内容をもとに情報共有シートを作成し 実装に必要な要件や確認事項を整理します。
進捗共有
制作期間中は毎日の作業終了後にテストサーバーへ反映し、いつでも進捗をご確認いただける環境を整えます。
プロフィール
長田 佑太（Yuta Osada）
愛知県在住｜5児の父
家族を支える立場として
仕事には責任を持って向き合っています
自己紹介
現在、フリーランスのWebコーダーとして活動しています。
やり取りの中で、話しやすく、相談しやすい関係性を大切にしています。
前職では12年間、
介護福祉士として現場に従事してきました。
介護の現場では、相手が遠慮して本音や不安を出せないことで、
小さな行き違いが後から大きな問題になる場面を多く見てきました。
その中で、
話しやすい、相談しやすいと受け取っていただくことが多く、
構えずに話せる関係性が、
結果的に状況を前に進めると実感してきました。
現在のWeb制作においても、
要件が固まりきっていない段階や、
聞いていいか迷うことほど、
気軽に共有してもらえるやり取りを心がけています。
参考価格・稼働体制
参考価格
■ コーディング単価
- LPコーディング（10,000px） ¥50,000〜
- WordPress トップページ ¥35,000〜
- WordPress 下層ページ
¥7,000〜 / 1ページ ※コンテンツ量により変動
■ オプション・構築費
- アニメーション実装 別途お見積もり
- CMSカスタマイズ（カスタム投稿等） 別途お見積もり
※上記は目安です。デザインの複雑さや仕様により変動いたしますので、まずはお気軽にお見積もりをご依頼ください。
稼働体制
■ 稼働時間・連絡
- 稼働時間：平日 7:00〜22:00
※土日祝、夜間も柔軟に対応いたします。 - 連絡ツール：Chatwork / Slack / Zoom / LINE 等
貴社の制作フロー / ツールに柔軟に対応いたします。
■ 制作・納品環境
- 対応OS：Mac / Windows 両対応
- バージョン管理：Git / GitHub
- 確認環境：テストサーバーへのアップロード対応
お問い合わせ
案件のご相談、お見積もり依頼、面談など、
まずはお気軽にご連絡ください。
pappy50708@gmail.com
チャットツール
Chatwork / Slack / Zoom 等 対応可能
Chatwork ID：pappy0708
まずはZoomで15分〜30分程度の顔合わせも大歓迎です。
具体的な案件がない状態でも、ぜひお声がけください。
貴社のリソース不足を解決する一助となれば幸いです。
2 / 10 ・ スキル・ツール