制作会社・デザイナーのための外注コーディングパートナー

外注コーディング、 品質はそのままで、 今より速く・安く。

通常案件は1週間以内納品。(お急ぎの場合はご相談ください)現在の発注単価をお知らせいただければ、具体的にご提示します。多くのケースで現行単価より3割お安くなっています。

累計221案件に対応コーディング歴5年返信は原則1営業日以内

Problems

外注コーディング、こんなことで困っていませんか?

  • 返信が遅く、制作進行が止まってしまう

    確認ひとつに数日。最悪、納期前に音信不通になったことも…

  • デザインと実装のズレで、修正指示に時間がかかる

    余白やニュアンスが崩れて、赤入れの往復ばかり増える…

  • 短納期案件を受けたいが、社内リソースが足りない

    断りたくないのに、コーダーの手が空いていない…

  • WordPress化や納品後の微修正まで任せたい

    納品して終わりじゃなく、CMS化や公開後の調整もお願いしたい…

その“困った” まるごとお任せください。

Service

対応メニューを、ご用意しています。

  • 01

    コーディング代行(HTML / CSS / JS)

    デザインデータを、崩れず保守しやすいコードへ。細かなあしらいや余白も、デザインのまま正確に再現します。

  • 02

    WordPress構築

    更新しやすいテーマ実装から、お知らせ・カスタム投稿・フォームまで。静的サイトのWordPress化にも対応します。

  • 03

    LP制作

    1ページ完結のランディングページ。アニメーションを含めて、訴求力のある実装に仕上げます。

Works

これまでの、制作実績です。

  • KIARITA(キアリタ)公式サイトをiMacに表示したモックアップ

    Jewelry Brand

    KIARITA|キアリタ

    コーディング/WordPress化/運用・保守

    KIARITA(キアリタ)公式サイトをiMacに表示したモックアップ

    Jewelry Brand

    KIARITA|キアリタ

    全202点のジュエリーを「アイテム種別 × 素材」の2軸セレクトで絞り込める検索を実装。プラグインに頼らず、選んだ条件に該当する商品だけをAjaxで取得して表示するため、ページ遷移なし・初期表示も軽量。スマホには専用サイズの画像を出し分け、表示速度に配慮しました。

    担当範囲
    コーディング/WordPress化/運用・保守
    使用技術
    WordPress(オリジナルテーマ)
    • WordPress
    • オリジナルテーマ
    • Ajax絞り込み検索
    サイトを見る

    1 / 5

  • Terminal(ターミナル)コーポレートサイトをiMacに表示したモックアップ

    Creative Studio

    Terminal|ターミナル

    コーディング/WordPress実装

    Terminal(ターミナル)コーポレートサイトをiMacに表示したモックアップ

    Creative Studio

    Terminal|ターミナル

    熊本のWeb制作スタジオの自社サイト。パートナーデザイナーのデザインを、GSAP ScrollTrigger+DrawSVGで手描き風の線が描かれる演出や写真コラージュのアニメーションとして忠実に実装。スライダーはSwiperのWebGLトランジションで切り替え、デザインの世界観をそのまま動きに落とし込みました。

    担当範囲
    コーディング/WordPress実装
    デザイン
    パートナーデザイナー
    使用技術
    WordPress(オリジナルテーマ)
    • WordPress
    • GSAP
    • Swiper(WebGL)
    サイトを見る

    2 / 5

  • 8farm(エイトファーム)宮古島の農園サイトをiMacに表示したモックアップ

    Farm Brand

    8farm|エイトファーム

    コーディング/WordPress構築

    8farm(エイトファーム)宮古島の農園サイトをiMacに表示したモックアップ

    Farm Brand

    8farm|エイトファーム

    宮古島で夫婦が営む農園のブランドサイト。大玉「てぃだメロン」をはじめ果物・島野菜の魅力を、明るく温かみのある写真主役のデザインで表現。パートナーデザイナーのデザインを忠実にコーディングし、Swiperのスライダーで産地や商品の世界観を伝えるWordPressサイトに仕上げました。

    担当範囲
    コーディング/WordPress構築
    デザイン
    パートナーデザイナー
    使用技術
    WordPress(オリジナルテーマ)
    • WordPress
    • Swiper
    サイトを見る

    3 / 5

  • 駒場工務店の公式サイトをiMacに表示したモックアップ

    Home Builder

    駒場工務店

    コーディング/WordPress実装

    駒場工務店の公式サイトをiMacに表示したモックアップ

    Home Builder

    駒場工務店

    和歌山で創業200年の歴史をもつ工務店の公式サイト。「人を思う。」という理念を、余白と写真を活かした上質なデザインで表現。建築家と協働した施工事例はSplideのスライダーで見せ、GSAP(ScrollTrigger)のスクロール演出とあわせて、パートナーデザイナーのデザインを忠実にWordPressで実装しました。

    担当範囲
    コーディング/WordPress実装
    デザイン
    パートナーデザイナー
    使用技術
    WordPress(オリジナルテーマ)
    • WordPress
    • GSAP
    • Splide
    サイトを見る

    4 / 5

  • 一朶の雲株式会社のコーポレートサイトをiMacに表示したモックアップ

    Corporate Site

    一朶の雲株式会社

    コーディング/WordPress構築

    一朶の雲株式会社のコーポレートサイトをiMacに表示したモックアップ

    Corporate Site

    一朶の雲株式会社

    映像・記事・PR設計を手がける熊本のコンテンツ制作会社のコーポレートサイト。「人間くさいって、信じられる。」という世界観を、GSAP(ScrollTrigger・CustomEase)とSplideによる落ち着いたスクロール演出で表現。パートナーデザイナーのデザインを忠実にコーディングし、WordPressで構築しました。

    担当範囲
    コーディング/WordPress構築
    デザイン
    パートナーデザイナー
    使用技術
    WordPress(オリジナルテーマ)
    • WordPress
    • GSAP
    • Splide
    サイトを見る

    5 / 5

※ 掲載できる実績は一部です。累計221案件(新規制作から部分改修まで)の多くは制作会社さまからのご依頼のため、NDA(秘密保持契約)により事例を公開していません。

Skills

対応技術と、開発環境。

個人制作はもちろん、制作会社さまの開発フローにそのまま入れる環境・ツールに対応しています。

コーディング

  • HTML / CSS(Sass)/ JavaScript セマンティックで保守しやすい設計
  • CSS設計(BEM) パーツの使い回しと状態変化を見据えた命名・分割。貴社のコーディング規約にも合わせます
  • レスポンシブ実装 スマホ実機での表示確認まで
  • Figma / XD / Photoshop / Illustrator 各種デザインデータからの忠実な再現
  • クロスブラウザ検証 Chrome / Safari / Edge、iOS・Android実機

WordPress

  • オリジナルテーマ開発 プラグインに頼りすぎない構築
  • カスタム投稿 / カスタムフィールド
  • Ajaxによる動的実装 ページ遷移なしの絞り込み等

開発環境・ワークフロー

  • Vite Sass / JS のビルド環境を構築
  • Git / GitHub 個人開発で常用、チーム開発の経験あり
  • Docker ローカル開発環境の構築・共有
  • Slack / Chatwork 貴社の連絡ツールに合わせて参加します

アニメーション・表現

  • GSAP(ScrollTrigger 等) スクロール連動の演出
  • Swiper / Splide スライダー・リッチ表現

Promise

外注先として、必ず守る3つのこと。

  1. 01

    約束した納期を、必ず守る

    進行スケジュールを共有し、余裕をもって着手。「今どうなってる?」と不安にさせない進行を徹底します。

  2. 02

    要件と意図を合わせてから進める

    細かい質問で手を止めさせず、迷う箇所はこちらの案を添えて確認。完成間際の「思っていたものと違う」を防ぎます。

  3. 03

    納品後のことまで考えて、つくる

    見た目の再現だけでなく、保守しやすく崩れにくいコードまで含めて品質と考えています。納品して終わり、にはしません。

Flow

お問い合わせから納品まで、迷わず進められます。

  1. 01

    Contact

    ご連絡

    メールへのご返信、またはメールでお気軽にご連絡ください。案件の概要とご希望の納期感がわかれば十分です。原則1営業日以内にご返信します。

  2. 02

    Talk

    内容のすり合わせ

    メールベースで要件や対応範囲を確認します。必要であればZoomで直接お話しすることも可能です。

  3. 03

    Estimate

    お見積り

    作業範囲・金額・スケジュールを明示したお見積りをご提示。ご納得いただいてから着手します。

  4. 04

    Coding

    制作・コーディング

    デザイン意図を汲んで丁寧に実装。進捗を共有しながら進め、途中での確認・相談も歓迎します。

  5. 05

    Check

    確認・修正

    テスト環境で表示・動作をご確認いただき、フィードバックを反映。細かな崩れや不具合も残さず仕上げます。

  6. 06

    Delivery

    納品

    データ納品または公開作業まで対応します。万が一納品後に不具合が見つかったときも、すみやかに修正します。

Workflow

スムーズな進行のために、こだわっていること。

ご依頼から納品までを気持ちよく進めていただくために、日々の案件で続けている工夫です。

  1. 01

    管理シートで、進行と質問を一元化

    案件ごとに専用のスプレッドシートを用意し、スケジュールと質問事項をひとつにまとめています。質問は選択肢つきで「認識が違うときだけご返信ください」の形にし、ご確認の手間を最小限にします。

    制作管理スプレッドシートの質問事項シート。質問内容と回答欄が一覧になっているサンプル
    実際に使っている管理シート(サンプル)
  2. 02

    Sassのパーツ分割と、BEMでの命名

    ファイルはセクション・パーツ単位で分割し、クラス名はBEMで統一しています。納品後に私以外の方が手を入れることになっても、どこに何があるか迷わないコードでお渡しします。

  3. 03

    作業を圧縮するために、Figmaプラグインも自作

    支給いただくデザインを再現度高く実装したり、毎回行う作業を圧縮したりするために、こんなプラグインを自作しました。

    のべ 1,300 人以上 の方が、Figmaコミュニティで利用中

    • PSD Porter PSDカンプのテキスト・画像・シェイプを、ワンクリックでFigmaデータに変換します。
    • Burst Image Webper カンプから画像を複数形式・一括で書き出し。Figma単体では書き出せないWebPにも対応しています。
    • CodeLens Pro デザインデータから、CSS・Tailwind・HTMLのコードを取得できます。
    Figmaコミュニティで見る

Profile

わたしについて

  • 221案件 累計対応数(新規制作〜部分改修)
  • 制作会社 勤務経験あり(コーダー)
  • 1営業日以内 お問い合わせへのご返信(原則)
  • 9–18 平日稼働/土日も急ぎ対応可
ノートPCを抱えて微笑む中村智穂

MARUMI.web

Web Coding Partner

中村 智穂 熊本県在住/2021年開業

前職は携帯ショップの販売員。複雑な料金プランをお客様の状況に合わせて整理し、わかりやすく伝える仕事をしていました。いまも大切にしている「相手が判断しやすい伝え方」の原点です。

その後、Web制作会社にコーダーとして勤務。ディレクターやデザイナーと連携しながら案件を進めるなかで、納期から逆算した進行や、確認事項のまとめ方を現場で身につけました。現在はフリーランスとして、制作会社さまの外注パートナーを中心に活動しています。

外注コーディングでは、ただ手を動かすだけでなく、案件の背景を汲んで進めることが大切だと考えています。たとえばPC/SPで表記ゆれやデザイン差分がある場合は、規則性を見て仮説を立て、「相違があれば修正します」と添えて共有します。

判断に時間がかかる場合は、先に確認期限をお伝えします。聞きすぎず、突っ走らず。確認すべきところは確認し、進められるところは止めずに進める。

“もう一人の実装担当”として、制作進行を安心して任せていただけるよう心がけています。

  • 背景を汲んで動く
  • 要点を絞って確認
  • 不安にさせない進行

FAQ

よくある、ご質問にお答えします。

クレジット非表示やNDA(秘密保持)での“黒子”対応はできますか?

はい。制作会社さま・ディレクターさまの下請けとして、サイトへの制作者クレジット非表示やNDAの締結に対応します。エンドクライアントの前に出ることはありません。

契約や請求まわりの対応を教えてください

業務委託契約書・NDAの締結、請求書払いに対応しています。締め日やお支払いサイトなどの条件は、貴社の規定に合わせて調整できますのでご相談ください。

一部のページや機能だけ、部分的に依頼してもいいですか?

もちろんです。1ページ単位・1機能単位でお受けしています。「この下層ページだけ」「お問い合わせフォームだけ」といったご依頼も歓迎です。

WordPressの込み入った機能やサーバーまわりの相談もできますか?

はい、まずはお気軽にご相談ください。内容をうかがったうえで、対応できる範囲とできない範囲を正直にお伝えします。

料金はどのように決まりますか?

ページ数・構成・アニメーションの複雑さ・WordPressの有無などで変動するため、ご要件をうかがって個別にお見積りします。お見積りは無料ですので、お気軽にご相談ください。

修正は何回までお願いできますか?

ご依頼範囲内の修正(デザインとの差異・表示崩れ・不具合など)は、回数制限なく対応します。デザイン変更や仕様追加にあたる内容は、別途お見積りのうえご相談させてください。

納期が短い案件でも相談できますか?

はい、まずはご相談ください。スケジュールの状況次第ですが、稼働を調整して特急対応できる場合があります。お急ぎの際は、お問い合わせ時に希望納期をお書き添えください。

納品後の保守や更新もお願いできますか?

はい。テキスト差し替えなどの軽微な修正はスポットで、定期的な更新やWordPressのバージョン管理などは継続的な保守としてご相談いただけます。納品して終わりではなく、運用まで伴走します。

対応時間や連絡のスピードは?

平日9〜18時ごろの稼働で、土日も急ぎの場合は対応します。お問い合わせには原則1営業日以内にご返信します。ご契約後のやり取りは、ChatWorkやSlackなど御社で普段お使いのツールに合わせます。

Contact

お気軽に、ご連絡ください。

メールをお送りした方は、そのままご返信いただくのが確実です。
原則1営業日以内にお返事します。

メールでのご連絡はこちら

件名・書式は自由です。案件の概要とご希望の納期感がわかれば十分です。
「こんなことできる?」のご相談だけでも大歓迎です。