ここ最近、有料版に出席していたものの機を逸してBlogをUPせず状態・・・いかんよなあ。途中まで書いて力つきるという情けなさ。
…ということで、「鉄は熱いうちに打て」ということで、さっそく覚え書きという名のレポート。
今回はWebデザインやコーディング技術に関する話というよりも、意外と知られていないアルファベットや欧文の表記の仕方など、デザインを考える上で非常に重要なタイポグラフィの話です。
私自身は建築系のデザイナーから出発しており、その業務の中で若干のDTP制作や、学生時代に写植の初歩中の初歩を教わったり、タイポグラフィの授業があった程度なのですが、Webデザイナーはフォントの扱いについて、あまり丁寧ではないと言われています。
これはMacやWinがDTP業界に進出し、ベタ打ちのままでもそれなりにできてしまうからという側面がありそうですが、その中でも「なんとなーく」流し込んでいるアルファベットや欧文に関する話です。
正直、欧文に関しては「なんとなーく」入力していたので、目から鱗な数々です。
以下、各セッションのタイトル部分の人物名は敬称を省略させていただいています。
【知って得するアルファベットの基礎知識】スピーカー: 高岡昌生（有限会社嘉瑞工房）
タイトル通り、アルファベットの始まりや活版印刷などの初歩的知識を紹介されていました。
簡単に…とはいいつつも、非常に興味深い話も多く、私たちが「なんとなく」使っている言葉の中には、活版印刷時代の状況から名付けられたものや、アルファベットは当初大文字しかなかったことなど、アルファベットというものを考える時に知っておいた方が良い話が満載でした。
一例を挙げると
- 大文字はCAPITAL、小文字はlower caseと呼ばれる
- 最初は大文字、以降は小文字で組むのはCap & low
- 全てを大文字で組むのはall caps
- small capsは大文字の形態を持ちながら、小文字のサイズを持っている。当然、文字の太さや幅が調整されているので、CAPITAL（大文字）を単に縮小して使うと太さや幅がおかしくなるので、やってはいけない。
また、「lower case」という名前は、活版印刷に使う小文字の活字が手前のケースに入っていたため呼ばれるようになり、現在もその名称が生き続けているらしい。
こういう一例を見ると「そういう意味だったんだ！」と目から鱗がこぼれまくり。
この講演は基礎知識の本当のさわりで、深堀すれば非常に奥が深そう。
「欧文組版 組版の基礎とマナー」という書籍が発売されており、組版を勉強するなら手に入れておきたいところです。
有限会社嘉瑞工房は活版印刷も依頼することができる希少な印刷会社です。少量でも時間をかけて質の高い印刷物を作ることをモットーとする同社と高岡氏にふさわしく、すばらしい名刺を頂くことができました。
印刷会社の方から名刺を頂いたことは何度もあるのですが、だいたいがインクジェット製で、今回のように頂いて「すてきな名刺！」と思ったのは、本当に久しぶりです。
インクジェットは大量に安価で制作することが可能ですが、やはり技術に基づいた製品は本当に感動します。
【欧文を扱う上での誤りやすい例】スピーカー: コン トヨコ
高岡氏のセッションに引き続き、目から鱗がぼろぼろ落ちるセッション。自分がモノシラズということがはっきり実感できます。
事前にいくつか問題が出されていまして、それの正誤解説だったのですが、これがもう…。本当に自分はモノシラズ炸裂で、全然わからないままやってたんだなあと強く反省。
| 誤 | 正 |
|---|---|
| 10:00 am〜6:00 pm | 10:00a.m–6:00p.m |
| 120mm≒4.7 in. | 120mm≒4 3/4 in. |
| ‘70 | ’70 |
他にもいろいろ例題があり、1番目の回答を示された時に「うわーーー。結構やってるよ」と思うことしきり。
欧文の場合「〜」や「ー」は使わない。この場合はEnダッシュ(Option+-(「わ」の右隣)｜Alt+0150を使用するのが正しいらしい。
また、am,pmはa.mとp.mという表記が正しい。
2番目はインチ換算なのだが、小数点という表記がなく分数で表す。主に分母は8/4/2で表示（16/32の場合もある）されるとか。
最後の省略のアポストロフィーは左向きが正しく、右向きはあり得ないらしい。
その他、
- イタリック表記をする場合は、無理矢理イタリック表記（WordとかPhotoshopとかの設定で斜体にする）にするのではなく、イタリック書体を指定する。
- 日本語の三点リーダーを使用せず、エリプシス（Option+;（Lの右隣）｜Alt+0133）を使用する
- 半角引用符【’ ‘】ではなく、英文引用符【‘ ’】を使う。半角引用符は欧文組版では使わない
- 文章の冒頭に頭文字が小文字であるプロダクト名や会社名がきた場合は、大文字にせず小文字にすることができる（ex.iTunes,adidas,ebay…）
などなど…。
例題はこの他にもあり、自分が非常に間違っていることに気がついたorz…
自分が今まで何となく流し込んできたテキストの多くは、やはり記号の使い間違いが多かった。
コン氏もこの前のセッションの高岡氏も同じことを言っていたが、日本企業の英文サイトには非常に間違いが多く「こうしてはいけません」というサンプルになってしまうそうだ。
英文表記がある場合、その綴りについては非常に気を使うが、それ以外のもの、特に記号の扱いや本来イタリックで使えるフォントタイプなのかどうかの校正はほとんど行われたことがなかったし、自分自身もそういう概念がないままテキストを流し込んでいたと思う。
モノシラズを改めて実感する講演だったし、非常におもしろかった。
【Webデザイナーのための欧文フォント入門】スピーカー: ヤマダコウスケ（PETITBOYS）
フォントブログで有名な方ですが、トレンドな欧文についての講演。
私たちが多用するArialとHelveticaとの熾烈な戦いや、Comic Sansの嫌われっぷりなど、フォントを巡る面白い話が聞けました。
また、日本語従属書体（欧文書体ではなく日本語書体）の単独使用はさけるという話もあり、聞けば聞くほど欧文も日本語もごっちゃにしていた自分のモノシラズ度が測れるというもので…orz…
個人的にはComic Sansの嫌われっぷりが半端ないので、かなり面白かったです。
このフォントは名前からして、コミックの吹き出しに使うにはいいと思うのですが、コーポレートサイトとかには使えないなあ…という書体です。
でも「ban Comic Sans」なんていうサイトもあるぐらいで、フォント制作者は「なんでそこまで…」という感想らしいです（苦笑）
【The Web Fonts】スピーカー: 小山田 晃浩（株式会社ピクセルグリッド）
鼻血が出そうなほど気になる最近のマイブームの一つ、Web Font。
Google Font APIの記事は過去に書いたことがあるんですが、最近はクラウドのWeb Fontのサービスが出てきて、かなり使いやすくなりました…とはいうものの、実案件では費用とかの問題で当分使えなさそうなのですが。
それにしても「オロナイン」のサイトは結構好きだったのですが、Web Fontなのは見落としていた。だめじゃんorz…
やはり日本語はたくさんあるし、フォントのライセンスも結構ややこしい。
勿論、商用使用可能な日本語フリーフォントはあるし、サブセット化すれば容量は圧縮される。
氏のブログ「ヨモツネット」には、Web Fontとして利用可能なフリーの和文フォントが紹介されている。
ここを参考にするのもいいと思います。
実務で使うのは大分先になりそうだけど、個人的には使ってみたい、興味津々。
個人的にはフォントプラスはどうかなと思ってますが、まあ、その辺りはお財布と相談です。
Web Fontがもっと自由に使えるようになると、更新時の作業が短縮できそうな気がする。
でも、メインとなる文字に関して、文字間とかを調整したいと考えると「うーん」な感じ。
どうやらjsで文字間などを調整できるみたいだけど、ちゃんと調べてBlogに覚え書きしようかしら。
数年前に比べて、Web Fontの実装に現実味が帯びてきたので、これからも楽しみな内容です。
今回の講演は、デザイナーならぜひ聞いておきたい話ばかりでした。
自分も含め、Webデザインというと最新技術に目がいきがちですが、基本中の基本を吹っ飛ばしてしまうと、後で苦労することも出てきます。
欧文フォントの約束事などは、Webに限らずデザイナー全般があまりよくわからない部分が多いところです。
情報の整理も兼ねるデザインの仕事としては、細かいお作法を押さえておいた方が、より正しくレイアウトできると思うのですが…本当に目から鱗が炸裂で面白かったです。
この講演を聞いていて、ふと思い出したのは資生堂のデザイン室の話です。
資生堂のデザイン部門に配属されると、新人が最初に必ずやらなければならないのが「資生堂フォントをレタリングする」ことらしいです。
なぜ、その作業をさせるのかというと、フォントのプロポーションを正しく理解するためだそうで…デザインにおいて、文字情報がいかに大切かという好例かと思います。
Webの世界も、色々な表現が可能になってきました。
そろそろフォントタイプに目を向ける時期に来てるのかもしれません。