FC2ブログ

まつお研究所
Trudrの食用羊
08 « 123456789101112131415161718192021222324252627282930» 10

FC2カウンター

ブログ内検索

おしえてアミストル

プロフィール

はなみがわ

Author:はなみがわ
所属: まつお研究所

ROSNS: はなみがわ







最近のトラックバック


Copyright
© Gravity Co., Ltd. & Lee MyoungJin(studio DTDS). All rights reserved.
© GungHo Online Entertainment, Inc. All Rights Reserved.
当コンテンツの再利用(再転載・配布など)は、禁止しています。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
/ --/--/--(--)--:-- /
/ スポンサー広告 / / /
ROSNS表示レイアウト変更の研究①
サーバ統合の発表など慌しい状況ですが、
最近は自由題材として、ROSNSの表示について研究しております。

RO本体のプレイ(純粋な狩り)時間は、週あたり数時間程度です。
※平日の深夜に接続はしますが、会話の読み書きにとどまります。

一方でROSNSは出先からでも読み書きできるため、自然と多くの時間をSNS上で過ごすことになります。
そのROSNSですが、表示について大きな不満があります。

☆メイン画面では常に公式広告が上部にあるため、日記など
 必要なコンテンツにアクセスする際、常に画面のスクロールが伴う。
 特にROGMのバナーは邪魔以外の何者でもない。
 1日1回程度確認し、後は邪魔にならない程度に縮んでもらいたい。

☆現状、スマートフォンでの利用を考慮されていない。
 画面面積が狭い、スマートフォン、小型タブレット端末で使用するには、
 画面の配置、フォントの大きさなど、不十分である。
 専用アプリがリリースされているが、実態はWEBブラウザであり、
 アプリ側でPC画面をそのまま表示させているだけ。
 便利だという声を聞かない。

今より使いやすくなるであろうレイアウトを作成、表示を試す研究を行ないます。


①メイン画面.PNG ②日記画面.PNG


■そもそも、スマホ対応とは何か
 iPhone,Android向けにROSNSアプリがリリースされていますが、アカウント認証以外の点でまともな評価を見たことがありません。
 これらのアプリは、スマホなどの「小型端末」で使いやすく、という基本的な考え方が抜け落ちています。
 古くはPDAなどと呼ばれていた、これらの端末の特長は、

 ・携帯可能なサイズ:解像度はともかく、おのずとサイズ小
   表示する情報は、コンパクトにまとめることが必要。
   PC向けの表示は、見渡すために拡大縮小の操作が頻繁になり、
   視認性に欠ける。

 ・タッチパネル式:最近のものは指で操作するものが主流
   細かい操作は不向き。ボタン類は面積が必要。
   PC向けの表示は、マウスポインタで操作することを前提としており、
   タッチパネルでの操作は容易ではない。

 これらの特長に合わせて画面を設計すれば、スマホ対応は9割方完了します。
 スマホ内蔵のブラウザで十分対応可能で、必ずしも専用アプリは不要でしょう。


■変更実験の手法①
 レイアウト変更実験は、今回はスタイルシートの変更で行ないます。

 ROSNSサーバから、クライアント(ブラウザ)に対し様々なデータが送られて、
 ブラウザ上で画面を構成しています。
 実際に目に見える部分を多く含むHTMLには手をつけず、
 表示属性を決めているスタイルシートに手を加えていきます。
 スタイルシートはサーバからも送られており、これを基に今見ているような画面が表示されています。
 これに、必要なスタイルシートを付け加えることで、画面の表示を変更します。

 使用ツール:Dragonfly(Operaブラウザに内蔵)

 ブラウザ側に開発向け機能のない、インターネットエクスプローラなどでは、
 こうした操作は難しいため、これ以外のブラウザで実験することになります。
 今回はOperaを使用しました。
 他のブラウザ(Firefox,GoogleChromeなど)に同様の機能があれば、
 そちらを利用することも可能です。


■今回の実験結果
 添付画像1枚目:メイン画面
 添付画像2枚目:日記画面

 これらの画像をスマートフォンなどで拡大縮小せずに表示するか、
 PCで表示する場合はズーム機能で50%程度に縮小してみますと、
 だいたいのイメージがつかめると思います。

☆上記の表示イメージで見ると、上部のボタン類は指で操作するには
 上下間の間隔が狭すぎるため、間隔を広めにとっていますが、
 まだ不十分かもしれません。

☆メイン画面の公式情報、ROGMバナーには消えていただきました。
 最終的には、表示・非表示、あるいは拡大・縮小操作が可能なボタン類の
 配置が望ましいと思われますが、対応するにはダイナミックHTMLによる動的操作が必要になるため、
 今回は非表示でのイメージ確認にとどめました。

☆メイン画面のサイド部分もとりあえず非表示としました。
 自身のプロフィール画像、フレンド、参加コミュニティなどが表示される部分ですが、
 日記一覧の表示に十分なスペースを用意するために表示を消しています。
 前項同様、表示切替の仕組みが必要となります。

☆フォント類は、スマートフォンの画面で読める程度に拡大しています。
 メイン画面ではマスキングしていますが、マスキング幅、高さは文字サイズと同一です。
 メイン画面のリンク部分(水色部分)を指で操作する際、上下方向に
 十分な間隔が必要になるため、標準の画面より間隔を大きくとっています。
/ 2012/03/12(Mon)13:39 /
/ / / /
/ まつお研究所 /

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。