生成AIと、実際のWebデザインの現場から見える風景のお話
ChatGPTをはじめとした生成AIの登場から久しく時がたち、実際のWebデザインの制作現場でも、
「実務で使ってるよ!」というケースを眼にする機会が増えてきました。
そこで今回は、生成AIがどんなセクションで、どんな使われ方をしているか?
という部分について、実際のWebデザインの現場から見える風景をすこし書いていきたいと思います。
圧倒的人気なのはやはりこの生成AI
Webデザイン、Web制作の現場と一括りで言っても、
現場にいるのはWebデザイナーやエンジニア、コーダーの方々ばかりではありません。
ライターの方や、グロースハックを担う方、ディレクションや折衝業務をメインとするセクションの方など、様々な職種の方がいます。
そんな多様な職種にとって、あらゆるセクションで活用されている生成AIと言えば、
これは言わずもがな、生成AIと言えばもはや、その代名詞にもなりつつある「ChatGPT」です。
Webデザインの現場において、よく使っている風景を見るのは
A. コンテンツライティングをしているセクションの方達(記事メディアを運営している様な制作現場)
B. グロースハックを担うセクションの方達
C. ディレクションや折衝業務をメインとする方達
D. Webデザイナー、コーダー
になります。
※なお、実務での利用において、(特にChatGPTについてですが)
「学習のオプトアウト」は大前提になります。機密情報をうっかり生成AIに学習させてしまわない様に、この点はそれぞれの制作現場で気をつけるべき、とても重要な点になりますので、存分に留意が必要です。
それでは次のセクションでは、実際にそれぞれの職種で、具体的にはどんなケースで使われているか?という部分を見ていきたいと思います。
A. コンテンツライティング
A. のケースは、記事メディアを運営している様な制作現場で、主にライターの方・編集者の方が使用しているケースです。
使用されている工程としては、記事をライティングする際の草案、全体構成のドラフト(タタキ)として。もちろん細かなニュアンスや言い回し、「てにをは」は本職のライターの方が手直しを加えて仕上げるわけですが、記事作成の分野においても、かなり業務の効率化が進んでいる様です。
B. グロースハック、施策立案
B. のケースは、Webサイトにおける各種数値・指標の分析を、これまで人の手によって行われていた部分について、生成AIを通じて効率化しているケースです。
このセクションの方達が、日々集計している各種数値・指標についてアウトプットする際に、メインで使用しているツールは「マクロやGASでチューニングが存分に施された、それ専用のGoogleスプレッドシート」だったりするのですが、このOpenAIからの公式発表 の通り、とうとう「GoogleDriveとの直接連携」も可能になったことで、今後ますますこの分野で活用が進んでいく事が、実際に現場で見ていて感じられます。
C. ディレクションや折衝業務、プレゼンテーション
C. のケースでは、A.と同様に「資料のドラフト、全体構成の草案」を作る際に活用されているケースを見かけます。また、プレゼン時の構成の壁打ち、話す内容の壁打ち相手として活用している方も見かけます。
これら、A.B.C.すべてのケースに共通して言えるのは
「これまでの定型業務の部分をAIで効率化する」
「代わりに、その業務の本質となる部分に充てる思考の時間を増やしている」
「結果的に、コアな部分のブラッシュアップにかけられる時間がこれまでより増えている」
ように見受けられます。
D. Webデザイナー、コーダー(プロンプト例あり)
そして、我々のセクションのお話。
D. のケースです。我々Webデザイナー、コーダーは、主に「htmlコーディングのドラフト」を作る時に使用するケースを見かけます。たとえば、次の様なプロンプトを与えると一瞬で、ある程度の基本的な構造を満たすhtml、サンプルのcssが取得できます。
【前提】私はWebサイト制作者で、コーディングも行います。この時、汎用性のあるhtmlテンプレートが欲しいので、コードを書いてください。htmlタグやbodyタグは省略して、そのまま実務に応用できる様なものがほしいです。
【具体的なアウトプット内容】形式はタイトルと本文に分けた章立ての形式でお願いします。各セクションはdivタグで囲ってください。そのdivには class=“section-inner” を付けてください。
各セクション内の先頭には、h2タグでタイトルを入れてください。文章にあたる部分はp
タグを。注釈にあたる部分は span class=“section-notice” で囲ってください。
また、強調部分は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段階に変化するレスポンシブの骨組みが一瞬で得られます。
こちらも先ほどご紹介した他の職種で見かける例A.〜C.のケースと同様、
「骨組み部分の生成にかけていた工程を簡略化する」
「従来よりも、その先の工程にかけられる時間を生み出して、従来よりもトータルのクオリティを向上させる」
という観点で、有効なアプローチかと思います。
我々Web制作者には「Adobe Firefly」も強力な味方
これは次回の記事で書きたいと思っているのですが、
我々Web制作者にとって、実務で使えるもう一つの強力な生成AIとして登場したのが
Adobe Firefly です。
こちらは主に、AIによる画像生成や画像補完に特化した生成AIになります。
特に、今年になって発表された新しい生成モデルである「Firefly Image 3(プレビュー)」は、その精度も高く
これまでと比較にならないレベルで、実用性が高いです。
また、他の各種生成AIと大きく異なるのは「学習対象がすべて権利関係をクリアしており、商用利用での生成に重きを置いて開発されている」という点です。
そのため、実際のWebデザイン・Web制作の現場での利用が、本当に現実として気兼ねなく行えることが、
我々Web制作に携わる者にとってとても重要な点だと思っています。
※なお、現時点で商用利用できるのは「Webアプリ版のFirefly」のみです。この点にじゅうぶん留意が必要です。
次回の記事ではぜひ、こちらの Adobe Firefly(Webアプリ版) について書いていきたいと思います。
この記事のまとめ。もちろんすべての案件で使用できるわけではないが、使える案件では使った方がよりコアな部分に注力できる
これはタイトルの通りで、
「そもそも実務での生成AIの使用を禁止している制作現場」
も多々、存在していることと思います。
ただし「諸々の権利関係を詳細にチェックした上で、クリアした上で」
という前提条件のもと、本記事で挙げた2つの生成AIを業務に役立てることはきっと、新しい制作体験を感じられる機会につながっていくことになるかと思います。
また、実務での利用において、(特にChatGPTについてですが)
「学習のオプトアウト」は大前提になります。機密情報をうっかり学習させてしまわない様に、この点はそれぞれの制作現場で気をつけるべき、とても重要な点になりますので、存分に留意が必要です。
ChatGPTに代表される生成AIが燦然と登場した数年前、
本当に「〇〇という仕事は無くなるのでは?」などと大げさに思っていたこともありました。
ですが現状、最終的なチェック・取捨選択はまだまだ現場の人間の力を必要とします。
そして、
「これまでの定型業務の部分をAIで効率化できる」
「代わりに、その業務の本質となる部分に充てる思考の時間を増やせる」
「結果的に、コアな部分のブラッシュアップにかけられる時間がこれまでより増やせる」
といったメリットを享受できることは事実ですので、様々な点に留意しつつ、活用できる場所では
適宜、役立ててみてはいかがでしょうか。
この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。
※この記事は内容の品質向上を目的に、随時更新を行う場合があります。