こんにちは！
フロントエンドエンジニアのあまんちゅです。
先日、デザイナーのコウさんもAI活用について投稿していましたが、本当に現在の世の中、さまざまな場面でAIを活用する時代になりました。
そんな中、よりコーディングに適しているAIはどれだろうと思ったので、弊社フロントエンドエンジニアのメンバーにAI利用についてアンケートを取りました。その結果を推しポイントとともにご紹介します。
また、私が普段使っていないAIも入っていたので、実際に使って比較してみた内容もご紹介します。
INDEX
アンケート結果
普段コーディングする際に使っているAIは？
普段コーディングする際に使っているAIと、その中で一番使っているAIを聞きました。
| AI名 | 普段使用しているAI （複数回答可） |
普段使用している中で 一番使用しているAI |
|---|---|---|
| ChatGPT3.5 | 4 | 0 |
| ChatGPT4.0 | 5 | 2 |
| ChatGPT4.0o | 1 | 1 |
| Claude | 0 | 0 |
| GitHub Copilot | 13 | 9 |
| Gemini | 1 | 0 |
| Perplexity | 2 | 1 |
結果は・・・GitHub Copilotが断トツで１位でした！！
一番使用しているAIの推しポイントは？
さて、GitHub Copilotが断トツで人気だったわけですが、それぞれの推しポイントも合わせて聞いたので、紹介します。
GitHub Copilot
- アプリケーションを行き来することなく、エディタ内で使えるのが便利！
- コードの自動サジェスト機能が便利！しかも速い！
- プログラミングに特化しているので長文のプロンプトを書かなくてもいい！
断トツ１位だったGitHub Copilotの推しポイントとしては上記の意見がありました。
私もGitHub Copilotには日々お世話になっているので、結果としては想定通りでした。
エディターはVS Codeを利用しているので、エディタ内でチャットで質問に答えてもらったり、コードを生成してもらったりできるのが便利です。
GitHub Copilotを使い始めるまではChatGPTを使っていましたが、画面の切り替え不要で済むのでCopilotを使うようになったと言う意見も多かったです。
さらに、コメントを書いたらそれに合わせてコードを生成してくれるのも、コードを書いている途中に開いているファイルに合わせてサジェストしてくれるのもとても便利だと思います。
もうなくてはならない存在になっていると個人的には思っています！
ChatGPT4.0・ChatGPT4.0o
- 高速！
- GitHub CopilotやChatGPT3.5よりも正確な回答が返ってくることが多い。
次に多かったのは、Chat GPT4.0・Chat GPT4.0oでした。コーディングする際に…という条件の下では、 やはり画面上での切り替えが手間なので人気が少なめでしたが、処理の速さや正確さとしては人気がありました！
Perplexity
- 検索結果の引用元の記載がわかる。
- 日本語検索でも世界中の情報から引用・検索して回答される。
- 他の人に検索結果を共有できる。
Perplexityは私は普段使っていないのですが、推しポイントを見る感じでは、がっつりコーディングをするというよりは、プログラムを書くという面だったり、他のメンバーへの情報共有などをする場合にはとても便利だなと思います。あと、ChatGPT4.0と違って無料なのもいいところですね！
それから、今回使ってみて、コードを生成した時に、そのコードを生成したソースとなるページのURLを一緒に分かりやすく出してくれるところも良いと思います。
比較してみた
比較内容
コード補完、コード生成、リファクタリングなど、いろいろな利用用途がありますが、 今回は作りたい形のCSSを作ってもらうという内容で上手くいくかを比較してみました。
対象のAIは先ほどアンケートの項目になっていたAIです
- ChatGPT3.5
- ChatGPT4.0
- ChatGPT4.0o
- Claude
- GitHub Copilot
- Gemini
- Perplexity
続いて書いてもらう内容の詳細です。
先日、26卒クリエイター向けインターンシップの募集LPを作成しましたが、「画像背景のセクションを斜めに区切る」という部分に少し苦戦しました。
この部分、AIがサラッと書いてくれたらすごく時短できそうだと思います。そこで、どのAIだったらやりたいことに一番近い形のものを出してくれるか比較してみようと思います。
初期状態はこのような状態からスタートします。（リンク先で表示をご確認ください）
今回のプロンプト
もう少し練ったほうが良いのかもしれませんが、あくまで比較であること、コーディング中にさくっと書けそうなくらいの内容で比較したほうが日常に近いと思ったので、 あまり練っていませんが、下記内容で各AIに聞いてみました。（長くなりすぎるのでコード部分は省略しています。コード内容は上のリンクよりCode Penで確認できます）
ランディングページを作成しています。
HTMLとCSSを指示の下に記載しますので、それを修正する形で、変更後のコードを教えてください。また、その説明も合わせて日本語でお願いします。
【指示】
section1以降の各セクションの区切りを斜めにしてください。
右が上になるようにして、斜めになっているところの高さは80pxくらいにしたいです。
記述されている文字は隠れずにすべて見えるようにしてください。
【HTML】
<!– 元のHTMLの内容をここに –>
【CSS】
<!– 元のCSSの内容をここに –>
比較結果
私の独断と偏見込みの結果にはなりますが、以下のように感じました。
コードを書いてもらうという内容ではなく、リファクタリングなどで比較するとまた違った結果になるかもしれません。他の用途での比較はまた別の機会に…。（各AIの名前の部分のリンクから実際のAIとのやりとりを見ることができます。）
| ChatGPT3.5 | ページイメージ | × |
|---|---|---|
| ChatGPT4.0 | ページイメージ | × |
| ChatGPT4.0o | ページイメージ | ○ |
| Claude | ページイメージ | × |
| GitHub Copilot | ページイメージ | △ |
| Gemini | ページイメージ | × |
| Perplexity | ページイメージ | × |
ChatGPT4.0では、すぐに完璧な形を作ることはできませんでしたが、やりとりを重ねるうちに求めていた形に近づけることができました。GitHub Copilotも初めから理想に近い答えを出してくれたため、細かい部分を調整する会話を進めていました。しかし、途中でプログラミング以外の質問と判断されてしまい、CSSのコードも合わせて再質問する必要がありました。それは少し手間だと感じましたが、結果的には目指していた形を実現できたので、良かったです。
その他のAIでは、最初の答えの方向性で進めても上手く行かない内容もありましたし、想像していた形とはかなり違う回答もありました。特に、ChatGPT3.5では、clip-pathを使用すると説明していましたが、実際に生成されたコードには含まれていなかったので、より精度の高いツールを使用する方が効果的だと思いました。また、AIが生成するコードが必ずしも正確であるとは限らないため、人間が知識を持ち、必要な修正を加えることも重要だと感じています。
コーディング以外ではこんなことに使っています
コーディング以外での使用場面についても聞いてみました！
使っているAIは、コーディングで利用しているもの以外で増えたということはなく、ChatGPT3.5」「ChatGPT4.0」「ChatGPT4.0o」「Gemini」「Claude」「Perplexity」を使用しているとのことでした。
用途としては、
- キャッチコピーや文章生成、案出しや壁打ち、ブレスト、文章の成形などでの利用
- 検索するには言葉がふわっとしている時に文章形式で聞いてみる時に使っている
という回答がありました。 なお、検索関係で言うと、必ずしも正しい回答が返ってくるとは限らないので、その後の裏どりが必要な場合もあります。（よく言われていることですが）
ちなみに、弊社のSlackでは、一度に複数のAIに尋ねることもできます！
良い感じの例題がちょうど先日ポストされていたので、公式アカウントのポストをご紹介します。とても便利です！
まとめ
コーディングにおいて、AIツールをシーンに合わせて上手く使い分けることで、作業の効率を大いに向上させることができると思います。特定の状況での共有、リサーチ、または実際のコーディング作業において、それぞれのAIに得意分野があるため、適切なツールを選ぶことも大切です。
今回の結果からは、GitHub Copilotがコーディング作業に特に有効であると感じました。市場には他にも様々なコード補完AIがありますが、課金が必要なものも多く、選択は各企業の導入状況に依存することもあるかと思います。
AIとの共生はこれからも続くと思いますので、これからもさまざまな視点からAIツールを比較し、新たな発見を共有していきたいと考えています。
長くなりましたが、最後まで読んでいただきありがとうございました！！
Appendix（AIとの会話の紹介）
AIの画面から共有できるURLが無かったものに関しては、内容を以下に記載しています。(間のアイコンと吹き出しは、私が追加でAIに質問した内容です)
それぞれ長いので、各リンクから気になるものをご覧ください。
Claudeの回答
指示に従って、各セクションの区切りを斜めにしました。右上がりの斜めラインを作成し、高さは 80px に設定しました。また、文字を変更するように調整しています。変更後のコードと説明をします。
HTML
HTMLは変更なしです。CS
*{ margin: 0; padding: 0; } body{ font-family: Arial, sans-serif; } /* ヘッダー */ header { background: #fff; padding: 10px 0; text-align: center; display: flex; justify-content: space-around; position: fixed; width: 100%; top: 0; left:0; } header div { font-size: 30px; border: 1px solid blue; width: 400px; } /* ナビゲーション */ nav ul { display: flex; justify-content: center; list-style: none; padding: 0; } nav ul li { margin-right: 20px; border: 1px solid #333; padding: 10px; } nav ul li:last-child { margin-right: 0; } nav ul li a { color: #333; text-decoration: none; } /* メイン */ main { margin-top: 66px; color: #fff; } /* セクション */ section { background: #fff; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 20px; position: relative; /* 追加 */ overflow: hidden; /* 追加 */ } .inner{ max-width: 1120px; margin: 0 auto; text-align: center; position: relative; /* 追加 */ z-index: 1; /* 追加 */ } section h1 { font-size: 50px; } section h2 { font-size: 30px; } section p{ font-size: 20px; height: 100px; } .mv{ background-image: url("./bg_red.jpg"); } .section1 { background-image: url("./bg_black.jpg"); } .section1::after { /* 追加 */ content: ""; position: absolute; bottom: 0; right: 0; border-style: solid; border-width: 80px 0 0 100vw; border-color: transparent transparent transparent #fff; } .section2{ background-color:#333; } .section2::after { /* 追加 */ content: ""; position: absolute; bottom: 0; right: 0; border-style: solid; border-width: 80px 0 0 100vw; border-color: transparent transparent transparent #333; } .section3{ background-image: url("./bg_red.jpg"); } .section3::after { /* 追加 */ content: ""; position: absolute; bottom: 0; right: 0; border-style: solid; border-width: 80px 0 0 100vw; border-color: transparent transparent transparent #fff; } /* フッター */ footer { background: #333; color: #fff; text-align: center; padding: 10px 0; height: 200px; }説明
・sectionこれは、斜めの背景を設定するのに役立ちposition: relative;ます。overflow: hidden;
・innerこれにより、テキストが background の上に表示されますposition: relative;。z-index: 1;
・.section1、.section2、.section3の後に::after疑わしい要素が発生します。これが斜めの背景を作成するための要素です。
・::after疑わしい要素には、contentプロパティで空の文字列を設定し、position: absolute;で絶対位置を指定しています。
・bottom: 0;とright: 0;、要素の右下に表示されます。
・border-style、border-width、border-colorプロパティを使用して、三角形の形状と色を設定しています。
・border-width値を変更すると、斜めの高さを調整できます。80px に設定されています。
・border-colorの最後の値で、斜めの背景色を指定しています。.section1と.section3は白色、.section2は灰色になっています。
を使用して、各セクションの右側にあるチェックボックスをオンにし、テキストも隠れないようにします。
GitHub Copilotの回答
指示に従って、各セクションの区切りを斜めにし、右が上になるようにCSSを修正します。また、斜めになっている部分の高さを80pxに設定します。これを実現するためには、clip-pathプロパティを使用します。clip-pathは要素の特定の部分だけを表示するために使用されます。
以下に修正後のCSSを示します。
/* セクション */ section { background: #fff; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 20px; clip-path: polygon(0 0, 100% 80px, 100% 100%, 0 calc(100% - 80px)); /* 追加 */ }このCSSコードでは、clip-pathプロパティを使用して、各セクションの上部と下部を斜めに切り取っています。polygon関数は、各頂点の位置を指定して多角形を作成します。ここでは、左上(0 0)、右上(100% 80px)、右下(100% 100%)、左下(0 calc(100% – 80px))の順に頂点を指定しています。これにより、右が上になる斜めの切り取りが実現されます。
なお、この修正により、各セクションの上部と下部が斜めに切り取られるため、セクション内のコンテンツが見切れないようにするためには、適切なパディングを設定するなどの調整が必要になる場合があります。斜めの向きが逆なので直して欲しいです。
すみません、斜めの向きが逆だったとのことで、修正します。左が上になるようにするためには、clip-pathプロパティの値を変更します。
以下に修正後のCSSを示します。/* セクション */ section { background: #fff; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 20px; clip-path: polygon(0 80px, 100% 0, 100% calc(100% - 80px), 0 100%); /* 修正 */ }このCSSコードでは、clip-pathプロパティを使用して、各セクションの上部と下部を斜めに切り取っています。polygon関数は、各頂点の位置を指定して多角形を作成します。ここでは、左上(0 80px)、右上(100% 0)、右下(100% calc(100% – 80px))、左下(0 100%)の順に頂点を指定しています。これにより、左が上になる斜めの切り取りが実現されます。
・一番上のセクションの上は斜めじゃなくて大丈夫です。
・現状のCSSだと、セクション同士の間に、背景が途切れて白くなってるところがあるので、ちゃんと背景が繋がっている状態にしたいです。指示に従って、一番上のセクションの上部は斜めにせず、またセクション同士の背景が途切れないように修正します。
具体的には、一番上のセクション（.mv）にはclip-pathを適用せず、他のセクションには上部を斜めにし、下部を直線にすることで、セクション同士の背景が繋がるようにします。
以下に修正後のCSSを示します。/* セクション */ section { background: #fff; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 20px; } /* 一番上のセクション */ .mv { background-image: url("./bg_red.jpg"); } /* その他のセクション */ .section1, .section2, .section3 { clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); /* 上部を斜めに */ } .section1 { background-image: url("./bg_black.jpg"); } .section2{ background-color:#333; } .section3{ background-image: url("./bg_red.jpg"); }このCSSコードでは、.mvクラス（一番上のセクション）にはclip-pathを適用せず、.section1、.section2、.section3クラス（その他のセクション）にはclip-pathを適用しています。これにより、一番上のセクションの上部は斜めにならず、その他のセクションの上部は斜めになります。また、各セクションの下部は直線になるため、セクション同士の背景が繋がるようになります。
三角に背景の白い部分が見えているところがあるので、marginなどをうまく調整して背景が続いているように調整してください。
背景が途切れて見えてしまう問題は、セクション間のマージンやパディングによるものかもしれません。この問題を解決するためには、セクション間のマージンを0に設定し、パディングを適切に調整することで、背景が続いて見えるようにすることができます。
以下に修正後のCSSを示します。
/* セクション */ section { background: #fff; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 20px; margin: 0; /* 追加 */ } /* 一番上のセクション */ .mv { background-image: url("./bg_red.jpg"); padding-top: 100px; /* 調整 */ } /* その他のセクション */ .section1, .section2, .section3 { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px)); /* 下部を斜めに */ padding-top: 100px; /* 調整 */ padding-bottom: 60px; /* 調整 */ } .section1 { background-image: url("./bg_black.jpg"); clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); /* 上部を斜めに */ } .section2{ background-color:#333; clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); /* 上部を斜めに */ } .section3{ background-image: url("./bg_red.jpg"); clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); /* 上部を斜めに */ }marginはマイナス値で調整する必要がありそうです
申し訳ございません。プログラミングに関連する質問のみをサポートできます。
（・・・出た、急に会話が成立しなくなるやつ・・・）←心の声
（一番最後に提案してくれたCSSを貼り付けて）こうしても背景の白い部分が出ているので、marginはマイナスを指定するなどの調整が必要ではないですか？
はい、その通りです。マージンをマイナスに設定することで、セクション間の隙間を埋めることができます。これにより、背景が途切れることなく続いて見えるようになります。
以下に修正後のCSSを示します。/* セクション */ section { background: #fff; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; padding: 80px 20px; margin: 0; /* 追加 */ } /* 一番上のセクション */ .mv { background-image: url("./bg_red.jpg"); padding-top: 100px; /* 調整 */ } /* その他のセクション */ .section1, .section2, .section3 { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px)); /* 下部を斜めに */ padding-top: 100px; /* 調整 */ padding-bottom: 60px; /* 調整 */ margin-top: -80px; /* 追加 */ } .section1 { background-image: url("./bg_black.jpg"); clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); /* 上部を斜めに */ } .section2{ background-color:#333; clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); /* 上部を斜めに */ } .section3{ background-image: url("./bg_red.jpg"); clip-path: polygon(0 80px, 100% 0, 100% 100%, 0 100%); /* 上部を斜めに */ }このCSSコードでは、.section1、.section2、.section3クラス（その他のセクション）に対してマージンの上部を-80pxに設定しています。これにより、セクション間の隙間が埋まり、背景が途切れることなく続いて見えるようになります。マージンの値は、具体的なデザインやコンテンツにより適切な値が変わるため、ここで設定した値は一例です。具体的な値は、実際のデザインやコンテンツに合わせて調整してください。
Geminiの回答
修正後のコードと説明
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>斜めの背景にしたい！</title> <link rel="stylesheet" href="./style.css"> </head> <body> <header> <div>ロゴ</div> <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </header> <main> <section class="mv"> <div class="inner"> <h1>AIを試すためのページ</h1> <p>メインビジュアルのエリアです。</p> <p>メインビジュアルのエリアです。</p> <p>メインビジュアルのエリアです。</p> </div> </section> <section class="section1"> <div class="inner"> <h2>サービス</h2> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> <p>当社のサービスはこちらです。</p> </div> </section> <section class="section2"> <div class="inner"> <h2>会社概要</h2> <p>当社の会社概要はこちらです。</p> <p>当社の会社概要はこちらです。</p> <p>当社の会社概要はこちらです。</p> </div> </section> <section class="section3"> <div class="inner"> <h2>お問い合わせ</h2> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> <p>お問い合わせはこちらです。</p> </div> </section> </main> <footer> <p>フッター</p> </footer> </body> </html>CSS
*{ margin: 0; padding: 0; } body{ font-family: Arial, sans-serif; } /* ヘッダー */ header { background: #fff; padding: 10px 0; text-align: center; display: flex; justify-content: space-around; position: fixed; width: 100%; top: 0; left:0; } header div { font-size: 30px; border: 1px solid blue; width: 400px; } /* ナビゲーション */ nav ul { display: flex; justify-content: center; list-style: none; padding: 0; } nav ul li { margin-right: 20px; border: 1px solid #333; padding: 10px; } nav ul li:last-child {続きを生成することはできますか？
修正後のコードと説明（続き）
CSS
nav ul li:last-child { margin-right: 0; } nav ul li a { color: #333; text-decoration: none; } /* メイン */ main { margin-top: 66px; color: #fff; } /* セクション */ .section { position: relative; /* 斜め背景を追加するために追加 */ } .section::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 80px; /* 斜め背景の高さ */ z-index: -1; /* 斜め背景をコンテンツの下に配置 */ transform: skewY(45deg); /* 右上が上になるように斜めに */ background-color: #333; /* 斜め背景の色 */ opacity: 0.7; /* 斜め背景の透過度 */ } .section.mv::after { background-color: #f00; /* メインビジュアルの斜め背景の色 */ } .section.section1::after { background-color: #000; /* section1の斜め背景の色 */ } .section.section2::after { background-color: #333; /* section2の斜め背景の色 */ } .section.section3::after { background-color: #f00; /* section3の斜め背景の色 */ } .inner{ max-width: 1120px; margin: 0 auto; text-align: center; position: relative; /* 斜め背景に対してコンテンツを配置 */ } section h1 { font-size: 50px; } section h2 { font-size: 30px; } section p{ font-size: 20px; height: 100px; /* コンテンツの高さを斜め背景と同じにする */ }変更点の説明
1. セクションに position: relative を追加
各セクションに position: relative を追加することで、そのセクション内に斜め背景を配置できるようにします。
2. ::after 疑似要素を使って斜め背景を追加
各セクションに ::after 疑似要素を追加し、斜め背景を表現します。
・content: ”: 何も表示しないように設定
・position: absolute: 絶対配置にして、セクション内全体に配置
・top: 0; left: 0; width: 100%; height: 80px;: 斜め背景のサイズと位置を指定
・z-index: -1;: 斜め背景をコンテンツの下に配置
・transform: skewY(45deg);: 右上が上になるように斜めに
・background-color: #333;: 斜め背景の色 (デフォルトはグレー)
・opacity: 0.7;: 斜め背景の透過度
3. 各セクションの斜め背景色を設定
.section.mv::after, .section.section1::after, .section.section2::after, .section.section3::after をそれぞれ使って、各セクションの斜め背景色を個別に設定しています。
4. コンテンツの高さを斜め背景と同じにする
section p に height: 100px; を追加することで、コンテンツの高さを斜め背景と同じ高さに設定しています。これにより、コンテンツが斜め背景からはみ出すのを防ぎます。
5. その他
・ヘッダーとフッターの CSS は変更していません。
・各セクションのコンテンツはそのままになっています。
その他の説明
・上記の CSS はあくまで一例です。斜め背景の角度や色、透過度などは、ご自身の好みに合わせて調整してください。
・斜め背景を使用すると、コンテンツの読みやすさが損なわれる可能性があります。デザインと読みやすさのバランスを考慮して使用してください。
