何でも比較: 太字が美しいフォントの組み合わせは?

前回のエントリで、創英角ゴシックはタイトルに丁度良さそうに見えてあんまり使えないことがわかったのでｗｗ、他のフォントを太字にして組み合わせを考えてみることにします。

ちなみに最初から太字でやらなかったのは、ソフトロジックで作られた太字が嫌いだからです! ｷﾘｯ!!

ではどうぞ↓

1. ＭＳ Ｐゴシック 本文 + Arial: お決まりの組み合わせを太字にしてみましたが、日本語と英数字で太さが全然違うので論外。
2. メイリオ: MSが威信をかけて作り出したフォント。日本語にも太字用の字体を持っています。日本語、英数字ともにバランスがいいですね。このままでも行けるかも。懸念は配布先のPCにインストールされているかですね。最近ではXPでも提供されているので一応期待はできます。
3. メイリオ + Tahoma: 英数字を太めで名高いTahomaにしてみました。やっぱりちょっと太いですね。
4. メイリオ + Segoe UI: あまり馴染みのない名前かもしれませんが、Vista、7、またはOffice2007を入れると付いてきます。なかなかバランスのいい書体です。これで決定と行きたいところですが、XPだとWindowsUpdateとOffice2007必須というのはハードルが高いです。まー個人用はこれでいいかな。あとは会社用か。
5. HGPｺﾞｼｯｸE: XPでも入手しやすいといえばHGフォント。XP標準ではないですが(たしか)、Office2003に入っているので、PPTを開こうとしているユーザならきっと入っていると期待できるでしょう(PPTビューアオンリーの人は知らん)。ですが、英数字がひどいですね。英数字を使うことを想定していないんですかね。
6. HGPｺﾞｼｯｸE + Arial: 王道のArialと合わせてみました。あーなんか使えそうですね。もうこれでいいかもｗ
7. HGPｺﾞｼｯｸE + Franklin Gothic Medium: 同じくXP標準のFranklin GothicのMedium。ちょっと高さが足りない感じですが、これでも行けるかもしれませんね。ちょっと幅が広いのでそういうデザインが好きな人にはいいかも。ここには入れていませんが、更に幅広を求める人はVerdanaでもいけます。
8. HGPｺﾞｼｯｸE + Tahoma: 同じく王道のTahoma。Tahomaって太字にするととことん太いですねー。創英角ゴシックUBよりも太いですからね。和文では使うなということですかね。

結論!! HGPｺﾞｼｯｸE + Arial。これでいいや :)

ここまでやってみて気づきましたが、私が導いた結論って、Office2007のフォントの組み込みテーマの組み合わせと一緒じゃん。。。orz

裏技??: PowerPointで標準スタイル時に太字フォントを指定する方法

前回PowerPointのデザインでフォントをユーザ定義する場合、英数字だけ太字にすることはできないと言いましたが、色々いじくってたらできましたｗ ただちょっとやり方が一般的ではないので一応説明を。

例えばArialを太字にしたい場合。以下に示す通り、フォント名を「Arial Bold」にします。

Arial Blackじゃないですよ。Arialの太字書体の名前であるArial Boldです。一覧には出てきませんので手打ちで入力してください。するとどうでしょう。Arialが太字で表示されるではありませんか!!(↓選択文字列のフォントが「Arial Bold」になる。太字はOFFのまま)

まー太字書体を指定しているんですから当たり前といえば当たり前ですけどね。

この手法を使う場合の注意ですが、この指定をした場合、文字列を太字にしても反映されません。ひょっとしたらソフト的にやってくれるかなーと思いましたがやってくれませんでした。

この手法が使えるならFranklin Gothicなんて使わなくていいのかもなー

なお、WinXP + PowerPoint2007でのみ検証。2003とか他のOSは不明。他で使えなきゃほぼ意味のない裏技となります。

何でも比較: 創英角ゴシックUBに合う英数字用フォントは？

仕事でも家でもPowerPointを使うことが多いので、自分用のテンプレを作ってデザイン性を統一しています。

PowerPointは2007になって格段にデザイン調整が楽になりました。配色やフォントを自分で定義できて、それを自由に組み合わせられます。

フォントの定義では「本文」と「見出し」のフォントをそれぞれ「日本語用」と「英数字用」で定義します。ところで、見出しは一般(!?)に太めのフォントを選びますが、「見出し」に使えそうなフォントの組み合わせってどれとどれなんでしょう？今回はそんな素朴な疑問を検証してみようと思います。

まずお断り。今回選定する対象のフォントはWindowsおよびOfficeに同梱されているフォントに限定します。理由は私が持っていないから ;) あとあんまり特殊なフォントだと配布するときに相手側で表示できませんからね。なのでフリーフォントもNGとします。

次に、日本語フォントはHGP創英角ゴシックUBとします。これはデフォルトで入っている日本語フォントの中で「標準」の太さで太字っぽく見えるものがこれしかないからです。まーある程度縛りを入れないと検証内容が発散してしまうのでｗ

では早速検証結果を見てみましょう↓(はやっ!!ｗ)

送信者 Neutoria

1. HGP創英角ｺﾞｼｯｸUB: 英数字用と日本語用フォントが同じ場合。んーなんか日本語用と英数字用で幅も太さも違うので不安定に見える。っていうかそもそもこれがちゃんとデザインされてれば悩む必要もないのになーｗ
2. HG創英角ｺﾞｼｯｸUB: 比較用にプロポーショナルじゃないフォントの例も。もう論外ですねｗ何に使うんだろうこのフォントｗ
3. Arial Black: 太めの英数字用フォントの代名詞といえばArial Black。でもこれだと英数字の方が太くなってしまいちょっと不釣合い。
4. Arial (英字のみ太字): 偉大なるHelveticaのパクリフォント、Arialを指定し、かつ英数字のみを太字にした例。太さのバランスはいいですね。創英角ゴシックUB自体が丸っこいデザインなのでArialと合いますね(個人的にはあまり好きな形じゃないですが)。ですが、英数字だけ太字にするとかはフォントの定義ではできないので残念ながら却下。Officeの改善に期待。
5. Tw Cen MT Condensed Extra Bold: あまり聞き慣れないフォントですが、Publisherを入れるとインストールされます。逆にOfficeをインストールしていてもPublisherを入れてないとインストールされないというレアフォントです。今回の比較対象にするか悩みましたが、あまりにも標準フォントが使えないので入れましたｗ 太さがあっていますが幅が細く字体も創英角ゴシックUBよりもシャープな感じ。個人的には好きですが、ちょっと不釣合いな感は否めません。
6. Franklin Gothic Demi: 同じくPublisherフォントからFranklin GothicのDemiです(Demiってなんだ??)。いい感じで合っているように見えます。ですが英数字の幅が広くちょっと野暮ったい感じ。特に「1」が。。。全角か?って思うぐらいの幅ですね。惜しい!!
7. Franklin Gothic Demi Cond: 続いてDemiのCond(Condってｒｙ)。Demiの幅を狭くしたものっぽいですね。これもいい感じです。贅沢を言えばもうちょっと幅は広くてもいいかもしれない。。
8. Franklin Gothic Heavy: 最後に念のためFranklinのHeavyを。これだと太すぎますね。

うーん。どれもこれもピンと来ませんがｗ今回比較したものの中ではFranklin Gothic DemiかDemi Condが良さそうですね。ですがどちらもPublisherを入れていないとインストールされないレアフォント。。。苦しいなー :(

よし、次は創英角ゴシックUBを捨てて、普通のフォント+「太字」スタイルにしたときで検証してみよう。

きっと続く────────────

HTMLは構造を表現する言語。意味はclassで指定すべき

マイコミジャーナルに、あまり使われていないHTMLタグについての記事がありました。

• あまり使われないHTMLタグ label、fieldset、legend、optgroup…

確かにあまり使われていませんね。私はせっかくあるんだからと積極的に使うようにしていますが、使おうとすると逆に使い方を調べるのに苦労するぐらい使われていません。

しかし、そもそもHTMLのタグだけで意味を表現しようとすること自体が間違っている気がします。HTMLは文章の構造を定義する言語なのですから、文章内で意味を持たせたい場合は、以下のようにタグのclassで意味を指定すればいいのではないでしょうか。

<span class="field string">名前</span>: <input>...

classで指定するようにすれば、自分の好きなようにいくらでも拡張可能ですから、いちいち「入力欄の説明に使うタグは何だっけ？」と迷うこともなくなります。また、HTML自体の構造もシンプルになります。こうすればlabelとかlegendとかは使わなくてもよくなります。

HTML5では文章構造を表すsectionやヘッダ、フッタを表すheader, footerなどがどかどかっと追加される予定みたいですが、ちゃんと使われるんでしょうかね。ブロック要素div、インライン要素span、表組みtable、リスト構造ul(もしくはol)さえあれば、何でも表現できますよ。きっと。

1つ実例を挙げたいと思います。以下をご覧ください。

上記はMicrosoft Wordで「新しいスタイル」を作るときの画面です。これを見ると「種類」には段落、文字、リンク、表、リストしかありません。Microsoftは、これだけあれば文章の構造化は可能である、と判断しているということです。

またWordには「スタイル」という、上述した「構造」に対する「装飾」を定義するための機能があります。HTMLとCSSみたいなものです。とてもシンプルです(複雑なのは使い方だけです :p )。Microsoftの製品を引き合いに出すと、何か悪い例を示しているような錯覚を感じる方もいるかもしれませんが、このデザイン、操作性が世のデファクトですから、仮に正しないとしても、間違ってはいないはずです。

もちろん、グラフの描画や複雑なレイアウトを構造化するのであれば、上述の構造だけでは足りないですが、一般にはそれだけで9割程度の要求を満たせると思います。シンプルに行きましょうよ。

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

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タグ直打ちは結構厳しいです。。。)