JAM向けのものを作った

html5 jsdo.it

JAM向けのものを作った。
フルスクリーンで見ないと残念な感じになるのでリンクだけ貼っておく。
CBC NET [HARD MODE] forked from: CBC NET

以下制作時のメモとか。

アイディア出し

まずアイディアをいろいろ出してみた。基本的に没。

  • DQの町風にする（よくあるので没）
  • 変態スクロール（cascading scrollで実験したけど没）
  • 変態アニメーション（面倒なので没）
  • 自販機（漠然としすぎて没）
  • 回転寿司（ネタは膨らんだけど大変そうなので没）
    • 上部分で回転寿司風に記事の写真と記事の冒頭が流れている
      • 写真をネタ、記事をシャリに
      • 記事タイトルをどう料理するか
    • 読みたい物をドラッグして下部分で読める
    • タッチパネルで注文風になんかできる
    • 新幹線風のもので注文を届ける

コンセプトを考える

単発的なアイディアではうまいこと思いつかないのでコンセプトから考えてみた。

  • 目的は記事の内容を伝えること
  • 内容をよりよく伝えるためにリニューアル
    • 流行にのるのも一つの案・見慣れたものは見やすい
    • まったく新しいものは嫌われる傾向
  • 記事を読むことに没頭させるには
    • 一つの記事を中央に表示・Writeroomとかそういうの
  • ユーザーはすべての記事は読まない
    • 記事タイトル・冒頭部分・写真などで読むか読まないかを判断する
    • 自由度をなくす・なんらかの方法で選んだ記事を強制的に読ませる「HARD MODE」（ここで思いついた）
      • 読んだ後にちゃんと読んだかを確認するテストやクイズを出す
      • テスト・クイズに正解しないと次の記事を読めない
      • ゲームの要素

こんな感じで、コンセプトは「記事を全部読んでもらうこと。無理矢理にでも。」という感じでかたまった。

実装を考える

  • まともなデザインは作れないのでいろいろごまかす
    • 一つの記事を中央に表示する仕組みでごまかす
    • ダイナミックなスクロールでごまかす
    • ロゴを背景にしいてごまかす
      • 最初は背景をアニメーションさせていたが重いので却下
    • 次の記事が見切れている仕組み
    • 文章でごまかす

こんなところ。