gihyo.jpサイトのロゴ

週刊Webテク通信

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

2020-02-13

ネットで見かけた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を生成するサービス

おすすめ記事

記事・ニュース一覧