PC版とスマートフォン版テンプルナイツ統合のお知らせ

　本日、PC版テンプルナイツとスマートフォン版及びタブレット版テンプルナイツを統合しました。

　昨日まではスマートフォン版を「iphone.temple-knights.com」で運営していましたが、本日からは「temple-knights.com」となります。

1つのHTMLであらゆるデバイスに最適化

　統合に際しては、今注目の1つのHTMLであらゆるデバイスに最適化したWebサイトを実現する制作手法「レスポンシブWebデザイン」を採用しました。

　具体的には解像度が横1024以上をパソコン向け。横767以下をスマートフォン向け。横768以上1023以下をタブレット向けに最適化してあります。

解消した問題

　今まではTwitterで「ツイート」した際のアドレスがPC版とスマートフォン版で異なっていたり、パソコン版からスマートフォン版への転送(リダイレクト)が発生していましたが、それらの問題は無くなりました。

デバイス毎の表示サンプル

　今回はPC版トップページを3カラム(左サイドバー、メインコンテンツ、右サイドバー)から2カラムへ変更した程度。色や記事の配置などデザインはほとんど変わっていません。

　Windows 8+IE10、Windows 7+IE9、Windows XP+IE8での表示は以下の通りです。フルスクリーンではなくウィンドウ表示にすればタブレット向け、さらに小さくすればスマートフォン向けの見た目に変化します(IE10、Chorme、Firefox等)。なお、Chorme、FirefoxはIE10とほぼ同じ表示。PS3もパソコン向けを表示。

Windows 8+IE10 TOPページ
Windows 7+IE9 TOPページ
Windows XP+IE8 TOPページ

　iPadは画面上部にメニューを表示。今まで表示していなかった概要ページ、Profileページ、リンクページ等が選べるようになっています。PS Vitaもタブレット向けを表示。

iPad TOPページ

　iPhone、Androidは画面上部にメニューの表示は無く、ページ全体の真ん中当たりに表示されます。ニンテンドー3DSもスマートフォン向けを表示。

iPhone TOPページ

Web作成者向けに1点

　ちなみに「レスポンシブWebデザイン」でのWebサイト作成にあたって、私が気になった点を1点。

　IE10 プレビュー版では「Flexible Box Layout」が「display:-ms-box;」でしたが、IE10正式版では「display:-ms-flexbox;」になっていました。

　IE10はまだ情報が少なかった為、CSSの仕様の確認にマイクロソフト公式のWindows Internet Explorer デベロッパー センターが一番役に立ちました(苦笑)

テンプルナイツの閲覧割合：統合前

PC:スマートフォン：ガラケー

  • 72:22:6

PC版閲覧に使われるブラウザ

  • IE9 34%
  • IE8 14%
  • IE7 3%
  • Chrome 20%
  • Firefox 20%
  • Safari 3%
  • Opera 2%

投稿者: (公開日： / 最終更新日： )

記事別アクセスランキング