プチリアルタイムブログ
facebookページの基本機能をおさえる~その１
ウォール
ウォールに投稿することを、Facebookでは「シェア（share）」と呼びます。直訳すれば、「分けること、分配」です。つまりウォールは、近況や写真、リンク、動画を、壁（ウォール）に目立つように掲示して、「情報を皆で分かち合う」ための機能だと、考えられます。
ウォールは、友達一人ではなく、複数の人に発信するための機能です。大勢に見てもらいたいときに、使用しましょう。
基本データ
Facebookページの作成時に選択したカテゴリーによって基本データとして登録できる内容は異なります。
レストランなら開店時間や支払い方法、企業なら企業理念などそれぞれの特性にあわせた内容が登録できるようになっています。
基本データはFacebookページを初めて訪れた人がページやブランドを知るために確認する可能性の高い部分なのでしっかり内容を登録しましょう。
写真
個人プロフィールページと同様に写真をアップロードすることができます。
トップページにも表示される写真は、使い方次第では重要なブランド戦略の一つになります。トップに並んで表示されるものは管理者がウォールに投稿したものやタグ付けされたものです。
ノート
ブログのようにちょっとした記事を書くために使うものです。
クエスチョン
クエスチョンでは、Facebookユーザーに質問し、情報を得ることができます。あなたが質問すると、友達はそれに回答したり、フォローすることができ、友達の友達もこの質問を見たり、回答することができます。
HTML5で制作された国内企業サイト!!
HTML5について
最近、HTML5のコーディング案件についての問い合わせや質問があります。そこで早速、HTML5でコーディングされている企業サイトを調べましたので今回ご紹介したいと思います。
それともう１つ、今回調べて気づいたのですが多くのWEB制作会社が自社サイトをHTML5で作り直しているようです。
私も取り残されないように日々精進したいと思います。
○アップル
このサイトは説明不要ですよね。アップルの特設サイトです。アップルが提供する「Apple HTML5 Showcase」
http://www.apple.com/html5/
Google「ウェブの進化」
Google Chromeのリリース３周年を記念して制作されたコンテンツで、Web技術やブラウザの進化の歴史を視覚化。1990年から現在まで約20年に渡る年表を色鮮やかなインフォグラフィックとしてHTML5で表現している。
http://evolutionofweb.appspot.com/?hl=ja
○ローソン
header要素やfooter要素は使っていますが、article要素などは使わずにdiv要素でマークアップしています。
http://www.lawson.co.jp/index.html
○ローソンストアー100
ローソンストアー100も、header要素やfooter要素は使っていますが、article要素などは使わずにdiv要素でマークアップしています。
http://www.99plus.co.jp/index.html
○CONTENTS
こちらのサイトはぜひHTML5に対応しているモダンブラウザで見てほしいです。通常のサイトにcanvas要素を使いFlashのような表現をおこなっています。感動しましたこれからはJSの勉強は必須だなと感じます。凄いです！
http://www.contents.ne.jp/
○無印良品
もともとの宣言は『XHTML1.0』だったのでしょうか？宣言のみHTML5に変更されたように感じます。ですが、divのclass名にsectionとつけるなど、アウトラインをしっかり考えながらコーディングされているので宣言を変更しても問題ないようです。凄いです。
http://www.muji.net/
○ECスタジオ
CSS3の角丸指定を使うなど今後のコーディングの参考にとてもなりました。また、IE8や7で見ると角丸にはならないのですがデザインに違和感はなくクロスブラウザを考えるときにも大変参考になると感じました。
http://www.ecstudio.jp/
Dreamweaver特設サイト
この HTML5 特設サイトは、HTML5 やデバイス活用を検討している方に最新情報をお届けするアドビ公式サイトです。
http://adobe-html5.jp/
NHN Japan Corporation
スペースシャワーTV
tv asahi
Ustream.tv
OLYMPUS PEN
ユナイテッドアローズ公式サイト
http://www.united-arrows.co.jp/index.html
UNIQLOKS
これから、どんどんHTML5を使ったサイトが増えていくと思うので参考になる情報をアップしていきます。
今週の【急上昇Facebookページランキング】
1位 SCREEN（スクリーン）
カテゴリ 雑誌
情報：創刊65周年。人気スターのホットニュースや、ハリウッドを中心とする海外の最新作、話題作をいち早く紹介。映画のみならず話題の海外ドラマを中心としたリリース情報、スターのファッション事情、ゴシップまで、話題満載の洋画雑誌。
https://www.facebook.com/screenonline
2位 スマートフォン&タブレット情報局
カテゴリ コミュニティ
情報：スマートフォンやタブレットデバイスは勿論、スマートTV 等のスマートデバイス全般の情報共有を目的にしたコミュニティです。 皆さん、お気軽にスマートデバイス情報を投稿して下さいね!
https://www.facebook.com/SmartDevice.jp
3位 フジテレビ
カテゴリ テレビ局
情報：ミトカナイトフジURL http://www.fujitv.co.jp/mitokanaito/index.html 週間番組表 http://www.fujitv.co.jp/bangumi/index.html ※Facebookページに関する情報は、フジテレビホームページの規約に準じます。詳しくは、下記にてご確認ください。 http://www.fujitv.co.jp/rights/index.html
https://www.facebook.com/fujitelevision
4位 SUNRISE JAPAN
カテゴリ スポーツ選手
情報：【SUNRISE JAPANとは】これからの日本を背負う女性アスリートたちが 競技の垣根を超えて結成したビューティアスリートチーム。世界一をめざし、懸命に戦う彼女たち。その活躍に対するあなたの声援は、きっとアスリートの地位を上昇させる。モチベーションを上昇させる。実力を上昇させる。そして日本を上昇させる。想像してほしい。表彰台の一番高い所から、日本を元気に照らす彼女たちの姿を。「SUNRISE JAPAN」の上昇に、あなたの力を。 【協賛】・アタックNeo ・日本エイサー株式会社（五十音順）
https://www.facebook.com/sunrisejapan
5位 SABURO TOKITO・時任 三郎
カテゴリ 俳優/監督
情報：連続テレビドラマ「それでも、生きてゆく」（フジ系）撮影中。映画「DOG×POLICE」10月1日公開予定。
https://www.facebook.com/tokito360
コカ･コーラ VS ペプシコーラのおもしろＣＭ集めました！
コカ･コーラに喧嘩を売るペプシコーラの面白ＣＭ
ペプシを頼んだのにコークを持ってきた店員を諭すゴッドファーザーと女の子
ペプシを注文した女の子に、店員は「子供だしどうせ分からないや」とコークを出します。
ところが！コーラを飲んだ瞬間女の子の表情と声が激変、かなり強烈な言葉で店員に説教します。
このCMのすごい所は、少女のセリフでコカ･コーラを得体の知れないものと言ったり、教養人はペプシを選択するということを示唆したりしてる点ですね。
コカ･コーラを踏み台にしてペプシを買う男の子
少年はコカ･コーラには見向きもせず、ペプシだけを持って去っていきます。
ペプシはコカ･コーラ二本分以上の価値があるということでしょうか。
日本でこんなCM放映すると逆にアンチペプシを増やしてしまいそうです。日本ではありえないCMですね、アメリカらしい！
コカ･コーラの従業員も実はペプシが好き？
コカ･コーラとペプシ･コーラのトラックドライバーがハンバーガーショップ内ですっかり意気投合、周囲の目を気にしながらもお互いのコーラを飲みあうことに。だが、ペプシを飲んだコカ・コーラのドライバーがペプシを離そうとしない。余程気に入ったのだろうか・・・。
ジャッキー・チェンが登場する爆笑CM
今回のジャッキー・チェンの共演者はペプシ･コーラ。だが余程大切な共演者なのか、危険なスタントシーンではペプシをなんとコカ･コーラに差し替えている。ここでのdoubleは代役という意味です。コカ･コーラがあまりにもひどい扱いで面白すぎるｗ
これはかなり爆笑!!
コンビニの監視カメラに映ったコカ･コーラ従業員の行動
コカ･コーラを棚に詰めているコカ･コーラの従業員がペプシに浮気をしようとしたのか、手に取った瞬間何と雪崩が・・・。
「Your Cheatin’ Heart」というBGMの選曲も最高ですね。
アインシュタインもペプシ派
相対性理論を唱えたかのアインシュタインがペプシとコカ･コーラの選択に迷った挙句ペプシを選んだというCM。
オンリーワンな存在ということか。
コカ･コーラに絶望しペプシ派に乗り換えたおじいさん
以上、今回はペプシVSコカ･コーラの構図のペプシCMをいくつか紹介しました。
ペプシが売ってきた喧嘩に対してコカ･コーラは徹底的に無視したCMを作ってますが、たまにペプシを暗に皮肉ったCMもあったようです。
世界のおもしろ広告 Checkmate ~ Billboard War- Audi vs BMW~
ビバリーヒルズグレン大通りにて起こったビルボード対決。
先に仕掛けたAUDI「Your move,BMW（あなたの番だ）」に
BMWが「Checkmate（王手）」と応戦。
読み手にストーリー性を感じさせる見事な広告でした。
海外ならではの、広告戦争！？
※参考動画(Billboard War- Audi vs BMW)
注目の新着サイト・リニューアルサイトパートⅡ
クラウド少女
「ウィルスバスター2012」の今回のウリであるキーワード「クラウド」を訴求するためのインタラクティブコマーシャル。
モデルは山本美月と風変わりな「しりとり」をして遊ぶことができる。
まずは体験してみる！
クラウド少女は「クラウド」しか言わないので、「しりとり」を続けるために「ド（ト）」から始まり「ク（グ）」で終わる単語を入力！
入力する単語により、異なるムービーが流れるので思わず何度も続けてしまう。単純だがこれがユーザーを引き込むかわいらしい世界観。
また、10万回つながったら際にはプレゼントが登録したり、キリ番を踏むとクラウド少女のスペシャルムービーが見られたりするなど、「しりとり」を続けるための仕掛けもいろいろあるみたいです。スマートフォン向けのコンテンツ（Android版）も用意されている。
「しりとり」を数回クリアすると、山本美月（モデル）によろクラウドの解説ムービーを見ることができる。（ちなみに、私は３回成功してみました）
注目の新着サイト・リニューアルサイト
ステージゼロワンラボの注目の新着サイト・リニューアルサイトを紹介します。
第一回全国統一HTML5実力テスト
http://jsdo.it/event/html5cat/2011/summer/
面白カヤックが運営する「jsdo.lt」がプロデュースしたオンライン試験。世界中のフロントエンドエンジニアが集う「jsdo.lt」のイベントとして開催され、ユーザーは「javascript」と「HTML/CSS」の２つのコースから選択し、挑戦する。
ドキドキしながら、テスト受けてみました！
結果はリアルタイムに集計され、平均点や得点分布、総合順位、偏差値が表示され自分の今の実力を知ることができます。
まぐれもあって結果は↓↓↓↓↓↓↓↓
プーマジャパン「ONE CLICK TO JAMAICA」
https://www.facebook.com/PUMAJapan?ref=ts
ウサイン・ボルトが有する男子100mの世界記録「9.58秒」にワンクリックで挑戦するFacebookページアプリ。
昔、子供の頃タイムウォッチで誰しも一度はやったことあるアレ！
ユーザーの体感時間で9.58秒を狙いボタンをクリックするシンプルなゲームで、9.58～10.50秒の間にクリックできれば旅行券や商品などが当たる。
制限は１日３回、ランクを上げると当選確率が上がる仕組み、友達ランキングなど、何度も繰り返し挑戦したくなる鋳掛けが満載！
早速チャレンジしてみる
結果は↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
これは面白いアプリ！キャンペーン企画はFacebookページに向いている。
Facebookページ制作代行に繋げていきたい！
Google、「Google+」注力のため「Buzz」「Code Search」を打ち切り
Google、「Google+」注力のため「Buzz」「Code Search」を打ち切り
Googleいろんなサービス終了！
BuzzもGoogle+に統合
詳細は下記に
http://japan.internet.com/busnews/20111017/6.html
開業開店・リニューアル、特別料金キャンペーン継続
開業開店・リニューアル、特別料金キャンペーン
ロゴマークは、お客様の会社・店舗、商品を形や色を通じてビジュアルに訴える効果があり、事業やサービスをPR・露出する一番基本的な手段です。ブランド力アップに貢献します。ブランディングの最初に始めなければいけないのが、ちゃんとしたロゴを作ることです。お客様の会社・店舗を目で見てわかる、感じるようにビジュアル化し、事業の飛躍と活性化を目指しませんか。
また、名刺は会社や個人の顔で品格が現れるものです。良い名刺を持っていると、営業活動も楽しくなります。業務に効果的に役に立つ名刺を作りましょう。
業務内容を裏面に入れたり、メモ欄に名刺交換した日や場所を記載する為の場所を作る事も出来ます。
それからシンプルでバランスよく空間を空けた名刺はあなたのセンスをアピールする良い機会にもなります。
まずはご要望をお聞かせください。
通常合計￥47,800 →16%OFF（￥7,800割引）
●ロゴデザイン（ライトプラン・ラフ3案を提出）
￥30,000
●名刺（両面カラー／100部を納品）
￥17,800
| 品 名 | ロゴマーク・英文ロゴタイプ ＋ デザイン名刺 | |
|---|---|---|
| オリジナルロゴ ＋ デザイン名刺 |
ロゴマーク + 英文ロゴタイプ：3案 デザイン名刺：3案 |
|
| 料 金 | ￥40,000 | |
※価格に関しましては、繁忙期や時期（キャンペーン特別価格の為）などにより予告なしに変更させて頂く場合があります。
※料金は変更・修正を2回までとした料金です。3回目以降は追加料金となります。
※名刺印刷代は用紙のグレード、枚数、納期によって変わるため別途お見積します。変更することもできます、気軽にお問い合せください。
※ご提案したデザインの色と、印刷後の色は多少異なります。
セキュアな接続（https）のためのiframe Facebookページへ
HTTPS+OAuth2.0義務化へ
facebookページを閲覧していて、たまに「セキュアな接続を解除しますか？」と表示されることがあるかと思います。
10月１日以降下記のようなメッセージになりました。
今回このアラートが表示されないようにHTTPSを対応するようデベロッパーに義務付けられる事になりました。
10月1日
すべてのCanvasアプリケーションはsigned_request（fb_sigは10月1日から利用不可）を処理し、そしてSSL証明書を入手しなければなりません。（Sanboxモードは除く）。
iframeでFacebookページを作る際に困るのが、セキュアな接続（https）で表示させた時に、iframeの中身が表示されないことです。
セキュアな接続（https）とは、通常のhttp://～で始まるページとは違い、https://～で始まるページで、暗号化通信によるセキュリティーの保護がされています。
iframeでFacebookページを作ると、このhttps://～で同じFacebookページを表示したときに、iframeの中身が全く表示されないという現象が起きてしまい、このことからiframeでFacebookページを作るのを避けている方も多いようです。
しかしもちろん、セキュアな接続（https）でも、iframeの中身を表示させることは可能です。
今回、当方のFacebookページもセキュアな接続対応しました！
https://www.facebook.com/stage01.lab
iframeを使って作成していますが、正常に表示されました。
上記図のピンク枠の部分に独自SSLのURLまたは、共有SSLのURLを入れます。
当方は、共有SSLで問題なく対応できました。
SSL対応が要求せれると、ますますiframeでFacebookページを作るのはハードルが高いかもしれませんね・・・。
ただ、知識がある方であれば、これで対応できると思います。
因みに、
「Facebookページをどうやって作るかわからない…」
「iiframeでFacebookページを作るやり方がわからない」
という方は、
是非、ステージゼロワンラボにご依頼ください。
« Older Entries Newer Entries »
ssss
Twitter
Facebook