「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。
デザイン（Adobe・Figma）と、デザインのための生成AI
いまさら聞けないアドビの生成AI「Adobe Firefly」を解説しながら使ってみた！／ついに商用利用可能、誰でも簡単に使える身近な生成AIに【特集・集中企画】
画像生成AIが初めての方向けの解説記事ですね。
Vercel、生成AIへのプロンプトでWebアプリのUIを自動生成してくれる「v0」をベータ公開。Freeプランも提供
HTMLやCSSなどのコードを書くことなくWebアプリケーション画面の生成が可能
とのことで気になって使おうとしたところ、「ウエイトリスト（待機リスト）」に登録され、執筆時点ではまだ試せていません。
FigmaからコピペでWebサイトが完成！ HTMLもCSSも書かないノーコードツール「STUDIO」がスゴすぎる | 進化が止まらない！ 最新ツール
現在、開発している新機能は、AIチャットボットに口頭で指示をするだけで、自動で処理をしてくれるもの
年内リリースを目指しているそうです。
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
ヘアラインアイコン、カラーとモノクロ両方あるようです。
- 生成AIでWebサイト制作を8週間→3週間に短縮 ベネッセ、業務効率化でコスト4割減に成功
- 狙ったデザインが一瞬で完成する、生成AI搭載のアプリ「Microsoft Designer」 [てっぱんアプリ！]
- ChatGPTを利用して画面モックを爆速で作成する – Taste of Tech Topics
コーディング
Cloudflare Fonts試してみた
日本語Webフォントを使ってもパフォーマンスが高いのは良さそうですね。
- 知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
- CSSのsubgridがすべてのブラウザにサポートされたので、カード内の見出しやテキストを簡単に揃えることができます
- CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く – Katashin .info
- CSSの新しいプロパティ「form-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
- 海外で有名なデザインおしゃれなトグルボタンをコーディングしてみた
- CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
- CSSをコピペするだけで簡単に実装できる！ ディズニーからインスピレーションを得た、美しいローディング
- ChatGPT にHTMLをプレビューさせるChrome拡張を作ってみた
WordPress
WordCamp Tokyo 2023 に関わってくださったすべての皆さまへ / To all those involved in WordCamp Tokyo 2023 | WordCamp Tokyo 2023
WordCamp Tokyoが4年ぶりに開催されました。私は撮影スタッフとして参加しました。
4年ぶりに開催されたWordCamp Tokyo 2023で撮影スタッフをしました。撮影した写真を整理していて気づいたのですが、登壇者の皆さんの笑顔がとても多いですね。
私にとっては、ようやく日常が返ってきたと実感できた日でした。 #wctokyo pic.twitter.com/qPL3mS3BkD— なつき🐰Webデザイン&AI (@Stocker_jp) October 26, 2023
JavaScript
“レガシー”と言われないためのJavaScript再入門
古いJavaScriptの書き方と現代的な書き方についてまとめられています。
id要素を取得する場合 querySelector よりも getElementById の方がパフォーマンスが高いので、getElementById が必ずしも古くて良くないとは限らないと思います。
グーグルが「パスキー」による認証を標準設定に。パスワードを“時代遅れ”にする取り組みを加速
パスワードが珍しいものになり、やがては時代遅れになるようにしていきます
とのこと。
パスワードによるログインはもう限界だと思っているので、興味深いです。
「Google Chrome 118」安定版リリース、CSSのスタイルルールの適用範囲を限定できる「@scope」をサポート
Chrome 119からは3週間ごとに新規バージョンがリリースされるようになります
CSSで「@scope」ルールがサポートされる
など、
- Google、Gmailスパム対策で一括送信者に購読解除ボタン設置を義務付けへ
- Chrome、IPアドレスを秘匿する機能を実装へ
- Gmailのメール認証規制強化への対応って終わってますか？ – エムスリーテックブログ
Twitter（X）
X（旧Twitter）有料化テスト開始 新規登録＆投稿するなら年1ドル「Not A Bot」 一部地域で
現在はニュージーランドとフィリピンのみ。全員有料化するのか、年間1ドルでbot減らせるのかなど気になります。
セキュリティ
「404 Not Found」ページに悪意のあるコードを埋め込むサイバー攻撃が発見される【やじうまWatch】
404ページまで確認するWeb制作者・担当者は少ないから、404ページだけ書き換えてもバレにくいということですかね？
- 「それは、本当に安全なんですか？」 セキュリティ専門家が「GitHub Copilot」の全社一斉導入時に考えたあれこれ
- iPhone全モデルと2020年以降のMacからパスワードやメールを盗み出す「iLeakage」が報告される、実際に動作するデモ映像もあり
ステルスマーケティング規制
令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁
PR表記必須など、気にしなければならないことが増えます。
景品表示法の対象となるのは事業者
です。
旧Twitter / Xに広告表示なし・ブロック不可の広告出現。広告主不明で外部サイトへ誘導、報告も不可 | テクノエッジ TechnoEdge
広告であることが明示されておらず、どのアカウントの広告かすら不明。日本だとステマ規制に引っかかりそうですね。
日本では確認されていないようですが、海外向けにTwitter（X）広告を出稿している方はお気を付けください。
