形にする最終工程
CODING
「使う人」にもやさしい
構造から考えるコーディング
ホームページ制作において、設計やデザインの意図を正しく汲み取りながら、ユーザーにとって使いやすく、運用者にとっても更新しやすい形に落とし込むのがコーディングの役割です。 一見すると地味な作業に見えるかもしれませんが、実装の質はページの表示速度や使い勝手、SEOにも直結する非常に重要な工程です。
kim designでは、更新のしやすさや拡張性を意識した設計と実装を心がけており、将来的な運用や修正も見据えた“丁寧なコーディング”をご提供しています。 たとえば、「CMSで更新したい箇所はどこか」「今後増える可能性のあるコンテンツはどこか」といった部分を先回りして設計し、あなたやクライアントの手を煩わせない仕組みづくりを重視しています。
案件の目的や運用体制に応じて、HTML・CSS・JavaScriptはもちろん、WordPressなどのCMS構築まで柔軟に対応可能。 あなたのチームやプロジェクトにとって「信頼できる最後の仕上げ役」として、安心してお任せいただけます。
kim designのスキルセット
01
担当者とのラリーを
減らすためのスキルが充実
指示の意図を汲み取り、先回りした対応が得意です。
審美眼を活かしてデザイン上のミスや違和感にも即座に気づき、自身で修正を吸収できる点も強みのひとつです。
確認のやりとりや手戻りを最小限に抑え、スムーズな進行をサポートします。
02
担当案件数500件以上
小規模から大規模案件まで幅広く対応してきた実績があります。 業種や構築環境を問わず柔軟に対応できるのはもちろん、さまざまなデザインに触れてきた経験から、デザイナーさんの癖や意図を素早く読み取り、自然に馴染む形で実装することが得意です。
03
サイト改修経験を活かした目線
修正や保守の実務経験が豊富なため、ただ単に見たままを組むのではなく「運用を見据えた実装」や「改修しやすい構造」を意識したご提案・対応が可能です。
04
どのデザインファイルでも対応可能
Figma・XD・Photoshop・Illustratorなど、主要なデザインツールに対応。
制作環境を問わずスムーズに実装へ進めます。
対応範囲
新規制作
HTML/CSSの設計から、レスポンシブ対応、WordPress構築、ノーコードツールでの制作まで、目的やご希望に合わせた柔軟な対応が可能です。 デザインに忠実な再現はもちろん、保守性やSEO対策も意識したコーディングを心がけています。
レスポンシブ対応
各デバイスのレスポンシブ対応が可能です。
HTML / CSS
SEOを意識した構造化マークアップを行います。
JS / jQuery
ライブラリの使用やカスタマイズなどが可能です。
※0ベースでのプログラミングは不可です。
サーバー・ドメイン準備
ご契約頂いたサーバ・ドメイン情報から実装環境の設定をおこないます。
SSL最適化
ご契約頂いたサーバ・ドメイン情報から実装環境の設定をおこないます。
アニメーション対応
サイトに動きを入れるアニメーションを入れます。
WordPress
オリジナルテーマ、カスタム投稿タイプ設定、SWELLなど既存テーマのカスタマイズが可能です。
STUDIO
STUDIOでの構築も極力構造化マークアップでご対応可能です。
サイト修正・改修について
よくあるご依頼例
コンテンツ追加・修正
事業内容変更に伴うコンテンツやページ追加・修正、それに伴うサイト全体の修正を行います。
レスポンシブ最適化
現状のスマホ表示の崩れや未対応部分を調整し、各デバイスでの表示を最適化します。
WordPress
カスタマイズ / 保守
既存テーマの微調整やプラグインの設定変更、カスタム投稿の追加などを行います。
レイアウト崩れの調整
コンテンツを追加した際のレイアウト崩れなどを調整し、最適化します。
ご依頼について
kim designでは、これまであらゆる構築方法のWebサイトの修正・改修に携わってまいりました。
2008年頃のtableレイアウトやiframeが主流だった時代から制作経験があり、古い構造のサイトでも柔軟に対応可能です。
「うちのサイト、古いけど大丈夫かな…？」とご不安な場合も、安心してご相談ください。
ご自身で修正点を明確に
ご指示いただける場合
テキストの差し替えや画像の入れ替えなど、具体的な修正内容をあらかじめご指定いただける場合は、定期・スポット対応も柔軟に承っております。
改善したいけれど「どこをどう」
直せばいいかわからない場合
ヒアリングから現状分析・作業・納品までを一括でサポートする「ホームページリペア」サービスをご用意しています。
納品前のチェックについて
納品前の検証作業は、基本的にパートナー様がお持ちのマニュアルやルールに沿って対応いたします。 チェック項目や手順が明確に決まっている場合は、そちらに従って丁寧に確認を進めます。
もしマニュアル等がない場合でもご安心ください。 その際はkim design独自の標準チェックリストに基づき、表示・動作確認を行ったうえで納品・完了報告をさせていただきます。
kim designの標準チェック
デザインとの比較
デザインカンプとの比較でデザインとの大きな差がないかの確認を行います。
指示書（WF）との比較
リンク先の間違いがないか、文章のコピペミス、設定内容が
ないかなどの確認を行います。
リンクエラーチェック
「Screaming Frog SEO Spider」を使用し、サイト内でリンク切れのページや画像がないかのチェックを行います。
ブラウザ検証
モダンブラウザの最新バージョンでそれぞれレイアウト崩れや見た目の大きな違いがないかを確認します。
実機検証
レスポンシブ対応の対象である実機で実際の表示や挙動の確認を行います。
保有実機：iPhone X/iPhone14Pro/Android/iPad pro/Windows
※Macは保有していないので検証いたしかねます。
サイト表示スピードチェック
サイト表示高速化のご要望がある案件に関しては、
inside speedsでの結果にあわせて調整を行います。
システムチェック
WordPressなどで更新する箇所、ブログ機能の面など見出しが長い場合や画像が未登録の場合などあらゆることを想定して投稿テストを行います。
メール送受信テスト
フォームがある場合は、送受信テストを行い自動返信メールの文言チェックなども同時に行います。
OGP画像チェック
SNSなどのOGP表示も確認を行い適切な画像設定ができているかを確認します。
料金例
テキストベース LPコーディング
レスポンシブ対応
- ・XDデータ（22,000px）
- ・フォーム設定
- ・モーダル表示
- ・スライダー設定
4〜6営業日 約100,000円
トップ＋下層8ページ WordPress
（SWELLカスタマイズ）
- ・XDデータ
- ・ブログ機能あり
- ・カスタム投稿タイプ
（アーカイブ有）
- ・フォーム設定
- ・送信完了画面設定
8〜10営業日 約200,000円
QA
よくあるご質問
- デザインデータはどの形式に対応していますか？
-
Figma、XD、Photoshop、Illustratorなど、主要なデザインツールに対応しております。
なお、Illustrator（.ai）形式のデータは、画像の書き出しやガイドの整理など、他形式に比べて追加の工数が発生するため、長さ4,000pxごとに別途2,000円の追加料金を頂戴しております。
- スマホ対応（レスポンシブ）もしてもらえますか？
-
はい、基本料金内でPC・スマートフォンへのレスポンシブ対応を含めてコーディングいたします。
特別なブレイクポイントや細かい指定がある場合は、事前にご共有ください。
- 修正対応はお願いできますか？
-
もちろん可能です。
納品後の軽微な修正やこちらの不備によるものについては、無償で対応させていただきます。
ただし、作業途中や終了後にレイアウトや構成が大きく変更となる場合や、新たな仕様追加を伴う修正については、別途お見積もりをご案内させていただくことがございます。
コーディングに関する
お問い合わせはこちら
ご依頼・ご相談のお問い合わせは
メールフォームでのみ
受付しています
kim designは同業者さま専門のパートナーとして業務委託でのご依頼中心に一緒にサイト制作の納品・運用後のサポートをいたします。
ABOUT ME
kim designの中の人ってどんな人？
WEB制作歴15年以上の地元大好き滋賀県民。
デザイナー出身のディレクター兼フロントエンドエンジニアです。
