鍛造の非生産的な話

もう少しブロマガの読みやすさを考えようかって話

2013/02/28 21:11 投稿

コメント:3

  • タグ:
  • ブロマガ
  • HTML

せっかくの見たまま編集

皆さんのブロマガを読んでますとね、見たまま編集の機能を活用していない人が多いんじゃないかなあという筆者さんをチラホラ見ます。
内容的には面白いのに、ものすごく読みにくかったりするわけですよ。

極端な例を挙げるとするなら句読点が無い、改行を多用し過ぎ(もしくは改行してない)、目が痛いほどの文字色変更多用などです。
基本的に読んでもらうために書いているわけですから、多少は読みやすさというものを意識したほうが良いんじゃないかな?と感じます。

動画編集やニコ生と同じですよ。
音量が大きすぎたり小さすぎたり、視認性を悪くする意味のわからないエフェクトかかってたら観ないじゃないですか(;´∀`)
それと同じでブロマガも読みやすいものじゃないと読まないんですね読者は。

ということで今回の記事は私が使ってる読みやすさを意識した文章のお話です。

区切る1

私のようにあまりにも文字量が多い記事を書いちゃう筆者さんは文章を区切ってみましょう。
区切る方法には2種類ありまして、前述した見たまま編集の項の様に空行を設けて文章を区切る方法がまず1つです。

ただし改行毎に空行を設ける方法はあまり良くありません。

何故かと言えば文字を読むリズムが狂ってしまうんですね。

しかも文章自体がどんどん先へ伸びていって、ページが長くなってしまうというデメリットもあります。

ね?読みにくいでしょ?w

区切る2

そしてもう1つの方法が見出しを付けるという方法です。
話が大きく転じる場合に使うのが通例ですが、私は記事によっては空行の代わりに見出しを使ったりもしますね。

話が転じる場合の見出しは、例えば食事の合間に飲むお茶のような感じで読んでくれている読者にホッと一息入れる を提供してくれます。
空行の代わりに使う場合は、結果として見出しを多用することになるので視覚的なインパクトがあり、盛り上がりを演出してくれたりします。

ちなみに私が使ってるのは見たまま編集ですと見出し2ですね。
メルマガを考慮した場合、見出し1は装飾が華美すぎるんですよ。

リスト1

リストを活用している人は本当に少ない!
例えばですね100の質問などで質疑応答する場合にリストを活用すれば文章がスマートになるんですよ!

  1. 年齢は?
    20代

  2. 性別は?

  3. 血液型は?
    B

  4. 何型ぽいって言われる?
    A

  5. よく言われる第一印象は?
    厳しそう

これは見たまま編集でいうところの番号つきリストです。
改行すると自動的に数字が割り振られて便利です。

リスト2

リストには番号なしリストもあります。
これは何かメモ的に羅列する場合に活用できますね。こちらも自動でスマートに成形されます。

  • いつ
  • どこで
  • 誰と
  • 誰が
  • 何をした

リスト状態を保持したまま強制的に改行したい場合はShift+Enterで強制改行が可能です。
強制改行とは番号つきリストでやっていたような感じですね。次のような感じです。

  • いつ
    昨日の晩
  • どこで
    私の自宅で
  • 誰と
    私、鍛造と
  • 誰が
    ルイズ・フランソワーズ・ル・ブラン・ド・ラ・ヴァリエールたんが
  • 何をした
    クンカクンカした

もちろん番号つきリストでやっているように空行を挿入することも可能ですよ。
以上の見たまま編集の機能だけでも活用すると皆さんのブロマガはかなり読みやすくなります。


HTMLを覚えると

これ以降の話はHTMLを覚えるとこんなことも出来るようになりますよって話です。
以降の例文章を見て少しでもHTMLに興味を持っていただけたらなって思います。

スペースキーを用いない字下げ

小説書きさんなどに需要があるんじゃないかと思われるテクニック。過去記事でも一度紹介しました。
通常、字下げ(インデント)する場合はスペースキーによって空白を入力しますが、この空白は文字列検索などを行った場合は邪魔になったりするんですよね。
そこでスペースキーによる空白入力を行わずHTMLによって字下げすることが実は可能です。

あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオ
あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオ
あいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオあいうえおアイウエオ

前述の文章の様に1文字の字下げ以外にも自由にいくらでも字下げをすることが可能です。
スペースキーを押して空白入力し「 おいうえおアイウエオ」と文字列検索しても1つしかヒットしないはずです。空白を外せば複数ヒットします。
ちなみに3行のあいうえおアイウエオをテキストエディタなどへコピペすると字下げが消えて文字列が管理しやすくなるという利点もあります。

テーブル

所謂、表ですねコレは。
RPGなど、例えばポケモンのステータスなどを記載するときに役立つ便利なHTMLです。

ピカチュウ

LV赤緑青金銀クRSE/FRLGDP/Pt/HGSSBW/B2W2
1でんきショック
なきごえ
でんきショック
なきごえ
でんきショック
なきごえ
でんきショック
なきごえ
でんきショック
なきごえ
でんきショック
なきごえ
5しっぽをふるしっぽをふる
6しっぽをふるしっぽをふるしっぽをふる
8でんじはでんじはでんじは
9でんじは
10でんじはでんじは

AAなどもそうですが、環境や文字種によって表記のバランスが崩れてしまいますが、HTMLを用いることによって、環境や文字種の違いをプログラマブルに吸収し成形してくれます。
プログラマブルに成形されることによってパソコンだろうがスマホだろうが電子書籍だろうがデザインが崩れません。
知識のある人はWebブラウザのフォントを変更してこの記事のデザインが崩れるかどうかを確認してみてください。

リストレベル

見たまま編集にはないですが、リストにもレベルが存在します。

  • 卵かけご飯
    • 材料
      • 生卵
      • 白飯
    • 作り方
      1. 白飯を普通に炊きます
      2. 生卵を小鉢などへ割ってかき混ぜます
      3. 茶碗に盛ったアツアツのご飯へぶっかけます
      4. 醤油や胡麻油などお好みで調味料を加えてもおいしいです

番号なしリストの中に番号つきリストを含めたり、またその逆も可能です。
これらのデザインもプログラマブルに成形されデザイン崩れを起こしません。

以上です。ちょっとした工夫で文章はかなり読みやすくなります。
皆さんも色々考えて読みやすさを意識した文章作りをしてみませんか?

それでは長文にお付き合いいただきありがとうございました。


蛇足

運営さん、ニコニコ動画という環境を考えたらせめてコードには対応すべきだと思うんですけど・・・。
ゲーム制作とかしてる人居ますよね?ソースコードを書いてる人も居ますし対応よろしくお願いします><

追記 2013.03.05
どうやらコードへ対応してくれたようです!サポートが速いっ!!!

以下、コードのテスト。こんな感じに表示してくれます。

enchant();

/*
 * 定数
 */
var SCREEN_WIDTH    = 320;
var SCREEN_HEIGHT   = 320;
var CHARA_IMAGE     = "http://enchantjs.com/assets/images/chara1.gif";

/*
 * メイン処理
 */
window.onload = function() {
    // ゲームオブジェクトを生成
    var game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT);
    // 画像読み込み
    game.preload(CHARA_IMAGE);

    // ロード完了時の処理
    game.onload = function() {
        var scene = game.rootScene;
        // 背景色を変更
        scene.backgroundColor = "black";

        // 画像を生成,表示
        var sprite = new Sprite(32, 32);
        sprite.image = game.assets[CHARA_IMAGE];
        scene.addChild(sprite);

        // タッチスタートイベントリスナを登録
        sprite.ontouchstart = function() {
            // hitイベントを発行
            var e = new enchant.Event("hit");
            this.dispatchEvent(e);
        };

            // hitイベントリスナを登録
            sprite.onhit = function() {
                alert("hitイベントが発行されました!!");
            };

    };

    // ゲーム開始
    game.start();
};

TABの入力や空行なども反映されコードを記述する際に読みやすくなります。
欲を言えば強調表示してくれたらなとは思いますがコードに対応しているかしていないかで視認性は全く違いますしありがたい対応です!

「何が違うの?」って方は上のソースコードをテキストエディタなどへコピペしてみてください。
皆さんの設定したTABのインデント量に合せてペーストされるはずです。
ツクールや吉里吉里のコードを発表したりするときに、このHTMLを使えば読者さんがコピペして扱うときに凄く楽なんですね!コードを読んで勉強するときも良いです!

プログラマさんは是否コード使ってくださいね!


コメント

92aki
No.1 (2013/02/28 21:26)
そんなことより早く検索機能実装をお願いします><
鍛造 (著者)
No.2 (2013/02/28 23:29)
それは同意www

まあちなみにですがHTMLによってキレイにデザインされた記事は検索しやすくなるというメリットも実はあったりします
HTMLタグを目印に検索システムは「これは見出しだな」「こっちはリストか」と判断するんです
すると検索システムは独自のアルゴリズムによって、検索してる人が欲しいと思われる情報を出せるようになるんですね

例えば料理のレシピを検索されれば、料理のレシピにはリストが多用される傾向があります
なので検索システムは、料理というキーワードがありリストを用いたページを優先的に提供しようとするのです

結果的に検索経由で記事へアクセスしてくる読者さんが増えるってわけですね
ほびろん
No.3 (2013/03/01 13:58)
タイトルに興味を惹かれました。
読みやすさに配慮するって凄く大事ですよね。
まだまだ読みやすさに配慮した人が少ないのかなと
思うことが多いので、鍛造さんの意見には同感します。
GJな記事でした♪
コメントを書き込むにはログインしてください。

いまブロマガで人気の記事