週刊Webテク通信

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

ネットで見かけた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. 方向

そして、コントラストが重要な理由は以下の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で絵を使って検索した例

おすすめ記事

記事・ニュース一覧