週刊Webテク通信

2019年10月第4週号1位は、均整が取れているのにUIが間違って見える例と解決法、気になるネタは、初代ウォークマン“復刻”、カセットが画面で回る限定「A100」

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

1. Visually distorted - when symmetrical UI looks all wronghttps://www.mobilespoon.net/2019/08/visually-distorted-when-ui-looks-all.html

目の錯覚により、均整が取れているのにUIが間違って見える例と解決法を紹介しています。

同じ色でも使われている面積によって見え方が違うとか、数値上は揃っているのに形状のせいで揃って見えないなどの例を集めたものですね。

  1. ボタンと同じ色のテキストでは明るすぎる
  2. 同じフォントでも小さな文字は細すぎるように見える
  3. 背景画像に載った文字が読めない
  4. 行間を間違っている
  5. 整列していても揃っているように見えない
  6. 一貫性のないフォームの配置
  7. 整列されてないアイコン
  8. 非対称の形状
  9. テーマの違うアイコン
  10. 複数行のラベルテキスト
  11. 長いコピー
  12. タップする領域が小さすぎる
  13. うるさい角丸
  14. うるさい境界線
  15. 透明度の代わりにグレーを使う
  16. 迷惑なダークモード
図1 均整が取れているのにUIが間違って見える例と解決法
図1 均整が取れているのにUIが間違って見える例と解決法

2. CSS Circles - Cloud Fourhttps://cloudfour.com/thinks/css-circles/

CSSで円を作る方法をまとめた記事です。

以下、それぞれの方法でのコーディング例と、良い点・悪い点を解説しています。

  • Border-radius
  • SVG
  • Clip Path
  • Radial Gradient

また、画像を丸くトリミングするにはどの方法がいいかの解説や、テキストを円の中に入れる方法なども紹介しています。

図2 CSSで円を作る方法のまとめ法
図2 CSSで円を作る方法のまとめ

3. How to design delightful dark themes — HeyDesignerhttps://heydesigner.com/blog/how-to-design-delightful-dark-themes/

気持ちの良いダークテーマをデザインする方法を解説しています。

  1. 奥にあるものを暗くする
  2. コントラストを再検討する
  3. 明るい色の大きなブロックを減らす
  4. 純粋な黒・白を使わない
  5. 色を濃くする
図3 気持ちの良いダークテーマをデザインする方法
図3 気持ちの良いダークテーマをデザインする方法

4. How Ultra-Thin Lines in Web Design Can Create an Impacthttps://speckyboy.com/ultra-thin-lines-web-design/

極細の線がウェブデザインにどのようにインパクトを与えられるのか、事例とともに紹介しています。

垂直線と垂直リズムが昨年流行ったことから生まれた、新たな興味深い傾向なのだそうです。

図4 極細の線がウェブデザインにどのようにインパクトを与えられるのか
図4 極細の線がウェブデザインにどのようにインパクトを与えられるのか

5. Vector people designs you should download or your projectshttps://www.designyourway.net/blog/resources/vector-people/

ベクターで作られた人物イラスト素材を多数紹介しています。

最近流行りのフラットで無機質なものや、漫画チックなもの、シルエットなどもあります。

図5 ベクターで作られた人物イラスト素材いろいろ
図5 ベクターで作られた人物イラスト素材いろいろ

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

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

Color Designer - Simple Color Palette Generatorhttps://colordesigner.io/

Color Designerは、カラーパレットの作成を支援するため、濃淡のバリエーションを生成するサービスです。選択した色を基準に、白色、黒色までの濃淡の変化のパレットを自動で生成します。

ベースの色は用意されたパレットから選ぶか、カラーピッカーで数値でも指定でき、濃淡を何段階まで作るかの設定も可能です。ベースの色に近い画像をAdobe Stockから探せる機能も面白いです。

Color Designerには関連ツールとして、カラーパレットのジェネレーター、グラデーションのジェネレーター、色を混ぜるツール、色の名前を教えるツール、色の値をRGB、HEX、HSL、CMYK、HSVの間で変換するツールがあります。

図6 ベースカラーを基準に色の濃淡のバリエーションを生成するサービス
図6 ベースカラーを基準に色の濃淡のバリエーションを生成するサービス

おすすめ記事

記事・ニュース一覧