今回はESET mac版の公式サイトで使用した擬似要素（:before・:after）を使ったbox-shadowのエフェクトを紹介していきたいと思います。

ESET Cybersecurity（イーセット サイバーセキュリティ）と
ESET Smart Securityのサイトでデザインアクセントとして実装しています。（2011/11/15現在）

実際の使用例

今回は、コンテンツボックスの影の中央部分が少し膨らんでいるようなエフェクトを使用しています。

コードは以下のように記述しています。

contentプロパティで擬似要素を表示させ、
border-radiusで楕円にして影を表現しています。

positonプロパティを使いbox要素を基準にして、
box擬似要素が下に、box要素が上にくるよう重ねて表示して、
今回のようなbox-shadowのエフェクトを表現しています。
今回は:beforeで記述しましたが、:afterを使っても問題ありません。

重ねた時にbox擬似要素のbox-shadowのみだと、突然影が表示されてしまうので、
自然に影の中央だけが少し膨らむようにbox要素部分にもbox-shadowを指定しています。

また、box擬似要素の上にbox要素をのせるので、
box要素には必ずbackgroundプロパティを指定しましょう。
指定しない場合はbox擬似要素で指定した楕円が表示されてしまいます。

Internet Explorer 8 以上でないと表示されませんが、
サイトのちょっとしたデザインアクセントとして使用してみてはいかがでしょうか？

参照サイト

他にも色々なbox-shadowのエフェクトを紹介しているサイトがありました。
サイトのアクセントとして使えそうなものが多く紹介されていました。

Ombres avancées avec CSS3 et box-shadow
http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow

Pure CSS3 box-shadow page curl effect
http://www.matthamm.com/box-shadow-curl.html

Css3 Boxes
http://www.webdesignshock.com/demos/css3-boxes/

• img要素のwidth,height属性は指定しない
• 見出しをCSSでシンプルに装飾するtips
• 自動化のすすめ（Emeditorマクロで連番数字を挿入）
• 自動化のすすめ（Emeditorマクロで<table>テーブルタグ作成）
• 簡単にCSS3を使おう！お役立ちCSS3ジェネレーターまとめ

iFrame版Facebookページの作成方法としては

• ・デザインを作成する
• ・アプリ開発者登録をする
• ・コーディングをおこなう
• ・htmlをサーバーにアップする
• ・iFrameページ用のFacebookアプリを作成する
• ・FacebookページにFacebookアプリを追加する

をおこなっていきます。

デザインの作成に関してはPart.1の記事を参照してください。
以下では開発者コードの取得から記述していきたいと思います。

アプリ開発者登録をしよう

iFrame対応FacebookページはFacebookアプリとして作成してから
Facebookページに組み込むので、アプリ開発者として登録必要になります。

「開発者ページ」の「Set Up New App」をクリックすると、
登録画面が表示されます。

「携帯電話のアドレス」か「クレジッドカード番号」の入力で登録を完了できます。
まずは登録をしておきましょう。

コーディングをしよう

作成するページのURLを決めよう

今回は「ようこそ」ページを作成します。
【表示させるページのディレクトリ】（/で終わるURL、表示されないページ）、
【実際に表示させるページ】（iFrame内で表示されるページ）を作成します。

作成するURLの例：
【表示させるページのディレクトリ】
facebook/（※このページは実際に表示されないページです。）

【実際に表示させるページ】
facebook/welcome.html

ページを作成しよう

横520px、縦800px以内でコーディングをおこなっていきましょう。
デザインが横520px、縦800px以上だと、スクロールバーが表示されます。

縦が800px以上の場合JavaScriptで対応することでスクロールバーなしで
表示することは可能ですが、今回は800px以内で作成します。

htmlをサーバーにアップしよう

作成したページをサーバーにアップしましょう。

アップする際、可能であればページはSSL（https）にしましょう。
対応していない場合、以下のようなポップアップが表示されて
ユーザーが一時的に通常ページ（http）に変更する手間がでてきます。

セキュリティを気にするユーザーのためにも、
SSLページを用意しておくことをおすすめします。

iFrame用のFacebookアプリを作成しよう

新規アプリケーションの作成

開発者ページから「Set Up New App」をクリックしてください。

アプリケーション名（アプリケーションとして表示される名前）を入力して、
「Facebook利用規約に同意しますか？」で「同意する」にチェックをいれてください。

セキュリティチェックで表示されている文字を入力すると、
アプリケーションの編集画面が表示されます。
その後、アプリケーションの設定をおこなっていきます。

「Facebook について」の設定

「基本データ」の「言語」を「日本語」に変更しましょう。

「Facebook Integration」の設定

以下の画面に沿って設定していきましょう。

キャンバスページ
アプリケーションのURL名です。文字数制限は20文字以内です。

Canvas URL
アプリケーションの枠になるURLです。例でいうと「facebook/」になります。

iFrameサイズ
「Auto-resize」に設定するとスクロールバーが表示されません。

「Page Tabs」の「タブ名」
実際サイドバーに表示される名前です。「タブ名」は後から変更できます。

「Page Tabs」の「タブのURL」
実際に表示されるiFrameページのURLです。

「Page Tabs」の「Secure Tab URL」
実際に表示されるiFrameページのSSL用URLです。
（SSLがある場合追加してください）

最後に「変更を保存」で設定を保存してください。
その後、「マイアプリ」のページが表示されます。

Facebookアプリをページを組み込もう

「マイアプリ」が表示されたら、
画面右側の「Application Profile Page」をクリックしてください。

これでFacebookページにiFrame対応Facebookページが追加されました。
Facebookページにページが追加されているか確認しましょう。

クリック後作成したアプリのFacebookページが表示されるので、
ページの左側の「マイページへ追加」をクリックしてください。

すると、Facebookページの選択画面が表示されます。
ページを追加したいFacebookページを追加してください。
これでFacebookページに作成したページが組み込まれました。

実際に選択したFacebookページを確認してみましょう。
うまく反映されている場合は、サイドバーに追加したタブ名が表示されています。
タブをクリックすると作成した「ようこそ」ページが確認できます。

同様の手順で複数ページ作成することができます。

弊社で作成したFacebookページ チャットワーク（ChatWork）では
チャットワークの最新情報、便利な使い方や活用方法を掲載してます。

iFrame版Facebookページ参照サイト

iframe対応！初めてのFacebookページの作り方
http://ascii.jp/elem/000/000/593/593097/

iFrameを使ったFacebookアプリの追加
http://web.showjin.me/2011/04/iframe_fbapp.html

FacebookのSSL対応強化でカスタムTab導入の壁が高くなりそう
http://blog.falcon-space.net/2011/04/fb-secure-browsing-hard-on-custom-tab/

気をつけたい！FacebookページのiframeのHTTPS対応
http://rkanbe.blogspot.com/2011/06/facebookiframehttps.html

• 自動化のすすめ（Emeditorマクロで連番数字を挿入）
• 自動化のすすめ（Emeditorマクロで<table>テーブルタグ作成）
• 擬似要素（:before・:after）を使ったbox-shadowのエフェクトでデザインアクセント！
• 今から作るiFrame対応Facebookページの作り方 Part.1
• ターゲットブラウザを選定して効率化！サイト制作時間短縮術

OGP（Open Graph protocol）の対応をおこなうだけで、
ウォールが少し華やかになります。
弊社サービスサイト「チャットワーク」で対応した時におこなった対応方法を紹介したいと思います。

弊社サービスサイトのOGP対応後

OGPを使うとどうなるの？

OGP（Open Graph protocol）を使うと、
「いいね！」を押してウォールに投稿するときに、
タイトルや概要、表示する画像を指定することができます。

通常はFacebookが自動で表示してくれます。
OGPに対応する前のデフォルトはこのように表示されていました。

OGP対応方法

htmlタグの記述

まず、htmlタグにOGP用の記述を追記します。
「xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"」

対応後のタグはこのような記述になります。
‹html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"›

headタグ内の記述

headタグ内にOGPタグをいれて記述を指定していきます。

FacebookのDevelopersページで作成すると簡単に作成することができます。
「Step 2 - Get Open Graph Tags」の部分に記入して「Get Tags」を押すだけでコードが生成されます。

上記のコードをサイト内に挿入してアップロードすると、OGPに対応です。

「og:description」の部分の文章を自分で指定したい場合は、
OGPのタグを追加してください。

OGP表示確認方法

URLリンターを使う

ちゃんと情報が反映されているか、URLリンターで確認してみましょう。
URLを入力して、「Lint」を押すと情報が表示されます。

ウォールでテスト投稿

URLリンターだけでは表示のされ方がわからないので、
ウォールに「http://www.chat-work.com/ja/?id=1」とURLの末尾に「?id=1」
（数字は1度投稿すると使えなくなるので他の数字に変更してください）
を入力すると見え方がわかります。

OGPに対応しても、Facebook側で反映に時間がかかる場合があるので、
すぐに反映されない場合もあります。

少しタグをいれるだけで、ウォールの見え方が変わってきます。
OGPに対応して、ウォールでちょっと目立つよう対応してみてはいかがでしょう。

OGP参照サイト

Open Graph protocol
http://developers.facebook.com/docs/opengraph/

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か
http://d.hatena.ne.jp/amachang/20110117/1295233078

metaタグを追加してFacebookに対応する方法とハマりやすいポイント
http://design.kayac.com/topics/2010/10/meta-facebook.php

• 今から作るiFrame対応Facebookページの作り方 Part.2
• 今から作るiFrame対応Facebookページの作り方 Part.1
• Facebook コメントプラグインをWordPressに設置する手順とコメントを管理する方法

今回は先輩デザイナーさんに教えていただいた
バナー制作のちょっとしたコツを紹介していきたいと思います。

まずはバナーを作ってみよう

バナーはEC studioが出展している「モニプラ」の
アンケートバナーを作成してみました。
1つ目のお題は「パソコンソフトは店で買う？ネットで買う？」でした。

	→
before		after

ちょっとしたコツ！【その1】

• 文字は揃えたほうがきれいに見えるよ
• 注目させたい文字のフォントは大きくするとメリハリがつくよ
• イラストはちゃんとなにかわかるようにバナーの中にいれてあげよう

修正箇所は、文字を中央揃えではなく左揃えに修正しました。
また、注目させたい「店」「ネット」のサイズを大きくしました。
またイメージで使ってる画像がわかりにくかったので、
もっとバナーの中にはいるよう位置を移動させました。

2つ目のお題は「パソコン何台持ってますか？」でした。

	→
before		after

ちょっとしたコツ！【その2】

• 文字間の隙間があきすぎてる文字はつめたほうがキレイにみえるよ
• 同じ行でフォントの大きさを変えすぎると読みにくくなるよ！
• 単色でのっぺりする場合はグラデーションをいれたらいいよ

修正箇所は、「何台」という文字の大きさを他のものと同じサイズに揃えました。
また、「amazonギフト券プレゼント」の文字間が開きすぎてるのでつめました。
背景のオレンジものっぺりしていたので、
オレンジから薄いオレンジのグラデーションを使ってみました。

3つ目のお題は「EC studio スタッフに一言メッセージを♪」でした。
今回はパソコンではなく、EC studio に関するテーマでした。

	→
before		after

ちょっとしたコツ！【その3】

• 人を使うときは顔を隠しちゃったら、もったいないよ！
• 問いかけるものは人一人を使ったほうがわかりやすいよ
• 場合によってはアイコンとかシルエットを使ってもあり

修正箇所は、引きの集合写真を一人のみの写真に変更して、
顔がちゃんと見えるように作成しなおしました。

作ってみて思ったこと

まずは、作業するときは画像を拡大して作成してしまうけど、
確認するときは100%にして引いて全体を確認するのが大事だと感じました。
やっぱり全体を見ると「あれ？バランスが…」と気づくことも多かったです。

最後は、やっぱり作ったものはレビューしてもらうのが大事。
自分が気づかない箇所のアドバイスをもらえるのですごく勉強なりました。
品質も一定に保てるので、大事なことだと実感しました。

今回紹介させていただいた「モニプラ」ではアンケートを募集中です！
ぜひ「モニプラ」でアンケートに答えて、
素敵なプレゼントをゲットしてみてはいかがでしょうか？

• Fireworks 「パス」パネル早見表
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• 知ってるようで、実は知らない?！ Fireworksの小技
• 擬似要素（:before・:after）を使ったbox-shadowのエフェクトでデザインアクセント！
• 成功するホームページを作る8つのポイント

CSS3を使いたくても、コードを書くのがなかなか難しい。
そんなときはCSS3ジェネレーターで作成してみてはいかがでしょうか？

視覚的に確認できるので、ちょっとした調節も簡単。
気に入った形を作成して、コピー＆ペーストでスタイルシートに貼るだけです。

ジェネレーターを使って、ぜひCSS3にチャレンジしてみてください。

複数のプロパティを作成する場合

CSS3プロパティジェネレーター

http://css-eblog.com/eblog_sample/0912/css3-generator/

日本語のジェネレーターなので英語が苦手な方におすすめ。
gradient, box-shadow, text-shadow, border-radiusを生成できます。

CSS3 Generator

http://css3generator.com/

様々なCSS3のコードを作成できます。
ほとんどが値を数値で指定していくジェネレーターです。
border-radius, box-shadow, text-shadow, RGBA, @font face, multiple columns, resize, box-sizing, outline, transition, transformを生成できます。

CSS3.0 Maker

http://www.css3maker.com/

様々なCSS3のコードを作成できます。アニメーションのプロパティもあります。
ただし、gradientはFirefoxで利用した場合は、-moz-のコード、
WebKit系のブラウザで見た場合は、-webkit-のコードしか生成されないので、使う時は注意が必要です。
border-radius, gradient, transform, animation, transition, RGBA, text-shadow, text-rotation, @font faceを生成できます。

グラデーションを作成する場合

Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

CSS3のグラデーションのコードを生成できます。
プリセットがあるので簡単に色を作成するのが便利です。

角丸を作成する場合

CSS3 Rounded Corner Generator

http://www.cssportal.com/css3-rounded-corner/

border radius のコードを生成できます。
視覚的でわかりやすく、カラーなど細かい設定もできます。

外枠を画像にしたい場合

border-image-generator

http://border-image.com/

CSS3のボーダー上にイメージ画像を挿入するコード生成ができます。

カラムを作成したい場合

Générateur de multi-colonnes en CSS3

http://debray.jerome.free.fr/index.php?outils/Generateur-de-multi-colonnes-en-css3

CSS3のカラムをコード生成することができます。

まとめ

このようにジェネレーターは数多くあるので、
ぜひ活用してCSS3を勉強していくのはいかがでしょうか。

• 簡単作業でスピードアップ！パフォーマンスアップまとめ
• 擬似要素（:before・:after）を使ったbox-shadowのエフェクトでデザインアクセント！
• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips
• 企業のTwitterページのデザインをまとめてみた
• [CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child

2010年9月25日に.coder「すこーし愛して。ながーく愛して。Webパフォーマンス」でプレゼンさせていただきました。
あまりのイケてるプレゼンテーターの中にちょっと申し訳ない感じでしたが、
みなさまアットホームに迎え入れていただき、楽しい1日を過ごすことができました。

私は「みんなで使おう！Fireworks！ 〜Fireworksで画像最適化〜」というお題で
プレゼンしたので、簡単にその中身をここでも紹介させていただきたいと思います。

今回はFireworksとPhotoshopの画像の書き出し方を比較してみました。
ちなみに使用したアプリケーションはFireworks CS5 とPhotoshop CS5 です。

PNGの書き出しは実はFireworksのほうが軽量！？

PNGを書き出すときに画像データ以外のチャンクという必要のないデータも書き出されます。
実はそのチャンクデータがPhotoshopよりFireworksのほうが少ないのです。
なのでPNGで書き出した画像はFireworksのほうが軽くなります。

Fireworks PNG8（1.26KB）		Photoshop PNG8（2.22KB）

PhotoshopにはないPNG8アルファチャンネル書き出しで軽量化！

透過画像の場合、通常PNG32アルファチャンネルで書き出しますが、
色数が少ない場合（256色以下）はPNG8アルファチャンネルを使うことで、
画像を軽量化することができます。

PNG8アルファチャンネルはPhotoshopでは書き出しができません。
それから、IE6は透過情報を表現してくれないので、AlphaImageLoaderやjavascriptで対応が必要です。

JPEGの圧縮率はFireworksのほうが高い！？

JPEGの画質80をFireworksとPhotoshopで書き出して比較してみました。
Fireworksのほうがデフォルトの圧縮率が高いのでサイズがPhotoshopより軽くなります。
しかし、JPEGはデータを劣化させて圧縮しているので、
高画質で表示させたりしたい画像はPhotoshopで書き出したほうがオススメです。

Fireworks JPEG画質80（17.4KB）		Photoshop JPEG画質80（34.3KB）

JPEGマスクで見せたい部分だけを高画質！

JPEGマスクという機能を使って画質を落としたくない部分だけ、
高画質にして他の部分は画質を落として書き出すということができます。

ある1部分だけを高画質にしたい場合は全部画質をあげなくても書き出せるので、
画像を軽量化することができます。

また、後日Fireworksでの詳しいツールの使い方を記事にします。

まとめ

まとめとしましては、Fireworksは画像のサイズを軽量化して書き出すのには
非常に適した使いやすいアプリケーションです。

しかし、高画質の画像を使う場合にはPhotoshopには劣るので、
両方をうまく使い分けるのがベストではないでしょうか。

最後に素敵な時間を共有した.coderの参加者様、開催者様ありがとうございました。
あと、プレゼン資料が.coderのサイトでも公開されるので、もしよかったらそちらも参照してください。
.coder（ドットコーダー）のサイト

また2010年10月16日（土）に「ワイワイガヤガヤアクセシビリティ」というアクセシビリティのセミナーも開催されるそうです。
そちらも非常に楽しそうなので興味のある方はぜひチェックしてみてください。
※こちらのセミナーは定員に達しました。（2010/10/04）

• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips
• Fireworksのスタイル機能でデザイン作業効率化！
• CSS Nite LP, Disk 14にいってきました!
• 効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法

Fireworks CS5 でのスライス書き出しTipsをまとめてみました。
スライスするときによく使う、使えそうな小技をご紹介します。

スライスの作成

長方形スライスの作成

オブジェクトを選択した状態で、
右クリックから「長方形スライスを挿入」を選択すると、
選択した画像を覆うスライスオブジェクトを作成できます。

複数オブジェクトを選択した場合は選択したすべてのオブジェクトの
画像を覆うスライスオブジェクトを作成できます。

多角形スライスの作成

オブジェクトを選択した状態で、
右クリックから「多角形スライスを挿入」を選択すると、
オブジェクトのパスに沿って画像を覆うスライスオブジェクトを作成できます。

イメージマップを設定するときに便利な書き出し方です。

※テキストオブジェクトのみの場合、オブジェクトを選択した状態で、
右クリックしても「長方形スライスを挿入」と「多角形スライスを挿入」
が表示されません。
「ツール」の「スライスツール」からスライスを挿入してください。

効率化ポイント

「長方形スライスを挿入」はよく使う機能なので、
ショートカットキーを覚えるのをオススメします。
複雑な複数オブジェクトをスライスしていくのに非常に便利です。

長方形スライスを挿入
Alt + Shift + U

プレビュー方法

「ファイル」の「画像プレビュー」

選択した画像形式での画像プレビューが確認できます。

「オプション」タブの「ファイルサイズの最適化」という機能は
納品などでファイルサイズが決まっている場合にターゲットサイズを指定すると、
指定サイズ以下になるようにFireworks側で調整してくれる機能です。

他にも「ファイル」タブの「拡大・縮小」、「書き出し領域」で
ファイルのサイズや範囲を変更することができます。

このプレビュー方法はひとつのオブジェクトを書き出すときに向いています。
（例えば、バナーなど）

ワークスペース上のプレビュー

プレビュー、2アップ、4アップを選択することで
選択した画像形式での画像プレビューが確認できます。

ドキュメント全体を指定していると全体、
選択したスライスを指定してると選択したスライスの最適化をプレビューできます。

その画像にあった書き出し形式がわからない時は、
4アップで各画像形式を比べるのが非常に便利です。

このプレビュー方法は複数のオブジェクトを書き出すときに向いています。
（例えば、ウェブページなど）

効率化ポイント

よく使う画像形式をプリセットとして保存すると、使いやすくなります。

最適化メニューの1番右側のオプションから
「書き出し設定を保存」を選択して、名前をつけて保存すると
現状選択されていた最適化の形式がプリセットとして保存されます。

スライス書き出し方法

選択したスライスオブジェクトの書き出し

「ファイル」から「書き出し」を選択すると、
画像は書き出しできますが、その場合すべての画像が書き出されるので、
不要なものも書き出されることがあります。

そこでオススメする書き出し方は
書き出したいスライスオブジェクトを選択した状態で、
右クリックして「選択したスライスの書き出し」を選んで書き出す方法です。

Shiftを押しながら選択すると複数のスライスオブジェクトを
簡単に書き出すことができます。

シンボルのステートの書き出し

ボタンなどシンボル内のステートを書き出す場合は、
右クリックで「選択したスライスの書き出し」を選択後、
下のプロパティの「現在のステートのみ」のチェックをはずしてください。

※CS5から書き出しファイルの名の名前の付け方が変わりました。
今まではプロパティのスライス名にいれた名前が書き出したときに
ファイル名として書き出されていましたが、CS5はデフォルトで
つけた名前の後ろに「_s1」「_s2」という文字列が挿入されます。

この設定を解除したい場合は「HTMLの設定」の「ドキュメントの詳細」の
ステート名をカスタムに選択後、編集をクリックしてください。

その後、自分が設定したいステート名に変更してください。

効率化ポイント

スライスしたい範囲が重なった場合は
切り出したいスライスの重ね順を最前面に表示させて書き出ししましょう。

書き出したいスライスが背面にある場合は
選択範囲が分割して切り出されてしまうので注意しましょう。

• Fireworksのスタイル機能でデザイン作業効率化！
• FireworksとPhotoshopの書き出し画像を比べてみた！～ドットコーダーセッションまとめ
• 効率的！Fireworks CS3ショートカットキーまとめをデスクトップ壁紙に！
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• FireworksCS4が重い・固まる現象を改善する方法

サイトのパフォーマンスアップをしたいけど、
作業をする時間がつくれない、作業するにしても影響範囲が大きくて
なかなか実行できない…ということは非常に多いと思います。

そこで、今回は簡単！すぐできるパフォーマンスアップ！
Webサイトに最適な画像形式の書き出し方法をご紹介します。
以下で書き出した画像はFireworks CS5 を使用して書き出しています。

EC studio では基本的に画像はPNG8で切り出しています。
なぜかというと、ほとんどのPNG8画像のファイルサイズがGIFより軽いことと、
可逆圧縮で透過表示もできるからです。

しかし、状況によってはPNG8以外の形式も使用します。
主に写真はJPEG、半透明の画像はPNG8、PNG32、
アニメーションはGIFに書き出します。

PNGとGIFとJPEGがどの画像で使うのが向いているか比べていきましょう。

256色以内の画像の場合

256色以内の画像はほとんどがPNG8の書き出しが適切ですが、
サイズが小さく色数が少ない画像はGIFのほうが軽い場合があります。
この場合はプレビューで選んで軽いほうを書き出してください。

また、透過画像を使う場合はPNG8（インデックス透明カラー）で
書き出すと透過GIFより軽くなることが多いです。

PNG8（3.36KB）		GIF（3.92KB）
PNG8（3.57KB） （インデックス透明カラー）		GIF（3.94KB） （インデックス透明カラー）

写真やグラデーションなど色数が多い画像の場合

色数が多い画像の場合はJPEGをおすすめします。
PNG24もきれいに表示されますが、ほとんどがJPEGのほうがデータが軽くなります。

JPEG（画質80）（16.4KB）		PNG24（86.1KB）

写真画像ではJPEGとPNG24で比較してみましょう。
どちらの画像も画質をきれいに書き出しすることができているのですが、
サイズを見るとJPEGのほうが軽量化されています。

半透明の画像の場合

半透明を表示させる場合は
256色以下の色数が少ない画像の場合はPNG8（アルファチャンネル）、
色数が多い場合はPNG32で表示させましょう。

ただし、IE6では半透明情報を表現してくれません。
AlphaImageLoaderやjavascriptで対応することで表示することができます。

AlphaImageLoaderの対応について

Internet Explorer で PNG ファイルの背景が透明にならない
http://support.microsoft.com/kb/294714/ja

IEと透過PNG
http://amenti.usamimi.info/ie6png.html

javascriptの対応について

IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
http://smkn.xsrv.jp/blog/2009/02/dd_belatedpng_js/

アニメーション画像

現状アニメーションPNGはすべてのブラウザに対応していないので、
アニメーションを使いたい場合はアニメーションGIFを使いましょう。

参照サイト

最良の画像フォーマットはPNG8、GIFはアニメーション、JPEGは写真に
http://journal.mycom.co.jp/news/2008/11/06/046/

画像を最適な形式で書き出すことで、軽量化することでき、
比較的早くパフォーマンスアップをおこなうことができます。

• 誤字脱字を事前に減らして効率化！
• 簡単作業でスピードアップ！パフォーマンスアップまとめ
• デザインやプログラミング時によくあるスペルミス
• ターゲットブラウザを選定して効率化！サイト制作時間短縮術
• Web Directions East 「パフォーマンスアップのウェブ技術 WDE-Express」

Fireworksをもっと効率的に使いたい！
もっと便利につかえる方法はないの？と思ったことありませんか。

そんなときにはコマンドを使ってみるのはいかがでしょうか。
使いこなすと様々な作業を効率化でき、作業コストを削減することができます。

でも、コマンド機能を聞いたことない、知ってるけどあんまり使ったことない
という方もいらっしゃると思います。

そこで、今回はFireworksにデフォルトではいっているコマンドと
他サイト様で公開されているコマンドを紹介していきたいと思います。

コマンドってなんだろう？

コマンドとはFireworksの作業を便利にしてくれるスクリプトです。
細かい動作をひとつずつ登録して自動処理してくれます。

コマンドを使うと手作業で時間がかかっていた作業が効率化できたり、
Fireworksでおこなった作業を保存して自分以外の人と共有できます。

コマンドってどうやって使うの？

コマンドの使い方は「ツール」→「コマンド」から
使いたいコマンドを選択してクリックするだけで使えます。
（デフォルトで何種類かはいっています）

ダウンロードしたファイルを使う場合は
「C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\Commands」（環境によってパスが違うので、確認してください）
の中にファイルをいれて、Fireworksを再起動してください。

Firewors CS4 のデフォルトのコマンド

「ツイストアンドフェード」

オブジェクトをツイストしたりフェードする処理を
おこないます。効果を多用することでおもしろいものが作れます。

「スクリーンショットを撮影」

Fireworksカンバス内の好きな範囲を指定して、
スクリーンショットとして保存することができます。

簡単に他の部分にスクリーンショットを貼り付けるときに使えます。
マスクをかけたりするほどでもないときは簡単に加工できるので便利です。

「テキスト挿入」

ダミーテキストをいれることができます。
デフォルトのダミーテキストは英語です。

ダミーテキストを変更したい場合は「C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\Commands\Text\Lorem ipsum.jsf」
の9行目の「""」で囲まれている文字列を変更したい文字列に変更してください。

公開されているコマンド

Fireworksでくずれた角丸を元通りにするコマンド

角丸矩形を拡大縮小でくずれた角丸を直してくれるコマンドを提供されています。
これは便利！作業効率アップです。

【Fireworks】スライスに一括で連番をつけてくれるコマンド

スライス指定した箇所を連番で書き出すコマンドを紹介されています。
多くの画像を連番で書き出すとき便利です。

Adobe Fireworks のコマンドで Light Effect をトレース。コマンドの雛形にも使えます。

クオリティの高いエフェクトを作成するコマンドを提供されています。
コマンドでこんなこともできるんだということが体感できます。

こんな風に色々便利なことができるので、
まずは1度コマンドを使ってみてはどうでしょう。

そして、Fireworksのコマンド機能を使いこなして、
ぜひ作業効率アップをおこなってみてはいかがでしょうか。

• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• FireworksCS4が重い・固まる現象を改善する方法
• 自動化のすすめ（FireworksCS3バッチ処理編）
• 簡単作業でスピードアップ！パフォーマンスアップまとめ

EC studioの主要なサービスを集計して
2009年度のブラウザアクセスの平均の割合をまとめてみました。

サイトのブラウザ動向を把握してると、デザインやコーディングを
ブラウザごとに違った方法でアプローチすることができます。

今回は2009年度のブラウザ動向を確認し、
今後どのような傾向になっていくのかを予想したいと思います。

1ヶ月約1万セッション以上のサイトを対象にして、
2009年度全体と上半期（2009/01/01～2009/06/30）、
下半期（2009/07/01～2009/12/31）別にまとめてみました。

データは「ウェブマスター向けサイト」、「一般ユーザー向けサイト」
に分けて記載しています。

以下のブラウザは省略して記載しています。
Internet Explorer = IE

また、Internet Explorerのみバージョン別に記載しています。

ウェブマスター向けサイト

参照サイト…HP売上プラス、SEO対策ドットコム、SEO対策キーワード辞典など

一般ユーザー向けサイト

参照サイト…ESET Smart Security、ESET NOD32アンチウイルス、マインドマップラスなど

2009年度ブラウザ動向まとめ

Internet Explorer6, 7が徐々に減少傾向

Internet Explorer6, 7が減少していることがわかります。
Internet Explorer8やFirefoxなど他のブラウザを選択していることがわかります。

Internet Explorer8の割合が増加傾向

Internet Explorer8が上半期と下半期でブラウザの割合が非常に異なっています。
下半期でInternet Explorer8が顕著に増加していることがわかります。
「Windows7」が2009年の10月に発売したことが影響していると思われます。

FirefoxやChromeなどのブラウザが増加傾向

全体的にFirefoxやChromeなどのブラウザが増加しています。
特にウェブマスター向けサイトではFirefoxが全体の約1/4を占めています。

2010年度ブラウザ動向予想

現状ではまだInternet Explorer6は約1/4を占めていますが、
2010年度ではさらに割合が少なくなっていき、
Internet Explorer8やFirefoxなど他のブラウザが占める割合が
増えてくることが予想されます。

弊社の指針としましては、
現在のInternet Explorer6の割合も考慮にいれながら、
見た目がすべて他のブラウザとまったく一緒ではなく、
最低限情報が伝わるような制作方法にシフトしていってます。

新しいブラウザでの対応に向けて
Internet Explorer6のハックを使わないようにしたり、
CSS3を使うように取り組みを進めています。

上記は弊社サイトの場合ですので、
みなさんも自社で運営しているサイトを調べてみてはいかがでしょうか。
そして、制作方針を見直してみてはいかがでしょうか。

ブラウザについての考え方やCSS3については以下の記事を参考にしてください。
ターゲットブラウザを選定して効率化！サイト制作時間短縮術
[CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child

• 簡単作業でスピードアップ！パフォーマンスアップまとめ
• 簡単にCSS3を使おう！お役立ちCSS3ジェネレーターまとめ
• 効率的にサクサクスライス！Fireworks CS5スライス書き出しTips
• 出た！オンラインかつ無料でブラウザチェックができる「BrowserLab（ブラウザーラボ）」
• 企業のTwitterページのデザインをまとめてみた