ゲームファンのリニューアルについて(3)

先日、7月17日にゲームファン(http://gamesjp.com/)をリニューアルいたしました。
今回は、使い勝手的なことを中心に書いて見ます。

「使い勝手」・・・と言いましても、どうなんでしょうね。
こればかりは、もう少し時間を掛けて利用者さんの動向を見ていかないと「結果的に正しかった」のか分からないのですが、リニューアルにあたって意識した部分を書き出してみます。

  1. 変化を受け入れて貰える変え方
  2. javascript オンを前提としたページ作り
  3. 経過時間の表示
  4. ページナビゲーション
  5. メディアURLへのリンク
  6. あなたの設定
  7. 現在アクセスしているユーザー
  8. ピックアップトピックス
  9. 上下スクロール
  10. ゲームタイトルでの検索とサイト内検索
  11. 残している機能実装への布石
  12. ソーシャルボタンの設置
  13. Facebook等へのOGP対応

変化を受け入れて貰える変え方

過去の苦い経験といいますか。。。
詳しくは前々回のブログ「ゲームファンのリニューアルについて(1)」に書いているのですが、特にデザインについては大きく変えすぎると利用者さんに戸惑いを与えます。

ということを、これまでのリニューアルで経験してきているので、「何を変えて何を変えないか、変えるものをどう変えるか?」をよく考えました。

で、実際、今回のリニューアルではかなり変わっていると思うんです。
(最初はまったく変えるつもりもなかったのですが・・・)

と、その前にゲームファンの中でも大事なページというのがありまして、それは掲示板の部分です。
たとえば、http://gamesjp.com/c18CB4game/t723b1viw.html のような、利用者さんのやりとりが行われる部分になります。

以下、ここを中心に書いていくことになります。

とりあえず、3カラムだったのを2カラムにしました。
それから左カラムに置いていた、ゲームファンのカテゴリリンクは外しました。
現在で言うと、フッターにあるゲーム機種の部分です。

上部のゲームタイトルや、タブの部分も今回変えていますし、利用者さんの投稿一覧の部分も変わっています。
右カラムもでして・・・。
はい、まるまる変わっちゃいました。

そういえばヘッダーのロゴと、赤い部分は以前のままですね。
「ゲームファンろぐ」のリンクや、ソーシャルボタン、検索は無かったですが。。。

変わっていない部分と言えば、「雰囲気」でしょうか。
いろいろ変えた部分ばかりですが、雰囲気は以前とあまり変わっていないと思います。

また、機能的な面では、以前まで使えていたものは、今回も当然ながらサポートしています。

それとあとは、変わったことが容易に認識できて、変わった先のどのように変わったのかも分かりやすくなっているかな、と思います。

というか、最後に挙げましたが、この「どのように変わったか容易に分かる」という部分は特に意識しています。
なので、けっこう大胆に変更することが可能になったのですが・・・。

javascript オンを前提としたページ作り

近年のブラウザ事情というのもあるのですが、そもそもjavascriptオフでアクセスする”人種”ということを考えると、実はゲームファンが望むユーザーじゃなかったりするという現実が見えてきます。。

ということで、javascriptオフの人は、こちらから「ごめんなさい」します。

と、考えると楽になります。
javascriptを遠慮なく使えるので表現の幅が広がります。

経過時間の表示

掲示板の投稿時間など、”時間”を扱う部分は、色分けをしました。
http://gamesjp.com/
こちらの左カラム下方に 「投稿時間の色」 とあるのですが、この色を見るだけでおおよそいつごろの投稿なのかが把握できます。

例えば、ピンク色で書かれていると「あ、10分前、つまりまだここに居るかもな」と考えることもできます。
● 文字に色を付けるか、年月日時分秒の時間表示部分に色をつけたりしています。

ページナビゲーション

例としてこのページなど。
http://gamesjp.com/c153F0game/t129173b1viw.html

掲示板部分は、1つのトピックスにつき1000投稿までとなっています。
これを1ページで表示するのもなんですので、ページングをしています。

ここでもひとひねりあります。

掲示板部分で最初に見るページ。1ページ目 (表記ではページ番号の最大値ですが)は、最新の10件分を表示しています。
そして、2ページ目以降は、30件ごとのページング、最終ページ(表記では、1)は、 (10 + 30 x ページ数) のあまり分の件数になっています。

現在のところ、トピックス単位で見ると、1日あたりの投稿数も少ないですので、1ページ目を10件分と抑えることで、容易に新着投稿の確認を行えるようにしています。

メディアURLへのリンク

これは、前回のブログ(ゲームファンのリニューアルについて(2))でも触れましたが、
http://gamesjp.com/c9game/t3652b1viw.html
こちらのページのように、YouTube、にこにこ動画、画像ファイルへのURLを含む投稿があった場合に、自動的に展開してこのトピックスのような表示にしています。

これにより、ゲームファンから外へ出ることなく、その場で動画や画像の視聴が行えます。

あなたの設定

右カラム上部に「あなたの設定」を設置し、ここから、名前・パスワード・性別の保存、また、掲示板部分の文字サイズやフォントを変更して保存しておくことができるようにしています。

一度、設定をすると変更することは少ない部分なので控えめに、その上で必要なときは容易に設定ができ、また、ページ内で「良い位置」に置くことで、存在感を出すことは忘れていません。

現在アクセスしているユーザー

実はこれは、ゲームファンの利用者さんからの意見を反映したものです。

掲示板へは投稿しないものの、居ることが分かっていると投稿しやすくなると思い、採用させていただきました。
ここでの名前の色分けもまた上述の時間経過と同じで、例えば10分以内にアクセスがあったらピンクで表示となっています。

ピックアップトピックス

実は「新しく投稿されたトピックス」だったりしますが、htmlのキャッシュの関係で、最新順に表示されるとは限らないケースがありますので、「ピックアップ」としています。

最新順にこだわるなら、この部分もajaxで別途取得する方法もあるのですが、あえてこうすることで古いトピックスやゲームタイトルが掘り起こされるキッカケになると思い、この仕様としています。

ちなみに ● の色分けは、リアルタイムでの色表示です。

上下スクロール

実は、これについて別記事がありますので、参考にして頂ければと思います。
ソース配布。ナビゲーションメニューとしてなど。

ゲームタイトルでの検索とサイト内検索

ヘッダー(上部の赤色)部分に、検索を2つおきました。

左側が、Googleのサイト内検索で、右側が独自のゲームタイトル検索です。

ゲームファンでは、いままでに発売されているゲームタイトルのすべてをサポートしています。
となると、ファミコンの時代から考えてもタイトル数だけでも数万タイトルあり、ディレクトリ形式なんかの表示は実用性がありません。

ここから検索いただくことで、目的のゲームタイトルがすぐに見つかるようにしています。

ちなみに、「ドラゴンクエスト」を探そうとした場合、「ドラゴンクエスト」はもちろんですが、「ドラクエ」でも平仮名の「どらくえ」など、一般的な略称でも検索できるようになっています。

残している機能実装への布石

今回は、リニューアル第一弾です。
過去のリニューアルを含めると別ですが・・・ (^^;)
このリニューアルは今回で完成していません。

時間の都合などで、やむをえず形になる範囲までのここまでで一旦リニューアルに踏み切りました。

何度か書いていますが、今回のリニューアルの本来の目的は「ページ表示の高速化」でしたので。。

で、次回の実装として考えている機能のいくつか実現するために、今の時点で、それを許容するデザインとしています。
デザイン的に一部、不思議な箇所もあるかと思われますが、それは次回で判明するかと思います。

・・・問題は「次回」がいつになるのかですが・・・。

ソーシャルボタンの設置

おそらく、ユーザー層的に設置してもあまり効果ないだろうなーーーーーーー(棒)
と、思いつつも、設置はしました。

ヘッダー(上部の赤い部分)に置いてある、twitter、google、facebookの各ボタンです。
とりあえず目立つ場所に置いておいて、押され具合がをみてみたいと思います。

Facebook等へのOGP対応

こちらも、ユーザー層的に(ry

http://gamesjp.com/
実験的に、「いいね」して頂けると分かるのですが、「いいね」されたときに表示される内容を、こちらから指定しています。
主に、サイトタイトル、簡単な説明、サイト画像になります。

というか、こればかりは自身で「いいね」しないと、どのような効果があるのか分かりづらいですね。

—————————————————————

以上、3回に分けてゲームファンのリニューアルについて書いてみました。

こうやって書き出すと、いろいろありますね。

もう忘れたとか、あまり書きたくないなどの理由で省いてるものも含めるとまだまだ出てきますが。。。

気になる方は、実際に会ったときに直接聞いてください。

またまだ私にお会いしたことのない方は、twitterやfacebookもしていますのでお気軽にご連絡ください。

お問い合わせページへ

広告