- 最終更新
- 2026年10月29日 13時08分
デザインは完成しているけれど、Webページの実装でお困りではありませんか？
「デザインデータはあるけれど、コーディングできる人がいない」
「PCだけでなく、スマートフォンでも見やすく表示したい」
「数値を入力するとグラフが表示されるような機能も追加したい」
このようなお悩みに対して、HTML・CSS・JavaScriptを使用したWebページの実装でお手伝いできます。
本記事では、実際にご依頼いただいたWeb制作案件と、AIを活用した再制作・検証の取り組みをご紹介します。
この制作事例で対応したこと
2020年にクラウドワークス経由でご依頼いただいた案件です。クライアントから実績掲載の許可をいただいています。
| 対応内容 | お客様にとってのメリット |
|---|---|
| Adobe XDからのWebページ実装 | 完成したデザインをWebページとして形にできる |
| レスポンシブ対応 | PC・タブレット・スマートフォンで見やすく表示できる |
| デザインの微調整 | 実際の表示を確認しながらご要望を反映できる |
| グラフ表示機能 | 数値データを視覚的に確認できる |
使用技術： HTML / CSS / JavaScript（jQuery）/ Chart.js
実際に制作したWebページ
1. デザインデータをもとにWebページを実装
Adobe XDで作成されたデザインをもとに、Webページを実装しました。
PC・タブレット・スマートフォンの画面幅に応じて、レイアウトが適切に表示されるよう調整しています。
スマートフォン版では、「豚のアップが良い」というご要望をいただき、画像の見せ方を調整しました。
単にデザインをコードに変換するだけでなく、実際の表示を確認しながら、お客様のご希望に合わせて修正することを大切にしています。
PC表示
スマートフォン表示
2. 数値をグラフで確認できる機能を実装
JavaScriptのライブラリ「Chart.js」を使用し、ユーザーが入力した数値をグラフとして表示する機能を実装しました。
対応したデータは以下の3種類です。
- BS（貸借対照表）
- PL（損益計算書）
- CF（キャッシュフロー）
数値を表として確認するだけでなく、グラフによって視覚的に把握できるようにしています。
公開サイト
※公開作業は発注者様が行いました。現在の公開状況や表示内容は、納品当時と異なる可能性があります。
お客様からいただいた評価
納品後、クラウドワークスで以下の評価をいただきました。
こちらの要望にしっかりと応えていただけました。
レスポンスもテンポよく早くいただけたので、気持ちよくプロジェクトを進めることが出来ました。
またご一緒できればと思います。
この案件では、デザインの再現だけでなく、修正のご要望への対応や、円滑なコミュニケーションについても評価をいただきました。
2026年：AIを活用して制作工程を再検証
2020年に対応した案件を題材に、2026年10月10日、AIを活用したWebページ制作を改めて検証しました。
目的は、デザインが用意されている状態から、実装・テスト・修正・納品準備まで、どの程度の時間が必要なのかを把握することです。
AIにコードの作成や修正を支援してもらい、人間が要件の確認や成果物の検証を行う方法を試しました。
制作工程と実測時間
| 工程 | 所要時間 |
|---|---|
| 実装 | 約14分 |
| テスト・検証 | 約18分 |
| 修正 | 約8分 |
| 納品状態までの最終整理 | 約75分 |
| 合計 | 約115分 |
今回の検証では、要件確認・デザイン準備・素材準備・技術選定にも別途時間を使用しています。
上記は、実装開始以降の記録です。AIによるコード生成そのものは約5分でしたが、実際には動作確認・修正・納品準備にも時間が必要でした。
※過去案件を題材とした検証結果であり、実際の受託案件の納期を保証するものではありません。ページ数、機能、デザインの複雑さなどによって必要な時間は変わります。
完成したWebページ
品質確認について
制作後は、テスト項目を整理し、動作確認を実施しました。
確認の過程で見つかった問題については、AIを活用して修正しています。
AIを活用することで実装を効率化できる一方、生成されたコードが要件を満たしているか、実際に正しく動作するかを確認する工程は欠かせないと考えています。
今後も、テストやセキュリティ面の確認方法を改善し、安心してご依頼いただける制作体制を整えていきます。
このようなご依頼に対応できます
- Figma・Adobe XDなどのデザインデータをもとにしたWebページ実装
- HTML・CSSによるレイアウトや表示の調整
- スマートフォン・タブレットへのレスポンシブ対応
- JavaScriptを使用した画面上の機能追加
- Chart.jsを使用したグラフ表示
- 既存Webページの部分的な修正・改善
小規模な修正や1ページのみの実装についても、内容を確認したうえで対応可否をご案内します。
Webページの実装についてご相談ください
「デザインはあるけれど、実装する人がいない」
「既存のページをスマートフォンでも見やすくしたい」
「Webページにちょっとした機能を追加したい」
このようなご相談がありましたら、まずは現在の状況や実現したい内容をお聞かせください。
ご要望と既存のデザイン・コードを確認したうえで、対応範囲や進め方をご提案します。