tedateコンテンツへスキップ夜の帳がおりています。良い時間をすごせますように。「実務で使ってるよ!」というケースを眼にする機会が増えてきました。そこで今回は、生成AIがどんなセクションで、どんな使われ方をしているか?という部分について、実際のWebデザインの現場から見える風景をすこし書いていきたいと思います。現場にいるのはWebデザイナーやエンジニア、コーダーの方々ばかりではありません。ライターの方や、グロースハックを担う方、ディレクションや折衝業務をメインとするセクションの方など、様々な職種の方がいます。そんな多様な職種にとって、あらゆるセクションで活用されている生成AIと言えば、これは言わずもがな、生成AIと言えばもはや、その代名詞にもなりつつある「ChatGPT」です。Webデザイナー、コーダーになります。※なお、実務での利用において、(特にChatGPTについてですが)「学習のオプトアウト」は大前提になります。機密情報をうっかり生成AIに学習させてしまわない様に、この点はそれぞれの制作現場で気をつけるべき、とても重要な点になりますので、存分に留意が必要です。それでは次のセクションでは、実際にそれぞれの職種で、具体的にはどんなケースで使われているか?という部分を見ていきたいと思います。ケースは、記事メディアを運営している様な制作現場で、主にライターの方・編集者の方が使用しているケースです。使用されている工程としては、記事をライティングする際の草案、全体構成のドラフト(タタキ)として。細かなニュアンスや言い回し、「てにをは」は本職のライターの方が手直しを加えて仕上げるわけですが、記事作成の分野においても、かなり業務の効率化が進んでいる様です。ケースは、Webサイトにおける各種数値・指標の分析を、これまで人の手によって行われていた部分について、生成AIを通じて効率化しているケースです。通り、とうとう「GoogleDriveとの直接連携」も可能になったことで、今後ますますこの分野で活用が進んでいく事が、実際に現場で見ていて感じられます。ケースでは、A.と同様に「資料のドラフト、全体構成の草案」を作る際に活用されているケースを見かけます。プレゼン時の構成の壁打ち、話す内容の壁打ち相手として活用している方も見かけます。「結果的に、コアな部分のブラッシュアップにかけられる時間がこれまでより増えている」ように見受けられます。Webデザイナー、コーダー(プロンプト例あり)そして、我々のセクションのお話。我々Webデザイナー、コーダーは、主に「htmlコーディングのドラフト」を作る時に使用するケースを見かけます。次の様なプロンプトを与えると一瞬で、ある程度の基本的な構造を満たすhtml、サンプルのcssが取得できます。【前提】私はWebサイト制作者で、コーディングも行います。この時、汎用性のあるhtmlテンプレートが欲しいので、コードを書いてください。htmlタグやbodyタグは省略して、そのまま実務に応用できる様なものがほしいです。【具体的なアウトプット内容】形式はタイトルと本文に分けた章立ての形式でお願いします。各セクションはdivタグで囲ってください。各セクション内の先頭には、h2タグでタイトルを入れてください。文章にあたる部分はpタグを。強調部分はstrongタグで囲い、「サンプルテキスト」の様な文言でサンプルを作っておいてください。上記の様な構成で、全3セクションのサンプルを作ってください。2つ目のセクションは3つのカードが横並びになるレイアウトです。その部分のcssもサンプルをお願いします。スマートフォンでは個々のカードが横幅100%に変化するメディアクエリーも付けてください。全体はclass=“section-container”を付与したdiv、その外側はsectionタグで囲ってください。↑これをChatGPTにお願いすると、メディアクエリまで的確にやってくれるので、驚くばかりです。細かな部分はそれぞれの担当者がチェックして、おかしな点はないかよく見た上で使用するのが前提ですが、コーディングの骨組みが一瞬で得られるというのは革新的な体験です。このプロンプトにさらに追加して、メディアクエリの骨組みまでやってもらえるこちらですが、その案件のデザインFIX後、サイトの横幅の数値が確定した段階で、それがPCのモニターの時に1200pxのデザインだったとします。・このWebサイトの横幅は、一般的なPCのモニターの時、1200pxで、タブレット端末やスマートフォン端末では100%に変化します。・ブレークポイントは500px、768px、1024px、1280px、1366pxの5つです。それぞれのモニターサイズで違和感がない様に、css内でメディアクエリーを付与してサンプルを作ってください。フォントサイズなどもサイズに応じて変化させるということです。↑これをさっきのプロンプトの末尾に加えれば、本当に、5段階に変化するレスポンシブの骨組みが一瞬で得られます。「従来よりも、その先の工程にかけられる時間を生み出して、従来よりもトータルのクオリティを向上させる」という観点で、有効なアプローチかと思います。こちらは主に、AIによる画像生成や画像補完に特化した生成AIになります。3(プレビュー)」は、その精度も高くこれまでと比較にならないレベルで、実用性が高いです。他の各種生成AIと大きく異なるのは「学習対象がすべて権利関係をクリアしており、商用利用での生成に重きを置いて開発されている」という点です。我々Web制作に携わる者にとってとても重要な点だと思っています。※なお、現時点で商用利用できるのは「Webアプリ版のFirefly」のみです。この点にじゅうぶん留意が必要です。ついて書いていきたいと思います。「そもそも実務での生成AIの使用を禁止している制作現場」も多々、存在していることと思います。「諸々の権利関係を詳細にチェックした上で、クリアした上で」という前提条件のもと、本記事で挙げた2つの生成AIを業務に役立てることはきっと、新しい制作体験を感じられる機会につながっていくことになるかと思います。実務での利用において、(特にChatGPTについてですが)「学習のオプトアウト」は大前提になります。機密情報をうっかり学習させてしまわない様に、この点はそれぞれの制作現場で気をつけるべき、とても重要な点になりますので、存分に留意が必要です。本当に「〇〇という仕事は無くなるのでは?」などと大げさに思っていたこともありました。現状、最終的なチェック・取捨選択はまだまだ現場の人間の力を必要とします。「結果的に、コアな部分のブラッシュアップにかけられる時間がこれまでより増やせる」といったメリットを享受できることは事実ですので、様々な点に留意しつつ、活用できる場所では適宜、役立ててみてはいかがでしょうか。この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。※この記事は内容の品質向上を目的に、随時更新を行う場合があります。様なレイアウトが作れるジェネレーターを制作しました!素のJavascript(VanillaJS)で、要素に付与されているclassを一括削除する方法[JavaScript]新しい画像形式を使ってWebサイトを高速化する方法。srcsetによる分岐方法も。印象的な文字表現が簡単にできる。使って縦書き文字を使う方法[css]dialogタグを使ったモーダルが表示される時に「ふわっ」とフェードインさせる方法clamp関数を使って、柔軟なフォントサイズ指定を行う方法[css]1つのモーダルの中身を、クリック元の要素によって変える方法[JavaScript]ドロワーメニュー(ハンバーガーメニュー)をCSSだけで作る方法[css]私の修行時代のお話。