tkNotes :: 俺式4.0 デザインコンセプト

Created: 2012-03-24
Modified: 2012-03-24
Written by Tatsuya Koyama

このページは

このページは、このサイトをデザインするにあたって考えた指針やルールを記録したものである。

どういうサイトにしたかったか

僕は俺式4.0 を学生時代に作っていた俺式3.0 と比較して、見た目と機能面双方において 一歩進んだサイトにしたかった。 俺式3.0 を作ったのは 20 歳くらいの頃。 「敢えての中2感」をコンセプトとしたデザインで、 インデックスの上部には歯の浮くような文言、色もダーク調だった。

が、時間の経過につれて僕の感じ方も変わってきて、 もっとまともなイメージのやつにするかー と思い直すようになった。 色調も無彩色をベースにアクセントカラーはグリーンと決め、無難なバランスにまとめることにした。 あとは前のバージョンよりも「サイト内を巡りやすい」ユーザインタフェースにしたいと考えた。

そもそも俺式って名前はどうなのか

なんていうか、すごく中2感があっていいよね。実際初めてサイトというものを作ったのは リアル中学3年の頃 で、アレな感じのテキストサイトが流行の、Web1.0 のまっただ中だったのだ。 いわゆる暗黒時代というやつだ。

でも僕はその心の闇を、もとい少年の頃の気持ちを忘れないままでいたい。 あとなんかちょっと定着しちゃった感があって変えづらい。 自分の闇も影も、僕は甘んじて受け入れよう。

一応海外の人がゲームをダウンロードしに来た時とかにサイト名を覚えて検索できるよう、 tkStyle という横文字をくっつけているが、まあとってつけたものだ。 君はこのサイトを君の好きに呼んでくれたらいい。

デザインの要件

自分はデザインというものは 自己表現 ではなく、問題解決の手段 だと捉えている。 つまりデザインを行う際には解決したい問題や、 誰を対象としているかといったことを明確にしておく必要があると考える。 今回のサイトの場合はこうだ:

  • (1) サイトを訪れた人が 自分の作品へアクセスしやすく
  • (2) 自分が振り返りやすいよう、勉強ノートを 構造化して蓄積 したい
  • (3) 各ページはページ内の 全体像 をつかみやすいように
  • (4) 解像度の依存性が低い ウェブデザインに
  • (5) PC で見れればいい。ひとまずスマフォは考えない。
    が、iPad では見たい ので iPad で表示が崩れないようにしたい

要件に対する解決策

(1) 作品へアクセスしやすく

(1) を解決するために、まずはコンテンツを3種類に大きく分け、サイトの入り口を整理した。 また ピクトグラム を使用することで、とりあえず一番見てもらいたいコンテンツである ゲームがありそうなリンクがすぐ分かるようにした。

(2) 勉強ノートを構造化

(2) は相当悩んだが、結局のところ「インデックスをカテゴライズする」という無難なレベルに落とし込んだ。 一応サブカテゴリも同時に表示するようにして 「少し先が見えてる」 感じを持たせた。 ページは全て 木構造 の中におかれている。体系化・構造化するのに木構造というのは無難な方法論であるし、 ファイルツリーも木構造 だからだ。実際のファイルツリーは下記のようなイメージである。

少し考えたところとしては、コンテンツのページファイルは末端のディレクトリに置くようにし、 サブディレクトリ(= カテゴリ)がある階層は index のページしか置かないようにしたことだ。 これは「ひとつ前のページに戻る」のと「ひとつ上の階層に上がる」というのが一致している構造の方が 見通しが良さそうだと思ったからだ。なお、途中で階層の深さを変えたくなる場合については今のところ考えていない。

また、左のグリーンのカラムにディレクトリツリーを表示することで、今の階層を明示すると共に、 上の階層に戻りやすくした。(いわゆるパンくずリストというやつだ)

(3) ページ内の全体像をつかみやすく

(3) に対しては、ページ内の記事のインデックスを 常時左のカラムに固定して表示 するようにした。 いつでもアウトラインが見えていて、クリックすればそこまでページをスクロールさせることができる。 記事のインデックスを先に表示しているドキュメントはよく見かけるが、 読んでいる途中でインデックスを見返したい場合にそこまでページをスクロールさせて戻るのが面倒だったので このような固定表示にした。(ただし iPad では CSS 的なアレでうまくいかなかったので諦めた)

(4) 複数の解像度に対応

(4) に対しては リキッドレイアウト の CSS デザインを心がけた。 とは言っても今時のディスプレイは解像度が高いので、横 1000 px 程度は大体あるだろうと見込んではいる。 (ちなみに iPad のブラウザは仮想的に横 980 px をシミュレートする)

文章のパラグラフなどは横に広がりすぎても見にくいので、 最大幅を設けてそれ以上は広がらないようにした。 表やソースコードなどは大きく見たいケースが多いので最大幅は設けていない。

(5) PC と iPad で見たい

(5) だが、Mac/Win の主要なブラウザ (Chrome, Firefox, Safari, Opera)iPad で表示確認を行いながら調整するようにしている。 普段 Mac を使っているので IE があまりチェックできてないが、 まあ IE だしダメだったら諦めてほしい。

iPad はレンダリングの解像度や一部の CSS の挙動が特殊で面倒だったので、 もう iPad 用の CSS を用意してしまってユーザエージェントを見て切り替えるようにした。 左のカラムにマウスを乗せるとヒュッと出てくるギミックも、 iPad では そもそもマウスオーバという概念が無い のでやむなく外している。

ちなみにこのサイトは、iPad で見たときに左指を使うと閲覧しやすいようなインタフェースになっている。 (僕が左利きだから)

デザインの指針

デザインを情報量の付加として使う

  • デザインは単なる見た目のバリエーションではなく、その一つ一つは 機能 を持っている。
    • 例えば以下の要素は、一貫性のあるルール のもとで使えば 情報 を持つことができる。
要素 持てる情報の例
単語の強調、コンテキストの明示
空間 見やすさの向上
位置、配置 整形、階層構造の表現、優先度付け
距離 内容の近さ、関連性
線、枠線 意味のまとまり
サイズ 重要度のコントラスト
動き、連動 強調、関連性

ブロックのコンテキストごとに色・デザインを一貫させる

  • 意味に対して一貫したまとまりを作ると、文章の構造を一目見て把握しやすい。そこで、以下のブロックに対してデザインを決め打つ。
  • 引用
  • 用語の解説
  • 参考情報(FYI)
  • 脚注
  • コード
  • コードの実行結果
  • 揺るぎない事実としての知識
  • 経験などから得た見解
  • 軽い警告
  • 重要な警告
  • メリットの提示
  • デメリットの提示
  • (実際のデザインは検討中)

さらに文字列内のコンテキストに色をつける

  • さらにブロック内のテキストに対して、意味に応じた色をつけるとより情報量は増える。
    • ひとまりまりの単語やフレーズに色をつけることで、チャンキング の効果もある。チャンキングとは、長いものを短いいくつかの部分に区切ることで覚えやすくする手法だ。
      • 例えば、以下の2つの文章を見比べた際、前者より後者の方が文章構造を把握しやすい、という人が多いんじゃないかと思う。
(やむを得ないな…) 俺は闇の秘密結社と夢と幻のカツ丼屋を追うために、提示された電話番号を覚えた。09012345678 という 11 桁の数字だ。
(やむを得ないな…) 俺は 闇の秘密結社夢と幻のカツ丼屋 を追うために、提示された 電話番号 を覚えた。090-1234-5678 という 11 桁の数字だ。
  • 同じコンテキストの中での重要度、語調のレベルは文字サイズで表現する
コンテキスト 例文
リンク リンクのテキスト
(丸括弧)(補足説明) ・昔作っていたサイト(俺式3.0)の場合は…
・言語は適当なもの(Python あたりが無難だろう)を使う
「かぎ括弧」 / 命名、チャンキング ・タイトルを「GENETOS」といいます
・彼らを仮に「未来人」「過去人」とに呼び分けよう
「緊急度が高く重要度が低い」ケースと「緊急度が低く重要度が高い」ケースでは…
「かぎ括弧」 / 台詞 ・俺は言ったよ、「おいおい、そんなんじゃ日が暮れちまうぜ」ってね
軽い強調 / 可読性のためのチャンキング ・サイトには ピクトグラム を多用することにした。
・デザインが 問題解決の手法 だとしたらアートは 芸術の表現 だから、この2つは…
強調 ・そう! BGM には 状況を伝える という効果もあるんだ。
・人は決まってそう言う。だが僕にはそうは思えない。 何故なら…
強い強調 ・さらにその人が音楽を気に入ってくれれば、音楽と一緒にそのシーンを印象に残す こともできるのだ
・何より重要なのは、検索ってのは知ってるものしか検索できない ってことだ。
悪い意味での強調 ・エンジニアリングにおいては、同じことを何度も何度も繰り返す という愚行は真っ先に排除しなければならないんだ。
語調を弱める ・これにて僕の旅は終わった。(余談ではあるが、その後の僕は…)
不安、不確定 ・たぶん他のバージョンでも動くと思う。(動作確認はしてない)
・〜ということもあったから、一概に正しいとは言えないが。
アグレッシブな突っ込み なんでだよ!!!!
なんでだよ!!!!
なんでだよ!!!!
なんでだよ!!!!
なんでだよ!!!!
なんでだよ!!!!
セルフツッコミ 最近まで合コンって合同コンパイルのことだと思ってましたしね (嘘ですけどね)
ちょっと引いた感じの突っ込み ごめんその発想はなかったです。
アグレッシブなボケ 家にこもってこのサイト作ってたんだ。悪いね、こんなにリア充で!!
消極的なボケ、毒を吐く 今時エディタの宗教論争なんて時代遅れだし、とりあえずみんな Emacs 使えばいいと思う。
陽の感情 / 嬉しい、楽しい おー、やった! AIR アプリが Android で動いたー!
負の感情 / 悲しい、怒り なんだこの挙動は… わけわからん。困ったなー。
頭の中の声、疑問 ・先のケースで何故動作しなかったのかは謎だ。
・この本にはこう書いてあったが、僕としてはいささか疑問だな。
世間一般に使われるキーワード、専門用語 OS のタスクが過多になったりメモリのスワップが発生したりして、一瞬大きく FPS が低下することを フレームレートスパイク (Framerate Spike)という。
人名、ブランド名、アーティスト名 ・ハッピーな感じのハウス系の音楽とか好きだな。Q;indivi とか。
・最近 石黒正数 さんの漫画にハマってまして。
作品名 好きなゲームは ICO とか、大神 とか。ゴーストトリック も面白かったなぁ
俺式ローカルのキーワード、固有名詞 ・GENETOS の装甲の1つに カウンター っていうやつがありますが…
・俺式4.0 は独自のコードジェネレータ tkgen によって生成されている
要素の列挙、単語のグルーピング ゲームの5大要素は ビジュアル、双方向性、サウンドエフェクト、BGM、ストーリー だと、 洞窟物語作者の天谷さんは言う。
注意喚起 この方法の方が習得期間が短くて済みます (※ただし魔法は尻から出ます。)
リアルタイム性のあるパズルゲーム (ほにゃぺけとか) を想像してみてください
引用、格言 かのアインシュタインは 『創造のコツは、それがどこから得たものか分からないようにすることだ。』 と言った

コンテキスト・カラーマップ

  • 上記のルールは、色相の並び的にはこうなる
Color Name Vivid tone Grayish tone Light tone
Black
_
軽い強調
_
不安、不確定
_
語調を弱める
Red
_
強い強調
_
アグレッシブな突っ込み
_
Orange
_
陽の感情
_
引用
_
Yellow
_
_
要素の列挙
_
Chartreuse Green
_
ローカルキーワード
_
_
Green
_
キーワード
_
_
Spring Green
_
_
人名 / 作品名
_
Cyan
_
_
(丸括弧)
_
Azure
_
消極的な突っ込み
_
_
負の感情
Blue
_
「かぎ括弧 / チャンキング」
_
悪い意味での強調
_
Violet
_
頭の中の声、疑問
_
「かぎ括弧 / 台詞」
_
Magenta
_
リンクのテキスト
_
_
Rose
_
注意喚起
_
強調
_

色多すぎじゃないか問題

人によっては色が多すぎてうるさい、と思われるかもしれない。 正直僕もちょっとやりすぎかもなと思っている。 だが僕は色彩のあふれる世界が好きなんだ。