マジセミドライブ

ウェビナー関連のニュースやITサービス＆ツールの最新情報を随時配信します。

AIツール実験室

2023.07.12

【AIツール実験室】AI対抗「HTML テーブル装飾CSS 」デザインセンス選手権

【AIツール実験室】AI対抗「HTML テーブル装飾CSS 」デザインセンス選手権

はじめに

ごあいさつ

日本全国の「AI対抗選手権ファン」のみなさま、
おつかれさまです。

「機動戦士ガンダム 水星の魔女」(全24話)の履修が完了したわけですが、
「エリクトの真相」についてのシナリオトラップが浅めであったのではないかと思う反面で、
「今までガンダム作品を1つも見たことがないガンダムビギナー」にとっても入り込みやすく、
過去の作風とも異なる「新しいガンダム」としては、素晴らしい作品であると思うわけで、
「ハイライトシーンはどこだと思いますか？」と尋ねられるとするならば、
やはり「お手てでパーン」を挙げざるを得ない、
マジセミ担当者Aでございます。

今回の企画概要

今回は「AI選手のみなさん」に「テーブル装飾CSS」を作ってもらおうと思います。

どちらのAI選手が「もっともナイスなCSS」を仕上げてくれるのか、期待しましょう。

前回までのあらすじ

→【ちょちょいと自動化DX】 WordPress関数を作って記事リストを出力

こちらで作成した「自動出力されるテーブル」を装飾するCSSを作ってもらいます。

ご注意点

※本記事は、担当者Aの主観により作成されていますので、なにとぞ、そういうことでよろしくお願いします。

出場AI選手紹介

背番号 AI選手 備考 オフィシャルサイト
01 ChatGPT4 エースの風格 https://chat.openai.com/
02 Bing GPTの系譜を継ぐ者 https://www.bing.com/
03 Bard 回答は速い。たまに嘘情報が出る。 https://bard.google.com/
04 Perplexity 回答が速い。日本語は苦手？ https://www.perplexity.ai/

対象となるHTMLテーブル出力関数

装飾対象のHTMLテーブルは、
こちらのPHP関数から出力されます。

“

function staffA_get_article_chatGptPlugin() {
    // WP_Queryの引数
    $args = array(
        'cat'              => 339,
        'orderby'          => 'date',
        'order'            => 'DESC',
    );
 
    // クエリ
    $query = new WP_Query( $args );
 
    // ループ
    if ( $query->have_posts() ) {
        $output = '<table>';
        $output .= '<tr><th>登録日</th><th>記事名</th><th>ページ</th></tr>';
        while ( $query->have_posts() ) {
            $query->the_post();
            $output .= '<tr>';
            $output .= '<td>' . get_the_date('Y/m/d') . '</td>';
            $title = get_the_title();
            $title = str_replace('【ChatGPTプラグイン探訪】', '', $title);
            $output .= '<td>' . $title . '</td>';
            $output .= '<td><a href=""' . get_permalink() . '"" target=""_blank"">ページリンク</a></td>';
            $output .= '</tr>';
        }
        $output .= '</table>';
    } else {
        // 投稿が見つからなかった場合
        $output = '該当する記事が見つかりませんでした。';
    }
 
    // 元の投稿データを復元
    wp_reset_postdata();
 
    return $output;
}
add_shortcode('staffA_get_article_chatGptPlugin', 'staffA_get_article_chatGptPlugin');

”

①プロンプトを作成します

■指示
HTMLテーブルを装飾するCSSを作成してください。

■補足
・最新情報を検索して「最新CSSトレンド」を取得してください。
・さまざまなCSSテクニックを駆使して「クールなCSS」にしてください。

■デザインイメージ要望
・見やすい
・さわやか
・明るい
・ソリッド
・パステルカラフル

■説明
CSS装飾対象HTMLテーブルは、WordPressのPHP関数から出力されます。

■HTMLテーブル出力関数
※※※HTMLテーブル出力PHP関数コード※※※

■参考情報
この指示は、以下の4つのAIに対して出題しています。
・ChatGPT4
・Bing
・Bard
・Perplexity

他のAIに負けないように、素晴らしいCSSを作成してください。

②CSSを作成してもらいます

01：ChatGPT4選手の回答

実行結果

CSS

“

table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
}
 
table tr {
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
}
 
table tr:nth-child(even) {
    background-color: #f1f1f1;
}
 
table th, table td {
    padding: 12px 15px;
    text-align: left;
}
 
table th {
    background-color: #d5e9fa;
    color: #333;
    text-transform: uppercase;
    font-size: 0.85em;
}
 
table td a {
    color: #3498db;
    display: inline-block;
    margin: 0 0 1em;
    padding: 10px 15px;
    text-decoration: none;
    background: #eaf2f8;
    color: #2980b9;
    border-radius: 3px;
    transition: background 0.25s ease-in-out;
}
 
table td a:hover {
    background: #3498db;
    color: #fff;
}

”

02：Bing選手の回答

実行結果

※うまくスクショが取れないので、テキストを貼ります。

ご指示ありがとうございます。最新のCSSトレンドについて調べました。
2022年に注目したいCSSの新機能として、コンテナクエリ（@container）、条件式（@when/@else）、アクセントカラー（accent-color）、カスケードレイヤー（Cascade Layers）、スクロールタイムライン（@scroll-timeline）、ネスト（入れ子）、新たなビューポート単位（New Viewport Units）、新しいメディアクエリの書き方（Media Query Ranges）などがあります1。

以下は、ご指示のデザインイメージ要望に沿った、見やすく、さわやかで明るく、ソリッドでパステルカラフルなHTMLテーブルを装飾するCSSの例です。

このCSSは、WordPressのPHP関数から出力されるHTMLテーブルに適用することができます。他のAIに負けないように、素晴らしいCSSを作成しました。ご確認ください。

CSS

“

table {
    border-collapse: collapse;
    width: 100%;
}
 
th, td {
    text-align: left;
    padding: 8px;
}
 
tr:nth-child(even) {
    background-color: #f2f2f2;
}
 
th {
    background-color: #4CAF50;
    color: white;
}

”

03：Bard選手の回答

実行結果

CSS

“

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
}
 
th, td {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
}
 
th {
  background-color: #f0f0f0;
  font-weight: bold;
}
 
td {
  background-color: #fff;
}
 
tr:nth-of-type(odd) {
  background-color: #eee;
}
 
tr:nth-of-type(even) {
  background-color: #fff;
}
 
th, td {
  color: #333;
}
 
a {
  text-decoration: none;
  color: #333;
}
 
a:hover {
  text-decoration: underline;
  color: #000;
}

”

04：Perplexity選手の回答

実行結果

CSS

“

table {
  border-collapse: collapse;
  width: 100%;
}
 
th, td {
  text-align: left;
  padding: 8px;
}
 
th {
  background-color: #f2f2f2;
  color: #333;
}
 
tr:nth-child(even) {
  background-color: #f2f2f2;
}
 
tr:hover {
  background-color: #ddd;
}

”

③作成CSS結果披露

【ご参考】オリジナル無装飾版

01：ChatGPT4選手

アピールポイント

・テーブルの見た目を改善
・リンクにホバーエフェクトを追加
・奇数行と偶数行で背景色を交互に変更することで、テーブルの読みやすさを向上

審査コメント

スッキリシンプルですね。

しかし、要望内容に対して、地味で堅実すぎる面があるかもしれません。

もっと、アクティブに冒険してほしかったですね。

CSS装飾結果

02：Bing選手

アピールポイント

・『他のAIに負けないように、素晴らしいCSSを作成しました。』

審査コメント

タイトル行の「緑の背景色」＋「白のテキスト」が見やすいですね。

行間が詰まっているので、件数が増えても、長ったらしくならないところも、よいですね。

CSS装飾結果

03：Bard選手

アピールポイント

・『以下のCSSをHTMLテーブルに適用すると、見やすく、さわやか、明るい、ソリッド、パステルカラフルなテーブルになります。』
・『他のAIに負けないように、CSSを作成しました。』
・最新のCSSトレンドを反映
・さまざまなCSSテクニックを駆使して作成

審査コメント

だいぶ地味な感じになってしまいましたね。

記事名は「中央寄せ」よりも「左寄せ」のほうが、よい感じがします。

CSS装飾結果

04：Perplexity選手

アピールポイント

・テーブルのセルの余白を設定
・テーブルの背景色を設定
・テーブルの列のヘッダーを設定
・テーブルの偶数行の背景色を設定
・マウスオーバー時のテーブルの行の背景色を設定

審査コメント

シンプルといえば、そうなのですが、
これも、また、地味なんですね。

CSS装飾結果

④「HTMLテーブル装飾CSS」デザインセンス選手権　優勝AI発表

厳正な審査の結果、
優勝は「Bing選手」に決定いたしました。

やはり、「ヘッダ行の背景を緑色にした」という点が、ポイント高かったですね。

おめでとうございます！

⑤改善版CSS作成

もうちょい改善してもらいます。

プロンプト

■指示
CSSを改善してください。

■改善点
・テーブル行選択時のホバー効果を追加してください。

■改善追加提案
・他にこのCSSを改善する方法はありますか？

■説明
CSS装飾対象HTMLテーブルは、WordPressのPHP関数から出力されます。

■HTMLテーブル出力関数
※※※HTMLテーブル出力PHP関数コード※※※

■CSS
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #f2f2f2;
}

th {
background-color: #4CAF50;
color: white;
}

実行結果

CSS改善版

“

table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
}
 
th, td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
}
 
tr {
    max-height: 200px;
    overflow: auto;
}
 
tr:nth-child(even) {
    background-color: #f2f2f2;
}
 
tr:hover {
    background-color: #ddd;
}
 
th {
    background-color: #4CAF50;
    color: white;
}
 
td a:hover {
    color: #4CAF50;
}

”

【改善比較】改善前

【改善比較】改善後

枠線が追加されて、見やすくなりましたね。

よい感じなので、これにて、とりあえず完成としましょう。

⑥【ChatGPTプラグイン探訪】記事リストポータルページ　アップデートされました

ちょちょいと作ってもらって、
良い感じになったテーブル表示あたりをご確認ください。

→【ChatGPTプラグイン探訪】記事リストポータル

最後に

「とってもシンプルすぎるテーブル」が「それなりのテーブル」になれました。

現状のAI選手たちは「色味まわりのデザイン感覚的なもの」は、まだまだ苦手のようですね。

しかし、さらにグイグイに進化していくことで、
「プロの業者を上回るデザイン」をしてくれるようになるのは、
それほど先の未来ではないかもしれません。

次回予定

「真っ白な背景をなんとかしてみる」などをやってみようと思います。

「進んで２つ」くらいはもらえるように、やってまいりましょう。

【お知らせ】「マジセミ」のご紹介

「マジセミ」では、日々、多くのIT関連セミナーを開催しています。

多くのセミナーの中から「ご自身のスキルやビジネスを強化できるセミナー」を見つけて、ぜひ１度、参加してみてください。

マジセミのイメージロゴ

マジセミ関連プラットフォーム

プラットフォーム 説明 URL
マジセミ マジセミで実施されるさまざまなセミナーの開催情報を確認できます。
「IT関連セミナー」「製造業関連セミナー」など、ご自身のビジネスを強化できるセミナーを検索できます。		 →majisemi.com
マジセミサービス 「セミナーを開催したい方」向けの情報を確認できます。
トライアルからの利用が可能です。		 →majisemi.com　→service
マジセミドライブ 「IT関連コンテンツ」などを紹介しています。 →majisemi.com
→topics
マジセミFacebook 毎日「マジセミ関連情報」や「IT関連ニュース」などを紹介しています。
★フォローお願いします。		 →facebook.com
→OSSNews
マジセミTwitter マジセミFacebookと同様に、
毎日「マジセミ関連情報」や「IT関連ニュース」などを紹介しています。
★フォローお願いします。		 →twitter.com
→Majisemi_it

※「ご意見」「ご感想」「誤字がありましたよ」「こんな使い方もあるみたいですよ」などありましたら、
マジセミSNS(Facebook or Twitter)まで、お知らせください。

この記事のタグ一覧

フリーワード検索

カテゴリー一覧

アクセスランキング

おすすめの記事

【デジタル寺田の３分用語解説】 「 心理的安全性 」が無い職場とは？🤐

デジタル寺田の３分用語解説

2025.03.17

【デジタル寺田の３分用語解説】 「 心理的安全性 」が無い職場とは？🤐

「 心理的安全性 」が低い職場とはどのような環境なのか、具体的な特徴を解説します。「質問しづらい雰囲気」「失敗を報告できない隠蔽体質」「発言をためらう風土」など、心理的安全性の欠如がもたらす影響を詳しく紹介し、安全な職場づくりの重要性も解説します。

【デジタル寺田の３分用語解説】 「 AIエージェント 」は、人間の管理職の代わりになるか？🤖

デジタル寺田の３分用語解説

2025.03.11

【デジタル寺田の３分用語解説】 「 AIエージェント 」は、人間の管理職の代わりになるか？🤖

「 AIエージェント 」は営業マネージャーの業務をどこまで代行できるのか？「データ分析」「フィードバック」「自動日程調整」の可能性を探り、未来の管理職のあり方を考察します。AIが進化する中で、人間の役割はどう変わるのか詳しく解説します。

【デジタル寺田の３分用語解説】 「 動画SEO 」とは？▶️

デジタル寺田の３分用語解説

2025.04.21

【デジタル寺田の３分用語解説】 「 動画SEO 」とは？▶️

BtoBマーケティングで注目される「 動画SEO 」について、「視聴維持率やユーザーリアクションを高めるポイント」「YouTube動画検索で上位表示を狙うための動画SEOの基本テクニック」「高品質コンテンツ制作」「先行者優位で第一想起を獲得する戦略」を紹介します。

人気のタグから探す