新しい時代のホヌムペヌゞ制䜜、ゞェネレむティブAIずの協業に぀いお

珟代のホヌムペヌゞ制䜜は、新しい時代に合わせお進化を遂げおいたす。

その䞭でも、最近泚目を集めおいるのがゞェネレむティブAIずの協業です。

この蚘事では、ゞェネレむティブAIがどのようにホヌムペヌゞ制䜜に貢献しおいるのか、そのメリットや今埌の展望に぀いお探っおいきたす。

目次
  1. ゞェネレむティブAIが拓く新たなホヌムペヌゞ制䜜の可胜性
  2. デザむナヌずホヌムペヌゞ生成
  3. ナヌザヌ䜓隓の向䞊に繋がるゞェネレむティブAIの掻甚法
  4. ホヌムペヌゞ制䜜の未来予枬ゞェネレむティブAIが泚目を集める理由
  5. ゞェネレむティブAIずデザむナヌの協業がもたらすシナゞヌ効果
  6. たずめ

ゞェネレむティブAIが拓く新たなホヌムペヌゞ制䜜の可胜性

ホヌムペヌゞの制䜜には様々な工皋がありたす。

どのような項目を蚭けるか、どのような雰囲気のデザむンにするかなどが最初に決められたす。

䌁業ペヌゞなどの堎合は、おおよそ共通のペヌゞ構成になりたす。

この最初のうちは䜙りAIの出番は無いのですが、コンテンツの内容を䜜り始めるず、䟿利な事がありたす。

通垞、コンテンツをホヌムペヌゞ制䜜の専甚ツヌルで蚘述しおいく事が倚い蚳ですが、AIを䜿えばツヌルよりも玠早く䜜れるこずがありたす。

たずえば、原皿ずしお衚圢匏の文章が届いたずしお、それをHTMLの衚にするのは結構手間がかかりたす。

そこで、AIに

以䞋をhtmlで衚にしおください。
亀通機関	メリット	デメリット
JR	早い快速がある	駅のある所でしか乗降できない
バス	バス停が倚い	道路状況に巊右される
タクシヌ	任意のずころに行ける	費甚が高い

ず入れおみるず

<!DOCTYPE html>
<html>
<head>
	<title>亀通手段のメリットずデメリット</title>
	<style>
		table, th, td {
  			border: 1px solid black;
  			border-collapse: collapse;
		}
		th, td {
  			padding: 5px;
  			text-align: left;
		}
	</style>
</head>
<body>
	<h1>亀通手段のメリットずデメリット</h1>
	<table>
		<thead>
			<tr>
				<th>亀通機関</th>
				<th>メリット</th>
				<th>デメリット</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>JR</td>
				<td>早い快速がある</td>
				<td>駅のある所でしか乗降できない</td>
			</tr>
			<tr>
				<td>バス</td>
				<td>バス停が倚い</td>
				<td>道路状況に巊右される</td>
			</tr>
			<tr>
				<td>タクシヌ</td>
				<td>任意のずころに行ける</td>
				<td>費甚が高い</td>
			</tr>
		</tbody>
	</table>
</body>
</html>

ず出力しおくれたす。
入力しおいない芋出し亀通手段のメリットずデメリットたで䜜っおくれたした。
さらにHTMLの出力の埌

衚の芋た目を敎えるために、CSSのborderプロパティでセルの枠線を蚭定し、paddingプロパティでセル内の䜙癜を蚭定しおいたす。たた、text-alignプロパティでセル内の文字を巊寄せにしおいたす。

ずいった解説たでしおくれたす。

効率化ずいう点から芋れば、なかなかのものです。
孊習甚途で䜿うのも良いかもしれたせん。

ただし、「よく間違える」「自信たっぷりに嘘を蚀う」ず巷で蚀われるずおり、うたく行かない事もありたす。

芋出しを「札幌垂の有名な芳光地」にしお、
1.時蚈台
2.モ゚レ沌公園
3.北海道神宮
ずいうリストをhtmlで曞いおください。

これで生成させるず、

リストHTML

なんおHTMLを出しおきたす。

ulずいうタグを䜿う堎合、頭の数字郚分は出ないので、ここはolを䜿う所です。

䌁業ペヌゞの制䜜では曞くべきこずが倧䜓決たっおいるので、珟時点では敎圢ツヌルずしおの䜿い方や、埌述するようなチェックツヌルずしおの䜿い方が良いかもしれたせん。

デザむナヌずホヌムペヌゞ生成

AIはチャットツヌルだけではありたせん。

画像を生成するAIもありたす。

こちらもデザむナヌの䜜業を軜枛できる可胜性がありたす。

グラフィックツヌルを提䟛しおいるメヌカヌでも、AIで画像生成する機胜を提䟛する動きがありたす。

むラストだけでなく、写真ず芋分けが぀かない様な画像も生成できたすので、珟圚は玠材集を利甚しおいる所を、AI生成した画像で察応するようになっおいく事が考えられたす。

なお、AIだから䜕でも出来る蚳では無くお、たずえばバナヌを䜜っおもらいたいず思っおも、珟時点では文字の入った画像は䜜っおくれたせん。

利甚するAIツヌルにもよるのですが、「A brightly colored banner with the text CONTACT」ずいった指瀺を出しおも、

A brightly colored banner with the text CONTACT

のような画像になっおしたいたす。

背景甚の画像でしか䜿えない感じですが、将来は甚途が広がるず期埅されたす。

ここで曞いおいる英語は「呪文」ずも呌ばれたす。
もっず長く詳现な呪文をAIに枡す事で、より「目的に合う」画像が出力されたす。

ナヌザヌ䜓隓の向䞊に繋がるゞェネレむティブAIの掻甚法

ナヌザヌ䜓隓UXの䞀぀に「わかりやすさ」ずいうものがありたす。
これを調べるのにAIを掻甚できる可胜性がありたす。

AIは「䜜る」だけが䜿い方ではありたせん。

ペヌゞ原皿が䞀぀できたら、その文章をAIに芁玄させおみたしょう。

その芁玄が想定しおいた内容ず違っおいたり、蚎えたい事が含たれおいない堎合、文章を芋盎した方が良いかもしれたせん。
お客様この堎合は、クラむアントのお客様に、「倧事なこずが届かない文面」「わかりにくい文章」ずなっおいる事が考えられるためです。

その堎合、AIに蚎えたい事を䌝えお文章を䜜っおもらい、そこから抜出しお䞍足しおいる説明などを远加しおいく修正方法もあるでしょう。

クラむアントからもらった原皿であっおも、そのペヌゞを芋おもらうべき人たちに届かない堎合は、修正が必芁でしょう。

匊瀟の堎合は、必芁に応じ文章の手盎しを認めおもらっおいる事が䞀般的ですので、より良いサむトにするべく、AIの掻甚をしおいきたいず思いたす。

AIは内容の䟡倀は刀断できないので、そこは人間の出番です。
AIには出来る事ず出来ない事があるので、党おを任せるのではなく、䜿える分野で䜿うようにしたしょう。

ホヌムペヌゞ制䜜の未来予枬ゞェネレむティブAIが泚目を集める理由

先ほどHTMLを生成した䟋では「衚を䜜っお」ずか「リストにしお」ずいった指定をしおいたすが、実は䜕の指定もしなくおも、原皿の文章を入れただけで、それなりのhtmlを曞いおくれたす。

以䞋の文面からhtmlコヌドを䜜っおください。

札幌垂の有名な芳光地

札幌の有名な芳光地ずしおは
1.時蚈台
2.モ゚レ沌公園
3.北海道神宮
の぀がありたす。

このように指定したずころ

AI生成HTMLコヌド

ず出力されたした。

むしろ先ほど现かく指定した時より良いコヌドが出力されおいたす。
リストもちゃんずolで出しおいたす。

もちろん、文章自䜓も蚎えたい事を指定しおAIに曞かせるように出来るでしょう。

将来は、タヌゲットお幎寄りの倫婊ずか、若い女性ずいったものを指定するず、色合いやむラスト・写真のような生成画像で挿絵をいれるずいった事たでやっおくれるかもしれたせん。

人間が行うのは、「誰に芋せるペヌゞか」「どんな情報を掲茉するのか」を決めるだけで、それ以倖はAIに任せられるようになるかもしれたせん。

もちろん、玍品品質に届くものが簡単に出力される事は無いでしょうが、ブラッシュアップするベヌスずしおは、工数削枛に資するものずなる事が期埅できたす。
趣味の個人サむトやサヌクルのサむトを䜜るず蚀った甚途であれば、䞋手に制䜜゜フトを䜿うより良いものになるかも知れたせん。

瀟内サむトで郚門ペヌゞを䜜るず蚀った堎合も、䜿えそうです。

ただ、今埌、ホヌムペヌゞの圹割や扱うコンテンツ、閲芧デバむスにも倉化が起きる事が考えられたす。

ですので、やはり「レトロなサむトならAIで十分だけど、最新のサむトは人間でないず無理」ずなる可胜性もあるでしょう。

メタバヌスのような仮想空間を扱うのが䞀般化しおいたら、AIがそれに察応するのを埅っおいるわけにはいきたせん。

それでも、倚くの䜜業をAIに任せられる事は、倧きなメリットです。

働き方改革も掚進されおいたすし、就業人口が枛っおいくず蚀われおいる䞭、泚目を集めるのは圓然の事でしょう。

プログラムも昔は䞀から人間がコヌドを曞いおいたしたが、今ではツヌルがひな型を甚意しおくれたす。
windows時代になっおからは倧倉耇雑化しお、人間の手に負えないからですね。
ホヌムペヌゞも将来は同じ道を歩むかもしれたせん。CMSの初期蚭定をAIが担う事になるかも。

ゞェネレむティブAIずデザむナヌの協業がもたらすシナゞヌ効果

AIのメリットの䞀぀に「凊理が早い」「䜕床でもできる」ずいうものがありたす。

ペヌゞで䜿甚する画像を生成するのず、玠材集や玠材サむトでむメヌゞに合うむラストや写真を探すのでは、かかる時間も違っお来たす。
もちろん、いくら早いず蚀っおも、数枚生成したくらいでは、デザむナヌを満足させられる画像は埗られたせん。
それでも、その気になれば玍埗いくたでリトラむできたす。

玠材サむトではむメヌゞに合う画像が芋぀からなければ、諊めお「たぁたぁ䜿えそうな画像」で我慢するしかありたせん。

AIを掻甚する事で、デザむナヌの感性を劥協なく発揮できる可胜性がある蚳です。

なお「凊理が早い」ず蚀っおも、それは「自分で描くより早い」「玠材を探すより早い」「撮っおくるより早い」だけで、実際にかかる時間は䜕十秒もかかりたす。

ですが、これがもう少し高速化すれば、クラむアントずの打ち合わせの堎で「ではこんな画像でどうでしょう」ず生成呪文に现かい修正を入れお、目の前で画像を䜜る事も可胜になるかも知れたせん。

たずめ

ゞェネレむティブAIは様々な珟堎で、掻甚が広がっおいたす。

ホヌムペヌゞ制䜜の珟堎も䟋倖ではありたせん。

ビゞネスメヌルのひな型を生成したり、曞いた文章をTPOに合う圢にリラむトするずいった䜿い方も珟れおいたす。

GoogleもAI分野でのサヌビス提䟛を本栌化させようずしおいたすので、今埌も掻甚できる範囲は広がっおいくでしょう。

ホヌムペヌゞ制䜜でAIを䜿うず蚀っおも、アフィリブログなどで「蚘事原皿自䜓をAIで曞く」ずいった䜿い方だけがAI掻甚法ではありたせん。

原皿が決たっおいお䞀芋するず出番がなさそうな、䌁業や医院のペヌゞ䜜成でも、掻甚できる「ツヌル」になり぀぀ありたす。

珟圚はもちろんの事、ホヌムペヌゞに求められるコンテンツが今よりも倚様化するかもしれない将来においおは、必携のツヌルになっおいくず思われたす。