「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。
デザイン
“牛乳パック”どっちが好きですか？｜内田 広由紀｜視覚デザイン研究所｜note
視覚デザイン研究所はデザイン関連の本で良いものがあるため、かなり昔に以下の記事で紹介していました。最近はnoteもやってたのですね。
関連: 年末年始にWebデザインを学び直すための3つのステップ | Stocker.jp / diary
知っておくべきUI/UXアニメーションの12の原則 (12 principles of UI/UX animation you should know)
こちらは英文記事ですが、Google翻訳などで十分理解できる内容ですので取り上げました。
Chrome PC版の場合はアドレスバー右端の翻訳アイコン、または右クリックで［日本語に翻訳］などで翻訳できます。
GIFアニメーション付きで解説されているので分かりやすい記事です。
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
最近は「ユーザー中心設計」という言葉を聞くことも増えましたが、その考え方を素早く学べるスライドです。
- Figmaに公開されている日本のデザインシステム系ファイル
- 高齢者向けサービスにおけるUIデザイン｜『高齢者のためのユーザインタフェースデザイン』の書評
- Webサイトを作る際に超参考になったデザインのサイトまとめ – Qiita
- UIの名称まとめ 〜よく見かけるけどあれなんていう名前？〜｜Nviveto｜note
コーディング
【CSS】きみは “擬似クラス” 何個言えるかな？？ – Qiita
この記事では、CSSの疑似クラスが55個紹介されています。
ハンバーガーメニューの実装方法決定版 | baigie engineer blog
メニューボタンはbutton要素で実装し、WAI-ARIA属性を付ける。
この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック
ボタンを押した後の処理待ちアニメーションに使えそう？
- レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法 | セカヤサブログ
- 教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック13選 | セカヤサブログ
- CSSでフッターの下に隙間ができないようにメインコンテンツの高さを調整する
- CSSは確実に進化している！ 新機能、単位を変数として利用できる「Variable Units（変数単位）」
- transitionをかけたホバーアクションのopacityがちらつく問題を解消する | 【運用・改善が得意な仙台のホームページ制作会社】AndHA（アンドエイチエー）
- レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説
プログラミング・インフラ
SEO
Google の Helpful Content Update って他のアップデートと何が違う？元 Googler に一問一答で聞いてみた。 – ブログ – 株式会社JADE
SEOに関わっている方はよく読んだ方が良さそうな記事です。
検索ユーザーではなく検索エンジンにフォーカスしてしまっている記事を、検索ユーザーの求める情報へのフォーカスに移していく
とのことで、最近問題になっている中身のない記事への対策にも見えます。
関連記事: Helpful Content UpdateをGoogleが導入、役に立たないコンテンツの評価を下げるアルゴリズム更新 – 海外SEO情報ブログ
- Google検索が低品質・類似内容の結果をあまり表示しないようにする更新を実施へ
- 商品の良い点・悪い点を表すpros and cons構造化データをGoogleが新たにサポート – 海外SEO情報ブログ
セキュリティ
- Twitter、Card Validatorからプレビュー機能を削除。カード情報のキャッシュは最大7日 | gihyo.jp
- Twitterからメアドと電話番号が漏洩。540万人に影響か
- Twitterの元セキュリティ責任者が内部告発──botとセキュリティについて「重大な欠陥」を隠していた
その他
マイクロソフトが絵文字データ1538種をオープンソース提供。改変・商用利用も自由 | TechnoEdge テクノエッジ
一部の絵文字についてアニメーションを提供
とのこと。
