Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Facebook 小技集

facebookの新プロフィール画面で、写真をうまく使ってデザインする方法

投稿日:


【2011/02/01:追記】
ファンページについてのエントリーも書きましたので、そちらもどうぞ。
facebookのファンページを作る時に気をつけたい細かい話

facebook-0000
半年くらい前から、ネット上でfacebookがにわかに流行りだしてから本格的に使い始めたんですが、いままでいくつかエントリーを書きました。

で、最も基本的な自分のプロフィール画面でちょっと遊んでみましょう、というお話です。
冒頭のスクリーンキャプチャーのように、ページ上部に写真のサムネイルが5つ並ぶ新デザインに今月から正式移行したようです。この5つの画像は、自分だけでなく友人が自分であるとタグ付けした写真が並ぶのですが、意図的に並べることによってプロフィール画面を大きな額縁のようにつかっちゃいましょう。
左側のプロフィール画像が1つとサムネイル5つの組み合わせでつながりのある画面にすると面白いと思います。それぞれの画像サイズは、

  • プロフィール画像:横180px * 縦540px
  • サムネイル画像:横97px * 縦68px

プロフィール画像はウォールなどに表示されるサムネイルが四角なので正方形の画像をUPしないといけなそうですが、実は縦長でかなり大きな画像を登録できます。しかも、画像の一部分を指定してサムネイルにできるので、アピールの意味では最大サイズの縦長で作るとインパクトあります。上5つのサムネイルは97*68以上の画像は自動で縮小されるのですが、縮小される位置が分かりづらかったり、画像が荒くなるのでサムネイルサイズで作った方が懸命です。
といっても、面倒でしょうからPhotoshopですぐに使えるサンプルPSDを作ってみました。
FB_profile_frame.psd.zip
facebook-0001
画像部分だけ切り抜くための半透明なレイヤーを作っておいたので、半透明レイヤーの下に切り取りたい写真をはりつけて、該当部分を選択ツールで選択してから「結合部分をコピー」とかやると早いと思います。

プロフィール画像の登録

さて、無事画像の作成が終わったところで、FBに画像を登録していきます。
まずは、一番大きなプロフィール画像から登録しますが、
プロフィールの編集>プロフィール写真
で、下記画面が表示されます。
facebook-0002
作成したファイルをアップロードします。
facebook-0003
その場でアップロードが始まります。
facebook-0004
アップロードが終わったらサムネイルの調整を行います。
アップロードした画像の下に、「サムネイルを編集」リンクがあるので押すと、このようにサムネイルの表示部分を移動できる画面がでます。
縦長の場合、表示したい部分と違うかもしれないのでドラッグして調整→保存を押します。

サムネイル5枚の登録

続いて、ページ上部に5つ並ぶサムネイルの登録を行います。
写真のUPは普通に写真ページから任意のフォルダに行います。
facebook-0005
写真のUPは複数選択して一気にUPできるので楽チンですね。
facebook-0006
5つくらいのサムネイルなら対して時間かからないので、高画質を選択しておいた方がよいかもです。
facebook-0007
さて、写真をUPしただけではプロフィール画面には表示されません。
自分がのっている写真だというタグ付けをする必要があるのですが、順番に気をつけなければいけません。
タグ付けすると、画面左から右へ早く登録した写真が移動していくので、右がわに表示したい写真から順にタグ付けしていきます。
facebook-0008
タグ付けは、該当画像の詳細ページを開いて、右下にある「この写真にタグを付ける」を押します。
facebook-0009
その後、写真の任意の部分をクリックするとこのように自分を含む人物のリストがでてくるので選択するとタグ付けされます。
facebook-0010
右上のタグ付け終了を押して完了です。
これを、5コ分続けてやります。
間違ってしまった場合はタグを削除してからもう一度タグ付けしなおす事もできます。この場合写真のUPからやり直す必要はありません。

まとめと注意点

プロフィール写真はともかく、上のサムネイルはタグ付けだけが条件なので、他の友達が自分にタグ付けしてくると入ってきてしまうのでなかなか思い通りにならないかもしれません。そこはそういうもんだと思ってください。あと、意図的に他の人のプロフィール欄に変な画像を並べることも可能になると思うので・・・いたずらはやめましょうね。
デザインのカスタマイズができないfacebookですが、プロフィール写真と5つのサムネイルで縦横に結構大きなスペースを使えるのでうまく使うとおもしろい効果がだせそうです。風景写真を使ったり、顔写真をドアップでつなげてみたりしてみもいいかも。あと、それぞれの画像に1文字づつ入れてメッセージをつくるとか。「Y・A・G・E・R」とかもやってみようかと思いましたが恥ずかしくなってやめましたw
面白いプロフィール画面ができたらぜひ教えてくださいねー。
ボクのアカウントはこちらです。
Takahito Yagami
フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)
4822248372
できるポケット Facebookをスマートに使いこなす基本&活用ワザ150
4844329340
週刊 ダイヤモンド 2011年 1/29号 [雑誌]
B004IUK80K

-Facebook, 小技集

執筆者:

関連記事

FacebookのOGPを簡単に確認するための5つの便利ツール

ご無沙汰しております、ヤガーです。 今までのFacebook関連のネタや、OGPに関する記事を書いてきましたが、さすがに企業サイトやブログなどではOGPの設定が浸透してきていると思います。OGPがある …

no image

極めたいw CakePHPのルーティング

先週のCakePHP勉強会で、akiyanさんが routes.php に関する発表をやっていて、今までになかったルーティング情報のまとめみたいな資料になっていて多くのBakerが目から鱗状態になった …

picplzの全投稿サマリーを統計してバックアップできる「thx!picplz」を作りました

・picplzが7月3日で全サービス終了→一括ダウンロード方法など [C!] 先日、picplzのサービス終了を速報でお知らせしたのですが、以前作ったPHPでのダウンローダーはやはり敷居が高かったよう …

第6回:TinyURL の遷移先が怖くて開けない場合の対処法

twitter や、mixi でよく使われている、 TinyURL というWEBサービスは長〜いURLを短〜くしてくれるので便利なんだけど、他の人が書いている TinyURL をクリックするのがちょっ …

no image

Deliciousでサイト内ブックマーク数の合計を取得するPHPサンプル

はてなブックマークにはサイト内のブックマーク数合計を表示してくれるはてブカウンターというのがあります。他のSBMには無い機能ですが、サイトの人気度を示す良い指標だと思っています。 参考:はてブ数100 …

スポンサードリンク

スポンサードリンク