「AIを使えば、専門知識がなくてもホームページを作れるのだろうか？」何から頼み、どう進めるのか分からず…手が止まりますよね。私はWebサイトの作成には全く覚えのない非エンジニアですが、今回仕事で新会社（地域密着型のサービス会社）立ち上げに関わる機会があり、ならば！とcodexでWebサイト制作に初めて取り組んでみました。codexを使用して４ヶ月で、まさか自分がホームページを作ることになるとは…想像もしませんでした（笑）
この記事では、以下の3点をわかりやすく整理します。
- 会社サイトを作り始める前に整理したこと
- トップページから申込フォームまで作った一連の流れ
- 50代サラリーマンが制作経験を仕事の実績へ変える方法
制作期間は約1週間ですが、朝のスキマ時間だけなので、実質費やしたのは数時間です。トップページ、会社情報、支払い方法の案内、問い合わせ・申込フォームの４ページを形にしました。ただし、全てAIが勝手に完成させたわけではありません。要望を伝え、画面を直し、安全性と使いやすさを人間である「私」が判断した結果です。この記事では、50代サラリーマンがAIと役割分担し、成果物まで仕上げる方法を解説します。
広告について：本記事には広告・アフィリエイトリンクを含む場合があります。
スタートはLocalアプリとWordPressの準備
最初に確認したのは、試作の完成後に会社のサーバーへ移せること、もちろん制作中は一般公開しないこと、家庭向けと法人向けの両方にサービスを伝えることです。会社情報と問い合わせ機能も必要でした。
次に、WordPressをパソコン内で動かすための「Local」というアプリをMacへ入れました。Localを起動して新しいサイトを作ると、インターネット上のサーバーを契約しなくても、パソコンの中だけにWordPressの確認環境を用意できます。制作途中のページが外部から見えないため、文章や色を安心して試しながら修正出来ました。
サイト制作は、Localの中で動くWordPressを通して進めました。ブラウザでWordPressの管理画面を開き、既存テーマを土台にしながら、変更部分を分けて管理できる「子テーマ」を作成。AIにはページや機能を作る作業を任せ、私は画面を見て、文章、配色、並び順、公開範囲を判断しました。
非エンジニア50代サラリーマンの作ったWebサイトが形になるまでの６段階
1．参考サイトを見ながら全体の順番を決める
似た様なサービス会社で良さそうな既存サイトのリンクをcodexに読み込ませ、構成を確認しました。「サービスを知る→利用の流れを見る→会社を確認する→フリーダイヤルか問い合わせサイトで相談する」という導線を組みました。お客様の判断の流れを先に決めたことで、後の修正がしやすくなりました。
2．トップページと会社情報を分ける
スタートアップの会社なので、あまりリンクを増して構成を複雑にせずシンプルにすることを心がけました。トップページにはご家庭向け・事業所向け・その他専門サービスの3分類を置き、会社概要と問い合わせフォーム、支払い方法の確認だけは別ページへ。パソコンとスマートフォンのメニューから迷わず移動できるかも確認しました。
3．色と文章、写真は画面を見ながら直す
配色は緑、青緑、水色、パステル調と色々試しながら段階的に変更。見出しの位置や、文言や写真、サービスの表示順など細かい修正は実際の表示画面を見ながら行いました。特に文言はどうしても若干AI感が出てしまうので、より具体的に伝える事で完成度が上がります。
4．サービス説明を申込みまでつなげる
試用申し込み→実申し込み→商品のお届けという流れを追加し、電話とメールの入口も分けました。支払い方法の案内も別ページにし、会社案内をお客様が次の行動を選べる受付窓口へ修正しました。
5．問い合わせフォームの作成
フォームには利用区分、相談目的、希望商品、連絡方法をプルダウン形式で設け、同意確認、必須項目、迷惑送信対策も追加しました。個人情報を扱う以上、何を集め、誰が受け取り、公開前に何を試すかは人間が決める必要があります。
6．パソコンとスマートフォンで確認する
最後は文字、画像、ボタン、横へのはみ出しをパソコンとスマートフォンで確認。途中の状態も保存し、戻せるようにしました。現在は公開前のため、メール送信と会社サーバーへの移設には別途テストが必要です。
非エンジニアの50代サラリーマンがWebサイトを作って何が残るの？
この経験の価値は、Webエンジニアになれることではありません。これまで仕事で培ってきた顧客理解、情報整理、関係者との調整、最終判断を、AIの助けを借りて一つの成果物にできたことです。技術をすべて自分で覚えるのではなく、目的を言葉にしてAIへ指示し、出てきた案を業務の視点で修正する。この役割なら50代の経験がそのまま強みになると思いました。
実際のWebサイト制作の一連の流れには、要件整理、顧客目線の導線設計、公開情報の選別、担当者との合意形成、品質確認が含まれます。今回これらを記録しておけば「AIを使ったこと」ではなく「AIを使って業務を前へ進めたこと」の証拠になり、社内のデジタル改善、再雇用時の役割提案、副業など次のキャリアにもつなげられます。
50代サラリーマンのWebサイト作成経験をキャリアに変える
AIは文章整理や構成づくりを助ける道具です。キャリアとして評価されるのは、何を任せ、どこを自分で判断し、どんな成果につなげたか。今回の制作経験を、次の仕事でも伝わる形に変えておきます。
- 経験をスキル名に言い換える
AIに聞き手役を頼み、「誰のどんな課題を整理したか」「どの案を採用し、なぜそう判断したか」「誰と調整したか」を質問してもらいます。回答を、要件整理、顧客導線の設計、情報の取捨選択、承認調整といった仕事の言葉へ変換し、「スキル棚卸しシート」にまとめます。「サイトを作った」で終わらせず、自分が担った判断と役割を説明できる状態がゴールです。 - 判断過程を匿名ポートフォリオにする
変更前後の画面から数点を選び、課題、自分の役割、AIに任せた作業、変更理由、確認結果を1組にして整理します。会社名、連絡先、固有のサービス名は伏せ、3〜5ページ程度の「匿名ポートフォリオ」にします。見栄えのよい完成画面だけでなく、なぜ直したかを残すことで、顧客目線や品質に責任を持って進められる人だと伝わります。 - 次の仕事につながる提案へ変える
今回の流れを別の業務にも当てはめ、社内サイトの更新、手順書の整備、問い合わせ対応の改善などから一つを選びます。AIにたたき台を作らせ、課題、改善案、人が責任を持つ範囲、測定する数字、見直し時期を1枚の「社内提案書」または「キャリア実績シート」にまとめます。効果を盛らず、作業時間、修正回数、公開後の問い合わせ数など、これから測る指標を明記することが大切です。
会社サイトを作ったという価値は、完成した4ページだけではありません。現場の要望を言葉にし、案を比較し、間違いを直し、公開できる品質まで責任を持つ一連の経験にあります。AI利用が当たり前になった後も残るのは、仕事の完成条件を決められる人です。
