WEB制作関連

話題の「about.me」でプロフィールページをつくってみた。

最近、Twitterなどでも自己紹介ページとして利用している人が増えてきた「about.me」でプロフィールページをつくってみました。簡単に見栄えのするページができておすすめなので紹介します。

こちらができあがったページ。所要時間は5分程度でしょうか。ここまでの設定方法を解説します。

aboutme_10.jpg

ちなみに自分でデザインができなくても以下のようなかっこいいプロフィールページができてしまうのでぜひ試してみてください。

aboutme_01.jpg

アカウントを登録する。

トップページにメールアドレス・パスワード・URLにしたいテキストを入力します。
ここで入力したURLが http://about.me/xxxxxxxxx のように自分のページのURLになります。

aboutme_02.jpg

次の画面で名前と自己紹介を入力します。

aboutme_03.jpg

“allow visitors to your profile to email you”にチェックを入れると他の人があなたのプロフィールページを通してあなたのEメールにメッセージを送れるようになります。
※アドレスは公開されません。

これでプロフィールページの作成は完了です。ここから自分のページをカスタマイズしていきます。

背景画像を設定

自分の持っている画像を使用したい場合は「↑」から画像をアップロードします。特に画像がないという方は用意されているものから選びましょう。

「Center image」だと画像が中心に置かれ、「Tile image」だとアップした画像が繰り返し敷き詰められます。

aboutme_04.jpg

Biographyの設定

avatarを登録すると名前の下に画像が表示されます。これはなしでもOKです。

名前と自己紹介は登録時に入力していますが、ここでいつでも編集できます。また「Headline」に入力すると名前の下に表示されます。

aboutme_05.jpg

Colorの設定

ここでは背景色とプロフィールエリアの透明度、各テキストの色を設定します。

aboutme_06.jpg

Fontの設定

ここで各テキストのフォントとサイズを設定します。
※まだ、日本語フォントには対応していないようなので設定できるのは欧文のみです。

aboutme_07.jpg

外部サービスの設定

About.meではTwitterやFacebookなどとの連携や任意のURLへのリンクを表示できます。

aboutme_08.jpg

「Add A Service」をクリックすると下の様なウィンドウが表示されるので連携したいものがあれば選択します。

aboutme_09.jpg

これで設定は完了です。各入力項目をまとめると以下のようになります。

aboutme_11.jpg

作成したプロフィールページはこちら

ここで作っておくとなにかと便利ですね。ソーシャルでもプロフィールから職業や趣味の見えない人はなかなか接触しづらい部分もあると思うので、できる範囲で自己紹介のページをつくっておくといいでしょう。あとは定期的な更新も大事ですね。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

関連記事

  1. WEB制作関連

    キャラクターを用いたWEBデザイン50個まとめ

    キャラクターのイラストを用いたWEBデザインのまとめです。&n…

  2. WEBディレクターズマニュアル

    ツールジプシーの果てに。

    先日、「WEBディレクターの為のEXCEL術(1)作業スケジュール」と…

  3. WEB制作関連

    より良いナビゲーションにするためのjQueryプラグイン40個

    見た目だけでなく、動きやスピードなどの最適化も求められるナビゲーション…

  4. WEB制作関連

    WEBサイト心理学|視線解析

    「ウソを付く時に人は右の方を見てしまう。」というのを聞いたことはありま…

  5. WEB制作関連

    X’MASにぴったりなPhotoshopのレイヤースタイル

    クリスマスにぴったりなゴールドがお洒落なPhotoshopのレイヤース…

  6. WEB制作関連

    複数の動画を設置できる「jQuery Youtube Player 」

    埋め込みコードを取得すれば簡単に設置できるYouTubeの動画ですが、…

  1. WEB制作関連

    WEBサイト心理学|ストループ効果
  2. 話題・トレンド

    たった1枚の紙で実現したAR(拡張現実)
  3. iPhone

    超速クリア動画がスゴい。「Touch the Number」
  4. WEB制作関連

    便利なアイコン配布サイト10+1
  5. Design Items

    紹介ムービーがカッコイイ!「魔法のハサミ」
PAGE TOP
Top