【開発体験記】バックエンドSE、フロントエンドの壁にぶつかる 〜さくらサーバで挑んだ初めてのHP制作〜

はじめに

お世話になっております！株式会社クロノス 開発6部 部長の大ちゃんです！
人生で初めてHP制作の依頼を受けて対応したときの経験を、体験記として書き残していこうと思います。

超小規模なHP制作をやってみたい方や、依頼を受けてからどのようにリリース・保守まで漕ぎ着けるのか知りたい方は、ぜひご一読くださいませ。鮮明かつリアルにお届けいただいます！

筆者のスペック（HP制作の2024年 時点） 文系出身・プログラミング未経験でクロノスに2020年に入社 実装歴：PHP・Laravelでバックエンド側の実装歴が3年半ほど。Vue3、Nuxt3の実装歴が半年ほど。素のJavaScriptやHTML、CSSは雰囲気読める程度（調べながら一人で実装できる） 有資格：JavaSilver・HTML Lv.1、Lv2・PHP技術者 準上級

見出し

• 依頼を受けるに至った経緯
• お客様ヒアリング（業務理解・要望抽出）
• 要件整理と合意形成
• サーバとドメインの取得
• HP制作 実装開始
• （余談）：自分のデザインセンスが皆無だった件
• 追加要件の整理と対応
• 納品・検収
• 工数・スケジュールまとめ
• 開発工程全体を通して所感

ぜひ気になる所だけでも読んでみてもらえると！

記事本編

依頼を受けるに至った経緯

私が大学でお世話になっていた先輩のお母様（依頼者 M）が、今回の依頼者です。
個人でフィットネスサロンを出店されることになったそうで、HP制作を依頼できる人を探していたんだそうです。

先輩にはお世話になっていたので是非とも依頼は受けたいところですが、どれぐらいの規模のHPが作りたいのか次第です。
本業が疎かにならない範囲であれば承諾しよう、と思って話を聞いていました。

事前に軽く話を聞いていくと「メインの集客はInstagram、Youtube」「外部掲載サイトにも掲載している」「リンクとしてHPのQRをチラシ等に載せたい」「予約はすべて公式LINEで完結させたい」という要望に聞こえたので、HPの役割的にはかなりシンプルに出来そうだと思いました。

不安は払拭できたので、HP制作の依頼を受けることにしました。

お客様ヒアリング（業務理解・要望抽出）

善は急げ！
思い立ったが吉日！
鉄は熱いうちに打て！

さっそく、依頼者Mと対面でヒアリングさせていただこうと思い、速攻で予定調整。
なんと、依頼の話をもらったその日の午後に渋谷ガストで集合することが叶いました。冷めないうちに、ね。

さすが大学先輩のお母様、初対面なのにめちゃくちゃグイグイくる！サロン経営者なだけあって、本当に元気いっぱいな方でした。

経歴を伺うと、かなりベテランのインストラクターということが分かりました。
やりたいことやアイデアが無限に湧いてくるが、それをHPでどれだけ表現するかについて悩んでいる様子でした。

私が用意していたヒアリング項目はザックリ以下です。

相手はベテランのインストラクターでサロン経験も豊富です。そのため、経営に関する質問はガンガンいかせていただきました。ここに関しては自営業者の視点について多くの学びがありました。
一方、ITリテラシーへの配慮は忘れてはなりません。かなり噛み砕いた表現を用いて、理想の状態をヒアリングしていきます。

余談ですが、
仕事の大小に関わらず、お客様というのは大抵は「実は具体的な要望は持っていない」というパターンが往々にしてあります。その道のプロではないので当然です。
どんなアプリにしたいかと聞くと「いい感じで！」「それっぽく！」「任せた！」という返事がかえってきます。
そのため、我々はプロ（Webエンジニア）として、お客様の要望をしっかり深掘りして、確認するヒアリング力が求められるわけです。

依頼者Mさんも、HPやWebに関しての知見はあまりお持ちでなかったので、参考サイトを見せながらイメージを擦り合わせます。

要件整理と合意形成

ヒアリング結果を整理して、成果物の認識を合わせるフェーズです。
これが超重要です。

ヒアリング整理後の内容はザックリ以下です。

事業内容	40代〜50代むけの小規模パーソナルジム、骨盤矯正やストレッチがメイン（詳細は伏せる）
理念やミッション	ご自身の闘病の経験から、健康的な体で豊かな人生を送るためのお手伝いおしたい。女性の悩みに寄り添いたい。（詳細は伏せる）
マーケティング	HP公開することで、サロンの説得力を持たせたい（お店の看板・ちゃんとやってる感）
リソース	事業運営は基本的に一人。チラシや広告を打つために知り合いのデザイナーと提携している（そのため、ロゴや背景などの素材はデザイナーに作っていただける）。簡単なロゴは依頼者M自身で作れる。
アプリ要件	健康意識が高く、おしゃれな雰囲気が伝わるHPにしたい。メニューや金額、理念やミッションについて紹介したい。依頼者M自身のインストラクター経歴について顔出しで画像を載せることで、説得力や安心感を持たせたい。初めは画面数は少なくても良い。スモールスタート。
業務フロー	予約は公式LINE上で完結させる。HPはチラシや名刺にQRを載せ、そこからHP→公式LINEの誘導に持っていきたい。
納期	1ヶ月でWeb上で見れるものが欲しい、オープンは2ヶ月後なのでそこに間に合わせたい

ヒアリング結果について認識齟齬がないことを確認できました。
次は、成果物や開発支援についての合意事項です。

カテゴリ	合意内容（スコープ）	決定の背景・狙い
1. ターゲット・デザイン	スマホ（SP）特化型サイト。レスポンシブ対応は非対象。ロゴ制作も対象外（依頼者側で用意）。	40〜50代女性の閲覧環境に最適化し、短納期を実現。ロゴ等のブランド要素は依頼者・デザイナー側で担保。
2. 予約・外部連携機能	公式LINEへの誘導（アイコン・案内文）のみ。システム予約機能は持たない。	現行のLINE運用（1対1対応）を維持。メール管理の手間を省き、既存のSNS（インスタ等）との導線を優先。
3. コンテンツ・法務責任	記事・画像等の流し込みまで。サロン規約・プライバシーポリシーは開発に含めない。	専門的なサロン規約は依頼者側で別途策定中であるため。開発者は実装（掲載）のみに専念。
4. インフラ・技術仕様	静的Webサイト形式。「さくらインターネット」ライトプランを採用。	複雑な動的機能（DB等）を排除し、ランニングコストを月額数百円レベルまで抑制。
5. 納品・事後対応	ソースコード、管理画面ID/PW、手順書の提供。原則**「作りきり（保守なし）」**。	納品物を定義し、管理権限を完全に譲渡。知り合い関係における「責任範囲の曖昧化」と「工数肥大」を防止。

⚠️注意点

※ 商用で各サービス・企業のアイコンを使用する場合、使用許諾に沿った使い方をしなければなりません。
例：LINEアイコンはパッと見でどのアカウントに遷移するかサイト上でそれが分かるようにしなければならない

サーバとドメインの取得

ドメインは「さくらインターネット」から、サーバは「さくらのレンタルサーバ」から契約しました。
またサーバはプランがいくつか選べたのですが、今回は費用を抑えられる「ライトプラン」を選択しました。

ライトプラン	年間（税込）	月換算
ドメイン代	3,982円	332円
サーバ代	1,980円	165円
合計	5,962円	497円

スタンダードプラン	年間（税込）	月換算
ドメイン	3,982円	332円
サーバ代（STD）	6,600円	550円
合計	10,582円	882円

スタンダードはより高機能で「MySQL」「WordPress」に対応してくれるそうです。
今回は「静的Webサイト」といって、HTML、CSSだけで作れるものを想定していたのもあり、ライトプランでスモールスタートすることにしました。

また、ドメインの利用申請ですが、審査が通るまでに５営業日〜１０営業日ほど掛かるようです。
今回は３日ほどでドメイン利用できるようになりましたが、申請〜利用までにタイムラグがある点は注意が必要です。

またサイト公開も非常に簡単で、静的コンテンツ（HTML、CSS、画像など）をサーバーコントロールパネル上にアップロードしてあげるだけ。
それだけで、すぐにインターネット上でHPが見れるようになります。

またライトプランであっても、無料の独自SSLが設定・利用できます。

今回のような小規模な対応であれば、ドメイン申請の３日間が唯一の最長作業経路（クリティカルパス）になり得る可能性があります。
それぐらい、HP公開は簡単に行えました。

⚠️注意点

※ 金銭周りはトラブルの元！依頼者と開発者でダブルチェック・トリプルチェックし、慎重に進めましょう。
今回私は実際に、めちゃくちゃ間違えてるドメイン名を取得してしまったので、自腹で3,982円を支払いました😭

HP制作 実装開始

いよいよ開発スタートです。
といってもHTML、CSSの骨格はAIにザックリ作ってもらい、肝心のサイト全体のスタイルやサロンのメニュー部分、画像配置部分を独自で調整していくという方法をとったため、開発自体はスムーズに進みました。

依頼者にも適宜画面キャプチャなど共有しつつ、進捗共有も兼ねてデザインや内容のフィードバックを貰いながら進めました。

その中で、依頼者の方から「フォントはあれを使って欲しい」や「実際の過去の利用者に画像の使用許可を貰っている最中なので、画像は仮置きしておいてほしい」という要望も上がってきました。
事前のすり合わせにはない工数が発生するワケですが、そこは大きくスケジュール想定からズレなければ応じることにしていました。

⚠️注意点

ただし、実際にお金をもらって仕事としてやる場合は注意が必要です。
契約不適合責任・瑕疵対応（かしたいおう）と言って、成果物に対して欠陥が見つかった際の責任を負うこと、また対処すること、が契約として発生する可能性が出てきます。

せっかく善意で対応したのに開発者側が痛い目を見るケースもあるため、判断は慎重に行うべきです。

ということで、素のHTML・CSSをガッツリ実装したのは久しぶりだったので、とても楽しかったです。
HTML系の資格を取得したのは2年目の頃でしたが、だいぶ覚えてました。資格取っててよかった〜！
よい仕事ができたし、美味い酒が飲めそうだ！乾杯〜️〜🍻

余談：自分のデザインセンスが皆無だった件

甘く見てました。
自分のWebデザインのセンスが、ここまで無いとは。。。

幸いなことに、前述の通り専属デザイナーさんが制作されたチラシがあったので、HPもそのチラシデザインを踏襲することに。
また細かいデザインについても、デザイナーさんからオンライン上でレビューをいただけることになりました。

デザイナーさんはWebデザインこそ経験は無いとおっしゃっていましたが、色味や要素の大きさ、配置など的確にご指示をいただけました。本当に命拾いしました。

具体的に、「配色」と「余白」を指摘されることが多かったです。
また逆に、画像の明暗や内容について意見を聞かれることも多かったです。

それに関しては、実際に現場でWebデザイナーと仕事した経験が活きまして、サイトのその項目で伝えたい内容と画像がマッチしているかや、メインターゲットに寄り沿った文章や文字の大きさになっているかなど冷静にコメントすることができました。危ないところでした。

⚠️注意点

※ Webエンジニアの皆さん！自分のデザインセンスを過信しないでくださ〜〜〜い！本当に痛い目を見ま〜〜〜す！
ただし、まずは自分で試行錯誤して色々やってみるのも学びになると思います。
実際の現場でもプロのWebデザイナーさん達は「競合他社のHP構成やデザインを研究する」という視点を持つということと、仲間と同じ視点で議論し合う、ということをよくやっていました。

追加要件の整理と対応

HPの開発も大詰めです。
テキスト・画像・内容は要望通り実装ができ、かなり完成度が上がってきました。
さらにここから追加要望。実際に作ってみて初めて感じる「過不足」の部分を詰めていきます。

「駅からサロンまでの地図を入れてほしい」「メニューの変更（時間帯、金額）をしてほしい」「サロンからのメッセージ欄の文章を更正して変更してほしい」などなどご要望をいただきました。

ちょうど本業の方も忙しくなってきて平日に時間が取りづらくなってきた所だったので、要望実現が難しい部分はシッカリと難しいと伝えました。
ただし、一人の開発者として「依頼者が意思決定できるような情報提供」はシッカリ行いました。

• 地図：よくある有名はやつのGoogleマップは有償なので、無償・安価にこだわりたいなら別サービスを探してみますがどうでしょう。また、軽く専属デザイナーの方に相談していただくのも良い気がします。
• メニュー変更：いただければ対応します！ちなみに、今後も変更の予定はありますか？確定版かどうか念の為お伺いさせてください！
• メッセージ更正：基本的な日本語の更正はできますが、最終的には依頼者自身の表現を大切にすべきかと思います。文章のどのあたりに違和感がありますか？また、取り入れたいニュアンスも教えてください！

などなど。
エンジニアの極意としては「出来ないとは言わない」ということ。そして「代案なき批判はしない」ということも心得ておくと良いです。社会人として身につけておくべきスタンスでもあります。

最終的には専属デザイナーさんも混ざって3名でミーティングを開き、口頭ですり合わせを行いました。
そしていよいよ。細かいところを詰めたら、HPの完成です。
三者にとって納得感のある仕上がりとなりました。

納品・検収

最初に定めた成果物「HPのソースコード」「さくらインターネット関連のログインアイパス、デプロイ手順書」「設計書・メモ」をzip形式に固めて、依頼者に送付。
ダウンロードが完了したという報告をいただいたら、納品は完了です。

実際にHPを見てもらい、認識齟齬がないことを確認していただきました。

そして数日後、サロンはプレオープンを迎え、多くの生徒さんにHPを見ていただいているそうです。
幸いなことに欠陥等の報告は上がりませんでしたが、連絡があれば速攻対応する旨は伝えていたので、数日間ヒヤヒヤしてました。

工数・スケジュールまとめ

初回ミーティングから対応完了まで2ヶ月間でした。

要件確認：13時間
開発実装：22時間
サーバ管理系：4時間
その他：1時間
合計：40時間

平日対応は週2回ほどLINE返信のみで、開発実装は土日にまとめて行うようにしていました。
平日はモチロン本業の対応が優先となるため、依頼者にもその旨ご理解いただいた上で対応いたしました。

開発工程全体を通して所感

上流から下流まで一気通貫で携わることができる貴重な体験で、非常に学ぶことが多かったです。
開発規模は極小レベルですが、1つのプロダクトを作っていく中でどんな作業が発生するのか、何に気をつけて、何を考えて、ゴールに向かって走れば良いのか。それがなんとなく掴めた気がします。

またSES現場レベルの開発規模に対しても、共通して適用できるような学びもありました。
合意を取ることの需要性、無茶振りな要望は当たり前、デザインも多少できるエンジニアの方が土壇場で頼りになるな、等々。

またドメイン取得した経験も初めてだったので、めちゃくちゃアガりました。
私は個人開発やりたい勢（完成までは至らないけど）なので、自分の好きなドメインでウェブアプリが公開できたら、さらに愛着も増すんだろうなぁなど想像してました。

また改めて思うのは、プログラミングは手段の1つでしかなくて、業務理解や要件整理→提案にこそビジネス的価値があるなぁという感覚を強く持ちました。
簡単に言うと、上流工程の魅力や重要性をこの経験を通してさらに知ることができました。

また依頼者が知人のお母様ということもあり、圧倒的責任感で当事者としてHP制作に取り組むことができたのも楽しかったです。皆んながみんな手探りな状態で、ゴールに向かって突き進む熱い感じ。たまらなかったです。

最後に

私ごとで恐縮ですが、このHP制作期間はめちゃくちゃ忙しかったです。
ちょうど現場業務も忙しく、また勝手に立ち上げた社内プロジェクトも重なり、また人生初の技術登壇イベント出演も決定していました。

その経験から、「自分の限界」を知ることができました。
何でもかんでもやりたいことスケジュールに詰め込んで、全部達成してやるぜ！という体力は、もう無いんだと思いました。

追い込みすぎても多方面のパフォーマンスが落ちるだけなので、ほどほどに。（当たり前ですけど）

実家が営んでるお店のHP作るぐらいが納期も制約も緩くて、題材としては丁度良いのかなとも思いました。
私の実家も美容室をやってるので、興味あればどなたかHP作ってください。タダで。良い経験になりますよ。

クロノスでは『挑戦とバージョンアップ』が大好きな仲間を大大大募集しております！
少しでも興味を持っていただけた方はぜひカジュアル面談でお話しましょう！