Home > Flash > ロゴとか作るときに使える地味なテクニック

ロゴとか作るときに使える地味なテクニック

  • Posted by: wu
  • March 20, 2007 5:41 PM
  • Flash

ウェブ製作では、閲覧者の環境にないフォントを使用するときは画像として製作してimg要素で貼り付けたりCSSで背景画像として表示させたりすることがありますが、そういうテキストを含む画像を作るときにはFLASH8のFlashTypeで作ると通常のアンチエイリアスより綺麗にできちゃう。

FlashTypeっていうのは、WindowsXPに搭載された ClearTypeと同じ仕組みのアンチエイリアス技術で、液晶モニターでは特にその視認性が優れています。ClearTypeは日本語フォントには対応していませんが(Vistaの新日本語フォントのみ対応)、FlashTypeでは英字・日本語フォント全てに対応しており、カスタムアンチエイリアスパネルで細かく調整できます。

次の画像はPhotoshopで製作した通常のアンチエイリアスと、FlashTypeを比較したものです。

通常のアンチエイリアスと比較すると、小さな文字でも見やすいことがわかる

中間色ではそれほど変化はみられませんが、背景とのコントラストが高い場合や、文字サイズが小さい場合などはあきらかに綺麗にみえますね。通常のアンチエイリアスでは独特の滲みがでてしまっています。

小さい文字の比較(上がFlashType)

企業サイトではボタンに漢字を埋め込んだ画像を製作することがままあるので、通常のアンチエイリアスでは滲んじゃって綺麗に見えないときなどにはいいですよ。また、全ページに共通するサイトロゴ等を少しでも綺麗にみせたいときにもオススメ。

ちなみに、あの本の実践編で解説しているWeb Standards Designってサイトのロゴも、mt.Vicunaのロゴも同じ方法で作ってます。

すげー地味テク。
今までサイトタイトルとか小さいボタンに漢字を載せるときとかに使ってきたけど、その点は誰にも褒められたことがないので気にしているのは僕だけかもしれません。でも、ほんの少しでも綺麗ってはっぴー

Comments:18

Comment Form
L 2007年3月20日 19:10

はっ! 目からウドンコ。
どう調整してもアンチエイリアスが滲むときはありますね。
私はFLASH8を持っていないので、flash typeとやらを使うことができませんが。。。
#その機能だけ使えるツールみたいなのないのかなぁ。

kz 2007年3月20日 19:24

FlashTypeという名前があったのですね、知らなかった!
その昔お手伝いさせていただいたあのサイトもFlashでアンチエイリアシングしていましたね :-)

ほんの少しでも綺麗ってはっぴーたーん

wu 2007年3月20日 19:52

Lさんへ

その機能だけ使えるツールみたいなのないのかなぁ。

探してみたのですけど、ないみたいです。でもWWWの世界は広いので引き続き探してみて見つかったらご連絡しますね。


kzくん
あ!風邪ひいた? 俺あの飲み会の3日前からずっと体調悪くて、風邪っぽかったんだけど、一昨日からドーンときて咳と微熱がきてる。
ハイパーリンク!させちゃったみたい。素直にIm sory.

darkdaft 2007年3月20日 20:16

おお!それは知らなかったです!
Photoshopで、Web用に書き出しを行う際に、黒文字なのに拡大すると赤とか青とか入ってて嫌だ!って思う時がありましたが、そっちの方が見栄えは良いんですね・・・。
ロゴとかのデータはこれからFlashTypeで書き出そう!ありがとうございます。

wu 2007年3月20日 20:19

えええ! 僕のPhotoshopはそんなことしてくれません。
Photoshopでクリアタイプが使えるのが一番なんですけど、新しいやつにはあるのかな。 orz

darkdaft 2007年3月20日 23:01

ああ、すみません。勘違いかもしれないですw
MacOSXでは、通常の文字(ブラウザや、テキストエディタ等)がFlashTypeと同じように、薄い部分を色んな色で表現しています(これは確実w)。それとコンガラがったみたいです。

あぁ。確かにPhotoshopが正式に対応しなくとも、プラグインでも良いから欲しいですね。CS3は対応してないのかな?もうDEMO期間すぎて発売まで待たなくてはならない状況にあるので試せないのが残念です orz

wu 2007年3月20日 23:08

そうですねぇ。はてぶのコメントでも見かけましたが、OSでテキストがClearTypeで表示されるのと、製作ツールで表示できるのは使い勝手違いますよね。
FLASH8上だと色々なフォントを手軽に切り替え、カスタムアンチエイリアスを調整できるのがとても使い勝手いいです。


も1つはてぶコメントから。 環境によって見え方がかわるのかな?とかかれてますが、これは単に綺麗なアンチエイリアスで表示し、それを画像として書き出すというものなんで、そういったことはないですよ。


FlashType(ClearType)では特に細い書体などで綺麗にみえるみたいです。

naoya 2007年3月21日 19:56

通りすがりです。
この液晶のサブピクセルを使った画像は、液晶によっては逆に非常にみづらくなったりするので、あまりお勧めできないかもしれないと思います。
画像を90度回転させたり180度回転させれば見え方が変わってしまうのがわかるのではないかと。

wu 2007年3月21日 20:22

そうですね。うちの古い液晶でも小さい文字はちらついています。
サンプルは極端な例で、通常サイズのロゴ等でアンチエイリアスが滲む場合には使える場面は多いと思います。また、記事にも書いていますがFLASH8ではカスタムアンチエイリアスパネルからアンチエイリアスの太さと
シャープネスを細かく調整できるので、確認しながら使うぶんには地味テクの1つとして使えるんじゃないでしょうか。

#下のリンク先はカスタムアンチエイリアスパネルです

http://3ping.org/2007/03/20/img/logo.gif

wu 2007年3月21日 20:26

うわ、はてぶってんだこれ。

naoya 2007年3月21日 20:37

うーん。シャープネスとか太さとかじゃなくて白地に黒の文字なのに縁に色がついてるのが、ディスプレイによって綺麗に見えたり汚く見えたりするので、問題なんですよ。
だからこれで生成した画像をいったんモノトーン化して使うなどの処理が必要だと思いますよ。

wu 2007年3月21日 20:44

そうなんですか。CRTを含めて今まで色々見てきましたが、汚く見えたことはなかったので、勉強・経験不足でした。ありがとうございます。
となると、Flashムービーを作るときも気をつけなくてはいけませんね。

boc 2007年3月22日 10:38

これは、こんなに違うものなんですね。
さっそくやってみます。

kz 2007年3月22日 15:03

ふと気づいたんですが、WinXPでCleartypeの設定をするときに、三原色の並び方を「RGB」か「BGR」か変更できるんですよね。
ということは、通常は「RGBで綺麗、BGRでちらつく」でも、環境によってはその逆もありうるのかなぁと思ったりしました。
特に一度画像化してしまうとユーザが変更できないので、注意が必要かもなぁと思いました。

mapi 2007年3月22日 15:25

問題点はブラウザがFlashに対応してなかったらどーなるの? ってところでしょうか。
世の中にはFlashが読めるブラウザばかりではない、ということを心の隅にでも留めておいていただけるとありがたいです…

wu 2007年3月22日 19:34

mapiさん、こんにちは。
ブラウザにFLASHが入っているいないは関係なく、これはFLASHアプリケーションに搭載されている機能を利用して製作したテキストを、画像(PNG, GIF, JPEG)として書き出し、利用するという記事です。
もちろん、ウェブ製作者は閲覧者の環境を熟慮しなければなりません。
このアンチエイリアスの手法も、naoyaさんのコメントで教えてもらったところでは環境によって汚く見えてしまうようなので、注意が必要のようです。


FLASH8のアンチエイリアスはそういった環境の人にとって辛いものなのでしょうかね。 これも環境の設定で変えることはできないものですが、clearTypeが汚くみえる液晶がどの程度あるのか知りたいな。

omi 2007年4月 3日 10:31

他の方のコメントにあるような、ClearType (FlashType)のちらつきは気にしないでいいとおもいます。
というのは、このテクニックは結局ケースバイケースで、読ませる文章にはつかわずに、ロゴなどのポイントに使えばたとえちらついたとしても害は無いと考えます。(実際閲覧者はそういった箇所をまじまじと見ることはない)
記事・コメントにあるように、ロゴなどのポイントで使う分にはとても有用なテクニックでしょう。 しかし間違って文章に使うようなことがあると、それでは害があるでしょう。

JLB 2007年5月18日 15:13

上記の例は
「太さ」「シャープネス」はどのくらいの値なのでしょうか?

Trackbacks:0

TrackBack URL for this entry
http://3ping.org/mt/mt-tb.cgi/84
Listed below are links to weblogs that reference
ロゴとか作るときに使える地味なテクニック from 3ping.org

Home > Flash > ロゴとか作るときに使える地味なテクニック

Book

実践 Web Standards Design

拙著「実践 Web Standards Design」ではXHTMLやCSSの仕様からマークアップの手法・考え方をはじめ、レイアウトや実践的なWebサイト構築のワークフロー、そしてCSSを利用したさまざまな技術的Tipsを解説しています。

Products
Works

テクノスカレッジ 専門学校

mt.Vicuna x 専門学校

2009年度に向けた学院サイトを制作しました。

Search
Feeds

Return to page top