2021年4月のログ
目次
SSL化について／Youtubeの商品表示機能テスト
投稿者：豆成
Chrome 90 からはセキュアな https:// 接続がデフォルトに！
4/13日に90がリリースされます。
それに伴いまして、アドレスバーにhttp://を省略して、example.com（例）と入力すると、
今までは、http://example.com に接続されるところが、 https://example.com がデフォルト接続になるそうです！
※もちろん、SSL化されていないサイトはhttp://のままです！ちょっと便利に？
https://news.mynavi.jp/article/20210324-1831378/
Youtubeの動画中に出たきた商品が、その場で一覧に出てくる機能をテスト中！（アメリカ）
今は、Youtubeを見て「この商品よさそう～」からの検索……という流れが主流ですが、
現在、アメリカでは試験的に、Youtubeに商品一覧がリスト表示される機能をテストされているそう！
※でも、どのみち、どのサイトが安いとか検索かけそうだけど笑
https://support.google.com/youtube/thread/18138167?hl=en
WEBフォントについて
投稿者：東江
お疲れ様です。先日フォントを調べていた時に見つけた記事を共有いたします！内容的には当たり前のことしか書いていないんですが、FONTPLUSを発案した方の記事だったので、初心者にはわかりやすい記事でした。ただ、サイトで紹介されている「Canon」のサイトのスピードは体感では普通でしたが測ってみるとそんなに速くなかったのと、ページの一番下にあるコメントもちょっと笑えました（笑）
https://webtan.impress.co.jp/e/2019/04/04/32138
背景がオシャレに出たり消えたりするサイトと実装方法
投稿者：河鰭
背景がおしゃ～に出たり消えたりするサイトを共有します。
手軽に組み込めるのが一番のメリットかなと思いました（CSSコピペ+CSSに対応した独自属性をhtmlに書き込むだけ）。
あと、ローディング画面との相性も良さそうだなと。
https://www.transition.style/
分報でもこのサイトを貼ったので見た人もいるかと思いまして、ざっくりサンプルも作ってみました。
サンプルでは属性ではなくクラス名に該当のアニメーションを設定しています。
動作を見せたいだけなので中身はあまり見ないで頂けると幸いです！
https://codepen.io/kk1005/pen/VwPzOpq
Adobeの和文フォントがもりもり追加された
投稿者：番外編（河鰭）
アドビフォントで和文フォントがもりっと追加になったみたいなので共有です。
きりぎりすとかもあるようです～
https://coliss.com/articles/build-websites/operation/design/adobe-fonts-update-202104.html
CSSリセットについて
投稿者：番外編（芝山）
新しいCSSリセットについての記事見つけましたので共有しておきます～
各ブラウザの最後から5つ前までのバージョンをサポートしてる様子
https://coliss.com/articles/build-websites/operation/css/reset-and-normalizer-reseter-css.html
CSSのグラデーションについて理解を深める
投稿者：有元
グラデーションたくさん使用する案件があったので今までコピペですませていたグラデを下記記事見てちょっと理解深めました。共有いたします。
https://ics.media/entry/200212/
レイヤーの整理について
投稿者：芦田
前回のMTGで、デザインデータをわかりやすくフォルダなどでまとめてレイヤーを整理しましょうという議題があったのでそれに関わる記事を共有します。
私自身も出来ているところとできていないところがあり参考になりました！
https://b-risk.jp/blog/2019/12/code-friendly/
視覚障害・高齢者の色の見え方について
投稿者：相田
皆さんご存知かもしれませんが…色の見え方について共有します！
高齢者の方は黄色が見えにくかったり、色覚に障害をお持ちの方は特定の色が判別しにくかったりします。
双方をカバーする色の組み合わせは「寒色＆暖色かつ、明度に差をつける」だと言われています。
https://tsutawarudesign.com/universal1.html
https://mynavi-creator.jp/blog/article/web-accessibility-for-web-designer
今後さらに高齢者の方たちにネットが普及してくると思いますし、高齢者をターゲットにしたホームページを制作することもあるかと思います。
こういった色の組み合わせについても配慮して制作できるといいなと思います！
グリッドレイアウトの理解
投稿者：本田
私がずっと「そろそろやんなきゃな…」「でも腰が重いな…」と思ってることの1つに
「グリッドレイアウトの理解」があります。
そもそも何で腰が重いかというと
・難しそう（実際難し…そうにみえる）
・使わなくても大体のレイアウトはfloatやflexboxでできる
が、放置してても世の技術はどんどん進むので重い腰をあげようと思い
最近色々なWeb記事とかを見てるんですが、
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Grids
https://www.itti.jp/web-design/quick-css-grid/
https://www.archetyp.jp/blog/css-grid-2/
皆さん良い勉強法や俺が教えてやるぜ！という方がいらっしゃいましたら是非お願いします…。
（ジェネレーターとかも…あるけど…一定の理解は結局必要ですしね…）
2つのアイコンを選択するとアイコンの推移がアニメーションで表現できる＆コード生成
投稿者：芝山
2つのアイコンを選択するとアイコンの推移がアニメーションで表現できる＆コードを取得できるそうです。不自然な動きのものもありますが、結構面白く使えるのではないかなと。
https://cssicon.space/#/animate
オンラインホワイトボードサービス「Miro」
投稿者：西
無料版でも共同編集できるし、付箋を貼っていくブレインストーミングのスタイルなので、勉強会の時の意見出しに良さそうだなと思いました。
無料版だとボードの数が3つまでで、データ容量300MGまでみたいですが、個人でも、複数人でも十分活用できるかと！
https://tech-camp.in/note/pickup/87409/
https://dsinside.digitalstage.jp/entry/2020/05/29/164937
コロナの時代に、デザインができること
投稿者：堤
コンビニで見かけたpenの特集がちょっとおもしろそうでした。
「コロナの時代に、デザインができること。」
https://www.pen-online.jp/magazine/pen/517-korona/
パラパラ見た感じは、グラフィックや広告より空間的なデザインの話が多く感じましたが共通する部分もあるかも？しれません？？
あと報告みたいなものなのですが、テキストエディタをsublime textからみなさん使ってらっしゃると小耳にはさんだ「VScode」に変えてみたのですがとっても使いやすくて重宝しそうです！
フォルダのデータを表示できるのいいですね！
ただ機能がたくさんありそうで…
日本語化以外でおすすめあればぜひぜひ教えていただきたいです！