2019年8月第5週号 1位は、ボタンに処理中という状況を表示する必要があるとき、気になるネタは、BuzzFeedのMoodFeed機能は気分に合ったコンテンツを勧めてくれる

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

処理の実行中という状況をボタンに表示する必要があるケースと、処理中を表すボタンデザインについて解説しています。

2秒以上かかる操作には、読み込み状態を視覚的に見せることで、ユーザーがもう一度ボタンを押さないようにします。処理中を表す要素はボタンの外ではなく、中に入れるべきとのことです。

ボタンは無効状態だとわかる色にして、処理中もボタンのラベルテキストは表示し続けます。ボタンの幅が限られている場合、ボタンに処理中を表すインジケーターを表示せず、ボタン自体をプログレスバーのようにして進行状況を表すと良いということでした。

フッターデザインの8つのヒントをまとめた記事です。

最近リリースされたデザインの優れたサイトを20個まとめています。

バリアブルフォントを販売しているKilotypeは、文字の上でカーソルを左右に動かすとウェイトが変わり、上下に動かすと傾きが変わるというインタラクションが面白いです。

ほかにも、ビジュアルとインタラクションに力を入れたサイトが揃っています。

デザイナーのための色に関するツールをまとめた記事です。

カラーパレットを作るツール、コントラストのテストツール、CSSグラデーションのジェネレーターなどを紹介しています。

ウェブデザイナー向けのChrome拡張機能を10個紹介しています。

各種画面サイズへリサイズ、画面の動画キャプチャ、デベロッパーツール系のものなど、便利な拡張機能がまとめられています。

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

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

波状のオブジェクトを作ってSVGを生成するサービスです。SVGコードをコピーするかダウンロードできます。

滑らかな波状だけでなく、ギザギザと階段状のオブジェクトも作れます。波の盛り上がってる部分の数をスライダーで調整できますが、高さや位置はランダムです。サイコロマークのアイコンボタンで、気に入るまでランダムに変更できます。

最近のウェブデザインで流行の波型を簡単に作れて便利だと思います。Figma上で直接このジェネレーターを使えるプラグインもあります。

米BuzzFeedが、その日の気分に合ったコンテンツを見つけられるMoodFeedという機能をテスト的に始めました。記事に付けられたカテゴリではなく、AIでコンテンツを選んでいるようです。

6種類の気分を選ぶインターフェイスが、ホイール状でグルグル回せるところが面白いと思いました。ダブルクリックするとランダムで回ります。遊びゴコロある選び方がいいですね。

サイコロと同じ6種類というのが丁度いい選択肢の数なのかもしれません。Facebookの「いいね！」の気分を表す絵文字も6種類でした。