HTML/CSSコーディング代行の依頼・外注

サービス内容

HTML/CSS/JavaScriptでの静的コーディング代行
▢LP、トップ、下層ページの作成
▢HTMLテンプレートに記事流し込み
▢WordPress新規構築・改修作業
▢お問い合わせフォーム実装
▢部分修正 ( 既存サイト修正、ページ追加、不具合対応等 )

お勧めな方

【制作会社様】「デザインはあるけどコーダーが足りない、時間がない」
【デザイナー様】「デザインや自分の業務に集中したい」
「言葉が丁寧な人は多いけど、具体的に説明してくれる人がいない」

デザイン再現・コード品質は元より
動けばいいではない、会社様ごとのルールやご依頼事情を大事にしており、
継続でご依頼のお客様には高い評価をいただいております。

参考料金・基本料金に含まれるもの

プラン、下記に表示している金額は目安となります。
ご予算が決まっている場合や修正などは
「カスタマイズ」からご相談下さい。

■静的サイト
▢LPコーディング：75000円～
▢LPコーディング(画像中心)：30000円～
▢トップページ　：50000円～
▢下層ページ　　：10000円～
※LPとトップの違いは主に作業密度の差です。

基本料金に含まれるもの
・レスポンシブ対応
・基本的なJavaScript( スムーススクロール / スライダー / ハンバーガーメニュー等 )
・画像圧縮 / 2倍書き出し(retinaDisplay対応)
・ブラウザチェック

■記事流し込み
▢5ページ以下：1ページ：3000円～
▢5ページ以上：1ページ：2600円～
・テンプレートと、流し込み元となる記事(ドキュメントやHTML)を頂きます。
・40P超えもスケジュール次第でお請け可能です。
・使用する画像、ファイル命名規則等は事前に確認いたします。

■WordPress(機能部分)
▢WordPress化：30000円～
・オリジナルテーマ制作
・カスタム投稿・カスタムフィールド等対応( 数に応じて追加料金 )
・必要に応じて管理・編集できる形で実装

▢お問合せフォーム：10000円～
・ WordPressプラグインを使用（Contact Form 7）

■修正
▢修正一か所：3000円～( 内容により変動します )

納品までの流れ

1.ヒアリング、お見積もり
デザイン、規模・ページ数・仕様、希望納期、作業範囲等の確認
基本チャットで進行します。
　↓
2.お見積り提出、ご購入
内容に同意いただけた場合、ご購入をお願いいたします。
　↓
3.データの受け渡し
デザインデータ、仕様書やログイン情報などを頂きます。
　↓
4.制作開始
定期的に作業進捗の報告をいたします。
　↓
5.テストアップ / ご確認・修正対応
コーディングが完了次第、テスト環境に初稿をアップします。
お客様側でご確認いただき、修正点がありましたら対応いたします。
　↓
7.納品
対応完了後にご確認いただき、何も問題なければ、
zipファイルにて納品、またはサーバーにアップロードいたします。

納期、納品方法

■デザイン、ボリューム、スケジュールにより変動いたします。
▢目安
LP・トップページ：4～7日
下層ページ1P　：1～2日
WordPress　：7日～

※デザインデータを受け取った翌日からの日数です。
※コーディングだけでなく品質チェックや
　複数ブラウザ確認、何らかの緊急対応といった事もあるので、
　余裕ある納期をいただいております。

ブラウザ確認対応環境

【windows】chrome / firefox / edge【Windows11】
【 android 】chrome / firefox / edge【BlackView Shark8 Android13】
【macbook】chrome / firefox / safari【MacBookPro Retina13インチPro】
【 iPhone 】chrome / firefox / safari【iPhoneSE第二世代 iOS18.5】

WordPress・SEOに強いWebコーダーのらぐちです。
Web制作会社やフリーランスのクリエイターとして50件以上の案件に携わってきました。
リソース不足に悩む、Web制作会社様やデザイナー様に代わってデザインに忠実なコーディングを代行いたします。
パソコン・スマートフォン・タブレットにおける表示に完全対応！
豊富な実績を持つフリーランスが親切・丁寧にお仕事いたします。

★このような方におすすめのサービスです

• デザインデータはあるけどコーディングができない
• コーディング作業のための時間が足りない
• ちょっとしたアニメーションが必要だけど自分では難しい

★サービスの内容

• HTML・CSSの静的コーディング
• JavaScriptを使った動的な表現
• WordPressのテーマ開発（クラシックテーマ）
• WordPressへの機能追加（※別途お見積りいたします）
  ※どのような案件も1ページから承ります！

★制作の流れ

1. ヒアリング（お見積り）※お気軽にご相談ください
   ご依頼の内容を伺います。
   コーディングするWebサイトの内容や目的、ページ数、スケジュール、ドメイン、サーバーなどの情報をお聞かせください。
   アニメーションなど動きが必要な場合は、簡単なイメージだけでも共有していただけると幸いです。
   （参考URLの提示などでも構いません）

2. 契約（仮払い）
   ヒアリングを受けてお役に立てそうであれば、仮払いにてご契約いたします。

3. お客様からデザインデータの受け取り（Figma・Photoshopに対応）
   お客様からデザインデータをいただきます。
   対応しているアプリはFigmaとPhotoshopです。
   デザインデータのほかにコーディングルールがございましたら、合わせてご提供ください。
   WordPressの場合は、差し支えなければ管理画面のIDとPass情報もいただけるとありがたいです。

4. コーディング実装・動作確認
   コーディングを開始します。
   WordPressの場合は、管理画面の構築やテーマファイルのアップロードまで対応いたします。

5. お客様によるご確認
   納品の前にお客様によるご確認をお願いいたします。
   動作確認用のプレビュー環境をこちらで準備することも可能です。

6. 納品（zipファイル、サーバーへのアップロードなど柔軟に対応いたします）
   ご確認の結果、問題なければ納品とさせていただきます。

★無料対応

• 画像変換と圧縮（JPG・GIF・PNG ⇒ WebP）
• 基本的なSEO（titleタグ、description、OGP、構造化データなど）
• WordPressやコーディングに関する簡単な相談対応

★WordPress案件について

WordPressのページとして制作する案件については、

• 管理画面のログインID、パスワード
• FTPのホスト名、ID、パスワード
• レンタルサーバーのログイン画面のIDとパスワード

などの情報が必要となる場合があります。
※都度ご相談いたします。

★所有資格

• 認定SEOコンサルタント
• ウェブ解析士
• HTML5プロフェッショナル認定試験レベル2

===

迷ったら、とりあえずメッセージ下さい！
お見積り・技術的に可能かどうかなど、ご返信差し上げます。

メッセージを送ったからといって、必ず依頼しなくてはならない、なんてことはないです。ご安心ください。

【サービス概要】
デザインカンプからのコーディングを行います。
ご希望に応じて、静的HTMLまたはWordPress（完全オリジナルテーマ）で対応可能です。
企業担当者様や制作会社様からのご依頼にも多数対応しており、忠実な再現と丁寧な仕上がりを心がけております。

【こんな方におすすめ】
自社サイトをリニューアル・更新したいが、社内にコーダーがいない
デザインはあるので、コーディングだけ外注したい
LPやシプルな企業サイトを短期間で公開したい
制作会社・ディレクター様の外注先としても対応可能

【選べる3つのパッケージ】
① 静的HTMLランディングページ（LP）コーディング
価格：25,000円〜
・LPデザインをHTML/CSSで忠実に再現
・レスポンシブ対応（スマホ対応込み）
・ホバーやスライドなどの基本アニメーション
・画像の軽量化対応
※WordPress管理なしのシンプルな構成

② 静的HTML企業サイト（トップ＋下層2P）
価格：34,000円〜
・トップページ（8,000pxまで）＋下層ページ2ページ
・HTML/CSSベースで構築（軽量・管理不要）
・スマホ対応／基本アニメーション込み
・ページ構成例：事業紹介／会社概要／お問い合わせ案内など

③ WordPress企業サイト（トップ＋下層2P）
価格：78,000円〜（初期費用含む）
・完全オリジナルテーマでWP構築
・トップページ＋下層2ページをWordPressで実装
・更新しやすい管理画面設計（ACF利用）
・カスタム投稿・テンプレート作成・パンくず対応など含む
・初期費用（環境整備・テーマ構築）：10,000円込み
・動作確認・プラグイン導入・運用に合わせた構造設計

【追加オプション料金】
● 下層ページ追加（8,000pxまで）
静的HTML：7,000円／1ページ
WordPress構築：14,000円／1ページ
※ページ長が8,000pxを超える場合、1,000pxごとに＋1,000円（静的）／＋2,000円（WP）

● アニメーション追加
ホバーアニメーション：無料
基本的なJS/JQueryアニメーション（fade／slideなどスクロール連動）：1箇所 3,000円〜
複雑な動き（GSAP等を用いたもの）：内容に応じて別途お見積もり

● 問い合わせフォーム
5,000円〜12,000円程度（要相談）

※デザインデータにスマホ用のデザインがない場合はよしなにコーディングいたします。
　（その場合は合計金額の30％が追加となります。）
※デザインとの相違による修正回数については無制限です。
（デザイン変更については、別途料金が発生する場合がございます。）

♦︎ご依頼から納品までの流れ♦︎
①ヒアリング・お見積り
②ご契約
③デザインデータのお預かり
④コーディング
⑤テスト環境にアップロード
（お客様にブラウザでご確認いただきます。）
⑥修正
⑦納品

♦︎こちらでのテスト環境♦︎
Mac、iPhone（Chrome/Safari）
Windows（Edge）

♦︎納期について♦︎
着手から３日〜3週間程度
※ページ数・仕様・ご希望納期により調整いたします。

♦︎納品について♦︎
zipファイル、サーバへのアップロードなど納品方法はご相談

ご満足頂けるように丁寧かつ柔軟に対応致します。
まずはお気軽にご相談下さいませ。

HTML/CSSコーディング代行サービス

🎯 サービス概要

15年以上のIT実務経験とAdobe製品20年の使用実績を活かし、デザインファイルから高品質なWebサイトを制作いたします。医療・金融機関での基幹システム構築経験により、企業レベルの品質とセキュリティを重視したコーディングを提供します。

💪 私の強み・差別化ポイント

✅ 業界特化の実績

• 医療機関: 県立総合病院で8年間のIT全般・システム管理
• 金融機関: 基幹システム構築・保険会社ルーター設定実績
• 公共機関: 自治体システム基盤更改プロジェクト参加

✅ デザイン解釈力

• Adobe製品熟練: Photoshop・Illustrator 20年以上の使用経験
• 多様な形式対応: Adobe XD・Figma・PSD・AI・Sketch対応可能
• 仕様書なしOK: デザインファイルから要件を的確に読み取り

✅ 技術の幅広さ

• フロントエンド: HTML5・CSS3・JavaScript・jQuery
• バックエンド理解: PHP・MySQL・LAMP構成経験
• 現在学習中: React・TypeScript・AWS

🛠 対応可能な業務

基本サービス

• レスポンシブコーディング: PC・タブレット・スマートフォン完全対応
• クロスブラウザ対応: Chrome・Firefox・Safari・Edge動作検証
• SEO基本設定: title・meta・alt属性・構造化マークアップ
• アクセシビリティ配慮: WCAG準拠の基本的な配慮事項

JavaScript実装

• アニメーション: CSS3・jQuery・GSAP使用
• インタラクション: ハンバーガーメニュー・スライダー・タブ切り替え
• フォーム機能: バリデーション・送信処理・エラーハンドリング
• 外部API連携: GoogleMaps・SNS埋め込み・お問い合わせフォーム

品質管理・最適化

• コード品質: BEM記法・モジュール化・コメント充実
• パフォーマンス: 画像最適化・CSS/JS圧縮・キャッシュ設定
• セキュリティ: XSS・CSRF対策・セキュリティヘッダー設定

📋 制作フロー

1. 要件確認（1-2営業日）

• デザインファイル・仕様の詳細確認
• ブラウザ対応範囲・機能要件のすり合わせ
• スケジュール・納期の最終調整

2. 環境構築・設計（2-3営業日）

• ディレクトリ構造設計
• CSS設計・命名規則策定
• レスポンシブブレークポイント設計

3. コーディング実装（プランに応じて）

• HTML構造実装
• CSS・レスポンシブ対応
• JavaScript機能実装

4. 検証・最適化（3営業日）

• 各ブラウザでの表示確認
• レスポンシブ動作検証
• パフォーマンス・アクセシビリティチェック

5. 納品・サポート

• ファイル一式のzip納品
• 簡易的な更新手順書提供
• アフターサポート（プランに応じて）

🎯 得意な案件・業界

医療・ヘルスケア

• 病院・クリニックサイト
• 医療機器メーカー
• ヘルステック企業

金融・保険

• 銀行・信用金庫
• 保険会社・代理店
• フィンテック企業

公共・教育

• 自治体・公的機関
• 学校・教育機関
• NPO・社会福祉法人

IT・製造業

• システム開発会社
• SaaS・ITサービス企業
• 製造業・建設業

🚀 こんな方におすすめ

• デザインはあるが、コーディングリソースがない
• 品質重視で、長期運用を見据えたサイトを作りたい
• 医療・金融など、セキュリティが重要な業界
• 仕様書作成から相談したい
• レスポンシブ対応で悩んでいる

📞 まずはお気軽にご相談ください

些細なことでも構いません。要件定義から運用まで、Webサイト制作に関するお悩みを何でもご相談ください。15年の実務経験を活かし、最適なソリューションを提案させていただきます。

以下のサービスを提供できます。

1. 既存サイトのWordPress化:

• サービス内容: 既存のウェブサイトをWordPressに移行します。これにより、お客様自身でコンテンツの編集や更新が簡単にできます。
• 特徴: カスタムフィールドとカスタム投稿タイプを活用することで、使いやすく、管理しやすいサイトを構築いたします。

2. PC専用サイトのレスポンシブ対応:

• サービス内容: PC専用でデザインされたサイトを、スマートフォンやタブレットでも適切に表示されるように最適化します。
• 特徴: Dartscssを使用し、既存のコードに影響を与えずにデザインを調整、レスポンシブ対応を実現いたします。

3. デザインカンプからのコーディング:

• サービス内容: Illustrator、Photoshop、XD、Figmaで作成されたデザインカンプをもとに、実際のウェブサイトに変換します。
• 特徴: 各種デザインツールのファイル形式に対応可能です。

4. アニメーション付与によるサイトのリッチ化:

• サービス内容: gsapのアニメーションライブラリを使用して、ウェブサイトに動的なアニメーションを追加します。
• 特徴: アニメーションにより、サイトが一層魅力的で動的な印象を持つようになります。

5. サイト高速化:

• サービス内容: ブラウザキャッシュ、遅延読み込み、Webp形式の画像使用などの手法を用いて、サイトの読み込み速度を向上させます。
• 特徴: サイトが軽量化され、ユーザーエクスペリエンスが向上します。

6. その他のサービス:

• サービス内容: サーバーやドメインの取得からサイトの構築まで、デザインデータがない状況でもお客様のニーズに応じたウェブサイトを作成します。
• 特徴: デザインデータが未準備のお客様でも、お気軽にご相談いただけます。お客様の要件やご予算に合わせた最適なプランを提案し、一緒に素敵なウェブサイトを構築いたします。

デザイナー/制作会社様向けに、経験豊富なエンジニアがコーディングします。

ご提供を受けたデザインから、HTML、CSS、JSなどのコーディングを行います。
ZIPファイル、Github、またはサーバーへ直接公開など、ご希望の形で納品いたします。

当方では、デザインを忠実に再現し、美しく正しいコーディングを心がけています。
・コーディングの外注先を探している方
・コーディングの質を重要視する方
・技術的に可能かどうか迷っている方
ぜひご相談ください。

【ご依頼・制作の流れ】

①打ち合わせ〜お見積り
ご依頼内容を伺います。
サイトの概要、ページ数、スケジュール、ドメイン・サーバーの有無などお聞かせください。
サイトマップやワイヤーフレームがあるとスムーズです。

②デザインのご提供
デザインはフォトショップ、イラストレーター、XD、Figmaのいずれかでご提供ください。
・フォトショップの注意点
画像やイラストはスマートオブジェクトとして埋め込んでください。
・イラストレーターの注意点
WEB用の色空間(sRGB)、ピクセル寸法でお願いします。テキストはアウトライン前のものもご用意ください。
・その他
ご指定のフォントがある場合は、WEBフォントベンダー(Adobeフォント、Googleフォント、Type Square、Font Plus など)とフォント名をご指定ください。

PC用のデザインしかない場合でも、レスポンシブ対応はお任せでご依頼いただけます。

③コーディング開始
スケジュールに沿ってコーディングを行います。
ワードプレスの場合は、管理画面の構築〜オリジナルテーマの作成となります。

④プレビュー
プレビュー環境を用意し、ブラウザで本番同様にご確認いただけます。
＊プレビュー環境は、サーバーの有無やご依頼内容により最適なものを提供します。

⑤納品・公開
納品前にはW3Cのバリデーションチェックを行っております。
(基本No Errorで納品していますが、外部連携など場合によりWarningかinfoレベルは許容範囲とします。)
また、公開時の設定(アナリティクスやサーチコンソール)も無料で対応可能です。

【無料サービス】

・レスポンシブ対応(スマホメニューも含む)
・スライドやアニメーション(複雑ではないもの)
・W3Cバリデーションチェック
・公開時設定(アナリティクス、サーチコンソール)
・レンタルサーバーの設定、ドメインの設定など軽微なサーバー作業

【ワードプレスについて】

規模や複雑さにより、管理画面構築に工数がかかる場合がありますので、事前にご相談ください。

ランディングページ(LP)・WEBサイト・WordPress導入サイトの

コーディングを承ります！

制作会社様・デザイナー様からのご依頼をお待ちしております。

安心してお任せいただけるよう、丁寧に正確に迅速にお仕事いたします！

「まずは相談する(無料)」ボタンから
どうぞお気軽にご相談ください。

ー ご発注から納品まで ー

1. 「まずは相談する(無料)」ボタンからご連絡

ご依頼を検討されている内容、ご希望納期等をお知らせください。

2. ご相談内容に返信

ご相談内容に対する回答を返信いたします。

3. ご発注

ご依頼いただく場合は、ご発注にお進みください。

4. 仮払い

ご発注を承認後、仮払いのお手続きにお進みください。

5. 制作開始

仮払いお手続き完了後、即制作を開始できるよう、制作に必要なものをご送信ください。
納期については、仮払いお手続きが完了し、必要なものが揃った状態の翌日からの日数とお考えください。

6. テストサーバにてご確認

コーディングが完成しましたら、こちらで用意したテストサーバーにアップロードいたします。
そちらにて表示等のご確認をいただき、修正箇所があれば修正いたします。
デザインカンプとは違うように変更する場合は、軽微なものであれば対応いたしますが、コーディングのやり直しになるような変更が発生しないよう、よろしくお願いいたします。

7. 納品

ご指定のサーバーへのアップロードか、ZIPファイルをお渡しするか、どちらにも対応可能です。

8. 納品後の修正

表示の不具合等が見つかった場合などについては、１ヶ月以内は修正対応いたします。
納品後に、例「ここの文字の色やサイズを変更したい」「この画像の表示位置を変えたい」などといった変更は、別料金での対応となります。
尚、クライアント様側でコード改変等をおこなった結果での不具合についても、別料金での対応となりますことをご理解ください。

ー ご用意いただくもの ー

• デザインカンプ(Figma、XD、Illustrator、Photoshop)
• サーバー情報(アップロードにて納品の場合)
• WordPressの場合は、管理画面URL、ログイン情報

ー お願い ー

デザインカンプを基に制作しますが、カンプだけではわからない箇所もあります。
そのような箇所については、追加情報をお知らせください。
リンク先など。
できる限りお早く納品ができるよう、あらかじめカンプ内に記載いただくか別途お知らせをお願いいたします。

• サイト名
• サイトURL
• DESCRIPTION(サイトの説明文)
• FAVICONについて(用意がなければこちらで簡易的なものを作成)
• OGPの情報(X、Facebookアカウント情報など)
• SNS等共有時に表示される画像(用意がなければこちらで簡易的なものを作成)
• デザインカンプに有料フォントが使用されている場合(指定がなければ近似のGoogleフォントで対応)
• サイト内、外部サイトのリンク先のURL
• お問い合わせフォームの送信先メールアドレス
• お問い合わせフォームの自動返信用メールアドレス
• 開閉したり追尾したり、動きのある箇所。
• ボタンやリンクなど、HOVERで色を変えたり、OPACITYの調整等する箇所
• レスポンシブ表示のブレイクポイント(基本は、〜1025、1024〜751、750〜600、599〜320pxでデザインに合わせて設定しています)
• 余白等、どの程度カンプ通りにするか(特別指定がなければ、ズレ等と判断した部分についてはこちらの判断で調整します)

※特に細かいご指定がないことについては、こちらで適宜調整していきますので、何かご指定がある場合はあらかじめお伝えください。

ホームページ（HP）やランディングページ（LP）のコーディングを承ります。デザインを忠実に再現し、SEOやレスポンシブ対応を含むユーザー体験を重視した高品質なサイトを実現します。自衛隊や学校教員の経験を通じて培った責任感と迅速・丁寧な対応を心がけ、お客様のご要望にしっかりとお応えします。

【納期】
原則５日を頂戴しております。
デザインの内容や業務量、リソースによっては５日以上になる場合がございます。
あらかじめご了承ください。
（有料オプションをご購入の場合は、さらに記載の納期を頂戴いたします。）

【保有スキル】
・HTML
・CSS
・JavaScript
・Sass
・jQuery
・PHP
・WordPress

【特徴】
・迅速なレスポンス
→自衛隊、学校教員の経験から時間管理スキルを培いました。営業時間中は原則１時間以内にお返事いたします。（営業時間外でも、24時間以内にお返事致します。）
・丁寧なコミュニケーション
→学校教員の経験から、分かりやすい言語化スキルを培いました。高品質な商品を提供するため、お客様に伝わりやすいコミュニケーションを実施しています。
・稼働時間が柔軟
→9時から18時まで稼働しております。フリーランスとして活動しているため、柔軟な対応が可能です。
・熱量がある
→自衛隊、学校教員の経験から、目標達成能力を培いました。「目標を達成するためにどうすればよいのか」「どんな準備が必要なのか」を徹底的に計画し、実行する力があります。

【納品までの流れ】
①ご相談
↓
②お見積もりの提出
↓（※ここまで無料です！）
③デザインカンプや素材等のご提供
↓
④コーディング
↓
⑤制作物の確認・修正（テスト環境用意いたします）
（※納品前の修正は無制限で対応いたします。大幅なデザインの変更の場合、追加料金を頂戴します。）
↓
⑥最終確認後に納品

購入にあたってのお願い
■ご用意いただきたいもの
・デザインデータ（Figma,Photoshop, Illustrator, XD）
　画像素材、動画、文章などHPに掲載する内容

※レスポンシブ対応が必要な場合は、スマホ用のデザインデータもご用意ください。

■納品形式について
どちらかお選びいただけます。
・データ納品（ファイル一式を zip 圧縮したもの）
・指定のサーバーにアップロードして納品
　（サーバー納品の場合は一般的なレンタルサーバーのみ対応）

Web制作会社で働く現役Webエンジニアの私が、コーディング代行を致します。
既存サイトの不具合などの小さなご依頼から、対応可能です！

「サービス詳細」
いただいたデザインカンプ(Figma/XD/Photoshop/イラレ)から、Webサイトコーディングをします。
SEO対策に有利な、コーディングを致します。
・HTML/CSSコーディング
・Wordpressサイト開発
・JavaScript,JQueryを使ったアニメーション実装
・Vue.jsを使ったモダンフロントエンド開発
・レスポンシブ対応
・お問い合わせフォーム実装(追加料金)
・既存サイトの不具合対応

「ちゃんと進捗管理ができて、連絡ができるエンジニアです。」
私は、「進捗管理」ができるエンジニアです。
ですので、エンジニアによくある、「進捗状況が把握しづらい。」と言ったことは、私の場合ございません。
進捗管理シートを使用し、コーディングを進めます。ですので、進捗状況がわからないと言ったことは起こらないと思います。
また、内部SEO対策を考え、コーディングを致します。

「私の強み」
・内部SEOを意識しコーディング
・進捗確認 / 修正指示がしやすい。
・Wordpressサイトを作成する際は、セキュリティ対策を致します。
・サイト表示速度改善のため、画像圧縮を行います。
・常時SSL化とアクセスデータ見ることができるGoogleアナリティクスの設置を行います。

「私の実績」
実績
・Wordpressサイトの開発案件 20件ほど
・LPの開発案件 5件ほど
・予算1000万円規模のメインディレクション 3件ほど
・予算200~500万円規模のメインディレクション 10件ほど
などなど

ポートフォリオ
ランサーズに登録しているポートフォリオはこちらになります。
https://www.lancers.jp/profile/yk72__mfs/portfolio

「アフターフォロー」
・追加修正が3回目まで無料

「大まかな流れ」
①内容のヒアリング、お見積もり
ヒアリングにて、画像やデザインデータを確認させていただきます。
②ご契約
③コーディング
④ご納品
レンタルサーバーにアップロード or ファイル納品を想定しております。

数あるサービスからこちらのサービスをご覧いただきまして、ありがとうございます。

このようなお悩みをお持ちの方はございませんか？

・複雑なアニメーションを実装できる人がいない
・デザインはできるけどコーディングが苦手なデザイナーの方
・コーディングだけ外注したいデザイナーの方
・コーダーのパートナーを探しているデザイナー
・社内でコーディングできる人が少ない
・社内のリソースが足りていない
・初心者の人にお願いするのは怖いから実務経験のある方にお願いしたい

全てお任せください！！

・コーダーの経験年数3年で本場の制作会社でのコーディング経験あります
・どの画面幅でも崩れないデザインを意識してコーディングを徹底意識して作業しております
・コーディングと複雑なアニメーションの実装も同時にお請け可能です


※こちらのサービスは小規模な1ページサイトから30ページ前後の中規模サイトまで対応しています。

■サービス内容

・HTML・CSSの静的コーディング

・jQuery/JavaScriptの実装
・GSAPを使用したリッチなアニメーションの実装
(WebGLを使用したアニメーションはご相談ください)
・CSSアニメーション

・WordPressの実装(オリジナルテーマ制作)
・お問い合わせフォーム実装
・gulp・webpackの環境構築（ソースコードのお渡しも可能です。）
・gitでのコード管理

■基本料金の内訳
・jQuery/JavaScriptの実装(無料JavaScript一覧内のもの)

・レスポンシブ対応(タブレット・スマホ込み)

・画像圧縮による表示速度最適化(Webp対応あり)

・SEO対策(metaタグ、画像に適切なalt、文書構造に適した適切なHTMLタグなど)
・BEMをベースとした長期メンテナンスしやすいCSS設計
・テスト環境のご用意
・修正無料

■無料JavaScript実装一覧
・簡単なスクロールアニメーション

・ハンバーガーメニュー

・アコーディオンメニュー

・カルーセル/スライダー

・モーダルウィンドウ

・スムーススクロール

・タブ切り替えなど、webサイトでよく実装されている動き。

■基本的な納期｜デザイン、ボリュームにより変動いたします。

・トップページ：2～3日

・下層ページ：1日～


※デザインデータを受け取った翌日からの日数になります。

■納品までの流れ
ヒアリング

↓

デザインデータお預かり

↓

コーディング

↓

テストアップ（ご確認・修正）

↓

納品（zipファイル送付、またはFTPでレンタルサーバーへアップロード）

■ブラウザ・端末確認一覧

・Google Chrome　Mac/Windows/iPad/iPhone/Android

・FireFox、Microsoft Edge　Mac/Windows

・Safari　Mac/iPad/iPhone


各ブラウザ・実機で検証を行い、表示が崩れないようにしてお渡しいたします。

ご満足いただけるよう、責任をもってご提案・対応させていただきます。
ご不明点は、お気軽にお問い合わせください。

最後に

私自身、制作会社にて外注を何度も経験してきました。
だからこそ、外注者とって選ぶポイントであるコミュニケーションの大切さと柔軟さを
他のフリーランスの方々よりも理解しており、誰よりも意識して活動をしております。

まずは一度お問い合わせくださいませ。

サービスをご覧いただきありがとうございます。

◎こんな方にオススメです◎
・デザインはあるけどコーディングできない、する時間がない…
・外注しづらい軽微なコード修正 or 下層１ページだけ頼みたい…
・0からコーディング、WordPressオリジナルテーマ化まで実装してもらいたい…

このようなご希望に応えます。
お見積は無料ですので、ぜひお気軽にご相談ください。

【ご提供する業務】
・HTML/CSSを用いた静的コーディング
・jQuery/JavaScriptを用いた動的実装
　└ハンバーガー / ドロワー / ページトップ / モーダル / アコーディオン / タブ / スライダー
・レスポンシブ対応
　└スマホファースト、パーフェクトピクセルを意識してコーディングいたします。
・WordPressを用いたオリジナルテーマ制作、カスタマイズ
　 └カスタム投稿・カスタムタクソノミー・カスタムフィールドなど
・お問い合わせフォームの実装

※無料オプション
・表示速度の高速化のための画像圧縮
・内部SEO対策
・テスト環境の構築

【業務進行において】
・CSS設計（ 予測・再利用・保守・拡張）を意識し、FLOCSSによりコーディングします。
・Gulp、Sass（Scss）を使用します。
・複数ページに及ぶ場合Pug・EJSなども使用します。
・gitでソースコード管理を行いながらコーディングをします。

【制作の流れ】
1　ヒアリング&お見積り（※まずはご相談下さい）
2　お客様からデザインのご提供
3　コーディング＆テスト
4　ご確認・修正
5　最終確認・納品
※納品方法は希望がなければZipファイルを送付致しますが、サーバー納品にも対応可能ですので、ご希望の際はご連絡くださいませ。

サービスをご覧いただきありがとうございます。

◎こんな方にオススメです◎
・デザインはあるけどコーディングできない、する時間がない…
・定期的にあるLPのコーディングを任せれる人を探している…

このようなご希望に応えます。
お見積は無料ですので、ぜひお気軽にご相談ください。

【これまでの実績】
・写真展LP（掲載しているもの）
・化粧品LP（掲載しているもの）
その他LPコーディング実績多数
※主に制作会社様とお仕事をしていますので非公開のものが多いです^^;

【ご提供する業務】
・HTML/CSSを用いた静的コーディング
・jQuery/JavaScript（Vanilla.js）を用いた動的実装
・GSAPなどライブラリを用いたアニメーション実装
・レスポンシブ対応
　└スマホファースト、パーフェクトピクセルを意識してコーディングいたします。
・メールフォームの実装

※無料オプション
・表示速度の高速化のための画像圧縮
・テスト環境の構築

【業務進行において】
・CSS設計（ 予測・再利用・保守・拡張）を意識し、FLOCSSによりコーディングします。
・Gulp、Sass（Scss）を使用します
・Gitでソースコード管理を行いながらコーディングをします。

【制作の流れ】
1　ヒアリング&お見積り（※まずはご相談下さい）
2　お客様からデザインのご提供
3　コーディング＆テスト
4　ご確認・修正
5　最終確認・納品
※納品方法は希望がなければZipファイルを送付致しますが、サーバー納品にも対応可能ですので、ご希望の際はご連絡くださいませ。

こちらのパッケージはコーディングの代行、WordPress構築（オリジナルテーマ制作）
のサービスです！

こんな方におすすめ
✅コーディング業務を外注したい
✅コミュニケーションコストがかからず仕事ができる人を探している
✅継続的にお願いできるパートナーを探している制作会社様
✅コーディングできる人を探しているデザイナー様、デザイン会社様

現在は制作会社様の他、フリーランスのディレクター様からのご依頼で
制作会社様、デザイン会社様からのコーディング業務をメインに
継続的にお取り引きをさせてもらっています。

丁寧なやり取り、即レス対応など当たり前を確実にし、お相手に満足していただける
サービスを提供しています！

●●パッケージ内容
▶︎静的コーディング
　・LPコーディング
　・コーポレートサイトコーディング
　・JavaScript（jQuery）を用いた各種アニメーション対応
　・PCのみのデザインデータから各種サイズのレスポンシブ対応可能
　・BEM、FLOCSSを用いたCSS設計によりコードの保守性担保
　・テスト環境
　・基本は無料修正対応
▶︎WordPress構築
　・オリジナルテーマでの実装可

●●品質チェック、対応ブラウザ・端末
品質チェック内容の詳細共有し、チェックのお手間を減らします
各種ブラウザ、端末でのチェック内容も共有
端末：Mac/Windows/iPhone/Android
ブラウザ： Chrome、FireFox、Microsoft Edge、Safari

●●納品方法
zipファイル、FTPサーバー、GitHub、WordPress環境にデータ移行

●●扱えるツール
・HTML / CSS / SCSS / jQuery / WordPress / gulp / EJS / Git,GitHub

●●対応デザインデータ
・Figma / XD / Photoshop / Illustrator

●●対応できる作業
コーディング作業全般
LP制作、コーポレートサイト制作、WordPress構築を主にお受けしております

●●実績
・HTML/CSSを用いたLP制作
・チーム開発で企業コーポレートサイト制作（EJSコーディング、Githubソース管理）
※こちらでの公開は控えますが、お見せできる実績もございますので
　一度お声掛けいただけると幸いです

●稼働時間
AM3時〜PM17時まで
必要時にはご相談いただければ21時まで対応可能
土日問わず対応できます

気になることがあれば、まずは一度お声掛けください！
ご相談だけでも構いませんのでお気軽にどうぞ！

ご覧いただきありがとうございます。
本パッケージでは、デザインデータをもとに、高品質で保守性の高いHTML/CSS/JavaScriptコーディングを提供いたします。コーポレートサイトやLP、ポートフォリオ、サービス紹介ページなど、静的なWebサイトの構築をご希望の方に最適です。

⸻

✅ 提供できる内容
• HTML/CSSによる静的サイトのマークアップ
• セマンティックなタグを用いた構造
• アクセシビリティやSEOを意識した記述
• Sass（SCSS）を使ったCSS設計
• モジュール化・変数管理など保守性を考慮
• BEMや命名ルールの設計にも対応
• レスポンシブ対応
• スマートフォン・タブレット・PCに最適化
• ブレークポイントの調整やレイアウト崩れの修正
• JavaScriptによるインタラクション実装
• スライダー、アコーディオン、モーダル、タブ切り替えなどの基本UI
• スクロール連動アニメーションやフェードイン等の演出
• jQuery対応（必要に応じて）
• 既存環境に合わせたスクリプト実装も可
• 納品ファイルの整理と構造化
• 画像、CSS、JSのフォルダ分け
• READMEや簡単な操作マニュアルの付属も可能（希望者）

⸻

✅ ご依頼の流れ

1. ヒアリング・ご相談
   • デザインデータや参考サイト、構成などを伺います。
   • 作業範囲やスケジュール、希望機能などを確認します。
2. お見積もり・納期の提示
   • ページ数や機能に応じて、正式なお見積もりを提示します。
3. 制作開始
   • HTML/CSS/JavaScriptによるコーディングを行い、途中段階での確認も可能です。
4. 最終確認・修正対応
   • 納品前に確認用データを提出し、軽微な修正にも対応いたします。
5. 納品（ZIP形式またはGit等）
   • HTMLファイルとリソースをまとめて納品いたします。

⸻

✅ 対応可能なデザインデータ
• Figma
• Adobe XD
• Photoshop（PSD）
• PDF / イメージ画像（構成が明確であれば可）

⸻

✅ 納品形式
• HTML/CSS/JavaScriptファイル一式
• ディレクトリ構成：
index.html / css / js / imgなどご希望に応じます
• GitHubでの納品やバージョン管理対応も可能です（要相談）

⸻

✅ ご依頼にあたってのお願い
• デザインデータは完成された状態でご提供ください。
• テキストや画像などが未定の場合は、仮素材での対応となります。
• CMS（WordPress等）への組み込みは本パッケージの範囲外です。

⸻

✅ このような方におすすめ
• デザインデータはあるが、コーディングを外注したいWebデザイナー・ディレクターの方
• 小規模なWebサイトを短納期・低予算で立ち上げたい事業主の方
• 保守性やSEOにも配慮したHTMLコーディングを依頼したい方

⸻

誠実かつ丁寧な対応を心がけております。
ご相談やご不明点があれば、お気軽にお問い合わせください！

ご覧いただきありがとうございます！

WEBエンジニアのmatsuguchiと申します。

ホームページやLPをデザインカンプからコーディングしております。
(デザインカンプはXD・Photoshop・Illustrator・Figmaで作成されたものに対応しております)

制作会社に依頼する相場に比べて安価に行いますのでまずはお気軽にご相談ください。

【私からのお約束】
・保守・管理しやすいコードを書きます！
・表示崩れのないコーディングを行います！
・デザイン通りのコーディングを行います！
・アニメーションもお任せください！
・丁寧・安心のサービスを提供します！

【作業内容】
・HTML・CSSによるコーディング
・javaScript(jQuery)によるアニメーションなどの実装
（例）ハンバーガーメニュー・アコーディオンなどの実装、スライドショー、フェードイン・アウトの実装
・レスポンシブ対応(スマホ対応)
・テストサーバーでの動作確認

その他、ご要望に応じて対応させていただきます！

【作業の流れ】
①「まずは相談する」をクリック
②ヒアリング・見積り
③作業開始
④初稿完成
⑤お客様によるご確認
⑥修正
⑦納品

【料金】
トップページ(アニメーションなし)(7000px程度まで)：10000円
トップページ(アニメーションあり)(7000px程度まで)：11000円
トップページ(7000px程度まで) ＋ 下層ページ2ページ：20000円

【納期】
作業開始より5日～となっております

【納品方法】
・ファイルでの納品
・サーバーへのアップロード

【ヒアリング・見積り時に必要なもの】
・デザインデータ(XD・Photoshop・Illustrator・Figmaで作成したもの)

また、下記6つについてヒアリング・見積り時にお聞きしたいのでご準備をお願いいたします。

・ご予算
・ご希望される納期
・ページ数
・アニメーションの有無
・WordPress化の有無
・画像などのコーディングに必要な素材の準備はできているか

※アニメーションやWordPressがどんなものか分からない場合にはヒアリング時にご説明いたします。
些細な疑問にもお答えいたしますので、ヒアリング時にお気軽にお尋ねください。

ご希望のデザインを完全再現いたします！

頂いたデザインデータを忠実に再現し
想いをカタチにすることを心掛けています。

銀行での人事部での経験から、徹底したタイムスケジュール管理と柔軟な対応でお客様のご要望を組み込み、迅速・丁寧な作業をするのが得意です！

確かなスキルでデザイン通りに制作いたします。ご納得いただけるまで修正いたします。

・HTML/CSSコーディング
・基本的なSEO対策
・保守性の高いコーディング

上記はすべて基本料金に含まれています。

※ご依頼後にデザインに変更があり実装が変わる場合は、追加で費用をいただく場合がございますので予めご了承願います。(簡単な変更の場合はご不要です)

▼作業内容

・静的コーディング
・LPのコーディング
・レスポンシブ対応
・スライダー、スクロール、アコーディオン、ハンバーガーメニューなどのアニメーションの実装
・JavaScriptの機能実装
・WordPress化:内容により別途でお見積り

★おすすめなお客様★

・お手持ちのデザインデータを再現したい！
・コーディングを外注したい！
・デザインはできるけどコーディングは苦手
・コーダー不足で外注先をお探しの制作会社様
・コーダーのパートナーをお探しのデザイナー様
・デザイン素材はあるがコーティングを任せたい方

■ご予算について

作成するページ数やご要件に応じて金額は変動いたします。ご予算に応じて調整可能ですので、お気軽にご相談下さい。

〜ご依頼の流れ〜

①「見積もり・カスタマイズの相談に進む」より、ご依頼の内容を詳しくお聞かせください。
↓
②納品日の目安と、追加で購入が必要なオプションがある場合ご案内いたします。
↓
③お見積もりなど問題なければ、発注をお願いいたします。
写真やテキストなど、サイトに使用する素材がある場合お送りください。
※画像の加工・作成のご依頼も承っています。必要な場合、別途ご相談ください。
※デザインが制作途中の場合はワイヤーや全体の構成図がわかるものをお送り頂ければ先行して作成致します。
↓
④最終的な納品日をお伝えし、サイト構築開始。
↓
⑤コーディング完了後、ご確認をいただき無料で修正対応いたします。
最終チェックが完了後、データ納品となります。

●納期について

デザインデータ受領翌日からの日数を頂いております。
ご希望納期がある場合はご相談ください。

●納品形式

ZIPにてファイル送付致します。
ご希望あればサーバーアップロードも行います

「誠心誠意」丁寧な対応を心掛け、お客様のご要望を組み込みながらデザインの完全再現ができるよう、丁寧に柔軟な対応を心掛けています。

ご不明点などございましたら、見積もり・カスタマイズの相談あるいはメッセージでお気軽にお問い合わせください。

ご覧いただきありがとうございます。

＼ 追加料金なし ／
HP・LPサイトのコーディングを一律15,000円でいたします！
（トップ1ページ、下層5ページまで）

サービス内容
ーーーーーーーーーーーーーーーーーーーー
・いただいたデザインデータをもとに、HTML/CSSを用いた静的なコーディング
・レスポンシブ対応（スマホのデザインが無い場合でもレスポンシブ対応可能です）
・簡単なアニメーションの実装（スライダ―・ポップアップ・アコーディオン等）
・無料の修正対応（3回まで）

◾️細部にこだわった丁寧な構築
・デザインに応じて適切なブレイクポイントを設定し、どのブラウザで見てもズレが無いように構築いたします。

◾️保守・運用を考慮したCSS設計
・保守や運用をし易いように、FLOCSSを用いたCSS設計をしております。
・SCSSで構築を行い、シンプルで管理のし易い記述をしております。

◾️丁寧でスピーディな対応
丁寧でスピーディなレスポンスや進捗の報告を徹底しております！

◾️納品方法
・zipファイル送付

サービスの流れ
ーーーーーーーーーーーーーーーーーーーー
1.　ご相談・ヒアリング
2.　デザインデーターお預かり
3.　作業開始
4.　ご確認・修正
5.　最終確認・納品

注意事項・サービスに含まれていないもの
ーーーーーーーーーーーーーーーーーーーー
・WordPressの構築は承っておりません。
・ピクセルパーフェクトでの実装やOGPの設定、SEO対策は実施しておりません。
・サーバーへのアップロードは行っておりません。
・大幅なデザインや内容の変更、受注時に指示の無かった追加の要望は対応致しかねます。
・通話でのお打ち合わせは行っておりません。
・制作物をポートフォリオに掲載させていただく場合がございます。
（掲載不可の場合はお申し付けください。）

デザインを忠実に再現します！

【最初に】
Web制作会社様
Webマーケティング会社様
ブランディング会社様
デザイナー様
既にあるデザインをWebページに再現してほしい方へ

頂いたデザインを忠実に再現いたします。
今後継続的にお願いしたい方などおすすめです。

【作業内容】

• HTML/CSSコーディング
• 各種端末表示（レスポンシブ）対応
• JavaScriptでWEBサイトにアニメーション付与
• お問い合わせフォームの実装（googleフォームにも対応できます）
• WordPressテーマ作成（※ プレミアムにて対応します）

【使用スキル等について】

• Gulpを用いたメタ言語（SCSS、EJS）の自動コンパイル
• Gitでのソースコード管理
• CSS設計思想（BEM、FLOCSS）を取り入れた保守性の確保
• コード各所にコメントを入れるなど、当然のマナーはきっちりと行います
• WordPressテーマ作成はカスタムフィールド、カスタム投稿タイプなど幅広く対応
• デザインカンプに忠実な仕上がりにするためのブラウザツールの導入
• 各種実機テスト環境（iOS、MacOS、Windowsそれぞれの「Chrome、Safari」）
• 納品前には品質確認を行い、チェックシートを提出致します。（20項目程度）

【制作の流れ】

1. ヒアリング
   WEB制作の作業範囲について確認させていただきます。
   また、当方のスキルと照らし合わせ、対応の可否を判断致します。

2. 見積もり案内/契約
   見積もり・納品予定日をご提示いたします。
   こちらをもちましてご購入の判断をお願い致します。

3. 作業開始
   進捗はお客様のご希望に沿って遅滞なく報告致します。

4. 初稿→修正→納品
   作業を終えましたら一先ず初稿を提示いたします。
   修正等がありましたら、ご納得いただけるよう対応させていただきます。
   ※打合せ時から大幅に変更がある場合は別途お見積りさせていただきます。

【納品方法】
納品方法は柔軟に対応可能です。

• お客様のサーバーにアップロード（その際はFTPアカウントをご教示願います。）
• Zipファイルでのお渡し
• お客様のGitHubへのpush

【納期】
納期にあっては絶対に遅れないように少し余白を持った提案をさせていただく場合があります。
その分クオリティは担保することをお約束いたします。

【料金について】
しばらくの期間は当方の実績作りを兼ねて低価格でお受けさせていただきます。
実績としての掲載が不可能な場合はオプションにて「実績掲載不可」を選択ください。

【最後に】
誠実・即対応を心がけております。
最後までテンポ良く、気持ちの良いお取引を進めていきたいと思いますのでよろしくお願い致します。

本パッケージはWebサイトのコーディング代行サービスです。
ぜひお気軽にご相談下さいませ！

■□――――こんな方におすすめ――――□■

「デザインデータはあるけどコーディングをする時間がない」

このようなお悩みをお持ちではありませんか？
・コーディング業務の外注先をお探しの方
・コーディングが苦手な個人Webデザイナー様
・継続的にお願いできるパートナーを探している制作会社様

ご満足頂けるように丁寧かつ柔軟な対応を心掛け、満足していただけるサービスを提供しています

■□―――― 料金 ――――□■

・トップページのコーディング：15,000円 〜
・下層ページのコーディング　：8,000円〜 / 1ページ
・LPのコーディング：25,000円〜
・アニメーション：要相談
・Wordpress構築：要相談

※ 上記は基本料金となります。ページの長さやデザインの内容によって価格変動ございます。
※ レスポンシブ対応込みの価格になります。

修正や部分コーディングも対応可能ですのでお気軽にご相談くださいませ。

■□―――― 対応可能データ ――――□■

・XD、Photoshop 、Illustrator等
※ 確認用に、一枚で書き出した画像データ（JPEGかPNG）を一緒に送付ください。
※ Illustratorの場合はリンク画像も添付（もしくは埋め込みで）お願いいたします。

■□―――― 納品までの流れ ――――□■

① ヒアリング・お見積もり
② ご契約・デザインデータお預かり
③ コーディング
④ テストアップ（ご確認・修正）
　→ テスト環境にアップしお客様にブラウザで確認いただきます
⑤ 最終確認・納品

■□―――― 納品形式 ――――□■

・zipファイルの送付
・ご指定のサーバーへのアップロード

■□―――― 注意事項 ――――□■

・必ずデザインデータをご用意下さい。
・WEBフォントを使用したデザインの場合、フォントの契約はお客様の方でご準備をお願い致します。
・コーディングのルールがございましたら事前にお知らせください。
・コーディング着手後に大幅なデザイン変更があった場合、追加料金が発生する場合がございます。
・サーバーのご準備はお客様の方でお願い致します。
・WordPress案件の場合バージョン管理等は追加対応となります。

ホームページのコーディング、ホームページ修正対応します。
こちらのサービスはTailwindCSSを使用したコーティングでございます。

TailwindCSSのメリット

１.
クラス名を考えなくて良い。CSS設計の規則が導入されているプロジェクトだと一つのク ラス名を考えるのに数分とられてしまうのも珍しいことではありません。TailwindCSSではその必要がないです。

2.
CSSのファイルがむやみに増えない。従来の方法だと新しい機能やコンポーネントを追加するたびにどんどんCSSファイルが増えていくことになります。TailwindCSSではCSSを新たに書く必要がないため、CSSファイルの数が膨大になり、管理が大変になるといったことが起きません。

3.
安全に変更が可能になる、HTMLファイルに変更が閉じられるので影響範囲が増えない 例えば「paddingがデザインと少しずれていたので直したら、別の場所のレイアウトが壊れた」なんていう経験は誰しも一度はあるのではないでしょうか？ TailwindCSSであればHTMLに対して直接スタイリングの定義を行うため、上記のような問題は発生しません。

デザインは原則、Adobe illustrator、Photoshop、XDでの支給をお願いしておりますが、それ以外の場合はご相談下さい

【提供業務】

数ある中からご覧いただきありがとうございます！
===========

【再現性・丁寧な対応・高品質】 を重視したコーディングを行います。

■こんな方にオススメ！
・コーディング業務の依頼先をお探しの法人様、制作会社様
・コーディングを任せたいコーダーをお探しのデザイナー様

===========

■作業内容
・HTML / CSSによる静的コーディング
・JavaScript / jQueryを用いたアニメーション機能実装
・レスポンシブ対応
・お問い合わせフォーム設置
・品質チェックシートを活用した品質管理
・Wordpress化 *内容に応じて別途ご相談となります。

===========

■ご契約時の流れ

①まずはお気軽に「見積り・カスタマイズの相談に進む」よりお問い合わせください。
お問い合わせいただいた後に、ヒアリングをさせていただきお見積もりいたします。

②お見積もりのご提案
ヒアリング内容をもとにお見積もりの提案をさせていただき、ご納得いただけた場合に契約となります。

③制作開始

④初稿提出・修正（修正回数５回まで）
初稿提出までに不明点がある場合は、随時お打ち合わせなどを設定いたします。

⑤最終確認

⑥テスト環境にアップロード

⑥納品（ZIPファイル or サーバーへのアップロード）
*サーバー契約はお客様の方でご対応いただいております。
サーバー契約のご相談については承ります。

===========

ここまでご覧いただきありがとうございます。

ご不明点がありましたら、お気軽にご連絡くださいませ。

⚫ご提供させていただけること
・保守性が高いCSS設計に基づいたHTML/CSS/JSコーディング
・WordPressの導入、改修など
・Gitを用いたコード管理（常にバックアップが取れています）
・無料で画像圧縮
・こまめな進捗報告による「作業の見える化」

⚫作業内容について
・静的コーディング（1ページ〜）
・レスポンシブ対応（スマートフォン、タブレット）
・ハンバーガーメニュー、スライダーなどの実装
・お問い合わせフォームの実装
※WordPressは別途追加費用が発生いたします。

⚫ご予算について
記載の金額はあくまで目安でございます。制作ページ数やアニメーションによって変動することがございます。実装内容やご予算など、いつでもお気軽にご相談下さい！

⚫ご購入の流れ
①「見積もり・カスタマイズの相談に進む」を押下いただき内容を詳しくお聞かせください。
②納期目安、追加で購入が必要なオプションがある場合にご案内いたします。
③内容に問題が無ければご発注をお願いいたします。
④写真やテキストなどの素材を当方までお送りください。
⑤作業開始。まずは1p完了後にURLをご連絡します。その後は1~3日に1回程度の報告をいたします。
⑥全体コーディング完了後、ご査収いただき修正対応いたします。（無料で3回まで）
⑦ご指定のファイル形式にて納品

⚫実績
静的コーディングからのWordPress化、静的ページのテーブル修正、静的LP、WordPressテーマカスタマイズ等

⚫特徴
・反応が早い
・作業の言語化が得意
・柔軟な対応が可能

どうぞお気軽にご連絡くださいませ！いつでもお待ちしております。

LP（ランディングページ）コーディング ※レスポンシブ対応込

▶
デザインを尊重し、デザイン通りにコーディングいたします。
▶CSS設計を用いて、制作した先の修正や保守・運用まで見据えてコーディングいたします。

記載の金額は目安としてご参照ください。
納品スピードも加味した上で設定しており、ページの長さやご要件に応じて金額は変動いたします。
ご予算に応じて調整可能ですので、お気軽にご相談下さい。

▼こんな方におすすめ
──────────────────
【制作会社様・デザイナー様】
・デザインはある
・デザイン通りに、品質良くコーディングをして欲しい
・リソースが足りない
・急ぎだけど、対応しきれない
・レスポンシブはよしなにやってほしい

▼わたしについて
──────────────────
・10社の制作会社とパートナーとしてお仕事をしています
・メインはLPやECのコーディング、WordPress構築など
・34歳、3歳、0歳の二児の父
・仕事、家事、育児に全力の日々を送っています。
・ご提供できるスキル
HTML / CSS(BEM,FLOCSS) / Sass / jQuery / Gulp / WordPress / EJS / Github
・制作実績
https://www.lancers.jp/profile/kota4code/portfolio

▼コーディングで大切にしていること
──────────────────
”デザインの再現”を前提として、ただ制作するのではなく、
・制作した先の運用、修正や管理のしやすさ
・ユーザー視点（スマホのときにボタンを押しやすいように押せる範囲を広く取っておくなど）
を心がけ、コーディングの先に人がいるということを大切にしております。

▼目指すもの
───────
《 ユーザーやお仕事に関わる方々、自分自身が笑顔になれる仕事 》を目指しています。
なぜなら、人に貢献でき、喜んでもらえたときが最も嬉しく、日々の充実を感じるからです。
実務でお相手の方からいただけた
「丁寧なコーディングやご報告で助かりました！」
「お人柄の伺えるやりとりでとても安心できました」
などのお言葉は、私の原動力となっています。
少しでも人に貢献し喜んでいただけるように、日々、自己研鑽に励んでおります。

▼対応可能デザインデータ
───────
・Figma, XD
・Photoshop, Illustratorも対応可能ですが工数が変わるため、別途必ずご相談ください。

▼無料サービス対応
───────
・ヘッダー
・ハンバーガーメニュー
・ドロワーメニュー
・フッター

▼オプション対応
───────
・アニメーション
・スライダー
・アコーディオン
・問い合わせフォーム　（※セキュリティ重視のもの）
…その他、お気軽にご相談くださませ。

オプション内容は、下記オプション欄をご参照ください。

▼納品前チェック内容
───────
・各画面幅の表示崩れ
・ブラウザ確認（Chrome / Safari / FireFox / Microsoft Edge 各最新版）
・リンク先
・HTMLエラー
・CSSエラー
・フォントの表示
・閉じタグ
・画像サイズ
・アニメーション挙動
・ホバーアニメーション
・メタタグ、OGP
・ファビコン

▼納品形式
───────
・ファイル送付
・FTPによりサーバーにアップロード

▼納期
───────
・各プラン提示の納期は「デザインデータをいただいてから」の納期です。
・5営業日
・お急ぎ、土日対応も可能です。別途ご相談ください。

▼ご注文の流れ
───────
■ご依頼内容のご相談
「見積もり・カスタマイズの相談に進む」より、ご依頼内容を詳しくお伺いさせてください。
↓
■お見積、ご注文
納品日の目安、追加購入が必要なオプションがある際はご案内いたします。
お見積に問題がなければ、ご注文をお願いいたします。
デザインデータ、写真やテキストなど、使用する素材をお送りください。
↓
■制作開始
最終的な納品日をお伝えし、制作開始。
↓
■ご確認・修正
3回までは無料で修正対応いたします。
チェック完了後、データ納品となります。
↓
■納品

【業務内容】
HTML、CSS、Javascriptを用いてコーディングを代行させていただきます。
あくまで表示の料金は例なので内容によって料金は変動します。
ですので、細かな料金や納期は一度ご相談できればと考えています。

-アニメーション実装
1工程当たり3000円になります。

【納品までの流れ】
①ヒアリング
詳しくヒアリングをし、クライアント様との認識のずれをなくします。

②お見積もり
デザインとご要望を確認の上お見積りさせていただきます。

③デザインデータの提出
お見積りに納得していただけましたらデータをご提出ください.。
データはxdでお願いします。

④途中経過の確認
1週間に1度、経過具合をご報告させていただきます。
要望がありましたらヒアリングの時におっしゃってください。

⑤最終確認
完成しましたらこちらから連絡させていただきます。
その時に最終確認をお願いいたします。

⑥納品
納品はzipファイルかFTPツールを使用してサーバーにアップロードかになります。

【こんな方向け】
できるだけ料金を安くしたい
でも一定の品質は欲しい方

【自己PR】
時間管理には自信があり納期は必ず守ります。

⚫ご提供させていただけること
・保守性が高いCSS設計に基づいたHTML/CSS/JSコーディング
・WordPressの導入、改修など
・Gitを用いたコード管理（常にバックアップが取れています）
・無料で画像圧縮
・こまめな進捗報告による「作業の見える化」

⚫作業内容について
・静的コーディング（1ページ〜）
・レスポンシブ対応（スマートフォン、タブレット）
・ハンバーガーメニュー、スライダーなどの実装
・お問い合わせフォームの実装
※WordPressは別途追加費用が発生いたします。

⚫ご予算について
記載の金額はあくまで目安でございます。制作ページ数やアニメーションによって変動することがございます。実装内容やご予算など、いつでもお気軽にご相談下さい！

⚫ご購入の流れ
①「見積もり・カスタマイズの相談に進む」を押下いただき内容を詳しくお聞かせください。
②納期目安、追加で購入が必要なオプションがある場合にご案内いたします。
③内容に問題が無ければご発注をお願いいたします。
④写真やテキストなどの素材を当方までお送りください。
⑤作業開始。まずは1p完了後にURLをご連絡します。その後は1~3日に1回程度の報告をいたします。
⑥全体コーディング完了後、ご査収いただき修正対応いたします。（無料で3回まで）
⑦ご指定のファイル形式にて納品

⚫実績
静的コーディングからのWordPress化、静的ページのテーブル修正、静的LP、WordPressテーマカスタマイズ等

⚫特徴
・反応が早い
・作業の言語化が得意
・柔軟な対応が可能

どうぞお気軽にご連絡くださいませ！いつでもお待ちしております。