テキストとデザインの密な関係 蝶俺理論

うわータイトルなんかえーろーいーwww
カトゆー家断絶さん経由で好きなサイトさんにお願いしたい、十か条(全力ブログさん)という記事がおもしろかったので、特に「テキストとデザイン」のことを書こうかと。
可読性とデザインはどうするべきか、というお話。



おいらリアルではデザイン業に足をつっこんでまして。もっといえばDTP(雑誌のデザインとか小説の文字組とかちらしとか言えばたぶん想像つくかと思う)が本職です。
なので、テキストとデザインの関連っていうのはすごーく興味があるんですよよよ。
仕事では紙媒体なので、リンクとかアンテナだとかそういったネット独自の技術はないのですが、それって言っちゃえばクリックひとつで済むような便利な部分をアナログで補完する(ページをめくらせる)デザインアナウンスをしなくちゃいけないんですねー。
そういった意味でははまると面白いですがいったんめんどくせーと思うとどうしようもないですね(笑)
ウェブでは最初から便利な機能が使えるわけですから、それにデザインアナウンスが加われば鬼に金棒ですな。
ウェブの技術についてはおいといて。つか突っ込まれてもわからんからな!(ぉ


テキストサイトを例にとって話を進めましょう。


ものすごーく面白くてためになるテキストを書く方がいるとします。いや実際いるんですけどw
面白いテキストなんですが、改行までやったら長くて行間もやったら狭くてリンクもどこにあんだかわかんない、と、全力ブログさんが残念に思ってる要項でテキスト構成に関わる部分がすべてかぶってるとします。
たしかに見づらい。
じゃあどうしたらもっと読みやすいものに変える事ができるか、そこでデザインが生きてきます。
デザインするというのは視覚的な情報を与える最大最強の武器でして、少ない情報で関連付けができる素敵アイテムです。
オブジェクトでいうなら赤は激しい、青は冷たい、縦長はスピード感、横長は安定感、などなど。*1
文字組でいうなら行間が狭いとさっさと読めとスピードを煽り、行間が広い・改行がおおければゆっくりじっくり読んでーと作用するわけです。文字が小さいと集中して読んで、大きいとまったり読んでという意味合いに作用する事が多いですね。*2
心理的な意味付けを瞬時にしてくれるわけです。
このデザイン的な要素と、素晴らしいテキストの「内容」と「時事性」などをうまく組み合わせるととたんに魅力がさらに倍率どーん、になるわけです。
見た目がかっこいいという心理作用も、たいがいは「かっこいいと思わせるデザイン」の「印象」だけで構成されている場合が多く、視覚情報だけが先走ってしまうという事例が多いようです。内容おいてけぼり、みたいな。
デザインは大方コンテンツの「アシスタント」であって「メイン」にするにはちゃんと「色・形が及ぼす心理作用と使い勝手の併用」を考えてやる必要があります。

ほんわかポエムなのに背景黒で赤字、健全サイトなのにどッピンク、読ませたい記事なのに背景黄色で文字が白、背景白で文字が全部うすい灰色(心理的には「かっこいい」の外側の印象が一般的により流通している)では「視覚情報から心理的に読ませる気をなくさせる」ことになります。あとは心理的な下準備してたのに、読んでみたら心理作用と全然関係ない読み物だったりしてがっかりしたりとか。
ちなみに、文字情報よりも視覚情報のほうが伝達が早いのがセオリーです。
ここを上手く使うとより心から人に親しまれるサイトコンテンツ・デザインになると思います。


ウェブの特徴で一番やっかいなのは、紙と違ってどこまでもサイズを大きくできる事ですね。紙はA4ならA4内までしか印刷できませんから。
情報の内容如何で大きさを自由に決められるのも利点でありリスクなのがさらにサイトデザインの面白いところだなーと思います。

こんなこと言ってるけど常に興味が尽きないのでいろんなとこから勉強中の身。

*1:12色相環の対象色は激しく不安感を伴う心理作用の恐れがありますが、逆を言えば躍動感・流動感などを得られるという利点もあったり。彩度・明度の組み合わせなども同じ事が言えます。こういったところをコンテンツの方向性に合わせて活用している人のサイトは大抵見ていて楽しいです。

*2:DIVタグで行間を指定するのが俺流行。やっぱ行間は2分4分が好きー。<DIV STYLE="line-height:1.7">とか。