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

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

今回はそんなちょっと迷う「パス」パネル、
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ジェネレーターまとめ

• ・JavaScript、jQuery
• ・Flash
• ・CSSアニメーション

などが挙げられます。

ただ複雑な動きとなると、高度なコードを書く必要があったりと、それなりに難しくなります。ですが、シンプルなアニメーションでも組み合わせることで、パッと見複雑に見える動きを付けることができます。
そのアニメーション手法というのは、先日、京都で開催された"Ti.Developers.meeting vol.03（Titanium mobileでのアプリ開発者が集まる関西方面のミートアップ）"でのコバヤシトールさん（@toru0325 / もぐもぐエンターテイメントアプリ - MogSnap）のセッションで紹介されていたもので、その斬新な技法に驚かされたと共に、日頃の制作に対する姿勢の面でも改めて感じる部分がありましたので、今回の記事では、そのあたりをまとめてみようと思います。（追記2011/10/21：コバヤシトールさんが紹介されていたのは、Titanium mobileでのアニメーションで、この記事でのサンプルは、その手法をCSSアニメーションにアレンジしたものとなります。）

どんな動き

パッと見複雑に見える動きってどんなものか、まずはサンプル（Chromeのみ）をご覧ください。

CSS3アニメーション サンプル1 - jsdo.it - share JavaScript, HTML5 and CSS

一見複雑な動きに見えるのですが、よくよく見てみると簡単な動きの組み合わせだというのが分かると思います。
動きだけじゃ分からないと言う方でも、次のコードで一目瞭然だと思います。
簡単に解説すると、入れ子の構造を作って、それぞれ別々にｘ・ｙ方向のアニメーションをあてているだけです。

・HTML

・CSS

もう少しパラメータを加えると、こんなアニメーション（Chromeのみ）にもなります。

CSS3アニメーション サンプル2 - jsdo.it - share JavaScript, HTML5 and CSS

先ほどのｘ・ｙのパラメータの他にスケールと色を追加しました。

使いどころ

以上のような設定だけで、簡単にアニメーションできました・・・
だけど、この動きだとサイトでは使いにくいです。
そこで、同じ動きでもパラメータを少し調整すれば、サイトのワンポイントとして使えるかも、と言うサンプル（Chromeのみ）も作って見ました。

CSS3アニメーション サンプル3 - jsdo.it - share JavaScript, HTML5 and CSS

ｘ，ｙ方向の動きの範囲を少なく、時間はゆっくりにして、さらに動きの始点と終点にイージングを設定してみました。

サンプルではいまいちわかりづらいですが、キャラクター画像などにこの動きを設定すれば、フワフワと浮いているようなアニメーションでサイトのワンポイントとして使えるかもしれません・・・

まとめ

今回まとめたアニメーションの手法は、最初に書いたようにコバヤシトールさんのセッションで学んだ方法でした。

同じような見え方・動きでも実現する方法は様々です。複雑なコードを書いてアニメーションさせる場合は、プログラミングの難しい知識を習得する必要がありますが、今回のような手法であれば、今持っている技術だけで充分実現することができます。

とは言え、この簡単なアニメーションを組み合わせる、と言う斬新な手法を思いつかなければそれもかないません。今回は勉強会でその手法を学ぶことが出来ましたが、自分自身でも、どのようにすれば実現できるのか、自分の技術を活かして実現できないか、ということを考えて制作に取り組むことが大事だなぁと、改めて感じられたイベントでした。

• 簡単にCSS3を使おう！お役立ちCSS3ジェネレーターまとめ
• 擬似要素（:before・:after）を使ったbox-shadowのエフェクトでデザインアクセント！
• [CSS3小ネタ]CSS3でシマシマの表をつくる – :nth-child

突然ですが、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）

2011年6月28日、この日はEC studio にとって記念すべき1日となりました。
と言いますのも、弊社で提供しているクラウドベースのビジネスチャットツール「ChatWork」の海外サービス展開がスタートした日だからです。

デザイン部はこのプロジェクトでは主に「チャットワークツールのUI設計と実装」、「Webサイトの企画・制作」を担当しました。

しかしEC studio では海外展開がはじめての試みであったため、今回はシリコンバレーにあるグローバル展開サポートやWebサイト制作などをおこなっているbtraxさんに海外展開を目指すWebサイト制作のアドバイスをお聞きしました。

そこで今回の記事は、そのアドバイスをもとに、海外のWebサイトをいくつか研究して参考になりそうだと感じたポイントをまとめておくことにします。

1. 情報を詰めすぎない

まず一つ目のポイントは、「情報を詰め込みすぎない」。
Webサイトの第一印象となるトップページ、そこに所狭しとゴチャゴチャと配置されたテキストや画像を見るだけで、それ以上読むのが嫌だなぁ、と感じる人が多いようです。

ただ、そうは言ってもサービス・製品の機能や特徴は伝えたいので、なにか見せ方の工夫が必要になりますが、その点を上手くクリアしているサイトがいくつかありましたので、そのポイントを見ていきましょう。

動画の活用

テキストや画像だと、どうしてもそれだけのスペースが必要になります。ところがそれを動画に置き換えると、動画を配置するスペースだけですみ、ユーザーとしてもテキストより映像と音声のほうが、より理解しやすくなって一石二鳥です。

# Path

「Path」のサイトでは、トップページで比較的大きめサイズの動画を掲載しています。
動画の内容も微笑ましく素敵で、アプリの印象を上手くアップさせています。

ミニマルサイト

「2011年のWeb業界大予測」的な海外ブログ記事にもあったキーワードですが、
1ページのみで、ページ構成要素も極力少なくしたWebサイトが今後増えてくるかもしれません、

# Instagram

みんな大好き「Instagram」のWebサイトは、本当にミニマムな構成です
iPhoneのイメージ画像、ロゴ、キャッチコピーと簡単な説明テキストに、後はApp Storeへのリンクだけしかありません。

ここまでシンプルな構成を同じように自分たちのサイトに取り入れるのは難しいですが、必要な情報を精査してページを設計するミニマルサイトの考え方は参考になるところがあると思います。

2. メインの要素は大きめ

Webサイトに訪れたその瞬間に、そのサービスを印象付けないと、日頃多くのサービスやツールを目にしているアメリカのユーザーの興味を惹くのは難しいようです。

そのために、メインイメージやキャッチコピーといった要素はできるだけ大きめにしたほうが良いようです。また、キャッチコピーに関してはわかりやすさも重要で、シンプルながら刺さるコピーにする必要があります。

# groupme

「groupme」のサイトです。大きめの背景写真がインパクトあります。
しかもアプリを使うシチュエーションに合わせた写真を何パターンか見せているので、活用のイメージもなんとなく伝わってきます。

# Postbox

「Postbox」のサイトでは、ポストの大きなイラストがインパクトあって、また、そのイラストによってどんなツールなのかもわかります。キャッチコピーもシンプルで分かりやすく参考になります。

3. 可愛らしさは避ける

今や「カワイイ」と言う日本語は海外でも通じるほど認知されています。
しかしながらビジネスユースのサービスでは「可愛らしさ」は避けた方がいいようです。
可愛らしいデザインやモチーフは、子どもが使うものだと思い込み、それだけで検討対象から外れてしまうことがあるそうです。

また、海外ではリアルさを演出するのも重要だそうです。
どういう事なのか、アバター画像を例にいうと、日本ではイラストを使いがちですが、海外のサイトでは、人物の顔写真が使われていることが多く、実際にツールを使用しているリアルさを演出しています。

# RockMelt

「RockMelt」のリニューアル前のサイトでは、背景に使われていたリアルな宇宙の画像がかっこ良く、宇宙のイメージから広がり、奥行きが感じられました。

またツールのスクリーンショットのユーザーアイコンは人物の顔写真が使用されていて、リアルさの演出も抜かりなしでした。

ツールを説明するコンテンツも動画のみと凄くシンプルな構成でしたが、RockMeltのデザイナーTobyさんのリアルライフが垣間見れるような内容で、どんなツールなのかが十分に伝わるものでした。

4. 配色は抑えめ

ビジネスユースのツールである場合は、配色の点でも色数をあまり使わなかったり、彩度をなるべく落とすなどして、落ち着いた大人っぽい印象を持たせるのがポイントだそうです。

ポイント3とも通じる部分ですが、ポップな配色は子どもっぽいイメージを与えてしまいビジネスツールという印象が薄れてしまいます。

# Momento

「Momento」のサイトでは、少ない色数に、ロゴ左に配置されたアイコンの赤も彩度を落としめで落ち着いた色使いです。
また背景に敷かれた木目のテクスチャーも手伝ってか、アダルトな印象です。

# VERSIONS

「VERSIONS」のサイトは暗い背景色にボタンの彩度も抑えめで、大きなイラストが使われているにもかかわらず落ち着いた印象です。また、アイコンも無彩色でシンプルなものが使われています。

まとめ

今回ご紹介した4つのポイントで分かるとおり、そのサイトで提供するサービス・ツールの性質にもよると思いますが、海外向けのサイトを制作する際には、

• ・あまり要素を詰め込みすぎない
• ・動画やインタラクションなどで見せ方を工夫
• ・落ち着いた配色

のような工夫が必要になってきます。

またこれらのポイントは、海外向け以外でも、Webサイトの制作全般に於いても参考になる部分があると思いますので、少しでもご参考いただけたらと思います。

そして、チャットワークの方もぜひ一度お試しください。
チャットによるコミュニケーションにタスク管理、ファイルサーバ機能とプロジェクト関連の情報が一元管理できるので、情報が分散せず業務効率アップにつながるのでオススメです。
チャットワークを無料で利用する

• 関連する投稿はありません。

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

このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。

実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン　レスポンシブ・ウェブデザイン（Responsive Web Design）（ご指摘ありがとうございます。）に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。

レスポンシブ・ウェブデザインって

まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、
Webサイトのページレイアウトを閲覧環境（パソコン、iPhone、Android など）に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。

ブラウザのウィンドウ幅に合わせてページ幅が変わるリキッド・レイアウトとも似ていますが、レスポンシブ・ウェブデザインは、閲覧環境に応じて、その環境に合わせたレイアウト構造に柔軟に切り替えるというところがポイントです。

そして、それを実現するためにメディア・クエリ（Media Queries）でスタイル（CSS）を振り分けてレイアウトなどを切り替えます。

スタイル（CSS）の振り分け

先程も書きましたが、スタイルの振り分けはメディア・クエリを利用します。
出力媒体、閲覧環境に応じてスタイルを切り替えることができるメディア・クエリですが、レスポンシブ・ウェブデザインでは、閲覧環境ごとでスタイルを設定します。

iPhone用に設定する場合は次のように記述します。

iPhoneのmobile Safariはディスプレイを320 x 480 ピクセルで認識するようなので、
max-device-width を 480px にして、iPhone（正確にはディスプレイの最大幅が480pxのデバイス）で閲覧したら iPhone用のスタイルが書かれた iphone.cssが読み込まれるようにします。

また、CSS内に直接記述することもできます。

こうすることで、CSSを1ファイルだけで済ませることができます。

ページ構造をデバイスで切り替える

閲覧デバイスに応じて適用するスタイルの振り分けをおこないましたので、次にそれぞれでのスタイルを設定します。

今回は下記のようなPCサイトを例にレイアウト構造を切り替えます。

PC用のサイトでは、”content”、”footer”が float で”nav”の右に配置される2カラムです。

しかしこのままのレイアウトだと、iPhoneで見た場合は、ディスプレイ幅が狭くなりますので若干見づらくなります。そのためにiPhoneの場合は1カラムにレイアウト構造を切り替えるような設定にしてみます。

という具合に、floatを適用しないようにスタイルを設定します。

各ブロックや要素のサイズを調整する

基本のレイアウト構造を振り分けたあとは、各ブロック（.content や .header など）や画像の幅を調整します。

各ブロックの横幅を%設定に

表示領域に合わせてレイアウトブロックの幅が動的に変わるように%指定に変更します。
例：表示領域 960px に 940px のヘッダーの場合
940 / 960 * 100 = 97.9166667%
なので

と言う感じです。

細かなレイアウト設定もレスポンシブ・ウェブデザイン用に調整

レイアウト構造以外にも次のような設定をおこないます。

・画像も相対的に表示されるように、max-width を100% で指定
・スマートフォンはディスプレイが小さくなりますので、文字サイズの調整
・場合に応じては、各ブロック内のレイアウトも変更
　例（上記画像）：.nav内のナビゲーションをPC用では縦並びに、iPhoneでは横並び

などの設定をおこなうことで、各デバイスに合わせたレイアウトでWebサイトを表示させることができるようになります。

まとめ

今回調べてみたものは一つの方法で、この他にもいろいろなパターンがありますし、これからもまだまだ新しい手法が編み出されていくのだと思いますが、このレスポンシブ・ウェブデザインを取り入れることでWebサイトをスマートフォンに対応させることができます。しかし、そのためにはページ構造の組み立てがさらに重要になる、ページ設計段階でスマートフォン対応も見据えておく必要があるなと感じました。

また、モバイル・ファーストという言葉もあるように、見た目だけをスマートフォンに対応させるだけでは十分な対応とは言えないかもしれません。
各デバイスの特性にフォーカスしたコンテンツをそれぞれに用意して、アプローチを変えてWebサイトを展開していくのがこれからのモバイル対応ということになるのでしょうか。

レスポンシブ・ウェブデザイン 参考サイト

Responsive Web Design by ETHAN MARCOTTE　A LIST apart
http://www.alistapart.com/articles/responsive-web-design/

レスポンシブ・ウェブデザインって何？ allWebクリエイター塾 ブログ
http://all-web-blog.blogspot.com/2011/03/blog-post_09.html

Media Queries （レスポンシブ・ウェブデザインを採用したWebサイト集）
http://mediaqueri.es/

• WordPressをiPhoneに最適化するプラグイン
• iPhone向けサイト構築 基礎文法最速マスター
• iPhone OS 4.0でvideo要素を使うと、ページに動画を埋め込める[追記あり]
• iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編）
• HTML5だけでiPhoneアプリをつくる

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を使いこなそう！ワンクリックでパスをアウトライン化