週刊Webテク通信

2020年2月第2週号 1位は，色彩理論をCSSでの色の設定に生かすためのヒント，気になるネタは，Googleマップが15周年で新ロゴに 5タブの新デザインと新機能も

Webテク, Webデザイン, web広告, 色彩理論, CSS, UI, UX, Googleマップ

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

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

1. Turning color theory into CSS — a quick dive - UX Collectivehttps://uxdesign.cc/turning-color-theory-into-css-a-quick-dive-7c6e485ac701

色彩理論をCSSでの色の設定に生かすためのヒントを紹介した記事です。

色はHSLa（色相，彩度，明度，アルファ）で設定するとコントロールしやすく，CSSでの色指定にhslaを使い，色相（h）の数値を変えることで暖色のカラーパレットを作る方法が紹介されています。

明度（L）だけを変更して色合いを変えたパレットの例もありました。

また，色に関して従うべきルールを3つ紹介しています。

  1. 低コントラストの色の組み合わせを避ける
  2. ネオン色を避ける
  3. 振動するように見える色の組み合わせを避ける

図1　色彩理論をCSSでの色の設定に生かすためのヒント

図1　色彩理論をCSSでの色の設定に生かすためのヒント

2. Bright Colors in UI Design: Benefits and Pitfallshttps://design4users.com/bright-colors-ui-design/

UIデザインに明るい色を使うことによる利点と欠点をまとめています。

明るい色でUIを強化できる利点
  • 読みやすさの向上
  • ナビゲーションをはっきりさせ，直感的なインタラクションを強化
  • 認識可能性
  • ムードと雰囲気を決める
  • 流行りの見た目とスタイル
明るい色のUIの欠点
  • 明るい色は調和を取るのが難しい
  • 強調部分が目立たなくなる
  • 全てのユーザー層に適しているわけではない
  • モバイル画面では鮮やかな色はコントラストが強すぎるように見える場合がある

図2　UIデザインに明るい色を使うことによる利点と欠点

図2　UIデザインに明るい色を使うことによる利点と欠点

3. UX Design Trends: The Factors That Matter Most in 2020 - Business 2 Communityhttps://www.business2community.com/web-design/ux-design-trends-the-factors-that-matter-most-in-2020-02281958

これからの10年を見据えて必要な，UXデザインのトレンドを4つ解説しています。

  1. ユーザーの心配を緩和するためのデザイン
  2. 飽和した市場に向けた体験をデザインする
  3. 情報アーキテクチャとナビゲーションの再考
  4. UXをマーケティング戦略の中心に置く

図3　UXデザインのトレンド4つ

図3　UXデザインのトレンド4つ

4. 10 No Design Tools You Need Right Now - Logoblyhttps://logobly.com/blog/10-no-design-tools/

時間やお金をかけずにデザイナーでなくてもデザインできるツール，サービス，素材をまとめた記事です。

背景切り抜きが簡単にできるサービスや，カスタマイズできるイラスト，写真コラージュを作るツールなどを掲載しています。

図4　デザイナーでなくてもデザインできるツール，サービス，素材

図4　デザイナーでなくてもデザインできるツール，サービス，素材

5. How to mock up UX writing | Dropbox Designhttps://dropbox.design/article/how-to-mock-up-ux-writing

UXライターのためのモックアップの作り方を提案した記事です。

使用するツールをいくつか紹介しています。

  • Skitch
  • Keynote，PowerPoint，Google スライド
  • ウェブブラウザの「デザインモード」
  • Figma，Sketch

図5　UXライターのためのモックアップの作り方

図5　UXライターのためのモックアップの作り方

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

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

Neumorphism/Soft UI CSS shadow generatorhttps://neumorphism.io/

最近話題の「ニューモーフィズム」デザインのCSSを生成するサービスです。ニューモーフィズムの特徴である，浮いているのではなく盛り上がっているような効果を簡単に作れます。

色，サイズ，盛り上がり方の形状，光源の位置，角丸の大きさや影の長さなどを調整できます。ページ全体の背景色と矩形の中の色が同じになるので，背景色が白ではないデザインが基本となるので注意が必要です。

ニューモーフィズムのコーディングを集めた「Exploring Neumorphism Through Code Snippets」という記事もありました。ニューモーフィズムのボタンやメニューなどが紹介されていました。

図6　ニューモーフィズムのCSSを生成するサービス

図6　ニューモーフィズムのCSSを生成するサービス

今週の気になるWebネタ

Googleマップが15周年で新ロゴに 5タブの新デザインと新機能も - ITmedia NEWShttps://www.itmedia.co.jp/news/articles/2002/07/news059.html

Googleマップが誕生15周年を記念してロゴを変更しました。iOS／Androidアプリのアイコンが変わっています。アプリのデザイン変更と新機能は段階的に反映されるそうです。

現在3つのタブが5つに増えて，そのうちの1つはマイプレイスへのショートカットになるそうです。マイプレイスは意外と使われてない機能だと思うので，タブになって目立って知る人が増えるといいでしょう。

どんなアプリもアイコンの変更後は「前の方が良かった」という意見が出ますが，Googleマップのアイコンも同様な反応がたくさん見られました。また，アイコンが別のアプリと似ているといった指摘もありますが，このピンのマークで真っ先に連想するのはやっぱりGoogleマップなので，ほかが真似してると考えた方がいいと思います。

Webテク, Webデザイン, web広告, 色彩理論, CSS, UI, UX, Googleマップ

著者プロフィール

アシカガコウジ

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

http://bit.ly/ashikaganote