読者です 読者をやめる 読者になる 読者になる

Negitaku.org Blog

eスポーツ, FPS, ゲーミングデバイス情報を紹介するサイト『negitaku.org』管理者のブログです

スマートフォンの場合にNegitaku.orgのニュース表示方法を変更するテストを開始してみました

サイト制作

連休ということで、Negitaku.orgのスマートフォン表示のテスト作業を行なってみました。

スマートフォン表示テストについて考えたこと

  • とあるサイトのアクセス解析を見たらいつのまにかスマートフォンアクセスが68%になっていたのでいろいろと考えることに
  • 自分で他のサイトを見るときに、PCサイトが表示されるとすぐに閉じているから自分のサイトも対応しないと
  • 一応スマートフォン版があるけど、PCとスマートフォンで出し分けをしているわけではない
  • さらに、そのスマートフォン版は数年前のフレームワークで作ってほったらかしなのでデザインが古くさい(iPhone4のUIライク)
  • どうせやるならレスポンシブデザインに対応しようかなと思ったけど、実質全部作り替えるくらいの作業が必要でそこまでの時間は無い
  • いまあるスマートフォンサイトにリダイレクトしようと思ったけどURLが別になったり、デザインが微妙だったりするのでイヤだ。
  • とりあえず、ソーシャルでよく貼られるニュースページのみで実験することに。

pc-top sp-old

↑現状の微妙なスマートフォン対応

今回のコンセプト

  • デザインをもう少しまともにする。
  • コメント機能とか移植すると面倒なので閲覧だけに特化する
  • 余計な装飾はせずシンプルで見やすくする
  • テストなので短時間で出来るくらいの作業にする

やったこと

  • デザインをゼロから作るのは面倒なので Bootstrap3 を使用
  • PC版のテンプレートから必要な項目を移植してマークアップ
  • CakePHPにテンプレート出し分けの処理を追加

出来上がったものがこちらになります。

2014-01-11 23.07.55

iPhoneiPodAndroid Mobileでニュースにアクセスするとスマートフォン版が自動で表示されるはず。iPhoneしかもっていないので他のデバイスでは試していません。

これでスマートフォンユーザーの人もちょっとは閲覧しやすくなるはず、と思ってそもそも自分のサイトはどのくらいの人がスマートフォンアクセスなのか調べてみました。

user

約85%がPC、スマートフォンは14%ほどと、さすがPCゲームサイトというような結果に。いまこんなにPC率が高いのは結構珍しいのでは。

いまわかっている不具合

  • YouTubeがwidth、height指定のエンベットコードを使っているからはみ出てしまう
  • Twitchとかのエンベットが表示されない
  • TwitterFacebookボタンがスマートフォンだと横に並んでくれない

まああまりたいしたことでは無いので良いのかなと。 不具合とかご意見ありましたらよろしくお願いいたします。

反応とか見つつ、他のアクセスが多いページも対応しようかなと思っております。