マジセミドライブ

ウェビナー関連のニュースや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選手たちは「色味まわりのデザイン感覚的なもの」は、まだまだ苦手のようですね。

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

次回予定

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

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

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

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

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

マジセミのイメージロゴ

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

プラットフォーム 説明 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)まで、お知らせください。

この記事のタグ一覧

おすすめの記事

【ChatGPT探訪】「 無限議論 」〜最強スタンド考察〜🤔

ChatGPT探訪

2024.05.07

【ChatGPT探訪】「 無限議論 」〜最強スタンド考察〜🤔

マジセミSNSに投稿した 【担当者A】の「 無限議論 」〜最強スタンド考察〜💬 を記事化したものです。 ChatGPTに課金していないみなさんにも、 AI同士の議論をお楽しみいただけます👍 ※原稿テキストを放り込むだけで、 ジョジョ風イラストを作成してしまう生成AIがすごくないですか?

【トレンド解説】米国における「 生成AI活用 」最新動向📈

トレンド解説

2024.05.07

【トレンド解説】米国における「 生成AI活用 」最新動向📈

「米国における 生成AI活用 最新動向」について解説しています。生成AIは日本企業にも多くの可能性をもたらし、「デスクワークの効率化」や「業務の自動化推進」に貢献しています。生成AIを理解し、活用することが、グローバルな競争力を高める鍵となります。

【トレンド解説】超入門「 スマートファクトリー 」🏭

トレンド解説

2024.04.15

【トレンド解説】超入門「 スマートファクトリー 」🏭

「 スマートファクトリー 」への理解を深めるための解説として、初心者向けにわかりやすくまとめた記事です。「新しい工場の概念」「デジタルツインの活用」「IoT技術による最適化」など、現代の製造業に必要な知識を効果的に学べます。 スマートファクトリー の導入によるメリットを具体的に解説しています。