この記事は 驚異のFANZA女優検索 Advent Calendar 2021 の 12 日目の記事です。
ナビゲーションバー
このサービスを作るにあたって、本当に何度も何度も作り直した場所の一つ。それがナビゲーションバー。一番最初はタイトルと検索用のテキストボックスが置いてあるだけだったが、色々発展させていった。
#左上のリンク文字を青くするか
最初に悩んだのは左上のタイトルの文字を青くするかどうか。左上のタイトルをクリックするとTOPページに行くというUXは一般的だと思う。標準のリンク色は青。でも左上のタイトルはリンクでも青色ではないケースも多いと思う。画像で作っているから？。ではタイトルが文字の場合は？もしかしたら文字でもあえて黒くしているかもしれないが実際はよく分からない。ただ自分で思い直してみると、昔、昔ここが黒い時TOPページへのリンクだと気づいていない時代は確かにあった。もし文字が青かったらもっと早く気づいた可能性はある。青色にしているデメリットも特に思いつかなかったので、現状は青色にしている。明示的な理由があれば後から変える可能性はある。
#ファビコン
驚異のFANZA女優検索のファビコンはこのサービスで唯一自分自身が作ったものでなく、友人に頼んで作ってもらったものだ。このファビコンはとても気に入っており、このサイズ以外で使うと価値が下がると言われているのでこのサイズ以外で出すつもりはなかった。大体左上のタイトルには画像があるので、ここに何を出すかも悩んだが、ファビコンをそのままのサイズで置いてみたら良い感じだったので、そのまま置くことにした。試しに拡大して置いたこともあるが、やっぱり原寸が一番映えると思った。
#テキストボックスにはplaceholderで設定する
検索用のテキストボックスの値はデフォルトで100+を入れていた。これはそもそもこのサービスは100cm以上の女優を検索したくて作ったからだ。因みに100という数字で検索すると100cmのみ、100+で検索するとは100cm以上の女優がヒットする。自分的に以上があった方が便利だと感じて、なるべく入力が楽な方法で実装したかったので+を以上を表す記号とした。ただ、デフォルトで検索テキストボックスにいきなり何か入っているのはあまり好ましいとはいえない。初めて見たユーザーはこのテキストボックスは何だ？となってしまう。初見ユーザーに最も分かりやすいのはスタンダードな実装だ。やっぱりテキストボックスには薄い文字で説明が書いてある方が望ましい。そこで何も書いていない時は内部的に100+で検索するようにして、テキストボックスにはplaceholderを表示するようにした。
#サイズ入力は面倒
検索用のテキストボックスを自分で使ってみて、わりとよく検索したのが、100の次は101、その次は102のようにサイズを1つずつ変えての検索だった。ただやりたいことであっても実際にやってみるとこれが意外に面倒くさい。自分でも明確には気づいていなかったが、テキストボックスへのキーボード入力というのは手間なのだ。テキスト入力はやらずに済むなら極力やらなくてすむUXの方が親切だと感じた。と言うわけで、インクリメントボタンとデクリメントボタンを作ることにした。試しに作ってみたら思っていた以上に便利で、自分での検索はもうこのボタン以外ではやらないぐらいに気にいってしまった。そこで色んなボタンを用意した。最初は100なら99,101,100+,F,F+との5種類のボタンを作って、テキストボックスの右側に置いた。
#ボタンを使ってもらうハードルは高い
このボタン自体は非常に便利で気に入ったが表現に悩んだ。というのも、このボタンが何なのかが初見では分かりづらいからだ。検索の横にボタンがあるのがスタンダートとは言えない。その時点でどんな便利なものであっても、気づかない人は必ず一定数いる。どういう表現にしたら使ってもらえるのか。最初は検索テキストボックスと全く同じUIのボタンにした。つまりボタンを押すことで、中身の数字がそのまま検索テキストボックスに入るという表現にしたかった。ただ、初見の人に見てもらったが、このボタンがインクリメントを表しているボタンだとは思わないと言われた。むしろ検索テキストボックスが複数あると勘違いしてしまってさわらない可能性すらあると言われた。確かに同じレイアウトのものが並んでいたら別の機能とは考えないかもと思った。初見の人にさわってもらって意見を聞くのは本当に大事だと痛感した。
#分かりやすいレイアウトを暗中模索
その後もボタンの表現を何度も何度も変えた。説明の先頭にアップ、ダウンを表現するアイコンを置いた。文字でも説明を入れた。ただ文字を入れるとレイアウトとしてベストな位置指定が難しくドット単位で何度も修正した。例えば文章として一番正しいのはインクリメントボタンだと思うが、これだと通じないので++ボタンとしてみたりもした。個人的には++ボタンが一番気に入りはしたが、一般的ではないのでUPボタンともしてみた。ただUPとDOWNだと2文字4文字だけど、アップとダウンだと3文字3文字なのでバランスが良いと思った。あとタグでsmallを付けた感じだと見た目もレイアウトも少し変わるので、それでまた微調整したりした。テキスト入力とボタンの間隔も、以上ボタンの間隔も本当に何度も調整をしている。サイズの文字は青くした方がリンクと思ってマウスを合わせてくれる可能性が上がると思って青くした。今の形がベストなのかはまだ分からない。
#？ボタン
ここまでやってもまだ意味が分からない人もいると思った。こういう時はヘルプ機能があると良いが、それを最も効果的にやっているレイアウトが個人的にはJenkinsだと思っていた。あまりJenkinsのここにフィーチャーしている人は少ないかもしれないが、Jenkinsを使った時に？ボタンが色んな所に配置されていてこれがとても助けになった。自分でサービスを作る時は常々是非採用したいと思っていたので今回目立たない程度に？ボタンを置いてクリックしたら説明が出るようにした。
#まとめ
テキストボックスへのキーボード入力は面倒という気づきは大きかった。例えばユーザー登録で名前などキーボード入力しないとどうしょうもない所はともかく、そうでないところはテキスト入力をマウスで代用できる方法は作っておいた方が親切だと思う。但し、それは一般的なレイアウトとは言えないので説明文や表示、ヘルプ機能などでカバー出来るとなお良いともう。そう思ってサイズやカップもコンボボックスからも選択できるようにした。もちろんここまでやってもテキストからしか入力しないユーザーもいると思う。でも、自分的には初見でも何となく使ってもらえる可能性は上がったレイアウトになったかと思っている。何か意見があれば是非聞かせて欲しい。