「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。
デザイン
アドビが生成AI「Firefly」を一般公開 「Creative Cloud」に統合 コンテンツは商用利用可能
生成AI機能は使い放題ではなく、プランによって使える量が決まっているようです。
文章一行でAIがWebサイト構築、外部資金調達なしで5.4万ユーザを集めた豪Relume——NikeやDapper Labsも利用 – BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
要するに、AIを活用してWeb制作の7割くらいを自動化するツールのようです。
コンテンツ生成に GPT、デザインには Figma と Webflow を使用
しているそうです。
- Figma のデータ、少し楽になるかもしれない作り方 – Qiita
- 【簡単なのにすごい! Photoshop 1分講座】 顔を別人に差し変えたい時は「レイヤーを自動合成」
- デザイナーじゃなくても！見やすいスライド資料のための5つのコツ【Before／Afterあり】｜spicagraph
- 図解がつくれると伝わり方が変わる！ 初心者のための図解作成ガイド【事例あり】｜鷹野 雅弘
- 全部、商用利用も無料！ Google Fontsの中でも可読性・判別性に優れたフォントのまとめ、UIデザインにも最適
コーディング
- Webやアプリの日本語を読みやすく折り返す「BudouX」。GoogleがGitHubで公開
- スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
- CSSアニメーションの実装がこれで簡単に！ Chrome 117でサポートされたCSSの6つの新しい機能とプロパティ
- 2023年に使えるようになったCSS
- 業務でしばらく役に立たない 最新のHTML 2023
- CSSの@counter-styleがSafari 17でも対応、すべてのブラウザでサポートへ | gihyo.jp
- Tailwind CSS の基本的な使い方 – コムテブログ
- CSSで実装できるのか！ iPhone 15 Proのページで見かけたスクロール駆動のダイナミックアイランドを実装するテクニック
- これはすごい便利！ HTMLはdiv一つ、あとはCSSをコピペするだけで500種類以上のローダーが簡単に実装できる -CSS Loaders
- ネガティブマージンの使いどころ
- CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証ブラウザなど
- Figma for VS Codeを使ってCSS実装する時のおすすめポイント – Goodpatch Tech Blog
- 【第5弾】少しのコードで実装可能な10のCSS小技集
- CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
プログラミング・VSCode
GitHub Copilot Chat の使い方｜npaka
スラッシュコマンド便利そうですね。
VS Codeをフォーク | AI時代の最強コードエディタCursorの使い方を紹介｜ChatGPT研究所
CursorはVSCodeのフォークでAIファーストなエディタ。CursorのトップページではCopilotより優れている…みたいな賛辞が並んでいます。
1週間ほど使用してみましたが、個人的にはプログラミングよりもブログなどの執筆に役立ちそうな気がします。
参照したいテキストファイルをフォルダーに入れておき、それを参照しながら記事を書いたり校正したりということができそうな気がします。
- VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス – Qiita
- VSCodeをプログラミングエディタとして強化しよう！ 便利な設定や拡張機能を紹介
- Microsoft、生成AI「Copilot」の企業顧客が著作権侵害で提訴されたら「責任を持つ」
- MacでDocker DesktopやWSLのようなコンテナ/仮想マシン環境を実現する「OrbStack 1.0」リリース
- 静的サイトジェネレータ「Astro 3.0」正式リリース。JavaScriptなしでSPAのようなアニメーションの画面遷移など新機能
- CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack | コリス
Google・Chrome
「Google スプレッドシート」にプロンプトで高機能なテンプレートを生成する機能が追加／ジェネレーティブAI「Duet AI」で情報整理が効率化
「Duet AI」は「Google Workspace」に組み込まれた生成（ジェネレーティブ）AIです。
本機能はサンプルデータを使用してテンプレートを生成する。スプレッドシート上などのデータにはアクセスしないので、情報漏洩の懸念はない
そうです。
Google、Androidのロゴを4年ぶりに変更 ドロイドくんは立体的に
スキューモーフィズム回帰、ロゴの先頭文字を小文字にしない。Googleの他のサービスや他社も続くのか気になります。
AI・ChatGPT
画像対応ChatGPTで設計図からコードの世界が実現しててやばい – きしだのHatena
画像を認識してテキストで解説できるGPT-4Vですが、この記事では画面設計のスクリーンショットを見せてJavaを書かせています。
ほかにHTMLなども書けるようで、Web制作者にとっても使い道が多そうですね。
GPT-4Vの画像認識力の高さについては、以下のツイート（ポスト）が分かりやすいと思います。
単に画像の内容を説明しているだけでなく、何が起きたことが原因でこのような光景になっているかまで推測しています。
GPT-4Vに今年の阪神の優勝時の写真を与えて撮られた場所と状況を推測させたら、画像の要素を細かく分析し、知識ベースにある過去事象を組み合わせて完璧に当ててきた。こやつできるな。
ちなみにGPT-4Vは2022年の知識までなので、今年優勝したことは知らない。 pic.twitter.com/6kfZRo1GyI
— FabyΔ (@FABYMETAL4) September 27, 2023
最初は「img要素のaltの内容をAIに自動で書かせたら便利では」くらいに考えていたのですが、どうやらそれ以上のことも出来そうな感じがします。
昨日、ChatGPTが画像入力対応したので「視覚障害者のためにこの画像を説明してください」というプロンプトで試しています。
結論：アクセシビリティの時代が変わる！
生成例↓… pic.twitter.com/QPP7nOfDiE— Hironobu Takagi / 高木 啓伸 (@hirotakagi) September 26, 2023
React 日本語ドキュメントが実はわりと ChatGPT で翻訳されている件
DeepLよりChatGPTの方が空気読めるし細かい指示もできるので、ちゃんとした翻訳には確かに向いてそうですね。
Open Interpreterの使い方から実践までを解説【画像付き】 | WEEL
OpenAIが開発したCode Interpreterよりも全然優れています
とのこと。
GPT-4 APIでCode Interpreterを使用すると、かなり複雑なプログラムを自動で書かせることができるようですが、API利用料がとても高額になる場合が多いそうなので気をつけてください。
その他
令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁
景品表示法の対象となるのは事業者
とのことです。
