こんにちは、ダンシングポノ制作のニーダです。

今回は、六本木スタジオペペの公式サイトのリニューアルに関するお話です。

スタジオペペ
https://studio-pepe.com

◆ サイトリニューアルのきっかけ

六本木スタジオペペのWebサイトは、私が管理させてもらっているサイトの一つです。
オーナーの石井さんから、

「そろそろサイトの雰囲気を変えたい」

とのリクエストがありました。

思い返せば、現在のデザインを導入したのは7年ほど前。
時間の流れは早いですね。

◆ リニューアルの方針：効率とインパクトを両立

いただいた素材（写真や動画）を活かしつつ、
「どうすれば一番効率よく、かつ分かりやすくリニューアルできるか」を考えました。

結果として、以下のような方針に決まりました：

• トップページにスライダーを設置
• その週の「レッスン」や「イベント」の内容を画像で表示
• News欄はこれまで通りテキストベースで運用（軽微な調整）
• イベントページは変更せず継続使用

◆ 運用フローとスライダー表示の仕組み

スタジオペペでは、木〜日曜にレッスンやイベントが開催されています。

そのため、毎週月曜日に投稿記事でその週の内容をまとめる運用になっています。

そこで、「投稿記事の タイトル と アイキャッチ画像 を自動でスライダーに表示させる」方法を採用しました。

◆ ChatGPTに相談してよかったこと

WordPressの投稿から情報を自動でスライダーに持ってくる処理は、自分で一から作ると大変です。

しかし、ChatGPTに相談することで、PHP・HTML・CSSを組み合わせたコードを効率よく構築できました。

本当に助かりました！

◆ スライダー部分のPHP構成（WordPress）

投稿記事のタイトルとアイキャッチ画像を表示する簡易例：

<?php
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 5,
);
$the_query = new WP_Query($args);
if ($the_query->have_posts()):
?>
<div class="slider">
  <?php while ($the_query->have_posts()): $the_query->the_post(); ?>
    <div class="slide">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('large'); ?>
        <p><?php the_title(); ?></p>
      </a>
    </div>
  <?php endwhile; ?>
</div>
<?php endif; wp_reset_postdata(); ?>

※このスライダー部分は「Slick Slider」や「Swiper」などのライブラリと組み合わせることで、動的にスライド可能になります。

◆ まとめ

WordPressの柔軟性と、ChatGPTのサポートを組み合わせることで、
効率的で視覚的にわかりやすいサイトに仕上げることができました。

今後も、六本木スタジオペペの魅力を発信していけるよう、しっかり運用していきます！

👉 六本木スタジオペペ公式サイト

       

この記事を書いた人｜ニーダ

Dancing Pono(ダンシングポノ)の運営者。1998年にサルサに出会うのをきっかけにラテンのペアダンスを日本に拡めるよう活動中。ダンススタジオ運営やイベント企画・運用のかたわら、AIやweb・アプリ開発、動画編集、ラテンDJ、バーテンダーと多岐に渡る活動中。

2021年1月末にくも膜下出血で倒れるも奇跡的に後遺症もなく復帰。現在は人生のボーナスステージとして過ごしています。リハビリとしてはじめた太極拳、ロードバイクを趣味としています。太極拳では近所のおじいちゃん、おばあちゃんと健康のための太極拳、ロードバイクでは「極力体力を使わないでどこまで行けるか」の実験で、東京(荒川河口)-新潟（柏崎）を22時間などやったりしてます。