週刊Webテク通信

2021年9月第4週号 1位は，UIデザインにアイコンを使うときに守るべき10のルール，気になるネタは，音楽機器のズーム社，商標権侵害でWeb会議「Zoom」提供のNECグループ会社を提訴

Webテク, Webデザイン, Web広告, UI, CSS, カラーパレット, グラデーション, 個人情報

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

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

1. 10 iconography rules to follow in UI design | Dribbble Design Bloghttps://dribbble.com/stories/2021/09/15/ui-icon-tips

UIデザインにアイコンを使うときに守るべきルールをまとめています。

  1. アイコンをシンプルに保つ
  2. アイコンを認識可能にする
  3. アイコンに意味を与える
  4. アイコンがスケーラブルなことを確認する
  5. アイコンのアクセシビリティに配慮する
  6. 色に注意する
  7. 常にベクターデータを使う
  8. アイコンを均一に保つ
  9. わかりやすさを優先する
  10. 誰もが知っているアイコンを使う

10は，家のアイコンはホームページ，三本線はハンバーガーメニュー，虫眼鏡は検索，コンテンツの編集・修正は鉛筆，サムズアップやハートは「いいね」といった，既に意味が広まっているアイコンを利用すべきとということです。

図1　UIデザインにアイコンを使うときに守るべき10のルール

図1　UIデザインにアイコンを使うときに守るべき10のルール

2. Designing Beautiful Shadows in CSShttps://www.joshwcomeau.com/css/designing-shadows/

CSSで美しい影をデザインする方法をまとめた記事です。

  1. ページ上の各要素が同じ光源から照らされているように影を調整する
  2. 複数の影をレイヤーで重ねてリアルな影を作る
  3. 色あせた灰色の影にならないように色を微調整する

以上3つの方法を解説しています。1を実現するのは面倒そうですが，Reactとstyled-components，CSS変数を使って実現する例も紹介していました。

図2　CSSで美しい影をデザインする方法

図2　CSSで美しい影をデザインする方法

3. Minding the "gap" | CSS-Trickshttps://css-tricks.com/minding-the-gap/

CSSのgapプロパティがどのように機能するかを丁寧に説明しています。CSSグリッドとFlexboxでのgapの理解を深めることができることでしょう。

マージンやパディングで空白を調整するよりgapを使うメリットやデバッグ方法も解説していました。

図3　CSSのgapプロパティの解説

図3　CSSのgapプロパティの解説

4. Colors & Fontshttps://www.colorsandfonts.com/

Webデザイナー，開発者のためにカラーパレット，グラデーションなどを提供しています。

テキストとして扱える記号類を探してコピーできるツールや，マッチするフォントの組み合わせをGoogleフォントからセレクトしたものもありました。

図4　色とタイポグラフィに関するお役立ちサイト

図4　色とタイポグラフィに関するお役立ちサイト

5. 20 Extremely Creative Web Layoutshttps://www.awwwards.com/20-extremely-creative-web-layouts.html

独創的なレイアウトのWebデザインを多数紹介した記事です。

グリッドを崩したレイアウトのサイトを集めていて，タイポグラフィがデザインの中心になっているものが多いようです。

図5　独創的なレイアウトのWebデザインいろいろ

図5　独創的なレイアウトのWebデザインいろいろ

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

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

個人情報テストデータジェネレーターhttps://testdata.userlocal.jp/

ダミーの個人情報を生成する，無料で利用できる日本のサービスです。最大1万行までのCSV／TSV／Excelファイルとしてダウンロードできます。

氏名や電話番号，住所などのほか，クレジットカード番号やマイナンバーも生成できます。名前を姓と名で別の項目にするなどのカスタマイズも可能で，郵便番号は住所に応じたものが出力されるなど考えられたデータになっています。

システム開発時のセキュリティチェックなどに使うため，本物の会員情報などと同じ品質のデータを生成するために作られたとのこと。Webデザインのダミーデータにも便利に使えそうです。

図6　ダミーの個人情報を生成する日本のサービス

図6　ダミーの個人情報を生成する日本のサービス

今週の気になるWebネタ

音楽機器のズーム社，商標権侵害でWeb会議「Zoom」提供のNECグループ会社を提訴 「和解金での解決を排除」 - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2109/17/news157.html

ビデオ会議システムZoomの国内販売代理店第1号のNECネッツエスアイを，音響機器メーカーのズーム社が商標権侵害で提訴しました。たしかに紛らわしいですが，提訴するとは思ってもみませんでした。

「電話・メール窓口に（ビデオ会議のZoomについての）問い合わせが殺到」「⁠株価が2日連続でストップ高を記録し，その後急落」と大きな影響を受けているようで，今でも「日々，支障がある」そうです。

日本のメーカーのZOOMもビデオ会議のZoomもどちらも好きなので，なんとかうまく解決できないかと思います。名称を「Zoom by ZVC」のように変えて，音響機器メーカーのズームとは違うことを広めるキャンペーンをするなどが落としどころじゃないでしょうか。

Webテク, Webデザイン, Web広告, UI, CSS, カラーパレット, グラデーション, 個人情報

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote