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

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

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

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

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

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

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

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

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

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

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

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

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

デザインツールのCanvaが約11億円調達、企業向けバージョン提供へ | TechCrunch Japan
毎月190カ国超で2000万人以上がCanvaにサインインしているそうです
スマホと連携して祈れる電子ロザリオ「Click to Pray eRosary⁠」⁠--ローマ教皇から - CNET Japan
Android、iPhoneの専用アプリと接続して使い、十字を切ると起動するとのこと
Slackにタスクを合理化する新機能「ワークフロービルダー⁠」⁠ | マイナビニュース
「⁠カスタムのワークフローを作成して日常的な業務の自動化を実現する新しいビジュアルツール」が登場しました

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

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

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

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

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

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

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