制作会社が記載されているまとめサイト

投稿者：土佐
普段WEBサイトのまとめサイトを見ていると思うのですが、制作会社が記載されているまとめサイトを見つけましたので、2点ほど共有させていただきます！

https://uragawa.work/
https://sankoudesign.com/
↑こちらのサイトは虫眼鏡アイコンをクリックすると詳細が見れました

制作会社名を知ったところで、という感じなのですがそれぞれ会社の実績一覧とか見ると色々参考になりました～！

AIDAについて

投稿者：川目
古い記事＆広告（LP）系の内容で申し訳ないのですが、購買に関する変化と直観性の記事で、ちょっと興味深いなと思いました。
https://dlpo.jp/blog/aida-lp-1.php

ストライプのジェネレーター

投稿者：尾髙
みなさんもしかしたら知っているかもしれないのですが、ストライプのジェネレーターのご紹介です。
この間大活躍したので、ぜひ！
https://css-stripe-generator.firebaseapp.com/

こちらはSVGでストライプが作れます。
https://svg-stripe-generator.web.app/

Googleページ エクスペリエンス「Core Web Vitals」

投稿者：豆成
皆様、いよいよ6月中旬（終了は8月予定）からGoogleページ エクスペリエンスが順次導入されます！特に重要なのが「Core Web Vitals」というもので、サイトの質を測定するものの1つです。
次の3つが主な指標になります！
■LCP：ページのコンテンツをどれくらい早く読み込めるか、そのスピードに関する指標。
■FID：ページが操作可能になるまでの時間に関する指標。
■CLS：ページコンテンツに予期しないレイアウトのずれがどれくらいあるかの指標。

そして、この3つの指標を、毎回スピードチェッカーにURLを記述して調べなくてもいい方法がありました！
それが……こちら！！

Web Vitals
https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
これをインストールすることで、ブラウザの右上に灰色の■が表示され、この3つの指標のうち、１つ引っかかると、赤い■に、オールグリーンであれば、緑の■に変身してくれる優れものです！

さらに便利なカラーツール「colorbase」

投稿者：東江
これまでもカラーツール的な投稿をした気がするんですが、最近見つけたサイトを共有いたします。
個人的に情報量が多く使いやすいなと思いました！
【colorbase】https://colorbase.app/

複数ワードのページ検索機能「isea」

投稿者：河鰭
システムオリジナルでセルフチェックする時に使い始めた拡張機能のご紹介です。
「isear」といいまして、複数ワードに対応したページ内検索ができます。
主に検品項目の表記揺れで使うのですが、画像のように各ワードをスペースで区切って記載し、リロードボタンを押すと、引っかかったワードをハイライト表示してくれます。
別のページに遷移しても機能しているので、都度ワードを入れ直す必要がないのが楽でいいなと思いました。
オフにしたい時は入力欄を空にしてリロードか、オフボタンを押せばOKなのも手軽です～。
ただ、誤字脱字は相変わらず目視またはチェックツールにかける必要があると思いますので、あくまで表記揺れのみの使用になるかと…。
https://chrome.google.com/webstore/detail/isear/cihgmhbajkkbciealhbbfhbbnmgaekdj?hl=ja

スクロール時背景固定（background-attachment: fixed;）、background-size: 1000px auto;でもIOSで効かない問題

投稿者：有元
自分で思い通りにいかなかった際のメモ共有します。

スクロール時背景固定（background-attachment: fixed;）、background-size: 1000px auto;でもIOSで効かない問題
ググってみるとbackground-sizeがcoverだとIOSで効かないとありましたが、1000px autoでもだめだった。
ググったら出てくるやつです（笑）
背景固定は時間ないときでもコピペで軽くおしゃれにできるのでいいですね。

ダメなやつ

OKなやつ

fixedしている::afterが原因でスマホ時のみ他コンテンツがクリックできなくなってしまったのでpointer-events: none;つける

vscodeのAutoprefixerで特定のcss消される問題
お知らせやブログ新着表示でよく使用するテキスト行数制御表示で必要な-webkit-box-orient: vertical;がvscodeのAutoprefixer設定を"last 1 versions"にしていると消される…
-webkit-box-orient: vertical;の対応がバージョン47以前（4つ前くらい）からなので消されていた
下記のようにコメントで囲うとAutoprefixerを無効にできる。
書き方はAutoprefixerのバージョンによって違う、後コメントアウト消すよう設定していると×

Webフォントを採用すると実際どれくらい遅くなるのかを検証

投稿者：相田
https://twitter.com/wurst_design/status/1352589327721783297
どなたかどこかで共有していたような…していなかったような…？
日本語フォントはサブセット化がいいみたいですね…

※補足：河鰭さんより
前職でLPやった時に、とにかく軽くしろと言われてNoto Sansをサブセット化した事があります。
外部読み込みをしなくなる+フォントファイルを軽量化するので、だいぶスコア変わっていたような…
でもカーニングとかも削れちゃうようなのでサブセット化すれば万事解決！とまではいかないかもしれません…

写真補正について

投稿者：芦田
前回のMTGで写真補正についての議題があったので詳しく解説している動画を共有します。
私もなんとなくトーンカーブを使用していましたが、photoshopの機能がわかるともっと細かいカスタムや簡単な方法があったんだなぁと思いました！
ちょっと長いですがぜひ見てみてください！
https://www.youtube.com/watch?v=1LS6gcAQonA

flex-boxのgapについて

投稿者：本田
flex-boxのプロパティ、gapがモダンブラウザでサポートされたよ～って話です。
このプロパティ正直把握してなかったので、情報は豆にキャッチアップしなきゃダメですね…。
https://stocker.jp/diary/flexbox-gap/
ついでに最近見て好きだったデザインのサイトを1つ。
https://yamashita-fruit.com/
背景の果物のドットがかわいー（どうやって制御して真ん中空けてるの…？）ってのと、
写真の角丸がきっちりした角丸じゃなくて不均一なのが有機物っぽい味を出していてグッドです。
細かいところにデザイナーの意識が行き届いてるデザインですね。