MARUMI.web 案件を相談する

制作会社・マーケティング会社・
広告代理店の皆さまへ

コーディング・WordPress構築承ります

コードの中身まで、 こだわる実装。

デザインを再現し、修正・運用しやすいコードに。
AIで作業を効率化し、実装経験をもとに
表示・操作・コードを確認して仕上げます。

Terminalの制作実績。PC・タブレット・スマートフォンの表示
制作実績:Terminal
制作歴
5年
対応実績
220件以上

※新規制作から軽微な修正を含みます

制作実績を見る

制作実績

担当した実装を、動画と図解で紹介します。

TerminalのPC・スマートフォンの制作実績モックアップ

01WEB STUDIO

Terminal

アニメーション・実績更新機能

担当:全ページのコーディング/WordPress構築
デザイン:支給(パートナーデザイナー)

  • スクロール連動
  • 実績の追加・編集
公開サイトを見る(新しいタブ)
MOTION & FUNCTION

この場で3つの動きを確認

3つの実装を動画で見る実装の紹介を閉じる

01 / 03 操作デモ

FVのホバーアニメーション

カーソルを重ねると写真が変化する演出。支給デザインの世界観に合わせ、FVのインタラクションを実装しました。

公開サイトの操作を録画・無音

管理画面からの実績更新

実績専用のカスタム投稿・カスタムフィールドで、公開後も管理画面から実績を追加・編集できます。

WordPress / オリジナルテーマ / JavaScript
カスタム投稿 / カスタムフィールド
公開サイトを見る(新しいタブ)
KIARITAのPC・スマートフォンの制作実績モックアップ

02JEWELRY BRAND

KIARITA

商品検索・登録機能

担当
全ページのコーディング/WordPress構築
保守運用(定期バックアップ・更新作業)
デザイン
支給
  • 条件検索
  • 商品登録
  • 画像の表示切り替え
公開サイトを見る(新しいタブ)
MOTION & FUNCTION

この場で動画と図解を確認

動画と図解で実装を見る実装の紹介を閉じる

01 / 03 操作デモ

Ajaxによる商品絞り込み

商品種別と素材の2つの条件で絞り込み。Ajax通信を使い、ページ全体を再読み込みせずに結果を更新します。

公開サイトの操作を録画・無音

WordPress / オリジナルテーマ / Ajax / カスタム投稿 / ACF公開サイトを見る(新しいタブ)

保守運用中の不具合は内容を確認し、必要に応じて別途お見積もりのうえ対応します。

その他の制作実績

コーポレートサイト・ブランドサイトなど

このほかの未公開実績は、面談の際にお見せできます。

MARUMI.webについて

MARUMI.web 中村智穂
MARUMI.web

コーディング・WordPress構築

中村 智穂

Chiho Nakamura
  • 熊本県在住
  • 2021年開業
  • 全国リモート対応

Web制作会社でのコーダー経験を経て、現在は制作会社・広告会社の外部パートナーとして活動しています。

経歴と、仕事で大切にしていること

接客・販売の仕事で大切にしてきた、相手の要望を汲み取って分かりやすく伝える姿勢を、制作でも活かしています。仕様やご希望を整理し、制作会社さまが進めやすい対応を心がけています。

デザインの意図を汲み取り、画面幅が変わっても自然に見えるよう、細部を整えるのが好きです。細かな調整は初稿時に理由を添えて共有し、デザインの印象が大きく変わる部分は事前にご相談します。

ものづくりが好きです

ものづくりが好きで、興味を持つと自分でもつくってみたくなります。Blenderで3Dのソファーをつくったり、Figmaのプラグインを自作したりと、Web制作以外にも手を広げています。

経歴・対応実績

販売の仕事から、制作会社の外部パートナーへ。

  1. 〜2021

    接客・販売の仕事

    相手の要望を汲み取り、分かりやすく伝える姿勢を培いました。

  2. MARUMI.web開業・制作会社に勤務

    在宅の正社員として制作会社に勤務しながら、個人でもWeb制作を受注。

  3. 2022年末

    完全フリーランスとして独立

    制作会社の外部パートナーとして、コーディング・WordPress構築を中心に活動。

  4. いま

    対応実績220件以上

    新規制作から軽微な修正まで対応。デザインを含むご依頼は、パートナーデザイナーと連携して進めています。

対応業務

デザインデータをもとに、
ページ制作から機能・動きの実装まで対応します。

同じWebページを表示したPCとスマートフォンのフラットアイコン
デザインから、PC・スマホへ

01 / CODING

コーディング・LP実装

PCからタブレット、スマートフォンまで、写真・文字・余白のバランスを保って実装します。共通化できるコードはまとめ、修正・運用しやすい形に整えます。

  • レスポンシブ対応
  • 下層ページ追加
  • 既存ページの修正
入力欄と画像のあるノートPCと鉛筆のフラットアイコン
管理画面から、情報を更新

02 / WORDPRESS

WordPress構築・改修

コードを触らず、管理画面から迷わず更新できるように構築します。必要な入力項目を整理し、説明や用途に合う名称を添え、更新担当者が使いやすい形に整えます。

  • カスタム投稿・ACF
  • 検索・絞り込み
  • フォーム実装
  • 更新担当者に合わせた権限・表示項目
Webページのボタンへカーソルを合わせるフラットアイコン
スクロール・ホバーに連動

03 / ANIMATION

アニメーション実装

参考イメージをもとに、写真の切り替えや手描きラインなどの動きを実装します。指示がないボタンなどにも、操作できることが伝わる自然な動きを添えます。

  • GSAP・ScrollTrigger
  • Swiper・Splide
  • CSSアニメーション

初稿提出までの目安

お急ぎの案件もご相談ください。

LPコーディング
最短2営業日
コーポレートサイトWordPress構築・10ページ程度
最短10営業日

デザインデータ・素材・仕様がそろってから初稿提出までの目安です。内容・ボリューム・稼働状況により異なるため、ご相談時にスケジュールをご案内します。

土日祝の対応が必要な場合も、応相談で承ります。

公開後の更新・保守も対応

定期バックアップ・更新作業をご相談いただけます。
不具合対応は、内容に応じて別途お見積もりとなります。

デザインからのご相談も

中村が窓口となり、パートナーデザイナーと連携して進めます。デザインを含めて任せたい場合もご相談ください。

実装品質と進め方

見え方とコードの設計を整え、
確認・引き継ぎの負担を抑えます。

自主制作の実装例

支給デザインをもとに、画面幅が変わったときの見え方やスクロール演出を検討した自主制作です。

写真・文字・余白のバランスを保つ調整と、スクロールに連動する背景色の変化を動画で紹介します。

iro travel Hawaii特集のPC表示。海の写真と縦書きの見出し スマートフォンに合わせたHawaii特集の表示
PC・スマートフォンに対応

HTML / CSS / JavaScript

PERSONAL PROJECT / 自主制作

iro travel Hawaii特集

支給デザインをもとにした自主制作

旅行サイトのデザインをもとに、PC・スマートフォンに対応したページを制作しました。写真や余白を生かした落ち着いた雰囲気に合わせて、控えめな動きや操作の手がかり、画像の読み込みまで整えています。

担当:コーディング/レスポンシブ調整UI・動きの検討と実装

自主制作サイトを見る (新しいタブ)

画面幅・スクロール演出・画像の最適化

01 / RESPONSIVE

画面幅に合わせた写真と本文の配置調整

1440pxを基準に、画面幅を広げても縮めても写真・本文・余白のバランスが自然につながるように調整しています。広い画面では、写真が端へ離れすぎない配置にしています。

画面幅:1440px → 1920px → 1024px → 1440px

02 / SCROLL ANIMATION

スクロールに連動する背景のグラデーション

モデルプランの進行に合わせて、背景のグラデーションが朝・昼・夕方・夜の色へなめらかに変わります。写真や文字を読みやすく保ちながら、一日の流れを色でも感じられるようにしています。

スクロールに合わせて、プランと背景色が変化します。

03 / IMAGE OPTIMIZATION

画質と読み込みに配慮した画像の扱い

写真の見え方を保ちながら、画像の形式・サイズ・読み込み方を調整しています。

  • 画像形式を使い分けるWebPを用意し、JPEG・PNGも併せて設定。写真や透過の有無に合わせて使い分けています。
  • 表示サイズに合う画像を読み込む複数サイズの画像を用意し、画面幅に合うものを読み込むことで、必要以上に大きな画像を使わないようにしています。
  • 見える順番に合わせて読み込む最初の画面の写真は優先して読み込み、下の写真は必要なタイミングで読み込みます。

支給デザインをもとに自主制作した架空の旅行サイトです。お問い合わせフォームは動作確認用です。

制作の流れ

ご相談から納品まで、
中村が直接担当します。

  1. STEP01

    ご相談・内容確認

    案件の概要とご希望の納期を、メールでお送りください。

    お問い合わせには原則1営業日以内に返信します。

  2. STEP02

    お見積もり・
    スケジュール共有

    作業範囲・金額・スケジュールをご提示し、合意後に着手します。

    デザインの印象や仕様に関わる判断は、実装前にご相談します。

  3. STEP03

    実装・確認

    テスト環境で画面をご確認いただき、調整内容と理由を初稿時にまとめて共有します。

    細かな調整は変更希望がある場合のみご連絡いただき、確認の負担を抑えます。

  4. STEP04

    公開・納品

    カンプとの比較、PC・スマートフォンでの表示・操作、コードを確認し、公開作業またはデータ納品を行います。

    フォーム・リンクも確認。納品後の不具合は修正します。

制作期間は内容・規模により異なります。ご希望の納期を伺い、お見積もり時にスケジュールをご案内します。

よくあるご質問

ご依頼前にいただく
ご質問をまとめました。

スマホやタブレットのデザインがそろっていなくても相談できますか?

はい。支給デザインをもとに、画面幅が変わっても印象が自然につながるよう整えます。FVなど印象が大きく変わる部分は事前にご相談します。対応範囲と費用は、デザインを確認したうえでご案内します。

クレジット非表示やNDAでの対応はできますか?

はい。制作会社さま・ディレクターさまの下請けとして、サイトへの制作者クレジット非表示やNDAの締結に対応します。基本は制作会社さまを窓口に進め、必要に応じてエンドクライアントとの打ち合わせにも同席します。

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

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

一部のページや機能だけ依頼できますか?

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

納品形式や公開方法は指定できますか?

はい。テスト環境へのアップロード、本番環境への反映、ZIP形式のデータ納品、GitHubでの納品に対応しています。基本は貴社のご希望に合わせ、作業範囲と納品方法を事前に確認して進めます。

WordPressの機能やサーバーまわりも相談できますか?

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

デザインからの依頼も相談できますか?

はい。中村が窓口となり、パートナーデザイナーと連携して進めます。コーディング・WordPress構築に加え、デザインを含むご依頼もご相談いただけます。

制作にAIを活用していますか?

はい。AIで実装作業を効率化し、スピード感のある制作を進めています。カンプとの比較、表示・操作の確認、コードチェックを行い、品質を確かめながら仕上げます。

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

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

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

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

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

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

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

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

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

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