SFWとNSFWで世界観を分離。YouTube版とDLsite版を分けた理由

この記事では、サイト内にYouTube版とDLsite版の2つの異なるデザインを用意した理由とその仕組みについてお話しします。一般向けと大人向けで「見せ方」を分けることで、それぞれが求める目的に最適化できたという学びがありました。

なぜ2つの世界観を分けたのか

ASMRの音を数値化する私たちのサイトでは、主に「YouTube版」と「DLsite版」の2つのプラットフォームの作品データを扱っています。開発を進める中で、扱う作品の性質やサイトを訪れる方の目的によって、効果的な見せ方が違うことに気がつきました。

今回の学びでもあるのですが、一般向け（SFW：Safe for Workの略で、安全に閲覧できるコンテンツのこと）と、大人向け（NSFW：Not Safe for Workの略）の作品では、サイトに求められる役割が異なります。また、多くの方にサイトを知ってもらうための「集客」と、実際に作品を利用してもらうための「収益」という観点でも、最適なデザインは違ってきます。

そこで、同一のサイト（ドメイン）の中にありながら、世界観を完全に分けた2つの空間を作ることにしました。

それぞれに最適化したデザイン

具体的には、サイトのトップページをYouTube版として位置づけ、明るい雑誌のようなデザインにしました。こちらは検索エンジン（Googleなど）に好まれやすい構成を意識しており、ASMRに関するコラムなどのメディア一覧も一緒に表示しています。

一方、DLsite版（/dlsiteというURLに配置）は、暗い配色を採用しました。これは、音の分析データなどの数値情報が画面上でくっきりと際立って見える「データ映え」を重視したためです。こちらでは記事の表示は行わず、作品のデータそのものに集中できる環境を目指しています。就寝用に安全なASMRランキングなどを暗い部屋で見る際にも、暗い背景の方が目に優しいという利点があります。

スムーズな移動とテーマの切り替え

この2つの世界観は、画面上部のヘッダーにある切り替えボタン（トグル）を押すことで、いつでも相互に行き来できるようにしています。

さらに、サイト内の見た目（テーマ）は、現在見ている場所（セクション）によって自動で切り替わる仕組みを取り入れました。作品の種類に応じて色が変わるため、自分が今どちらの世界にいるのかが直感的にわかるように工夫しています。

この日の学び

• 一般向け（SFW）と大人向け（NSFW）、集客と収益といった目的に合わせて「見せ方」を分けることで、それぞれに最適化しやすい。
• 検索されやすさを重視する明るいデザインと、データ映えを重視する暗いデザインは、同一ドメイン内でも完全に分けて設計するのが有効である。
• 見た目を大きく変えても、ヘッダーのトグルやセクションごとのテーマ自動切り替えを設けることで、サイトの使い勝手はスムーズに保つことができる。