2020年5月第3週号 1位は、より柔軟なレスポンシブデザインが可能になるCSS関数のmin、max、clampを詳しく解説、気になるネタは、ビデオ会議などの自己紹介に役立つ「バーチャル名刺背景ジェネレーター」

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

CSS関数のmin、max、clampを詳しく解説した記事です。2020年4月8日にFirefoxでサポートされたので、すべての主要なブラウザで使えるようになったそうです。

これらのCSS関数を使うことで、ビューポートを使わずにレスポンシブにサイズを変更できます。ブレイクポイントごとに数値を変更するのとは違い無段階に可変するため、より柔軟なレスポンシブデザインが可能になります。

起こりうる問題や実用的な例、非対応のブラウザを考慮した記述方法を紹介しています。

UIデザインに写真を使うときのヒントを7つまとめています。

オンラインのデザインツールと、その代替となるローカルで動くデザインツールを紹介した長い記事です。

チームの共同作業との親和性の高いオンラインのデザインツールが増えてきたものの、セキュリティ上の理由でオンラインツールを使えない企業もあります。

そこで、各種オンラインデザインツールの代替となるローカル、セルフホスティング、オープンソースのものを紹介するとともに、マイクロソフトオフィスなど企業で一般的に使われているツールで代用するコツやテクニックを解説しています。

ミニマリストのウェブデザインをマスターするためのヒントをまとめた記事です。

以下の3つの項目に分けて解説しています。

ニューモーフィズムの作品例を多数まとめています。リッチで新しい感じのするデザインばかりです。

この記事ではニューモーフィズムについて、「⁠スキューモーフィズム、フラットデザイン、リアリズムを組み合わせた新しいモダンなグラフィックデザイン手法」と解説していました。

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

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

everysizeはウェブページの複数画面サイズでの表示チェックをするサービスです。ブラウザ上でレスポンシブデザインの確認作業ができます。

ウインドウサイズは、あらかじめ用意されているiPhone、iPadなどのデバイス名から選ぶか数値で指定します。表示倍率も5段階に変更可能です。複数のウィンドウを画面上に自由に配置できます。

ちなみに、同様のことができるアプリケーションとして、Sizzy（Mac、Windows、Linux⁠）⁠、Solis（Mac）があり、わたしはSolisを使っています。Sizzyは月5ドルからのサブスクリプションで、プランがいくつかあります。Solisは29.99ドルの買い切りです。

名刺形式のバーチャル背景が作れる「バーチャル名刺背景ジェネレーター」が登場しました。URLを入力すると自動でQRコードを生成してバーチャル背景画像に入れてくれます。

名刺管理サービス「Eight」もQR名刺交換機能を搭載するとともに、QRコード入りバーチャル背景を作成できるようになりました。ビデオ会議でオンラインで繋がってるのなら、テキストチャットでURLを送るという手もあると思いますが。

国内外のいろんな企業がバーチャル背景用画像を配布して話題になりましたが、今後はバーチャル背景ジェネレーターも増えてきそうですね。また、背景を隠すためのダンボールの什器など、リアル背景用グッズもいろいろ登場すると思います。