エロゲ感想ブログのためのブログUIデザイン

エロゲ感想ブログをやっている人がデザインで悩んでいるのをTwitterで見掛けました。そうですよね。エロゲオタクはエロゲオタクであって、デザイナーじゃないですしね。

ということで解説していきます。私もただのエロゲオタクですけど。

まず利用者を想定する

エロゲの感想記事を読みに来るのはエロゲオタクですね。では「エロゲオタク」ってどんな人物像を想像しますか。差別的なイメージでもいいです。表に出すことはないので。

  • エロゲをよくプレイする
  • 騒がしいのは苦手
  • ほぼ男性
  • 男性ということは、5%程度は色覚異常持ち
  • 目が悪い、眼鏡率が高い
  • 文字を読むのに慣れている
  • パソコンの扱いに慣れている
  • 世俗に疎い

こんな感じ。じゃあこういう人にとって使いやすいUIにすればいい。そうなりますね。

たとえば色覚異常持ちがそれなりにいるので、要素同士の色の差を強めにしたデザインにしたりするんですね。「5%を多いと見るか少ないと見るか」「色覚異常対策は具体的にはどうすればいいか」などの細かい話はひとまず置いておきます。とりあえず基本の話。「どうすべきか、どうすべきでないか」が見えてきましたね。

当ブログが大体上記のような利用者を想定しているので、こんなデザインになっています。これはこういう利用者を想定しているからであって、「化粧品を紹介するブログ」では利用者が全く違うので、デザインも変わります。

利用者の流れを想定する

利用者はどこのリンクからブログに辿り着き、そのとき何を求めているか。最初のページを見てどう感じるか。次に何をしてどのボタンをクリックするか。そういうことを考えていきます。

当ブログは「Googleの検索結果から強めの目的意識を持って記事に直接辿り着くか、Twitterのリンクから各ページにゆるめの目的意識で各ページに辿り着く」と想定してこんなデザインになっています。

どちらかというと検索結果からの流入の方を意識しているので「目的意識の強い客だから、短時間で目的を達成させないと離脱してしまいそう」ということで、ページ上部にすぐに記事タイトルを表示して「このページはちゃんとあなたの求めているものを提供していますよ」とアピールしています。それが正しいかどうかは知りませんけど。

利用者が求めているもの、求めていないものを考える

初期設定のブログには様々な要素が表示されています。一方でエロゲオタクは騒がしいのが苦手(…と勝手に私が想定しているだけ)なので、要素が多いと煩わしく感じます。特に感想は長文になるので、落ち着いて読めることは大切です。

ということで各要素について検討していきます。「必要」以外の要素はとりあえず全部削除対象です。たとえば当ブログでは「ブログ内検索機能」を削除しています。攻略ブログではなく、特定の情報を求めてくる客は多くないと思うので。「アクセスカウンター」や「最新のコメント」も、よく考えたらいらなくないですか。

「要素が減るとブログの表示が高速になる」という効果もあります。特に外部サービスと通信するような要素はブログに接続してから更に外部サービスに接続を試みるせいでどうしても遅くなります。またその外部サービスとの接続に失敗した場合やサービスが終了した場合に見栄えが悪くなるので、できるだけ外部サービスと接続せずに済むようにしましょう。

エロゲの画面が騒がしいのに許されている理由

「エロゲオタクは騒がしいのが苦手」なのに「エロゲの画面は華やかで騒がしい」。それも年々キラキラ新しい感じになってきてますね。なぜなのか。

それはエロゲオタクにとってエロゲが「美少女との楽しい一時を過ごすハレの場」だからです。エロゲが華やかでなかったら嫌ですよね。エロゲが特別なだけです。基本的にエロゲオタクは騒がしいのが苦手です。騒がしいのを好むならそもそもアウトドア派になっているはずで、そうなっていないということはそういうことです。

「普通」に合わせる

皆様普段から色々なホームページを利用していると思います。はい。つまり「色々なホームページ」のデザインに慣れています。「色々なホームページ」と同じようにデザインすれば、新しく学習しなくてもすぐに使いこなせるので使いやすいです。

私たちは無意識レベルで「~とはこういうものだ」と認識しています。というか「こうなっているということはこれは~だ」が正しい。たとえばこんな感じです。ただの「下線付きの青っぽい色の文字」ですがリンクにしか見えませんね。

インターネットを利用するとき、普段より少し意識してみると、「こうあるべきなんだろうな」みたいなのが見えてきます。UIの基本は「みんなやっているならやれ、やっていないならやるな」です。

人類の能力を大幅に低く見積もる

人類はあなたが思っているほど賢くなく、能力も高くありません。我慢強くなければ学習意欲も低く、もう何て言うか動物園かなみたいなところがあります。義務教育が行き届いている日本でも、私もあなたも大体みんなそうです。猿から毛が抜けた程度の野生動物です。

このため少しでも高等なことを要求するとその分利用者が脱落していきます。「自分だから、慣れているから難なくできるだけではないか」と考えて、少しでも難しそうなら難易度を下げましょう。

漢字が難しすぎませんか。頑張らなくてもクリックできますか。待たなくても使えますか。英語がわからなくてもいいですか。算数までしかわからなくても理解できますか。

実際に使ってもらってその様子を観察する

人間1人の頭なので、そんなに何でもかんでも考慮できるわけではありません。実際に利用者がどういうふうに利用するかを正確に想像することはできません。

なので可能であればお友達のエロゲオタクにブログにアクセスしてもらって、その様子を後ろから観察したいです。「家に遊びに行けるエロゲオタクのお友達」という絶滅危惧種より珍しい人材が必要なんですけどね。しかも「元々アクセスする気のない人が、あなたに監視されながらアクセスする」ので「部屋で1人でいるときに、自発的にアクセスする場合」はまた少し違ってきます。

それでも観察できれば色々参考になると思います。色々な当たり前、常識が崩壊して、驚きの連続でしょう。なんでそこクリックしたの。なんで今迷ったの。っていうかブラウザにそんな機能あったの!?

運良くそういう人材を利用できる環境にいるのであれば、やってみましょう。そもそもエロゲ感想ブログを友達に見てもらうって時点で割とアレですけど。

HTMLやCSSなどはとりあえず置いておきましょう

これらはあくまで「やりたいことを実現するための手段」でしかありません。「一からHTMLを学ぼう!」みたいなことをやり始めるとblinkタグみたいなクソ機能まで学んでしまい、学ぶことが多すぎて心が折れてしまいます。

まず「利用者を想定したら、1行あたりの文字数を~にした方がいいということになった」があって、そこから「へぇCSSでこうやるのか」です。この手の言語はこの繰り返しで理解していくもので、機能を1つずつ上から順に覚えていってどうにかなるものではないです。

まとめ

使いやすさは利用者が道具を使うときに感じるものなので、じゃあ利用者を知らなきゃ始まりませんよねってことでこうなりました。知れば知るほど、考えれば考えるほど「人類とは…?」みたいな沼に沈んでいきそうになりますが、エロゲやったり感想記事を書く方が大事なので程々に。

じゃあ具体的にどうしたらいいかって、とりあえずウチのブログのデザインをパクればいいんじゃないでしょうか。あなたが始めて当ブログにアクセスしたときに特に何も感じずに自然に利用できたのなら、それはデザインが上手く機能して無難に使いやすかったということなので。