意味を主にしたデザインの提案

Microsoft Office 2007のWordには上記のようなツールバーがあります。Wordに限らず、多くのアプリケーションで文章の書式を設定するときには、このようなツールバーを使いますよね。Bloggerの投稿フォームにも同じようなツールバーがあります。こういうデザインをWYSIWYG(What You See Is What You Get)って呼んだりします。見たままの効果を文章に反映できる、とても優れたデザインです。これらのツールバーには、お決まりのように「太字」「斜体」「フォントの色」「フォントのサイズ」「左寄せ」「中央揃え」などのボタンがあります。ある意味、文章の編集にはこのツールバーデザインがデファクトとなっているため、もはや誰もこれを不便だとは思わないと思います。

しかし私はあえてこのデザインに異論を唱えてみます。そもそも文章内の文字列を太字にしたり色を変えたりするのは、その文字列が大事な内容であったり、逆に婉曲したい内容であることを読者に示したいからです。人は文字列を装飾することで意味を持たせようとしているのですね。

であれば、装飾の変更単位も「太字」や「色の変更」ではなく、最初から「強調」や「婉曲」などの「意味を主にしたデザイン」にしてみてはどうでしょう。つまり意味とそれを表す装飾の分離をするということです。HTMLとCSSみたいなものですね(HTMLは意味ではなく構造を表す言語なので、ちょっと違いますが)。

具体的にこんなデザインにしてみてはいかがでしょうか。

ツールバーのボタンには、装飾ではなく、意味を示すアイコンを並べてみました。使い方はWYSIWYGツールバーと同じです。文字列、あるいは段落を選択してクリックするだけ。「強調」ボタンを押せば、文字列に「強調する内容である」という意味を付けられます。「強調」という意味を付けられた文字列がどのように装飾されるか(太字になるのか赤字になるのかなど)は、どこか別で定義をするようにします。例えば右にあるWordの「スタイル」ウィンドウのようなUIで。(Wordのスタイル機能も「スタイル名=意味」と思えば「意味を主にしたデザイン」を実現できているんですね。あまり使われていませんが。)

このデザインの利点は、同じような文書をいくつも書く場合(設計書、マニュアル、ニュース記事、真面目系(?)のブログ等)、同じデザインを複数の文書に適用できます。一方難点は、ツールバーのボタンを押しても何が起こるか想像できないということです。分かりやすさはWYSIWYGには遠く及びません。

ここまで書いてて思いましたが、HTML+CSSなら大体実現できるんですね :) Blogの投稿もHTMLでするんですから、もっと意味を主にしたデザインでできるようにしてくださいよ。(HTMLタグ直打ちは結構厳しいです。。。)