ケータイ小説に学ぶ、モバイル向け文書の書き方。

テーマ

かつて平成20年頃に流行したケータイ小説から、モバイル向けHTML文書の書き方を考えたいと思います。

ケータイ小説とは。

説明の必要もないかと思いますが、ケータイ小説とは、携帯電話での講読を対象とした電子書籍です。

作品に依っては多くの女性読者を獲得し、オフラインで出版されるものもありました。

しかし、その内容が一部のネット市民(いわゆるライトノヴェルの読者が多い)などから批判されたものです。

だからと言って、ただスイーツ文化だのと馬鹿にするだけではただの賢者気取りの愚者に過ぎません。賢者は愚者にも学ぶからです。

ケータイ小説の特徴。

ケータイ小説の特徴として、携帯電話の液晶画面での閲覧を最大限に考慮したものとなっていると言うのがあります。

携帯電話のモバイルブラウザのテキスト表示能力は、幅十二文字前後で二十行前後のものが多いようですが、この事は一画面には二百四十字前後しか入れられないと言う事を意味します。

このため、一つの段落を長々と書かず、短い文章で改行するようにしております。

ケータイ小説から学べるモバイルサイト向けのマークアップ。

この方法に否定的な意見も少なくはないようですが、確かに携帯電話では読み易くなります。

但し、マークアップと言う見地から考えると、改善の余地はあります。

短い<p>要素を主体とする。

一文ごとに改行する、すなわち<br>要素を多用するのではなく、一文ごとに一つの段落、すなわち<p>要素としてマークアップします。

そもそも、HTMLでの<p>要素は、紙の文書の段落とは概念が異なるものですので、論理的な段落と言うものでもありません。

  • 実際、リストなどの他のブロックレヴェル要素を<p>要素の内容にする事は出来ません。

例を挙げておきましょう。

PC向けのHTML文書で以下のようなものがあったとします。

<p><dfn>堀北真希ちゃん</dfn>は昭和63年10月6日生まれ、東京都清瀬市出身のアイドル女優です。中学生の頃下校中にスカウトされてデビューしました。十代の頃は鉄子を演じたり、男装させられたりなど色物っぽい面もありましたが同時期にデビューした長澤まさみちゃんなどとよく対比されていたものです。成人してからは純愛ドラマなどにも起用され、本格的な女優としての道を歩みつつあります。</p>

携帯電話で読み易くするため、以下のように段落を分けます。

<p><dfn>堀北真希ちゃん</dfn>は昭和63年10月6日生まれ、東京都清瀬市出身のアイドル女優です。</p>
<p>中学生の頃下校中にスカウトされてデビューしました。</p>
<p>十代の頃は鉄子を演じたり、男装させられたりなど色物っぽい面もありましたが同時期にデビューした長澤まさみちゃんなどとよく対比されていたものです。</p>
<p>成人してからは純愛ドラマなどにも起用され、本格的な女優としての道を歩みつつあります。</p>

文内で列挙がある場合はリストにする。

文章中に列挙される物事がある場合は、改段落してリスト化します。

こうする事で、一文が更に短くなって読み易くなります。

加えて、列挙がわかりやすくなると言う効果も期待出来ます。

<p>平成20年前後のアイドルと言えば、堀北真希ちゃん, 上戸彩ちゃん, 長澤まさみちゃん, 新垣結衣ちゃん, 榮倉奈々ちゃんなどが挙げられます。</p>

これを携帯電話でも読み易くするため、リスト化しましょう。

<p>平成20年前後のアイドルと言えば、</p>
<ul>
    <li>堀北真希ちゃん</li>
    <li>上戸彩ちゃん</li>
    <li>長澤まさみちゃん</li>
    <li>新垣結衣ちゃん</li>
    <li>榮倉奈々ちゃん</li>
    </ul>
<p>などが挙げられます。</p>

会話もリストにする。

複数行続く会話も、リストにすると良いでしょう。

会話には順序があるので順序付きリスト、すなわち個々のせりふを<li>要素としたものを<ol>要素で纏めて、各項目の頭にマーカとして表示される数字はCSSで消すのが順当ですが、まだドコモ端末だとその方法が出来ない端末があるため、順序を問えない<ul>要素とするのは已むを得ないかも知れません。

こんな感じになるでしょう。

<ul class="talk">
    <li>「………」</li>
    <li>「………」</li>
    …
    </ul>

如何に携帯電話のモバイルブラウザの容量が大きくなったとは言え、実際に文書を読むとなると余り大きなHTML文書は読者にストレスを与える恐れがあります。

このため、ページを細かく分割する事になりますが、そうすると今度は前後のページへの移動をし易くする必要があります。

いろいろな方法がありますが、

  1. 末尾に前後へのリンクを付ける
  2. 冒頭にも第一ページと直前ページへのリンクを与える。可能ならページの先頭にこのリンクをスキップ出来るリンクも設ける
  3. 更にこれらのリンクにはaccesskey属性を附与して、文書のどの位置を見ていてもダイヤルボタンで迅速に移動出来るようにする
  4. 第一ページは目次にして、どの部分へも自由にアクセス出来るようにする

と言った工夫が必要でしょう。

以下のようなテンプレートが考えられます。

<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
    <title> *** 本文書の題名 *** </title>
    <link rel="start" title=" *** 第一ページの題名 *** " href=" *** 第一ページへのURL *** " />
    <link rel="prev" title=" *** 直前ページの題名 *** " href=" *** 直前ページへのURL *** " />
    <link rel="next" title=" *** 続きページの題名 *** " href=" *** 続きページへのURL *** " />
    <link rel="stylesheet" type="text/css" media="handheld, tty " href=" *** モバイル向けスタイルシートへのURL *** " />
    <link rel="stylesheet" type="text/css" media="screen, projection " href=" *** PC向けスタイルシートへのURL *** " />
    </head>

<body text=" *** 前景色 *** " bgcolor=" *** 背景色 *** " link=" *** アンカー色 *** " vlink=" *** 訪問済みアンカー色 *** " alink=" *** クリック時のアンカー色 *** ">
    <ul>
        <li><a href="#START" name="TOP" id="TOP" accesskey="1">[1]本文</a> <a href="#TOP" accesskey="2">[2]先頭</a></li>
        <li>先頭頁: <a href=" *** 第一ページのURL *** " rel="start" accesskey="8">[8] *** 第一ページの題名 *** </a></li>
        <li>前の頁: <a href=" *** 直前ページのURL *** " rel="prev" accesskey="7">[7] *** 直前ページの題名 *** </a></li>
        </ul>
    <hr />
    <h1><a name="START" id="START"> *** 本文書の題名 *** </a></h1>

     *** 本文書の本文 *** 

    <hr />
    <ul>
        <li>続き頁: <a href=" *** 続きページのURL *** " rel="next" accesskey="9">[9] *** 続きページの題名 *** </a></li>
        </ul>
    </body>
</html>
  • このテンプレートはｉモードブラウザ 1.0 端末にはHTMLとして配信する事を前提としたものです。
  • 「***」で挟まれた箇所に、指定されたものを書き込みます。
  • [1]など、ナヴィゲーションボタンを指定する文字は、絵文字にしても良いでしょう。但し端末に依り表記法が異なりますので、ここでは絵文字は使いませんでした。
  • このテンプレートには<link>要素や<a>要素のrel属性など、現在の携帯電話では意味がない要素や属性が使われておりますので、不要だと思うなら削除してください。
  • このテンプレートはあくまでも一例ですので、ご利用になる方は、お好みに合わせて修正して下さい。
  • テンプレートはここまで

まとめ。

ケータイ小説には、携帯電話での可読性を追求した技法が多々取り入れられております。

これらの技法を盗んで活用する事で、より使い易いモバイルサイトが構築出来るでしょう。

だから、ケータイ小説はスイーツ文化だのと小馬鹿にせずに、そこからも学ぶ事なのです。

参考文献。

Mobile Web Best Practices 1.0 (英語)

W3Cが策定したガイドラインで、より使い易いモバイルサイトを作るための方法が纏められております。

日本のモバイル事情に合わない面も多々ありますが、それでもその事を考慮した上で一読される事をお奨めします。

モバイルコンテンツ作りでの推奨事項

上記のMobile Web Best Practices 1.0を元に、日本の携帯電話事情を加味して書いた拙作です。