週刊Webテク通信

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

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

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

1. Everything I Learned About min(), max(), clamp() In CSShttps://ishadeed.com/article/css-min-max-clamp/

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

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

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

図1 CSS関数のmin,max,clampを詳しく解説

図1 CSS関数のmin,max,clampを詳しく解説

2. 7 best practices for using photography in UI design | Dribbble Design Bloghttps://dribbble.com/stories/2020/05/05/7-best-practices-photography-ui-design

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

  1. 高品質な写真にこだわる
  2. ストック写真っぽくない写真を使う
  3. テキストを載せたとき十分なコントラストを保つ
  4. 関連性のある画像だけを使う
  5. 高い解像度の写真を使う
  6. 同じモチーフのものを繰り返し使う
  7. Less is more(少ない方が豊かである)

図2 UIデザインに写真を使うときの7つのヒント

図2 UIデザインに写真を使うときの7つのヒント

3. The Pragmatic Designer: Local and Self Hosted Design Tools by Stéphanie Walter - UX designer & Mobile Expert.https://stephaniewalter.design/blog/the-pragmatic-designer-local-and-self-hosted-tools-for-banking-insurance-and-other-institutions/

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

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

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

図3 オンラインデザインツールの代替となるツールの紹介

図3 オンラインデザインツールの代替となるツールの紹介

4. 3 Tips to Master a Minimalist Web Designhttps://www.searchenginejournal.com/minimalist-web-design/361934/

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

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

  1. 視覚要素
  2. 色とコントラスト
  3. 空白

図4 ミニマリストのウェブデザインをマスターするためのヒント

図4 ミニマリストのウェブデザインをマスターするためのヒント

5. 20 Amazing Examples of Neumorphism - New Design Trends 2020 - Web Design Ledgerhttps://webdesignledger.com/30-examples-of-neumorphism-design/

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

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

図5 ニューモーフィズムの作品例いろいろ

図5 ニューモーフィズムの作品例いろいろ

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

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

everysize - Check your responsive webpage looks great in every size 🖥 💻 📱 👀https://everysize.kibalabs.com/

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

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

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

図6 複数画面サイズでのウェブページ表示チェックツール

図6 複数画面サイズでのウェブページ表示チェックツール

今週の気になるWebネタ

ビデオ会議などの自己紹介に役立つ「バーチャル名刺背景ジェネレーター」 - CNET Japanhttps://japan.cnet.com/article/35153317/

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

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

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

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/