arsro.net

[CSS] アプリでよく見かけるガイドのようなものを作る


WEB新規機能を実装したときに、ユーザーにその機能について知ってもらいたいし、もっと言うと使ってもらいたい🥺

そんなときに、画面全体に薄暗くして、注目してほしい部分だけ明るくしたい時がある。

たとえば、新規機能として「Bボタン」を追加した。

この「Bボタン」だけ薄暗くしたビューがかかっていない状態にしたい。

ただCSSだけで画面に切り抜いてゴニョゴニョする。みたいな方法がなさそう😣

結論

  1. 薄暗くしたビューの上に、明るく見せるため(切り抜いたように見せるため)の白いビューを配置

  2. 注目してほしいDOMのz-indexを大きくして、白いビューよりも上の最前面に配置

…こんな感じで🤔(今回は、JSで白いビューの位置をいじっている。)

ちなみに…

Intro.jsというのもあるので、それ使うとよりリッチなガイドのデザインができると思う。

なんて調べたらいいかよくわからなかったのもあるが、けっこうな時間を使って調べたものの、(この方法も含めて)ヒットしなかった。

結果的に社内の人と教えてもらって解決

たぶんもっといい方法がある気もするけど、現時点での解決方法はコレになるかな🤔