Web制作 おくだ屋

WEB制作 おくだ屋

//この中に次から作るsvgデータを入れていく
AVAILABLE FOR NEW PROJECTS

コーディングからWordPress構築、
サイトアップロードまで完遂します。

AIコーディングが世を席巻する現在ですが、細かなデザインの反映ができない、一部の修正をしようとして全体が崩れる、AIのトラブルにより思わぬ手戻り…。そんな経験はございませんか?
そんな中、AIにはできない汲み取り力、頂いたデザインをトレースしてサイトへ表現、SEOに対するご提案、WordPressの構築から設定、サイトのアップロードまで、デザイン以降の作業をお任せください!

ディレクター様の手取り、ストレスが少なくなるようご対応させていただきます。しっかりとコードを理解し、説明できる状態でのお渡しを前提に、コーディングの対応をさせていただきます。

00. 実績

arrow_back_ios
arrow_forward_ios

01. コーディングスキル

code

HTML/CSS

BEM/FLOCSSを用いたCSS設計。納品後の運用や、貴社内のエンジニア様が触ることを前提としたコーディングを行います。

BEM FLOCSS Bootstrap
javascript

JavaScript

jQuery, GSAP, Swiper等を用いたアニメーション実装。リッチな演出から軽量なライブラリ選定まで幅広く対応可能です。

jQuery GSAP Swiper
brush

対応デザインツール

デザインデータ・既存サイトのトレース、PDFデータからのコーディングなど、素材の形式を問わず対応させていただきます。

Photoshop Adobe XD Figma Canva
wordpress

WordPress

オリジナルテーマ構築、カスタムフィールド、カスタム投稿タイプの設定。管理者が使いやすい管理画面構成を提案します。

Theme Dev Local ACF WooCommerce

build 対応可能な実装・スキル

tune 柔軟なサイト設計

  • カスタム投稿 / カスタムタクソノミー / カスタムフィールドを用いた構築

palette テーマ制作・改修

  • オリジナルテーマのゼロからの構築
  • 既存テーマのカスタマイズ・改修

star クライアント向けの更新性向上

  • 投稿編集画面へのテンプレート仕込み(入力の手間とレイアウト崩れを防ぎます)
  • 画像の増減に自動対応するスライダー実装(カスタムフィールド連携)
  • 管理画面のカスタマイズ(クライアントの誤操作を防ぐための不要メニュー非表示など)

cloud_upload 環境構築・公開作業

  • テスト環境の構築 〜 本番公開(サーバーアップ・データベースの置換移行)まで丸ごと対応可能
menu_book

納品後の手厚いサポート

クライアント様がご自身でサイトを更新できるよう、画像付きの丁寧な操作マニュアル(Notion等)を作成し、納品物としてご提出することが可能です。
ディレクター様の「納品後のクライアントサポート負担」を大幅に軽減いたします。

open_in_new

▼ クライアント向け更新マニュアルの作成例(Notion)

こちらから実際のサンプルをご覧いただけます

※リンク先はサンプル用の情報です。

02. 稼働体制・連絡手段

schedule

メイン稼働時間

5:00 ~ 11:00 / 13:00 ~ 17:00
土日祝も柔軟に対応します。

bolt

レスポンス速度

基本3時間以内
(遅くとも12時間以内)

work

週の稼働時間

50時間〜 (フルコミット可能)
急ぎの案件もご相談ください。

chat

ツール

Slack, Chatwork, Zoom, Meet, LINE等、貴社のツールに合わせます。

Pricing

項目参考価格

項目名 参考価格 (税込) 備考・詳細
トップページコーディング 50,000円〜 レスポンシブ対応込 / 標準的なJS込
下層ページコーディング 20,000円〜 / 1P ボリュームにより変動
LPコーディング 100,000円〜 長さ・アニメーション量により変動
WordPress組み込み 50,000円〜 カスタム投稿1つ・カスタムフィールド3つまで
サーバーアップロード 30,000円〜 本番環境への移行・初期設定・Basic認証など
各種タグ・ツール設置 5,000円〜 GA4, GTM, Clarityなど設置・計測タグ
アフターフォロー(保証期間)について 納品後1ヶ月間は表示崩れなどの不具合を無償で修正対応いたします。また、当方の瑕疵によるバグは期間を問わず無償で対応させていただきます。

04. 制作フロー

お問い合わせ

まずは当サイトのコンタクトフォームよりお気軽にお問い合わせください。メールでのやり取りの後、ビデオツールにて打ち合わせを行います。

お打ち合わせ・ヒアリング

ZoomやGoogle Meetなどで、ご依頼内容の詳細、作業範囲や条件などのすり合わせを行います。

お見積り・スケジュール提示

打ち合わせ後、原則1-2営業日以内に正式なお見積書と納品までのスケジュールを提示させていただきます。

コーディング実装・WP構築

デザインを元にSEOに配慮した実装を行います。中間報告としてテストサイトに制作過程をアップし、随時共有いたします。

修正・改修

コーディング後、修正、報告を繰り返し、問題がなければ納品へと進みます。

納品・本番公開

本番公開、またはデータ引き渡しを持って納品とさせていただきます。

06. AIツールの活用とリスク管理方針について

制作の効率化・スピードアップを図るため、主にGeminiおよびClaudeなどの生成AIツールを活用しております。
制作会社様やクライアント様に安心してご依頼いただけるよう、セキュリティや著作権に関して以下の厳格な運用ルールを設けております。

lock 機密情報の保護(学習利用の防止)

Google Workspaceを契約し、入力した情報やコードがAIの学習データとして利用されない環境で運用しております。
お預かりした案件の機密情報が外部に漏洩することのないよう運用します。

verified コードの品質担保(ブラックボックス化の防止)

コーディングの効率化・時短のためにVS CodeのAI拡張機能(Claude Code等)を使用しています。
ですが、生成されたコードをそのまま右から左へ、といったことはなく、
私自身が理解し、今後の管理・保守に確実に責任を持てるコードのみを実装しております。

fact_check 情報の裏取りと著作権の徹底

AIから得た情報は複数ツールでクロスチェックを行い、
さらに自身での検索や専門書籍等を用いた「裏取り」を必ず実施します。

AIを用いた画像生成は、原則として自社(おくだ屋)サイトの制作にのみ使用しています。
もしクライアント様案件でAI画像の利用を検討する際は、
既存作品との類似性や著作権問題を調査した上で、
必ずディレクター様に事前のご了承を得てから使用いたします。

05. 大切にしていること

security 保守性を意識した設計

納品後の運用・メンテナンスを考慮した、拡張性が高く、理解しやすいコードを書くことを心がけています。

devices レスポンシブへのこだわり

スマートフォン、タブレット、デスクトップ全てのデバイスで最適な表示と操作性を確保します。

forum コミュニケーションコスト最小化

定期的な進捗報告と、わかりやすい説明で、クライアント様の負担を最小限に抑えます。

mouse ユーザビリティへの配慮

使いやすさを第一に考え、アクセシビリティとパフォーマンスを両立させた実装を行います。

//この中に次から作るsvgデータを入れていく