
AIã«æ¬é³ãèããŠã¿ãïŒã坿¥WEBãã¶ã€ããŒã®ç§ã倱æ¥ãã¡ããïŒãïŒ19æ¥ç®ïŒ
noteãã芧ã®çããŸãããã«ã¡ã¯ããããã¯ã¯ãããŸããŠãã¢ã©ã«ã³ãããã§ãïŒ
仿¥ã¯ã¡ãããšçé¢ç®ã«ã坿¥ã®è©±ãããŸãã
ãããã ã£ãŠããã€ãé³¥ã«ã°ãããã€ã€ãæãããŠããããã§ã¯ãªããã§ãã®ããããŸã«ã¯ãžãç®ã«ãªã£ãŠãçé¢ç®ãªè©±ãããã®ã§ããïŒâŠã§ããããŸã«ãªã®ãâŠïŒ
AIãWEBãã¶ã€ã³ã§ãã¡ããæä»£å°æ¥
ãããã¯ãããã£ãŒã«ã«ãããéãããã«ã¿ã€ã ã§åãã€ã€ïŒéæ£èŠéçšãªã®ã§ã絊æã¯æ²ãããããå®ãã§ãïŒã鱿«ã«WEBãã¶ã€ã³ã®å¯æ¥ãããŠããã¢ã©ã«ã³äž»å©Šã§ãã
ãã®WEBãã¶ã€ã³ã®äžçã§ãæè¿ãšã¿ã«ç®ãŸããããé²åãéããŠããã®ããAIããŒã«ã

ãMidJourneyãããAdobe Fireflyããªã©ã®ãããªAIããŒã«ã次ã
ãšç»å ŽããŠããŠãWEBãã¶ã€ã³ã®å°éç¥èããªããŠããèšèã§ãããããããããµã€ãã®ãã¶ã€ã³ãäœããããã ãäœã£ãŠïŒãšèšãã°ãè³¢ãAIã¡ããããããããŒã£ãšãããããèŠãç®ã®ãµã€ããäœãæå©ããããŠãããâŠãããã
ç»åçæã§æãéãã®ç»åãäœãããã©ããã¯ãšããããšããŠãããã®ãã¶ã€ã³ãWEBäžã«åçŸããããã®ã³ãŒãã£ã³ã°æè¡ãªã©ã¯ãããªãé²åããŠãããããªã®ã§ããã
AIã«ä»äºã奪ããã¡ããïŒ
å®ã®ãšããããã®AIã®åãŸãããŸã§ã®é²åã®å¢ãã«ããããã¯ããªãæ¬æ°ã§ããã£ãŠãŸãã
ããã£ãŠãçåå¯ãªè
ã®å¯æ¥WEBãã¶ã€ããŒãªãããããå¿
èŠãªããªãã£ãŠããšãããªãã®ïŒãšããäžå®ãããããããšæ¹§ããŠããã
é ããªãæªæ¥ãAIã«ä»äºã奪ãããŠã坿¥WEBãã¶ã€ããŒã®ç§ã¯å€±æ¥ãã¡ããã®ã§ã¯âŠâŠïŒ
èŠåŽããŠèŠããã³ãŒãã£ã³ã°ãªã®ã«
WEBãã¶ã€ã³ã®ä»äºãšãããã®ã¯ãããã€ãã®å·¥çšã«åãããŠããŸãã
ãµã€ãã®æ§æãèããããã¶ã€ã³ãèµ·ããããã®ãã¶ã€ã³ãWEBäžã«è¡šçŸããããã®ããŒã¯ã¢ããèšèªãèšè¿°ããïŒã³ãŒãã£ã³ã°ïŒããã¹ããæ€èšŒçã
ã
å€å²ã«ãããWEBãã¶ã€ã³ã®å匷ã®ãªãã§ããã¢ã©ã«ã³ããããèŠãããã®ããã³ãŒãã£ã³ã°ã§ããã
ã¡ãªã¿ã«ã³ãŒãã£ã³ã°ã§äœ¿çšããèšèªã¯ãHTMLãCSSãjava scriptãäž»ãªãã®ã§ãäžéã§ã¯ãWebéçºæè¡ã®äžã§ãæ¯èŒçé£æåºŠãäœããèŠããããããã°ã©ãã³ã°èšèªãšèšãããŠãããŸãã
äžéã§ã¯ã
ã§ãããäžéã§ã¯ããã§ããã¢ã©ã«ã³ãããã«ãšã£ãŠã¯é£ããã£ãã®ïŒïŒð
ããŸãããããäœåºŠããœã³ã³ã®åã§æ°çµ¶ããããããšãâŠ
æ¶ãªãã«ã¯èªããŸããããããã

ãããŸã§èŠåŽããŠãã£ãšèŠãããšããã®ã«ãããããã¯ãããªèŠåŽããªããšããAIãã¿ããªãã£ãŠããããšããã
ã³ãŒãã£ã³ã°ãç¥ããªãWEBãã¶ã€ããŒããAIã®å©ãã§çŸéºãªãµã€ããäœãäžã®äžã«ãªã£ã¡ããããïŒ
ãããã³ç»åã ã£ãŠAIã§äœãã¡ããããã³ãŒãç¡ãã§ãµã€ããäœãããŒã³ãŒãã®ããŒã«ããæ¬¡ã
ãšçŸããŠããŠããã
âŠâŠããããã®äžã®äžã§ã¯ãããã³ãŒãã£ã³ã°ã®ç¥èãªããŠå¿ èŠãªãã®ãããããªããAIã䜿ããã°è¯ããŠãWEBãã¶ã€ããŒèªèº«ã«ã¯ãããã³ãŒãã£ã³ã°ãªã©ã®ç¥èã¯äžèŠã«ãªãïŒçµæãWEBãã¶ã€ããŒã¯ãAIã«ä»äºã奪ããã!?
èãããããæãããŸã£ããããã¯ããšããšãæŽæã«åºãŸããã
ãããèªåããä»äºã奪ãã©ã€ãã«ã«ãªããããããªããåœã®AIã«è³ªåãã¶ã€ããŠã¿ãã®ã§ãïŒ
AIã«å°ããŠã¿ãŸãã(ChatGPTïŒ
ãŸããããã¥ã©ãŒãªAIãChatGPTããã«å°ããŠã¿ãŸããã
質åïŒChatGPTããã¯ãHTMLãCSSãªã©ã®ã³ãŒãã£ã³ã°ããšãŠãåªç§ã ãšèããŸããããã®å ã®æªæ¥ã§ã¯ãWEBãã¶ã€ããŒã¯AIã䜿ããã°ãããŠããã¶ã€ããŒèªèº«ã¯ãã³ãŒããŒãšããŠã®ç¥èã¯ãããäžèŠã«ãªãã®ã§ããããïŒChatGPTããã¯ã©ãæããŸããïŒ
â¬ïžChatGPTããã®åç
ãšãŠãè¯ã質åã§ãããWebãã¶ã€ã³ã®æªæ¥ã«ã€ããŠã¯ãç§ãããèããããããŸãã
çµè«ãããããšããã³ãŒãã£ã³ã°ã®ç¥èã¯"äžèŠ"ã«ã¯ãªããªããã©ã"åæã¹ãã«"ã§ã¯ãªããªãããšããã®ããç§ã®ä»ã®èãã§ãã
ð¡ ãªãããšãããšïŒ
â AIã¯ãã§ã«ãã³ãŒãã£ã³ã°äœæ¥ããè£å®ã»èªååã§ããHTMLãCSSãJSã®ããŒã¹ã³ãŒãã¯ãChatGPTã®ãããªAIãé«éã»æ£ç¢ºã«çæã§ããŸãã
FigmaãAdobe XDãªã©ã®UIãã¶ã€ã³ããŒã«ããAI飿ºã§ã³ãŒãåºåãå¯èœã«ã
ã€ãŸãããããŠã¹ãšããã³ãããã§Webãµã€ãã®æ çµã¿ãããçšåºŠäœããæä»£ã«çªå ¥ããŠããŸãã
ã§ããããã ããã宿ããªãã®ãWebãã¶ã€ã³ã
ð€ ãã¶ã€ããŒã«æ±ããããã®ã¯ã人éããããããèšèšã®ã»ã³ã¹ããŠãŒã¶ãŒäœéšïŒUXïŒã®çè§£
ãã©ã³ãã€ã¡ãŒãžã®è¡šçŸ
é è²ã»äœçœã»åç·ã®ãã©ã³ã¹æèŠ
ããã®ãµã€ãã誰ã䜿ãã®ãïŒããšããæ³åå
ãããã¯ãŸã ãŸã AIã«ã¯é£ããéšåã
ã³ãŒããæžããªããŠãããã¶ã€ã³ã®âæå³âã説æããAIã«æç€ºã§ããåïŒããã³ããã¹ãã«ïŒãéèŠã«ãªã£ãŠããŸãã
ð® æªæ¥ã®Webãã¶ã€ããŒåã¯ïŒã³ãŒãã£ã³ã° â AIã«ä»»ãã
èšèšã»æŒåº â 人éã®ææ§ã§åè²
AIãâããŒã ã¡ã€ãâãšããŠäœ¿ããã¹ãã«ãå¿ é
ãäœããããããã£ã¬ã¯ã·ã§ã³ããããžã·ããããå¯èœæ§å€§
ãšã¯ããâŠ
ãã³ãŒãã£ã³ã°ãã§ããããšãã¯ãAIãšããŒã ãçµãäžã§ãæå©ã§ãïŒãªããªããAIãäœã£ãã³ãŒããâèªããâããšã§ããã°ã®ç¢ºèªãä¿®æ£æå³ã®ãºã¬ã®ä¿®æ£èªåã®ãã¶ã€ã³ãšã®æŽåæ§ç¢ºèªãã¹ã ãŒãºã«ãªããŸãããŸã£ããç¥ããªãã®ãšãã¡ãã£ãšãããã®ã§ã¯å€§éãã
ð¯ çµè«
ð¥ Webãã¶ã€ããŒã«ãšã£ãŠãã³ãŒãã£ã³ã°ã¯ãå¿ é ã¹ãã«ãããã匷ã¿ã®ã²ãšã€ããžð§ 倧äºãªã®ã¯ãAIãšååããŠãäŒããã»äœ¿ããããWebäœéšããåµãããšïŒ
ã³ãŒããŒãšããŠã®ã¹ãã«ãâäžèŠâã«ãªãããã§ã¯ãªãã
ãã©ããŸã§èªåã§ãããïŒAIã«ä»»ããããã®ãã©ã³ã¹ãåãã人ãããããã匷ããªããŸãâš
ãããããªããWebãã¶ã€ã³ã«èå³ããããªããAIãšçµãã ãæ°ããã¯ãªãšã€ã¿ãŒåããäžç·ã«ç®æããŸãããïŒ
æ°ã«ãªããšãããããã°ãã©ãã©ãèããŠãã ãããð
ãªãããããã質åã§ãããã£ãŠâŠããããè€ããããïŒ
ããã§ãã£ãŠããªãã ãæ
°ããããïŒïŒ
ã¹ãã€ã«ããŒã¯ðãŸã§å ¥ã£ãŠãäœãããã£ããå±ãŸããã¡ãã£ãã«ã³ãžã§ãð€
AIã«å°ããŠã¿ãŸããïŒClaudeïŒ
次ãã§ãã³ãŒãã£ã³ã°ãçŽ æŽããããšããåã®ããAIãClaudeããã«ãåã質åãããŠã¿ãŸããã
質åïŒClaudeããã¯ãHTMLãCSSãªã©ã®ã³ãŒãã£ã³ã°ããšãŠãåªç§ã ãšèããŸããããã®å ã®æªæ¥ã§ã¯ãWEBãã¶ã€ããŒã¯AIã䜿ããã°ãããŠããã¶ã€ããŒèªèº«ã¯ãã³ãŒããŒãšããŠã®ç¥èã¯ãããäžèŠã«ãªãã®ã§ããããïŒClaudeããã¯ã©ãæããŸããïŒ
â¬ïžClaudeããã®åç
ã³ãŒãã£ã³ã°ã®å°æ¥ã«ã€ããŠã®ã質åãè峿·±ãã§ããã
ç§ã®èãã§ã¯ãAIã®é²åã«ãã£ãŠã³ãŒãã£ã³ã°ã®äžéšã¯ç¢ºãã«èªååãããŸãããWEBãã¶ã€ããŒãã³ãŒãã£ã³ã°ã®ç¥èãå®å šã«ææŸããããã«ãªããšã¯æããŸããã
çŸåšã§ãAIããŒã«ã¯HTMLãCSSãçæã§ããŸãããçç±ã¯ããã€ããããŸãã
1. çè§£ãšä¿®æ£ã®å¿ èŠæ§: AIãçæããã³ãŒãã§ãã£ãŠããåé¡ãçºçããæãç¹æ®ãªèŠä»¶ã«å¯Ÿå¿ããéã«ã¯ãã³ãŒããçè§£ããŠä¿®æ£ã§ããèœåãå¿ èŠã§ãã
2. éçã®èªè: AIã¯ãäœãã§ããŠäœãã§ããªãããã®å€æãèŠæã§ããæè¡çãªå®çŸå¯èœæ§ãæé©ãªå®è£ æ¹æ³ã倿ããã«ã¯ãã³ãŒãã£ã³ã°ã®åºç€ç¥èãéèŠã§ãã
3. ã³ãã¥ãã±ãŒã·ã§ã³ã®ç²ŸåºŠ: ããã³ããšã³ããšããã¯ãšã³ãã®éçºè ãšã®ã³ãã¥ãã±ãŒã·ã§ã³ã¯ãåºæ¬çãªã³ãŒãã£ã³ã°ç¥èãããã»ããæ Œæ®µã«å¹ççã§ãã
4. åµé æ§ãšã€ãããŒã·ã§ã³: æ°ãã衚çŸãã€ã³ã¿ã©ã¯ã·ã§ã³ãçã¿åºãã«ã¯ãåªäœã®ç¹æ§ïŒãã®å Žåã¯HTMLãCSSïŒãçè§£ããŠããå¿ èŠããããŸãã
ãããæªæ¥ã®WEBãã¶ã€ããŒã«å¿ èŠãªã®ã¯ããã³ãŒãã£ã³ã°ã®å šãŠãèªåã§ãããèœåã§ã¯ãªãããAIãšååããããã®ã³ãŒãçè§£åãã ãšæããŸããAIãç£ç£ãããã®åºåãè©äŸ¡ã»èª¿æŽã§ãããæè¡çãªç®ããæã£ããã¶ã€ããŒã䟡å€ãæã€ã§ãããã
åçŽäœæ¥ãšããŠã®ã³ãŒãã£ã³ã°ã¯æžã£ãŠããã³ãŒããçè§£ããèœåã®äŸ¡å€ã¯æ®ãç¶ããã®ã§ã¯ãªãã§ãããããââââââââââââââââ
ïŒã¡ãªã¿ã«ãããã¯ãä»ã®ãšããChatGPTãClaudeã課éã¯ããŠããããç¡æçã䜿ã£ãŠããŸããïŒ
ãããã
ãã®åçããäžç²æãªããã¡ããæ°é£ãããšãŠãAIïŒæ©æ¢°ïŒãšã¯æããããããªãæãããã«æºã¡ãŠãããŸããã
Claudeããã£ãããªããŠè¬èãªã®âŠð¢
AIã®åçã«æãããš
AIãã¡ã¯ããã®å
ãã³ãŒãã£ã³ã°ã®ç¥èãç¡é§ã«ãªãããšã¯ãªããããšèšãæ
°ãã®èšèãšå
±ã«ã
ããã©ããŸã§èªåã§ãããïŒAIã«ä»»ããããã®ãã©ã³ã¹ãåãã人ãããããã匷ããªããŸãã
ãAIãšçµãã ãæ°ããã¯ãªãšã€ã¿ãŒåããäžç·ã«ç®æããŸãããïŒã
ãšãæªæ¥ã«åããå©èšãããããã«æããŠãããŸããã
èããŠã¿ãã°ãAIã¯ããããŸã§ããŒã«ãªã®ã§ãããã
ãªãã§ãã§ããããã©ãäžèœéžæã§ã¯ãªãã
確ãã«ãã³ãŒãã£ã³ã°ã®ãã³ãã®åãç¥ããªããŠããç»åãå¶äœããããã®å®çªãœãããPhotoshopããIllustratorããæããªããŠããAIã䜿ãã°ãç°¡åã«ãµã€ããäœãããä»ã§ããå®éã«ããããã£ãŠãµã€ããäœã£ãŠçšŒãã§ãã人ãããã
ã§ããã£ãšãã³ãŒãã£ã³ã°ã®ç¥èãããã°ããã£ãšéã£ãWEBãã¶ã€ã³ãã§ããã¯ãã§ãããã
äŸãã°ãAIã®å©ããåããŠã坿¥ããã®äœæ¥æéã®äžè¶³ãè£ããé«éã§ãµã€ããäœããããã«ãªããšãã
äŸãã°ãAIãåºããçãããã³ãŒãã£ã³ã°ãä»ã®ç¥èãç·åå¡ããŠããã£ãšã¯ã©ã€ã¢ã³ãã®èŠæã«å³ãããã¶ã€ã³ã«è¿ã¥ããŠããããšãã§ãããããããŸããã
ããããå±ãŸããŠãããAIã®çããèããŠããã£ãšãããæããããã«ãªããŸããã
AIããŒã«ãåŠã¶è¬åº§ãåè¬ããŠããŸãïŒ
âŠâŠãšèšãããã§ãææ¥ããããã¯AIããŒã«ã®äœ¿ãæ¹ãåŠã¶ãªã³ã©ã€ã³è¬åº§ãåããããšæããŸãŒãïŒ
ãããªãåçªã§ã¯ãããŸããïŒ
ã¡ããã©ãã€ã¹ãªã¿ã€ãã³ã°ã§çæè¬åº§ãéå¬ããããã®ã§ããããããð
ãã®è¬åº§ãå®ã¯ãããããããæ¥œãã¿ã«ããŠãããã§ãã
ä»é±æ«ãæ¥é±æ«ã®2æ¥éã§ææ°ã®AIããŒã«ãåŠã¹ããã§ããã
ã©ããªããšãåŠã¹ãã®ããä»ããããããð€
äœãçºèŠããã£ãããã®noteã§ããç¥ããããããšæããŸãã