はじめに – サイト制作の検討開始
合同会社ダックエンジン代表、椎原です。
全国対象サービスを展開する弊社として、コーポレートサイトの設置は基本中の基本です。登記日に公開する予定で準備を進めました。
さて、最初に悩んだのが「HP制作会社に外注するか、自分で作るか？」という問題です。ココナラでHP制作サービスを調べてみると、値段が千円から50万円、60万円以上のところまで幅広く、正直見当が付きませんでした。
自作への挑戦を決意
私はHP制作の経験があり、WordPressのブログも運営しています。HTML＋CSS＋JavaScriptの知識もあるため、「じゃあ、自分で作ってみよう」と決断しました。唯一の不安要素はデザインだけでした。
Wixでの挫折 – 3万円の授業料
Wixサービスへの期待
デザインが不安だったため、見たとおりにパーツを設定できるWixのサービスに登録しました。一年間分で3万円の契約です（ドメインは既に取得済み）。
現実と理想のギャップ
Wixである程度作成したのですが、冷静に客観的に見てみると素人丸出しのショボい感じでした。フォントや文字の大きさ、レイアウトが美しくありませんでした。
試しにAIでコードを生成させて挿入してみると、「いいね！」と思いました。しかし、全体にはコードが適用されないため、妙な見た目になってしまいます。
AIの可能性に気づく
「AIで生成した方がデザインが良いのでは？」と思い始めました。Wixは丸ごとコードで記述する方法がないため、結局退会することに。3万円をドブに捨てる結果となりました。
WordPressでの試行錯誤
新たなスタート
新たにレンタルサーバーを借りて、WordPressをインストールしました。病院のHPを作った経験があるため、WordPressには慣れていました。固定ページにコードを設定したのですが…
技術的な壁
「あれ？背景色が変わらない！何をやっても変わらない！」
どうもテーマが背景色プロパティを継承しているらしく、WordPressのテーマのコードを開いて編集する必要があるようでした。しかし、編集は非推奨とされており、WordPressを壊したり他のページに影響が出るリスクを考えて断念しました。
結果的に、WordPressで作ったブログは独立させ、固定ページのコードはファイルとして独立させることにしました。
AIを活用した本格的な制作開始
使用したAIツール
私はClaudeとGeminiを契約しています。主にClaudeでページを生成させました。
初期の試行錯誤
最初は全ページを添付して順次生成させようとしていましたが、データが多すぎて使用制限が何度もかかってしまいました。途中で気づき、まずはメインページだけを作ることに変更しました。
デザインの方向性に悩む
弊社はAWS専門の会社なので、AWSのカラー（ダークグレーとオレンジ）を使って作成しました。しかし、どうも気持ち悪い色使いになってしまいます。
「あれ？これ、見やすいコーポレートサイトとして成立していないのでは？」と思いました。
他社サイトからの学び
改めて、AWSサービスを提供している会社（クラスメソッド社様やサーバーワークス社様など）を確認すると、AWSカラーを使っていないことがわかりました。
AIにいくつかの会社のサイトページを読み込ませて使用している色を取得させ、真似することにしました。色だけなので問題ないと判断しました。
効率的な制作プロセスの確立
資料の統合
並行して、今まで作ってきたWixとWordPressのページのテキストデータや、弊社のサービスをまとめた資料をAIに読み込ませて再構成し、サービス資料ファイルとしてまとめました。
プロンプトの工夫
そのファイルとデザインデータを添付し、各ページのタイトルをプロンプトとして入力して再生成させます。
「わかりやすく」「信頼ができるように」「イケてるデザインで」といった条件を入れて何度も再生成しました。
画像の重要性に気づく
出来上がったページはカラフルでしたが、何か足りない感じがしました。「そうだ！画像がない」ことに気づきました。
ページごとに「画像が必要ですか？どんな画像が必要ですか？素材サイトでどのワードで検索したら良いですか？」とプロンプトを入れて調べました。
最初は条件に合う画像を探してきて、「この2つのうちどちらが適切ですか？」とAIに尋ねていました。しかし、示された条件をGeminiに入れて画像生成させると、ベストなものを生成してくることを発見し、以後は全てその方法を使いました。
SEO対策とAI検索対応
「SEOやAI検索に効果があるように」という条件も追加しました（Q&AはAI検索に対応させるためです）。
品質管理とチェック体制
細かな調整作業
完成したページをアップロードして確認し、以下のような調整を行いました：
- 文章の内容が予定サービスと違っている箇所の修正（AIが勝手に生成するため）
- ボタンの大きさやレイアウトの調整
- Windowsのペイントで画像を作成し、「このレイアウトでお願い」として添付して修正
- エディタでコードを直接修正したり、AIに直接命令することも
ページ展開の効率化
最初のページが完成したら、そのページを添付して以下のように命令しました：
「添付ファイルのページを基準として、サービス資料ファイルを参照し、○○のページを生成してください」
すると、新しいページが結構良い感じで生成されます。ただし、微調整は欠かせませんでした。
AI による品質評価
信頼性チェック
完成したサイトをAIに採点してもらいました。特に信頼性の点で、「取引して大丈夫な会社かどうか」を判断してもらいます。
弊社のサイトは85点でした。実績がないのが欠点ですが、サービス開始前なので仕方ないでしょう。顧問契約や企業間決済サービスを利用していることを明記することで信頼度を上げています。
他社比較表示の是非
他社との比較を弊社のサイトに入れようかと思いましたが、出来上がったものを見ると「どうも悪口を言っているように見える」印象でした。
AIに「ちょっと他社をディスっていない？」と尋ねたところ、「そうです。業界での評判が悪くなります。BtoCならいいですが、BtoBならお客さんも悪印象になるでしょう」という回答がきました。
結果的に、サイト上での表示は取りやめ、顧客から問い合わせが来たときにマイルドに書いた資料を送ることにしました。
完成したサイトの評価
友人たちにURLを送って感想を聞いたところ、「お前が作ったの？マジで？この高いクオリティは何？」という反応でした。サイトで弊社のサービスの利点がわかるようになっていることを実感しました。
フォントや文章など、AIが生成したものは綺麗に気を引くように作ってくれていました。見直してビックリしました。
プロの技術力について
ちなみに、プロは明らかにレベルが違います。
例えば、顔写真をサイトに載せると発注率が30％増すると聞いたので、プロのスタジオで撮影してきました。写真は誰でも撮れますが、「コンサルタントなので士業の方と一緒の信頼感がある感じで撮ってください」とお願いしたところ、納品された写真は実物より150％増しの仕上がりでした。
まとめ – 外注か自作かの判断基準
正直なところ、HTMLがわからなければコーポレートサイトは外注すべきかと思います。
ただし、効果的に宣伝する方法がわかっているところは高額になるため、そういったプロに頼むべきです。コードがわかるレベルとは違って、「見せ方」について技術を持っている人に依頼しましょう。
なお、私の場合は以下の技術レベルがあったため、AIと組み合わせて制作できました：
- コードの理解
- Googleアナリティクスなどの設定理解
- お問い合わせフォームの作成（簡単なもの）
- ファビコンの作成と設定
また、配色やデザイン、文章がお客さんから見て好感・信頼性を得ることが出来るかどうか何度もAIに確認し修正を掛けてます。
お客さんから渡された情報だけを元に制作すると効果的なHPになりません。また、SEOを強調する会社もありますが、検索で上位に来ても内容で発注を躊躇うHPでは意味がありません。
実績のあるHP制作会社はそういうのまでチェックしているのではないかと思います。
素人がAIだけで作れるわけではないことを、ここに強調しておきます。
調べたら弊社は小規模事業者持続化補助金＜創業型＞の対象になるので、外注してもその分支給されるようです。
小規模事業者持続化補助金（創業型） はGビズIDが必要。そして、GビズIDは法人番号が必要。法人番号は登記後2週間後に判明です。余裕を見ましょう。
今後の展望
しかし、今後HP制作業界もAI導入を進めていくでしょうね。
技術の進歩により、より多くの人が質の高いサイトを作れるようになる一方で、プロの価値は「技術的な知識」から「戦略的な見せ方」や「マーケティング効果」により重点が移っていくのかもしれません。
なお、弊社はHP制作を承っておりませんでご注意願います。
名刺もAIで作りました
名刺のデザインもやりました。営業さんと違って長年エンジニアとかやってきたもので名詞とか使う機会もないし、貰う機会も無い。なので、Claudeと相談しながら作りました。
表に何を載せるかで悩み、最初に出来たものはメモみたいな感じ。名刺のデザインサイト検索してそのデザインに反映させてと命令。「ビジネス」「プロフェッショナル」「信用感」とかやりとりして、表ができた。
Claudeから「会社のテーマカラーは何ですか？」と聞かれ、「は？」
そんなことは考えてなかったので、ロゴマークとHPを添付して調べさせる。だけど、修正してみたらビジネス感がなくなってしまったので元に戻す。
シンプルにしましょうと提案され、その方向にしたら満足。
さて、裏。資格のデジタルバッジと資格名を載せることにしてたのだが、Claudeはデジタルバッチはプロフェッショナル資格と専門資格の三つだけ載せましょうと提案。そして、その下に資格名を並べる。
なんか物足りないと思ったのでClaudeに何付け足したら良いですか？ と聞くと、専門分野と経験を一語で。さらに、キャッチワードを頭に入れましょうと。
そのまま入れたらデザイン的にうるさくなってしまったので、シンプルにして貰う。
完成。HTML＋CSSで作って貰った。これをPDFに変換。どの印刷所も対応しているしね。
で、印刷お願いしようと印刷サービス数社当たったが、「名刺 縦」に対応しているところがなかなかない。 注文時に「縦」がないです。だけど、自動認識するのでプレビュー時に縦になっているのを確認できます。正直、どのサイトもFAQに書いてないので悩みました。
用紙や加工はClaudeに推奨を聞く。昔、名刺作ったときは意味がサッパリ分からなくて勘で注文したもんだ。聞けるのは凄い進歩だと思う。
はい、以下が作った名刺です。外注したら良い感じの名刺が出来ると思うけどAIと話しながら生成させるとお客さんに刺さる名刺になります。これが自作の利点ですね。
正直、サービス前で暇だからこんなことできるんで、忙しかったら外注しましょう。
合同会社ダックエンジン-名刺翌日
印刷サービスから「入稿データに不備がある」って返ってきました。PDF化するときに送信先を「PDFで保存」にしてたら用紙サイズがないのでA4で送ってました。
AIによれば業者が切り出してくれるのでそれにしましょうと言う。でも、名刺の縦を変形印刷として受け付けた印刷サービスでは受け付けないとのこと。
PDFのサイズ出力でいいアプリが見当たりません。Adobe Acrobatは有料版で無いと対応してないです。
困って代案とかAIに尋ねたらCanvaとか使って作りましょうとか言ってきた。今までのデータは？ 最初から作り直せと？
ふと、送信先のMicrosoftのPDF出力で、Business Cardが選択できる。これ欧米版と頭から思い込んでいて選ばなかったのですが、よく見ると日本の縦サイズ。良かった。これ使おう。
プレビューさせたら、なんか最下部に余白が出る。何度AIに相談してCSSを修正させても消えない。ちょっとめげそうになる。
解決策は、
正解: 塗り足し部分を含むサイズ57mm × 93mm の背景に 実際の名刺サイズ55mm × 91mm のコンテンツを中央配置してねと命令したら解決でした。
やっぱデザインは苦手なんかなぁAIは。HPとか結構良かったけど。
PDFに出して再出稿です。
追加
また、差し戻し。却下内容のメールをPDFにしてAIに聞いたら「ここは厳しすぎるので他社にしましょう」とアドバイスされる。
選択した会社は塗り足しとかトンボとか要らないそう。で、サイズが気になるよね。PDF化するときに名刺サイズに出力されているいるから変えなくて良いことがわかる。
CMYK印刷にしたほうがいいらしいけど、CanvaもAdobe Acrobatも無料版はできない。
面倒くさいし、印刷サービス側でRRGBをCMYKに自動変換してくれるのでそのまま送る。
名刺を作り直す時の手順：
今回作成したHTMLを保存
同じフォルダに画像配置
Microsoft Edgeで開く
Ctrl + P
設定：
プリンター：Microsoft Print to PDF
用紙サイズ：Business Card 55x 91mm
拡大/縮小：実際のサイズ
余白：なし
背景のグラフィックス：ON
印刷 → PDF保存
グラフィック社に入稿はい、チェック通りました。あとは送られてくるのを待つだけ。
自力でなんとか出来たけど、Adobe製品のフォーマットで、と指定しているところもあって結構敷居高かったです。
コメント