KIARITA｜キアリタ
全202点のジュエリーを扱うブランドサイト。商品を探しやすくする検索体験と、公開後の運用のしやすさが求められた案件です。
- 「アイテム種別 × 素材」の2軸で絞り込める商品検索を、プラグインに頼らずAjaxで実装。選んだ条件に該当する商品だけを取得するため、ページ遷移なしで軽快に探せます
- スマートフォンには専用サイズの画像を出し分け、初期表示の速度に配慮
- 更新を前提としたWordPressオリジナルテーマとして構築し、公開後も運用・保守を継続して担当しています
制作会社の方へ
制作会社案件の外部コーダーとして対応します。
デザイン支給のコーディングから、WordPress構築、アニメーション実装、公開対応まで。ご相談・お見積もり・実装・確認を、制作会社経験のある私が直接担当します。
- Figma支給のコーディング
- WordPressオリジナルテーマ構築
- 既存サイトの改修
- JavaScript・GSAPによるアニメーション
- レスポンシブ対応
- 公開作業・表示確認
制作実績
担当範囲、使用技術、実装時に工夫した点とあわせてご紹介します。いずれも現在公開中のサイトです。
Terminal｜ターミナル
熊本のWeb制作スタジオの自社サイト。同業のプロから実装を任せていただいた案件で、デザインの世界観を動きでどこまで再現できるかが問われました。
- GSAP ScrollTrigger＋DrawSVGで、手描き風の線がスクロールに合わせて描かれていく演出を実装
- 写真コラージュのアニメーションなど、デザイナーの意図した空気感をそのまま動きに変換
- スライダーはSwiperのWebGLトランジションで実装し、ページ全体の世界観を統一
駒場工務店
和歌山で創業200年の歴史をもつ工務店の公式サイト。「人を思う。」という理念を、余白と写真で見せる上質なデザインを崩さず実装することが求められました。
- 余白を活かしたデザインを、画面幅が変わっても崩れないよう丁寧にレスポンシブ実装
- 建築家と協働した施工事例は、Splideのスライダーで写真を主役に表示
- GSAP（ScrollTrigger）の控えめなスクロール演出で、落ち着いた世界観を保ったままWordPress化
※ 掲載できる実績は一部です。累計221案件（新規制作から部分改修まで）の多くは制作会社さまからのご依頼のため、NDA（秘密保持契約）により事例を公開していません。
対応できること
- コーディング
- Figma・XDなどのデザインデータをもとに、HTML / CSS / Sass / JavaScriptで実装します。Photoshop・Illustratorのカンプにも対応します。
- WordPress
- オリジナルテーマ構築、カスタム投稿、ACF（カスタムフィールド）、既存テーマ・既存サイトの改修に対応します。
- アニメーション
- CSS、JavaScript、GSAPなどを使用して、デザインに合わせた動きを実装します。Swiper・Splideによるスライダーにも対応します。
- レスポンシブ対応
- PC、タブレット、スマートフォンで、レイアウトと操作性を確認します。デザインがPCのみの場合は、SPの見え方をご提案します。
- 公開対応
- サーバー反映、フォーム確認、リンク確認、公開後の表示確認まで対応します。納品後の微修正や保守のご相談も可能です。
開発環境：Vite ／ Git・GitHub ／ Docker。やり取りは Slack・Chatwork など、貴社で普段お使いのツールに合わせます。
仕事の進め方
実装前の確認から公開前のチェックまで、実際の案件で続けていることです。
- デザインと仕様の不明点を、実装前にまとめて確認
- 実装上の懸念や不足に気づいたら、先回りして共有
- PC・SP・主要ブラウザ（Chrome / Safari / Edge）と実機で表示確認
- フォーム送信・リンク・操作性の確認
- 更新担当者が扱いやすいWordPress管理画面を設計
- 公開後の修正を考えたコード構成（BEM・Sassのパーツ分割）
案件ごとに専用のスプレッドシートを用意し、スケジュールと質問事項をひとつにまとめています。質問は選択肢つきで「認識が違うときだけご返信ください」の形にし、ご確認の手間を最小限にします。
作業を圧縮するために、Figmaプラグインも自作
PSD Porter / Burst Image Webper / CodeLens Pro — のべ1,300人以上の方が、Figmaコミュニティで利用中
Figmaコミュニティで見るプロフィール
中村 智穂
MARUMI.web
背景を汲んで動く ・ 要点を絞って確認 ・ 不安にさせない進行
制作会社の現場を知っているからこそ、必要な確認、伝え方、進め方まで考えて対応します。
前職は携帯ショップの販売員。複雑な料金プランをお客様の状況に合わせて整理し、わかりやすく伝える仕事をしていました。いまも大切にしている「相手が判断しやすい伝え方」の原点です。
その後、Web制作会社にコーダーとして勤務。ディレクターやデザイナーと連携しながら案件を進めるなかで、納期から逆算した進行や、確認事項のまとめ方を現場で身につけました。現在はフリーランスとして、制作会社さまの外注パートナーを中心に活動しています。
外注コーディングでは、ただ手を動かすだけでなく、案件の背景を汲んで進めることが大切だと考えています。たとえばPC/SPで表記ゆれやデザイン差分がある場合は、規則性を見て仮説を立て、「相違があれば修正します」と添えて共有します。
判断に時間がかかる場合は、先に確認期限をお伝えします。聞きすぎず、突っ走らず。確認すべきところは確認し、進められるところは止めずに進める。
“もう一人の実装担当”として、制作進行を安心して任せていただけるよう心がけています。
- 221案件 累計対応数（新規制作〜部分改修）
- 制作会社 勤務経験あり・制作会社案件中心
- WordPress 構築・アニメーション実装対応
- 本人対応 ご相談から実装・公開まで直接担当
ご相談から納品までの流れ
-
ご相談・内容確認
案件の概要とご希望の納期感をメールでお送りください。不明点はまとめて確認します。
-
お見積もり・スケジュール共有
作業範囲・金額・スケジュールをご提示し、ご納得いただいてから着手します。
-
実装・確認
進捗を共有しながら実装し、テスト環境で途中経過をご確認いただけます。
-
公開・納品
公開作業、またはデータ納品まで対応します。納品後の不具合もすみやかに修正します。
ご相談から納品まで、担当は変わらず私が対応します。確認事項は選択肢つきでまとめて共有し、細かい質問で手を止めません。
よくあるご質問
クレジット非表示やNDA（秘密保持）での“黒子”対応はできますか？
はい。制作会社さま・ディレクターさまの下請けとして、サイトへの制作者クレジット非表示やNDAの締結に対応します。エンドクライアントの前に出ることはありません。
契約や請求まわりの対応を教えてください
業務委託契約書・NDAの締結、請求書払いに対応しています。締め日やお支払いサイトなどの条件は、貴社の規定に合わせて調整できますのでご相談ください。
一部のページや機能だけ、部分的に依頼してもいいですか？
もちろんです。1ページ単位・1機能単位でお受けしています。「この下層ページだけ」「お問い合わせフォームだけ」といったご依頼も歓迎です。
WordPressの込み入った機能やサーバーまわりの相談もできますか？
はい、まずはお気軽にご相談ください。内容をうかがったうえで、対応できる範囲とできない範囲を正直にお伝えします。
料金はどのように決まりますか？
ページ数・構成・アニメーションの複雑さ・WordPressの有無などで変動するため、ご要件をうかがって個別にお見積りします。お見積りは無料ですので、お気軽にご相談ください。
修正は何回までお願いできますか？
ご依頼範囲内の修正（デザインとの差異・表示崩れ・不具合など）は、回数制限なく対応します。デザイン変更や仕様追加にあたる内容は、別途お見積りのうえご相談させてください。
納期が短い案件でも相談できますか？
はい、まずはご相談ください。スケジュールの状況次第ですが、稼働を調整して特急対応できる場合があります。お急ぎの際は、お問い合わせ時に希望納期をお書き添えください。
納品後の保守や更新もお願いできますか？
はい。テキスト差し替えなどの軽微な修正はスポットで、定期的な更新やWordPressのバージョン管理などは継続的な保守としてご相談いただけます。納品して終わりではなく、運用まで伴走します。
対応時間や連絡のスピードは？
平日9〜18時ごろの稼働で、土日も急ぎの場合は対応します。お問い合わせには原則1営業日以内にご返信します。ご契約後のやり取りは、ChatWorkやSlackなど御社で普段お使いのツールに合わせます。
案件が固まる前でも、ご相談いただけます。
「コーディングだけ依頼できる？」「この動きは実装できる？」「WordPress化までお願いできる？」など、こんなことでも大丈夫かなと思う内容から、分かる範囲でお送りください。
- コーディングのみでも相談可能
- デザイン確定前でも相談可能
- WordPress・アニメーションも対応
- 継続案件の相談も可能
メールをお送りした方は、そのままご返信いただくのが確実です。
件名・書式は自由です。私（中村）が直接拝見し、原則1営業日以内にご返信します。