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, 小技集

執筆者:

関連記事

Ffmpegで複数動画ファイルを無劣化で結合したり、無劣化で切り出したりする

いつまで経ってもffmpegのコマンドが覚えられないヤガーです。 というわけで、今回もよく使うコマンドをご紹介、というか自分用メモ。 このごろイベントの撮影やライブ配信をしていて、固定カメラで動画を長 …

ブログに埋め込んだFlickr画像に自動でEXIF情報を追加する「FlickrEx」がLazyLoadに対応!

ボクは写真が好きで、バックアップも兼ねてFlickrに全ての写真データをアップロードしているのですが、ブログに貼り付ける画像もFlickrにアップロードしたものを使っています。プロアカウントを持ってい …

TumblrにOGP設定してみた

【2011/06/21:追記】 あまりにも適当に書きすぎて分かりにくかったのでサンプルコードの中で差し替えが必要な部分について説明加筆しました。 メインブログのMTにOGP設定をしたのが良いキッカケに …

Deliciousの被ブックマーク推移グラフを表示するURL見つけた

ボクは普段ソーシャルブックマークサービスはDeliciousを使っているんですが、ブログ用にブクマ数やグラフ、タグなんかを表示できるTagometerというブログパーツが用意されています。 With …

no image

AmazonのURLを短くするブックマークレット

今日、はてブ経由でこんな豆知識を仕入れました。 もともとAmazonの商品ページは、書籍であれば10けたのISBNコード、それ以外の製品もASINの10けた番号さえあればアクセス可能だ。 via: 3 …

スポンサードリンク

スポンサードリンク