変形させるとき、多くの方は「パス」パネルを使用すると思いますが、
アイコンだけ並んでいても、どれがどんな働きをするのかわからなくなることはありませんか？

アイコンの絵でなんとなく合体する…くりぬかれる…と、動きは予想できますが
どちらのパスが前面・背面にあるかで、またさらに形が変わってきます。

今回はそんなちょっと迷う「パス」パネル、
Fireworksでいう「パスを連結」部分の早見表をつくったのでご紹介します。

「パスを連結」パネル 機能一覧

まずはパネルのどこに機能が配置されているのか
確認しましょう♪

「パスを連結」パネル　早見表

私がよく使うのは「合体」と「型抜き」です。
パスで何かの形をつくるとき、ペンツールは使わず
長方形ツールや円ツールなどで複数のパスをつくり重ねて「合体」や「型抜き」を
するとキレイな形がつくれます。

その「合体」と「型抜き」を多用した実践編の記事
「Fireworksで立体的なアイコンを作る方法」
もよろしければご覧ください♪

2012年も、みなさまに便利な情報をお届けできるよう頑張ります！
どうぞこれからもデザインブログをよろしくお願いします。（＾＾）

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

今回は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ジェネレーターまとめ

突然ですが、Facebook活用していますか？
弊社ではFacebook活用の一つとして、先日社長ブログにFacebookコメントを設置しました。

しかし設置したまでは良かったのですが、このFacebookコメント、新しいプラグインになってから新着コメントの通知ができなくなったようで、せっかくコメントをいただいても見逃してしまう、何かいい方法はないのか！となりました。

そこで、今回は弊社でおこなっているコメント管理方法を、Facebookコメントプラグインの設置手順を交えて紹介しようと思います。

コメントプラグインの設置

とにもかくにも、コメント欄を設置します。

Facebookアプリケーションの作成

まずは、Facebookと連携させるために Facebookアプリケーションを作成します。
アプリケーションを作成するには、事前に開発者登録が必要です。開発者登録に関しては、当ブログの下記記事をご参照ください。
・今から作るiFrame対応Facebookページの作り方 Part.2

開発者登録が終わったら新しいアプリケーションの作成をおこないます。
Facebook DEVELOPERSページ右上の「+ Create New App」をクリックするとダイアログが開きますので、必要事項を入力して新規アプリケーションを作成します。
ちなみにアプリケーションの名前に”Facebook” や “FB” という文字は使えないようです。

FacebookアプリケーションとWebサイトの連携

作成したアプリケーションの概要画面の「Edit Settings」から設定画面に移動し、設定画面の「Select how your app integrates with Facebook」からWebsiteを選択して連携させる WebサイトのURLとドメインを入力します。

OGPの設定

次に、サイト側の作業に移ります。はじめに、OGPの設定をおこないます。
OGPに関しては、当ブログの下記記事をごらんください。
・Facebookのウォールでちょっとアピールする方法（OGP）

WordPressを使っている場合はWP-OGPというプラグインが便利です。
WordPressのプラグイン設定ページで「WP-OGP」を選択するとappidとadminsの入力箇所がありますので、ここに作成したアプリケーションのAppIDと自分のuserIDを入力します。

AppIDはアプリケーションの概要ページに記載があります。

自分のuserIDは、Graph API Explorerで確認することができます。Facebookにログインした状態で、ツールのページを開くとアカウントに関する様々な情報を調べられます。その中の”id”の数列が自分のuserIDとなります。

このWP-OGPなんですが、一箇所はまりポイントがありました。
あとで紹介するComment Moderation Toolとの連携でどうしても上手くいかずに、しばらく手をこまねいていたのですが、そこはやっぱりGoogle先生の出番です。

ググってみたところ、どうやらプラグインの問題のようで、ソースコードの修正が必要でした。正しくは「fb:app_id」と書かないといけないところが「fb:appid」のように出力されてしまうようです。

修正箇所は、wp-ogp.phpの94行目あたりに

というコードがあるので、下記のように「fb:app_id」となるように修正します。

このバグは、「Facebook ソーシャルプラグイン（いいね！やコメント）を「正しく」設置する方法（iPhone 研究室（iPadもね））」で解説されていました。

Facebookコメントの設置

今回は、Facebook Comments for WordPressというプラグインを使用しました。

プラグインの設定箇所としては、下図 Basic Settingsの「Application ID」と「Application Secret」に作成したアプリケーションのものを入力します。
それ以外は設置するサイトに合わせて設定をおこなってください。

このプラグインは標準では、WordPressのコメントの前後にしかFacebookコメントを設置することができません。もし、任意の場所に設置したい場合は、テンプレートファイルに直接下記のコードを記入します。

その際は、プラグイン設定の「Basic Settings」の上から3つめの項目のチェックは外しておきます。そうしないとコメント欄が2つ表示されてしまいます。

詳しい設定に関してはFacebook Comments for WordPressマニュアルページを参照ください。

コメント欄がブログに設置されているかを確認

これまでの手順が正しく設定されていれば、ブログにFacebookコメントが表示されているはずですので、確認します。

コメントはComment Moderation Toolで確認する

最初にも言ったように、新しくなったFacebookコメントプラグインではそれまであった通知機能がなくなってコメントされたとしても見逃してしまう、ということがあります。それを防ぐために今回はComment Moderation Toolを使うことにしました。

今回紹介したFacebook Comments for WordPressにもEメールによる新着コメントの通知機能はありますが（今回試した限りではメール通知は機能していませんでした。）、メールで通知を受け取っても他のメールに埋もれてしまって、結局見逃してしまう可能性もあります。

それに比べると、Moderation Toolのページにアクセスしないといけないという面倒はありますが、一括でコメントが確認できたり、その場でリプライやいいねができたり、それ以外にもコメント管理機能が用意されているので、こちらのほうが幾分手間は少なくて良いと思います。

複数人でコメントを管理する場合も、Moderation toolの「設定」でModeratorに管理する人のuserIDを追加するだけです。

まとめ

Facebookコメントを設置することで、Facebook上での記事の広がりに伴って、Facebookからのアクセス数の増加、また、コメントを頂いた人にリプライするなどでコミュニケーションを持つことができますので、ブログの読者を獲得したり、ファンを増やしたりすることにもつながるのではないかと期待しています。

ただ今回のコメント管理方法がベストではなくて、やっぱりウォールへの投稿と同じ感じで、コメントいただいた時にすぐに気づくことができた方が嬉しいです。

ご自分のブログやサイトにFacebookコメントを設置していらっしゃる方は、このあたりどうされているのでしょうか？もっといい方法などをご存じの方はぜひ教えてください。

• 今から作るiFrame対応Facebookページの作り方 Part.2
• 今から作るiFrame対応Facebookページの作り方 Part.1
• Facebookのウォールでちょっとアピールする方法（OGP）

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
• ターゲットブラウザを選定して効率化！サイト制作時間短縮術

最近は、企業や製品・サービスなどで
Facebookページをもつことが増えてきています。

EC studio でも先日チャットワークのFacebookページをリリースしました。

そこで、今回はFacebookページの作り方について書きたいともいます。

Facebookページとは

すでに知っている方も多いかもしれませんが、
Facebookページとは何かということを少し書きたいと思います。

Facebookページは、旧ファンページのことを言います。
企業や団体、製品やサービス、芸能人やアーティストなどが
情報を発信する、コミュニティページのことです。

ユーザーは、お気に入りのFacebookページに対して
「いいね！」をクリックすると、最新の情報がウォールに流れてきたり、
そのページに対し、自由にコメント投稿できます。

また、「いいね！」をクリックすると、自分の友達にも「いいね！」をした
Facebookページの情報が流れるので、企業、製品やサービスの
プロモーションにもつながります。

国内のFacebookページの事例を調べる

まず、Facebookページを作る際に、他の企業や製品などの
Facebookページは、どうなっているのか事例を調べる必要があります。

ただし、検索窓から企業名などをいれて検索する必要があるので、
どんな企業や製品がFacebookページをやっているのかを知らないと
見つけにくいということがあります。そこで人気のFacebookページを
見つけるのに便利なアプリやサイトを紹介します。

・likenavi

Facebookページの「いいね！」数を独自に集計し、
ランキング表示をしてくれるFacebookアプリケーションです。

・フェイスブックなう

最新のFacebookページの「いいね！」数や、
記事ごとの「いいね！」数をみることができるサイトです。

これで、人気のFacebookページも見つけやすくなり、
国内の事例も調べやすくなります。

Facebookページの構成を考える

次に、Facebookページの構成を考えます。
「ウォール」「基本データ」のページはデフォルトで用意されていますが、
そのほかに、オリジナルでどんなページが必要か決めていきます。

チャットワークのFacebookページでは、
以下のページをオリジナルで作ることにしました。

・ウェルカムページ
はじめて訪れたユーザーに対し、「いいね！」をクリックしてもらうように促すページ

・チャットワークの紹介
Facebookでチャットワークの存在を知ったユーザーに向けたページ
基本的なチャットワークの紹介

・ガイドライン
Facebookページを運営するためのコミュニティガイドライン
運営者の情報、投稿されたコメントの削除基準などを記載し、
よりよいコミュニケーションがとれるようにしている

Facebookページの基本設定

構成まで決まれば、いよいよ製作にはいっていきます。

（1）Facebookアカウントの取得
これがないとはじまりません。まずはFacebookのアカウントを取得しましょう。

（2）Facebookページの作成

「Facebookページを作成」ページにアクセスします。

「カテゴリ」=>「サブカテゴリ」を選択し、「Facebookページ名」を入力します。
Facebookページ名は後からでも変更が可能です。
※ただし「いいね！」が100人以上になった場合は変更不可になります。

Facebookページ規約に同意し、「利用開始」ボタンをクリックすると
Facebookページが作られます。

3.基本データの設定

Facebookページの概要を入力します。
企業などのFacebookページの場合は会社概要や所在地などを入力します。

4.ウォールの設定

ウォールでは管理者とユーザーの双方が投稿・閲覧できます。
ユーザーが投稿・閲覧できる制限を設定します。

Facebookページの基本的な設定は以上になります。

Facebookページをデザインする

構成が決まり、基本的な設定ができれば、
次は、オリジナルページのデザインに入ります。

（1）プロフィール画像を作る

上記画像の場所に表示される画像を作ります。

プロフィール画像の最大サイズは幅180px、縦540pxです。

プロフィール写真のページからプロフィール画像を追加できます。

ウォールなどに表示されるサムネイル画像はプロフィール画像から
自動で生成されますが、「サムネイルを編集」で、
サムネイル画像に使う位置の調整が可能です。

（2）コンテンツ部分のデザイン
真ん中のカラム、メインのコンテンツになる部分をデザインします。

上記画像の部分のデザインになります。

プロフィール画像の最大サイズは幅520px、縦800pxです。
縦が800pxを超えるとスクロールバーが出てしまいます。
スクロールバーはJavaScriptで消すことも可能です。

詳しい方法は下記のブログ記事に掲載されていますので、是非参考にしてください。
iframe版 Facebookページのスクロールバーを消す方法

今回は、基本的な設定からiframeページのデザインまでを説明しました。
次回は、デザインしたページの実装方法について説明します。

お楽しみに！

• 今から作るiFrame対応Facebookページの作り方 Part.2
• Facebookのウォールでちょっとアピールする方法（OGP）
• Facebook コメントプラグインをWordPressに設置する手順とコメントを管理する方法

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に設置する手順とコメントを管理する方法

さて、今回は前回の「Fireworksで立体的なアイコンを作る方法」よりも
もっと簡単にできるアイコンの作り方です。

今回は5分で作れるアイコンのご紹介！！
…の予定でしたが、ブログ記事用に作り直したら7分ちょうどかかりました。
すみません…
操作自体は簡単なので、速い方は5分でできると思います。
ぜひ、5分に挑戦してみてください！

アイコンはこちら、建物アイコンです。

ページ下部で制作動画の紹介や、ベクトルデータのダウンロードも可能です。
会社概要の見出しなどに使ってみてくださいね。

速く作るポイントは2つ

• パスの変形「歪みツール」を使う
• フィルター効果「シャドウ（内側）」を2つ重ねて使う

たったこれだけです。

1.平面の形を作る

パースのあるアイコンですが、
まずは真正面から見た図（平面図）をつくります。

2.歪みツールで立体的にする

平面ができたら、１面全部を選択し「歪みツール」で立体的にします。

歪ませる時、中央をつかむと平行に動いてしまうので
角をつかんで動かしてください。

3.シャドウ内側で影と光をつける

歪ませたら、「シャドウ（内側）」を2つ重ねて影と光を作ります。

影の数値はこちら

光の数値はこちら

「シャドウ（内側）」を重ねた時、影と光の角度を対称にするのがポイントです。

番外.「属性をペースト」を活用する

窓ガラスが味気ないので、グラデーションを縦から斜めに変更します。

最初から斜めでつくれば良かったのに、完成間際で気づいた！
っという、うっかりミスをしてもFireworksなら大丈夫です。

まず、どれか1つのパスを斜めに変更し、クリックボードにコピーします。

そして、窓ガラス全部選択し、編集の「属性をペースト」を使うと
選択したパスが全部同じグラデーション（属性）に変わります。

この「属性をペースト」はフォントにも使えます。
これはとっても便利なのでぜひ使ってくださいね。

ショートカットキー：Shift＋Ctrl＋Alt＋V

4.シャドウ内側で影と光をつける

右側の面は、影になっているので「色相・彩度」で暗くします。

5.仕上げ

最後に地面との隣接部分に影の部分つくり、色を調整して完成！

6.完成

完成したのが、こちらになります。
今回もベクトルデータをご覧いただけるようにしましたので、
実際にPNGデータを開いてみるとフィルター効果などを見ることができます。

画像ファイル（ベクトルデータ）のダウンロード（67KB）

詳しい手順については、制作過程の動画をご覧ください。

最後に・・・

今回は「シャドウ（内側）」を使っていますが「ベベル（内側）」でも同じような見た目にすることが可能です。
ただ、「ベベル（内側）」だと斜めのラインがキレイにでない。
Photoshopライブ効果の「ベベル（内側）」を使えば斜めのラインはキレイになりますが、ファイルの容量が重たくなる、操作が直感的じゃない。
と言う点から「シャドウ（内側）」を使っています。

窓ガラスがへこんでるイメージのため「シャドウ（内側）」を使いましたが、
盛り上がったような立体感を出す場合は「ドロップシャドウ」で同じようなイメージを作ることができます。

Fireworksのメリットといえば、
フィルター効果を簡単に、直感的に使える所！
ぜひ、Fireworksを上手に使って、色々なアイコンを作ってみてくださいね。

• Fireworksで立体的なアイコンを作る方法
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• 知ってるようで、実は知らない?！ Fireworksの小技
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化

Webサイトのデザインをしているときに
「あ、このグラデーションって、どういう色だったかな？」
「ここのフォントはなんだっけ？」ってことがあります。

そういう時に便利なのがFireworksのスタイル機能です。

スタイル機能って何？って人のために、少し解説したいと思います。

スタイル機能とは、Fireworksに登録されている
スタイルパレットのことで、グラデーションスタイルや
フォントのスタイルを、選択したオブジェクトに対して
一括で変換してくれる機能のことです。

このスタイル機能を活用することで次のようなメリットが得られます。

• デザイン作業の手間が軽減される
• 同じスタイルを適用する際に、色やグラデーション、
  ドロップシャドウなどの値を覚えておく必要がない
• デザインの表現の幅も広がる

スタイル機能の使い方



このように、Fireworksにはいくつかスタイルが
登録されています。

試しに1つスタイルを適用してみましょう。


このように、それぞれ別の形のオブジェクトを準備しました。


これらのオブジェクトに一括で「木目」のスタイルを指定してみます。


ワンクリックでそれぞれのオブジェクトが変換されました。

オリジナルのスタイル登録方法

スタイルはあらかじめ登録されているものだけでなく、
自分で作ったスタイルを登録することもできます。


このようにボタンに使うために作ったグラデーションのスタイルも登録可能です。
登録方法は、登録したいオブジェクトを選択し、
「スタイル」のオプションメニューから、「新規登スタイル」をクリックします。


「現在のドキュメント」に登録したスタイルが表示されます。
これで、他のオブジェクトに対しても同じスタイルを適用することができます。
※角丸は適用されないのでご注意ください。

このように、他のオブジェクトなどに同じスタイルを
適用したい場合に登録しておくと、値を覚える必要もなく、
デザイン作業の手間も軽減してくれます。

配布されているスタイルを使ってデザインの幅を広げる

デフォルトのスタイルのデザインは、
少し癖が強く、なかなか使いにくいものも多いですが、
他にスタイル自体を配布しているサイトがあります。

そういったものを活用すると、デザインの幅も広がります。
使えそうなものを少し紹介しておきます。

15 Fireworks CS4 Text Styles Pack 1

文字を手書き風のスタイルに変えてくれます。
ダウンロードはコチラ
※「DOWNLOAD」ボタンからはファイルがダウンロードできないのでご注意ください。
　ページ下部の「HR Text Outlines.stl」をクリックし、ダウンロードしてください。

Drawing

写真を手書き風のスタイルに変えてくれます。
ダウンロードはコチラ

Dynamic Bokeh styles

色を調整すればきれいなぼかし効果が簡単に付けられます。
ダウンロードはこちら

キラキラメタリック

メダルやメタリックなアイコン作りに便利ですね。
ダウンロードはコチラ

最後に紹介させていただいた、Fireworksマニアさんの
サイトにはダウンロードしたスタイルの追加方法なども
詳しく掲載されていますので、ぜひ参考にしてみてください。

このようにスタイルをどんどん追加して、
作業の効率化＆デザイン表現の幅を広げてみてはいかがでしょうか。

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

サイトや広告バナーをつくる際に、イメージアイコンを使うことがよくあります。
ただ、配布されているイメージアイコンを使用する場合、
「形を少し変えたい！」
「複数のアイコンを組み合わせて使いたい！」
など、サイトなどの雰囲気に合うよう、手を加えたくなる時があります。

ただ、データの加工が不可だったり、加工するのに時間がかかったり…
時間短縮のために配布素材を使ったのに意味がなかった！なんてこともあります。

そんな時はイメージアイコンを
最初から自分で作る！ というのも1つの方法です。

今回は、Fireworksを使って簡単に立体的なアイコンを作る方法を
ご紹介したいと思います。

作業は単純。

• パスの合体
• パスの切り抜き
• 拡大縮小

の繰り返しです。

1.形をつくる

1. 楕円を2つ描きます
   
2. 楕円の上に四角を重ねて合体させます
   
3. 合体したパスの上にさらに四角を重ねて切り抜き、余分な部分をカットします
   
4. 合体パスを楕円パスの下に配置して濃い色をのせて立体感をだします
   

2.影とハイライトをつくる

1. 先に作った楕円をコピーして2つつくり、1つの楕円は少し縮小します
   
2. 楕円を並べて三日月の形になるよう切り抜きます
   
3. 三日月を重ねて影にします
   さらに複製して反転させればハイライトになります
   
4. 反転させ影とハイライト部分をつくります

3.円錐をつくる

1. 楕円を2つつくり、1つは横幅だけを小さくします
   
2. 楕円に重なるように四角をつくります
   
3. 楕円に重なるように四角をつくります
   
4. 四角の下の部分を変形ツールでゆがませます
   
5. 楕円と四角を合体させます
   
6. あとはひたすらそれの繰り返し、形をつくっていきます
   

4.色を付ける

形がある程度できたら、色をのっけていきます。
ポイントは、

• 右と左のどちらから光があたってることにするか
• 中にあるものは濃く、底になるほど濃くなる

これを意識しながら色をつけます。

そして、できたのがこちら！

画像ファイル（ベクトルデータ）のダウンロード（195KB）

細かい行程は省きましたが、アイコンができるまでを動画にとってみたので
詳しくはこちらをみていただければと思います！

動画撮り終えたあと、ちょっとハイライトをいれたので
制作時間は、トータル22分くらいです。

今回はサイズが大きいので、パスをつけてキレイな陰影をつけました。
もっと小さなサイズのアイコンであれば、パスではなくドロップシャドウなどを使って陰影をつける手法もあります。
これだと、もっと短時間にアイコンがつくれます。

次回は、↓これを５分で作る方法をご紹介します！

• Fireworksで立体的なアイコンを7分で作る方法
• 知ってるようで、実は知らない?！ Fireworksの小技　Part2
• 知ってるようで、実は知らない?！ Fireworksの小技
• Fireworksを使いこなそう！整列でアウトラインがぼけない方法
• Fireworksを使いこなそう！ワンクリックでパスをアウトライン化

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

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

バナーは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つのポイント