週刊Webテク通信

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

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

ネットで見かけた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 ベースカラーを基準に色の濃淡のバリエーションを生成するサービス

今週の気になるWebネタ

初代ウォークマン“復刻”,カセットが画面で回る限定「A100」 - 税別約4.2万円で11月発売 | マイナビニュースhttps://news.mynavi.jp/article/20191016-910000/

ウォークマン40周年記念モデル「NW-A100TPS」は,ストリーミングに対応したウォークマンA100シリーズに,初代ウォークマンTPS-L2デザインのソフトケースがセットになったスペシャルパッケージです。

ウォークマンの画面にカセットテープのスクリーンセーバーを表示してケースに入れると,ケースの穴からカセットテープが回っている様子が見えて,昔のカセットウォークマンのように見えるという仕掛けです。

面白い仕掛けではありますが,再生中はカバンの中などに入れることになるので,電車の中などでさりげなくアピールできないなと思いました。早送りや巻き戻しのときも,もちろん画面上のカセットテープは回るそうなので,人に見せると盛り上がるでしょう。

著者プロフィール

芦之由(あしのよし)

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

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

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