週刊Webテク通信

2021年8月第3週号 1位は，モバイルファーストとデスクトップファーストの現状，気になるネタは，Zoom，生徒は先生の顔しか見えなくなるバーチャル授業向け機能を追加

Webテク, Webデザイン, Web広告, CSS, UI, グラデーション, ユニコード文字, Zoom

この記事を読むのに必要な時間：およそ 2.5 分

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から，Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は，2021年8月9日～15日の間に見つけた記事のベスト5です。

1. The State Of Mobile First and Desktop First - Ahmad Shadeedhttps://ishadeed.com/article/the-state-of-mobile-first-and-desktop-first/

モバイルファーストとデスクトップファーストの現状についてまとめています。CSSを作成するときモバイル向けの小さいビューポート向けから作るか，デスクトップ向けの大きいビューポートから作るかです。

この記事の作者がTwitterでアンケートを取ったところ，以下の結果だったそうです。

  • モバイルファースト：33.3%
  • デスクトップファースト：21.9%
  • 両方の組み合わせ：24.7％

どちらかを決めることに固執せず両方のアプローチを混ぜる方法や，メディアクエリを使わずにレスポンシブレイアウトを構築する方法なども解説していて参考になります。

図1　モバイルファーストとデスクトップファーストの現状

図1　モバイルファーストとデスクトップファーストの現状

2. Types of Contrast in User Interface Designhttps://blog.tubikstudio.com/contrast-in-user-interface-design/

ユーザーインターフェイスデザインでのコントラストの種類と，ユーザー体験において重要な理由を解説した記事です。

UIデザインのコントラストの種類は以下の6つです。

  1. 色
  2. サイズ
  3. 形状
  4. 位置
  5. テクスチャ
  6. 方向

そして，コントラストが重要な理由は以下の5項目でした。

  • より強力な視覚的な階層構造
  • より良いフォーカス
  • オリジナリティのある雰囲気
  • 読みやすさの向上
  • 人間の自然な知覚と反応への対応

図2　UIデザインでのコントラストの種類と重要性

図2　UIデザインでのコントラストの種類と重要性

3. Exciting New Tools For Designers, August 2021 | Webdesigner Depot Webdesigner Depot » Blog Archivehttps://www.webdesignerdepot.com/2021/08/exciting-new-tools-for-designers-august-2021/

デザイナーのための新しい刺激的なツールをまとめた記事です。各種ジェネレーター，ツール，ライブラリ，素材，フォントなどを紹介しています。

Webサイト構築ツールとしては，シンプルなインターフェイスで構築できる「Typedream⁠」⁠，1ページ完結のシンプルなサイトに特化した「Carrd」の2つのサービスを掲載していました。

図3　デザイナーのための新しい刺激的なツールいろいろ

図3　デザイナーのための新しい刺激的なツールいろいろ

4. Useful Figma Plugins And Tools — Smashing Magazinehttps://www.smashingmagazine.com/2021/08/figma-tools-plugins-resources/

Figmaのプラグインと関連ツールをまとめています。カラーマネージメント，SVG図形，アニメーションなどいろいろなものを紹介していました。

最後に，Figmaのツール＆テンプレートを集めたサイトやコミュニティへのリンクもあります。

図4　Figmaのプラグインと関連ツール

図4　Figmaのプラグインと関連ツール

5. 42 CSS Gradients that look stunning | Baselinehttps://baseline.is/tools/css-gradients/

グラデーションが多数用意してあり，CSSのコードをコピーできます。あらかじめ豊富なグラデーションを用意していますが，色や角度のカスタマイズも可能です。

Baselineというブランドデザインを作成するサービスが提供している無料ツールのひとつです。

図5　CSSグラデーションのコードを取得できるサービス

図5　CSSグラデーションのコードを取得できるサービス

そのほか，最近の記事の中から，気になるニュース記事を紹介します。

先週の気になるWebサービス

Shapecatcher: Draw the Unicode character you want!https://shapecatcher.com/index.html

Shapecatcherはユニコードのキャラクターを絵で描くことで探せるサービスです。読めない文字や図形を探すのに役立ちます。11817個のUnicode文字グリフから探すことができるそうです。

とはいえ，今のところ日本語，韓国語，中国語には対応していないのはとても残念です。精度もそれほど高くないと感じました。とにかく類似したものをたくさん出す設計なのかもしれません。

テキストとして扱える図形を探す用途としては実用性もありそうです。出てきた候補からコピーしてテキストとしてペーストできます。素朴な作りのサイトで，応援したい気持ちになりました。

図6　ユニコード文字を絵で描いて探せるサービス

図6　ユニコード文字を絵で描いて探せるサービス

図7　Shapecatcherで絵を使って検索した例

図7　Shapecatcherで絵を使って検索した例

今週の気になるWebネタ

Zoom，生徒は先生の顔しか見えなくなるバーチャル授業向け機能を追加 - Engadget 日本版https://japanese.engadget.com/zoom-new-focus-mode-block-student-disatractions-060016109.html

Zoomにフォーカスモードが追加されました。リモート授業のときに，先生は生徒全員の映像を見られるけど，生徒は先生の映像しか見られなくする機能です。生徒同士の映像が見られないことで，授業に集中しやすくなる狙いがあります。

授業中に特定の生徒の映像を全員に表示するように先生が操作することも可能です。また，フォーカスモードと通常のモードとは簡単に切り替えられるので，授業が終わったらみんなの顔を見ながらホームルームもできますね。

ウェビナー用プランを使わずにオンラインセミナーをやるときにも便利かもと思いましたが，フォーカスモードでも参加者の名前は表示されるので，ビデオオフで参加してもらうのとそれほど差がないかもしれません。フォーカスモードは無料プランでも使えますが，ブラウザでZoomにログインして設定をONにする必要がありました。

Webテク, Webデザイン, Web広告, CSS, UI, グラデーション, ユニコード文字, Zoom

著者プロフィール

アシカガコウジ

フリーのWebデザイナー＆ライター。ポッドキャスト「アシカガCAST」でデジタル活用のヒントを発信中。シャープMZ-80Bからのパソコンユーザーで，Macintosh IIciからのMacユーザーでApple好き。Webテク情報やツール（ソフトウェア）の案内，デジタル活用情報をまとめた「アシカガノオト」をNotionで公開しています。

http://bit.ly/ashikaganote