2021年3月のログ
目次
コピペで使えるボタンデザイン
投稿者：尾髙
コピペで使えるボタンデザインが豊富なサイトのご紹介です。
CMSのデザインに一役買うかもしれません！
https://jajaaan.co.jp/css/button/
https://saruwakakun.com/html-css/reference/buttons
WPのLazy-loadingのサポート／Passage Indexing
投稿者：豆成
■WordPress 5.7がiframeのネイティブLazy-loadingをサポート
WordPress 5.7にて、JavaScript の専用ライブラリを必要とせず、
iframeのネイティブLazy-loadingがサポートされます！
ブラウザの標準機能としてHTML属性で遅延読み込みを実装する仕組みです。
■Google、Passage Ranking (Passage Indexing) を米国の英語検索で導入
こちら、まだ米国での話ですが、だいたいその場合、日本では1年後くらいに
実装されるかと思いますので、参考までに！
Passage Indexing は、ページ全体ではなくページの中にあるテキストコンテンツの
特定の一部分だけを評価できるランキングシステムの改良です！
検索結果の7％に影響されるらしく、結構大きいと思います！
テキストコンテンツ、当たり前ですが、ますます重要になりますね.。
■参考サイト
https://www.suzukikenichi.com/blog/wordpress-5-7-will-support-native-lazy-loading-for-iframe/
https://www.suzukikenichi.com/blog/google-passage-ranking-went-live-in-google-us/
ベンダープレフィックス
投稿者：河鰭
これまでは各ブラウザで同じように表示されるように半ばおまじないのようにつけていたベンダープレフィックスですが、
IE11は実質ほぼ亡き者となり、主要ブラウザは常にアップデートをかけている現状、そろそろ要らないのでは？という気がしている今日このごろです。
増やせば増やすほどコード数も増える上に、プレーンなCSSで書いていたらそれらを一個ずつ直さねばならない訳ですし……
作る側の負担が減るに越したことはないので、削れるものはどんどん削っていきたいものですね。
https://qiita.com/amamamaou/items/42197e443134478befaf
これは余談ですが、
昔「プログレッシブエンハンスメント」だの「グレイスフルデグラデーション」だのを勉強したことがあったのですが
今は「リグレッシブエンハンスメント」なる手法もあるんですね！内容見た感じ下手すると地獄みが高いのではないかという気もします…
https://uxdaystokyo.com/articles/glossary/regressive-enhancement/
二色で斜めに区切る・方眼紙のコーディング
投稿者：東江
背景パターンのツールのため既にご存知の方もいらっしゃるかと思いますが、前回のSO案件の際に、背景をどうにかしたくて、二色で斜めに区切ろうかと思い、ちょうど良いツールを見つけたので共有いたします。また、以前のSO案件でも背景をどうにかしたいと思い、方眼紙のパターンを利用したんですが、その際に使用したツールをご紹介します。
【二色で斜めに区切る】https://taneppa.net/bg_separate_css/
【方眼紙】https://webparts.cman.jp/box/grid/
CSS aspect-ratioでアスペクト比設定
投稿者：有元
知らなかったのですが、CSS aspect-ratioでアスペクト比設定できるようになったんですね…！
素晴らしい…一気にCDが楽になりますね。
SafariとFirefoxではまだサポートしてないので早くサポートして使えるようになってほしいですね…！
https://coliss.com/articles/build-websites/operation/css/how-to-use-aspect-ratio-css-property.html
オペレーターになってない？新人デザイナーがありがちな5つのこと
投稿者：芦田
仕事をする上で、こんな心構えを持っていたいなと思える記事を見つけたので共有します。
「オペレーターになってない？新人デザイナーがありがちな5つのこと」
https://yososhi.com/archives/check-five-things-to-avoid-become-an-operator/
指示を忠実に再現することも大事ですが、プロとしての意識を失わないように日々仕事をしていきたいと改めて思いました。
音声ブラウザ使いに優しいサイト設計を考える
投稿者：相田
https://www.smbc.co.jp/accessibility/guidelines/guideline_38.html
「More」「詳しく見る」だけの表記のボタンをよく使うと思うんですが、具体的な内容を書かないと音声ブラウザ使いの人には不便なケースもあるとのことです。
SEOの面からも具体的なキーワードを盛り込むといいかもしれないなと思った今日この頃です。
ちょっとのコードで色々できるCSS
投稿者：本田
https://www.webcreatorbox.com/tech/css-tips-4
ちょっとのコードで色々できるCSS。
ほほぉ～と思うことが色々ありましたが、案件に使えるものはあるかな…
というか中央揃えはまだ他に方法があったんですね！！奥が深い…（また中央揃えの話をしてる…）
gitについて
投稿者：芝山
個人的にgitの勉強を（やっと）始めたのですが、ゲーム感覚で勉強できるよってサイトを見つけたので共有します。見つけただけでまだ遊んでないのですが…
社内ではgit使う機会が今のところないですが、個人的に作ってるscssの管理に使ったりしております。
https://labs.cybozu.co.jp/blog/akky/2021/02/oh-my-git-learning-game/
デザイン関係のオススメのインスタアカウント
投稿者：西
Webビジネス専門誌の「Web Designing」のインスタグラムアカウント。
編集部が度々サイトやコンテンツを紹介しています。
新刊情報の投稿もあり、気軽に見れて良いです。
https://www.instagram.com/wd_mag/
他にもデザインのテクニック紹介や解説をしているアカウントが多数あって、回覧板みたいな感じで気軽に見れるし、
こういう情報収拾もSNSの使い方の一つとして良いですよね〜:両目:
他にもいくつか私がフォローしているものを2つほど、
暇つぶしにでもぜひご覧ください！
https://www.instagram.com/noramoji/?hl=ja
https://www.instagram.com/designkenkyujo/?hl=ja
Gather.Town／オススメのインスタアカウント
投稿者：堤
下記使う機会があったのですが、ア○ーバピグのようなバ○ビレッジのような
懐かしい感じもありつつ仮想出社というのが新しくておもしろい気がしました。
英語なのでちょっとわかりにくいですが操作自体は簡単です！
「レトロRPG風デザインのオンラインビデオ通話スペース『 Gather.Town 』で”出社して仕事＆気軽に雑談”を楽しく仮想体験！」
https://dev.classmethod.jp/articles/gather-town-as-a-virtual-office/
「Gather.Town」
https://gather.town/
西さんがお勧めインスタ書いてらしたので私からもぜひ…息抜きにどうぞ！！
https://www.instagram.com/palette33jp/
SEO・ディレクションドリル
投稿者：土佐
SEOの良さそうな記事を見つけましたので、共有いたします！
ドリル形式になってますので、会社全体でテストとかしても良いかもですね。。。
https://www.seohacks.net/blog/7289/
あと、ドリル関連でもう一つ良さそうな記事見つけましたので共有いたします！
(この記事をいくつかピックアップしてディレクターに覚えてもらったら、だいぶスムーズにディレクション進むのかなと思ったり、思わなかったり。。。。)
https://baigie.me/officialblog/2019/10/30/web-design-workbook/
バースデーカラーと性格を知るBirthday Color
投稿者：尾髙
今日は息抜きで、誕生日からバースデーカラーと性格を知るWebサイトBirthday Colorの紹介です。
皆さん、合ってますかね？
http://birthday-color.cafein.jp/