はじめに

ここ一年くらい、誰かさんがエディタ作ったせいかSparebeatの創作譜面サイトがそれまでと比べて急増しました。
しかし、ほとんどの管理人が創作譜面サイトで初めてのHTML～みたいな感じで、UX¹が良くないものが多いなと個人的に感じる今日この頃でございます。

某が最近作ったDog's HabitatのWebページはシンプルに見えますが、譜面を遊んでもらうことに対してかなり考えてUIを構築しています。
今回はそんなDog's Habitatを例に挙げつつ、創作譜面サイトを作っていく上で、UXを高めるために個人的にやってもらいたいことをいくつか挙げていこうかなって思います。

1. 譜面ページには設定ページへのリンクを置きなさーい！

ぶっちゃけ今回はこれを伝えたいためだけにこの記事を書いてます。これマジでやってほしい。

内容は章タイトル通りですね、譜面ページにSparebeat公式の設定ページへのリンクを置きましょう。
サイト管理人のみなさんの中にも他の創作譜面サイトの譜面を遊んでいる中で、ランダムつけたりミラーつけたりするときに設定ページまで飛ぶのにめちゃくちゃブラウザバックといった経験がある方が多いと思います。

ブックマークに登録して対応しているユーザーもいるかもしれませんが、全ユーザーがそうであるわけはありません。

**全てのユーザーがオプションの変更をスムーズに行えるようにするために譜面ページには設定ページへのリンクを設置するべきです。**譜面ページにリンクを置いておけば、そこから設定に飛び、設定を更新したらブラウザバックですぐに譜面ページに戻ることができます。

Dog's Habitatでは右上の歯車アイコンで設定ページへのリンクを表しています。これは公式の表示方法と同じになっていて、多くのユーザーにとってわかりやすいものであると期待されます。
注意としてはtarget="_blank"を設定するなどして別タブで開くようにしてしまうと、プレイしようとしている譜面に設定が適用されない可能性があります。

<a href="https://sparebeat.com/settings">設定ページ</a>

書くまでもないけど、一応置いておこう。
これをね！どこかに！設置するだけ！いいね？

2. 無駄にトップページをかませるのをやめなさーい！

なんかよくありますよね、こういうの。

ここはSparebeatの創作譜面サイトです！
譜面ページはこちら

Why Japanese People!!!
なんでトップページに大した内容書いてないのに譜面一覧ページをわざわざ分けてるんだよ！！！

はい。
ユーザーに無駄なアクションをさせるのはUXの観点では良くないとされます。創作譜面サイトの多くは創作譜面を提供するためだけのものでありますし、ユーザーの多くもそれを期待しています。トップページから創作譜面一覧ページに飛ぶなんてアクションは無駄オブ無駄だと思いませんか？

それにユーザーはあなたのトップページになんて興味ありません。せっかく作ったのに…って思うかもしれませんが、他人の苦労なんてユーザーは知ったこっちゃありません。作るだけ無駄ですので、やめましょう。

3. 情報を詰め込みすぎるのはやめなさーい！

さっきのやつとも絡んできますね。トップページに他サイトへのリンクだとか自己紹介だとかこのサイトでは何個の譜面が遊べますだとかの情報を詰め込んでいるサイトがいくつか見受けられます。
ユーザーが欲しいのは創作譜面であり、他の情報なんてどうでもいいのです。
俺がそうしたいからやってる、っていうのは通りません。創作譜面を公開している以上、**譜面をユーザーにプレイしてもらっているということを忘れてはいけません。**プレイしてくれてるユーザーを第一に考えましょう。

どうしても書きたいことがある場合はDog's Habitatのように、aboutやupdateとして別ページに分けるようにするのが良いでしょう。たまたまあなたに興味を持ったユーザーだけが覗けるようにして、創作譜面一覧を最優先に考えるようにしましょう。

あとアレっすね、コメントとか載せてる人も多いけど、個人的にはアレも無駄な情報だと思います。コメントにスペース取られて肝心の譜面へのリンクが小さくなってることが多いので、それなら載せないほうが見栄えも良いです。

Dog's Habitatにもコメントはありますが、全て見せて情報過多にならないように折りたたみ式にしてますし、展開後もデザインの一部になっていい感じに見えるようにしてます。コメント置くならそのくらいやってほしいですね。

4. ページの一番上にSparebeatのiframeを置くのをやめなさーい！

譜面のプレイページにはSparebeatのiframeと譜面一覧ページへのリンクだけ置いて終わりみたいなサイトが多くあります。まあプレイできればいいんで、それでいいっちゃいいんですが、そのように、<body>の最初にSparebeatのiframeを配置するとプレイ画面がページ上部に固定されてしまいます。
音ゲーマーの中には位置にとても拘る方がいるらしいので、プレイ画面の位置は自由に調整できるようにしたほうが良いでしょう。
対策としては、

    <body style='text-align: center;'>
        <h1 id="title">頭の悪いたいとる</h1>
        <table style="margin: 10px auto;">
            <tr><td>EASY</td><td id="easy">ば</td></tr>
            <tr><td>NORMAL</td><td id="normal">な</td></tr>
            <tr><td>HARD</td><td id="hard">な</td></tr>
        </table>
        <iframe id="sparebeat" width="960" height="640" src="https://sparebeat.com/embed/" frameborder="0"></iframe>
    </body>

こんなふうに曲のタイトルと難易度くらい書いておくくらいすれば十分です。
タイムラインをプレイ画面下部に置いておけば、上下に位置の調整ができるのでもっといい感じにできると思います。

5. スマホユーザーのことを考えなさーい！

SparebeatはPC、スマホ、タブレットの何でも遊べることが売りの1つなのに、なんで創作譜面サイトの管理人の人たちはモバイルフレンドリーなサイトを作らないんですか？PCでの閲覧を想定しないでください。

なんかリンクくるくるしたり、背景色とか無駄に凝ったりしてますよね。スマホ/タブレットからのアクセスが主になってる現代では、リンクの装飾なんてほぼ無意味です。頑張って作ったかもしれないけど、ぶっちゃけ空回りです。
そこまで装飾する元気あるなら、それより先にモバイルフレンドリーにしてください。そっちのほうがよっぽど重要です。

Sparebeatのプレイ画面のiframeはそのまま埋め込むと主にAndroidでは操作画面が現れません。iframeのheightを画面サイズに応じて動的に変更する必要があります。
といっても難しいことはありません。<script>Sparebeat.autoload()</script>とかの次の行に一行スクリプトを挿入するだけで実現できます。

<script>Sparebeat.autoload()</script>
↓
<script>
    Sparebeat.autoload();
    document.getElementById('sparebeat').height = window.outerWidth < 960 ? 1280 : 640;
</script>

こうするとスマホやタブレットでアクセスしてきた人たちには下部に操作画面が現れるようになります。

6. 番外編: サイトの管理

他にも創作譜面サイトを見てて気になることはたくさんありますが、とりあえず上記のものは最低限やってくれたら嬉しいですね。
ここからはUXの観点から離れて、サイトを管理するときにやってもらいたいことを書いていきます。

6.1. HTMLにはインデント²を付けなさーい！

そのまんまです。HTMLソースにインデント付けてない管理人多すぎます。恐ろしいです。
HTMLというかXML文書は木構造で書くという前提があるので、インデントが無いと木構造の把握がなかなかに厳しくなります。

インデントなし

<html>
<head>
<title>Sparebeatページ</title>
<meta charset="UTF-8">
</head>
<body style="text-align: center;">
<h1>でもでもでもでもなデモページ</h1>
<div><a href="./play/?id=japan1">きみがよいーじー</a></div>
<div><a href="./play/?id=japan2">きみがよのーまる</a></div>
<div><a href="./play/?id=japan3">きみがよはーど</a></div>
</body>
</html>

何がどれに入ってんのか全然わかんねえけど、これがインデントあると

インデントあり

<html>
    <head>
        <title>Sparebeatページ</title>
        <meta charset="UTF-8">
    </head>
    <body style="text-align: center;">
        <h1>でもでもでもでもなデモページ</h1>
        <div><a href="./play/?id=japan1">きみがよいーじー</a></div>
        <div><a href="./play/?id=japan2">きみがよのーまる</a></div>
        <div><a href="./play/?id=japan3">きみがよはーど</a></div>
    </body>
</html>

どこに何があるかめっちゃわかりやすくなります。これ後からHTMLファイルを編集するときとかの保守管理が圧倒的にやりやすいので絶対インデント付けてほしいです。
上記の例はまだ木構造が弱いからアレだけど、もっと複雑になってくると後で見たときにマジでどこに何があるかわからなくなると思います。

VS Codeで編集すると改行時に勝手にインデント付けてくれるし、なんならインデント付いてないやつでもctrl+Fとかでインデント付きに修正してくれるのでメモ帳とかTerapadとかで編集するのはやめてVS Code使ってほしい～～～～

6.2. URLで同じ情報を繰り返すのをやめなさーい！

あまり意識しないと思うけど、URLも立派なWebページの内容を伝える大事な要素の1つです。無駄に長いURLだとなんかげんなりするみたいな経験あると思います。
Sparebeat創作譜面サイトの多くはこんな感じのURLを使ってます。

http://どめいん/play/humen/humen.html

humenという情報が二回出てくる感じです。これはかなり冗長で無駄な情報です。humenという文字列は短いのでまだ良いですが、calamity_fortuneといった文字が二回並ぶのはかなり鬱陶しいです。
index.htmlを配置してindex.htmlを省略すれば

http://どめいん/play/humen/

となって、情報が重なりません。

でも、index.htmlがいっぱいになると何がどのhtmlなのかわからない～～とか言うんでしょ。ならそのhumenっていうフォルダいらなくない？
え？フォルダの中身にhtmlと譜面ファイルと音源ファイル入れて管理してるからフォルダ無いと困る？めんどくせえやつだな
mapとかmusicとかのフォルダ用意して、そこに譜面ファイルとか音源ファイルぶち込んで管理すればフォルダいらんやろ。

フォルダの構造を

├ map/
│   ├ humen1.json
│   ├ humen2.json
│   └ humen3.json
├ music/
│   ├ humen1.mp3
│   ├ humen2.mp3
│   └ humen3.mp3
└ play/
    ├ humen1.html
    ├ humen2.html
    └ humen3.html

こうして、html内のSparebeat.load()とかSparebeat.autoload()とかを

Sparebeat.load('../map/humen1.json', '../music/humen1.mp3');

こういう風に変える感じです。こうすると譜面ファイルごと、音源ファイルごと、htmlごとの管理になるのでフォルダが乱立せずに管理もやりやすく、URLも

http://どめいん/play/humen1.html

みたいになって冗長になるのを防げます。

個人的にはHTMLファイルをたくさん用意するのがそもそも悪手で、GETパラメータとか使って一元管理したほうが良いと思ってます。もっと言うならルーティング³使ってパラメータに応じた譜面を出力とかのほうがURLが綺麗になるので好きです。
Dog's Habitatではルーティング使ってますが、HTMLどうこうの話ではなくてよくわからないのでとりあえず桃空しいなちゃんをすこります。桃空しいなちゃんすこだ…

おわりに

どっかでも言ったけど、人々に自分が作った譜面をプレイしてもらうためにサイトに上げて公開してるんだからその人々が使いやすいように十分考慮してサイトも作ろうね。

ユーザー経験(User eXperience): あるものを利用したユーザーがそのものを通じて得る経験、ここではSparebeatの創作譜面をプレイすることみたいなのを指し、UXを高めることはプレイヤーにより快適に自分のサイトの譜面を楽しんでもらうことに繋がります。 ↩
インデント: 行頭に空白をあえて挿入して字下げすることで、ソースコードの構造を見やすくするもの。tab派とspace派が存在しますが、tab派はイケメンであることが知られています。 ↩
ルーティング: URLのパス部分に応じてWebページの状態を決定すること、またはその逆。GETパラメータを使わずにURLから変数を与えられるのですっきりしてて好きです(唐突な告白は女の子の特権) ↩