ChatGPTで0からホームページ作成｜広告をランダム表示する仕組みを作った話

こんにちは、YPO Industryです！

今回は、トップページにアフィリエイト広告をランダムに4つ表示する仕組みをPHPで構築したので、その内容を記事にしておきます。
ChatGPTと一緒に0からホームページを作っているこのシリーズ。
「収益化の第一歩」として、広告表示を自動化してみました！

なぜランダム表示？

毎回同じ広告だとクリック率が落ちる
ページ更新なしで広告を入れ替えたい
新旧広告を均等に表示したい

こんな理由で、PHPでランダムに4つの広告を選んで表示する方式にしました。

構成イメージ

広告はA8.netのようなアフィリエイトタグ（HTML形式）を想定。
1つの広告を1つの .html ファイルとして保存します。

/ads/
├── ad1.html
├── ad2.html
├── ad3.html
└── ...

この ads/ フォルダから、PHPがランダムに4ファイルを読み込んでトップページに表示します。

実際のコード（PHP）

トップページの該当箇所（例：<section class="ad-section">）に以下のコードを入れます。

<?php
$ads_dir = __DIR__ . '/../ads/';
$ad_files = glob($ads_dir . '*.html');
shuffle($ad_files);
$selected_ads = array_slice($ad_files, 0, 4);
foreach ($selected_ads as $ad_file) {
    echo '<div class="ad ad-block">';
    include $ad_file;
    echo '</div>';
}
?>

あとは、CSSで見栄えを整えるだけです。

.ad-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.ad img {
    max-width: 100%;
    height: auto;
}

使い方と運用

ads フォルダに .html で広告を追加
表示数は array_slice で変更可能（今回は4つ）
毎回ランダムなので平等に表示されやすい

実際に動かしてみて

更新のたびに表示が変わるので、サイトに動きとバリエーションが出ていい感じです。
広告管理も「ファイルを追加・削除するだけ」でとてもラク！

まとめ

アフィリエイト広告を自動でランダム表示できるようになった
PHPとフォルダ構成だけで実現できる
収益化の基盤として第一歩を踏み出した！

次回は、広告のクリックログ機能や、デバイスごとに表示切り替える機能も試してみたいと思っています！

YPO Industryでは、ChatGPTと共にホームページ制作を進めています！
「DIY × 技術 × 面白さ」で、皆さんの参考になれば嬉しいです。