ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

GoodなWEB作成サークルコミュの「耳メディア」にページを対応:良ケース、悪ケース

  • mixiチェック
  • このエントリーをはてなブックマークに追加
さて、ここまで考えを進めてくると、「耳メディア」での伝え方も良いケース悪いケースが出てくることも判る。
ここでは写真を見てほしい。いま市場に出回っているようなウェアラブル端末をさらにシンプルにしたデバイスがあるとする。操作は指1本、単なるジェスチャーでできる。
使用するUIは検索、再生、戻る、進む、前へ、次へ極めてシンプル。そして、指を使ったジェスチャーで辿り着いた情報が、耳から入ってくる。

こうしたデバイスを考えた場合、ページの本文には工夫が必要になってくる。一例を考えてみる。以下は一般的なHTMLでページ本文を構成する際によく使うタグ
<h1>こうした技術とああした技術</h1>
<p>
こうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術は[...]こうした技術です。
ああした技術はああした技術はああした技術はああした技術はああした技術はああした技術はああした技術はああした技術は[...]ああした技術です。
</p>
end
→さて、この内容を耳メディアでそのままなんの調整もせず聴いてみるとする。
本文の中に「こうした技術」と「ああした技術」の二つのパラグラフが入り込んでいる。
ここで長い長い「こうした技術」を読み飛ばしたい場合、恐らく多くのユーザーは>>[進む]を押すと思われる。
しかし、>>[進む]を押したら「ああした技術」まで読み飛ばして次の話題に行ってしまうのである。

●パラグラフをきちんと分ける
ではどうすれば耳メディアで「ああした技術」を多くのユーザーに聴かせることができるのか。解決策はシンプルで、パラグラフを分けることにあるのではないかと思う。
修正したコードは以下のようになる
<h1>こうした技術とああした技術</h1>
<p>
こうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術はこうした技術は[...]こうした技術です。
</p>
<p>
ああした技術はああした技術はああした技術はああした技術はああした技術はああした技術はああした技術はああした技術は[...]ああした技術です。
</p>
end
厳密には見出し立て<h1>も分けた方が良いとは思うが、世の中そんな単純ではない。
→この状態を耳メディアで開き、>>進むを押した場合、原理上「ああした技術」のパラグラフへ進むことになるためうまくいく。

CSSだけでなく、HTMLにも下ごしらえが必要になりそうだ。

コメント(0)

mixiユーザー
ログインしてコメントしよう!

GoodなWEB作成サークル 更新情報

GoodなWEB作成サークルのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング