THE HAM MEDIA BLOG

オリジナリティあるTwitterの背景を作成してみる

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
デザイン
タグ:
twitter
背景
デザイン

この2010年夏はTwitter携帯がソフトバンクからでたり、Twitterを活用したサイトが(良くも悪くも)どんどん出てきたりしていて、Web業界関連の人意外でも利用する人が増えてきているみたいですね。

数年前に使い始めたころは、もっと気軽だったような気がしないでもないです…と、そんな余談はいいとして、みなさんはTwitterの背景、どうしていますか?

自分はいままで、どこかの無料配布サイトで見つけた背景画像を利用していたのですが、背景を綺麗に作成している人のを見て「自分も作ってみたい!」なんて思ってしましました。

作成するのは背景画像

Twitterのデザインで変更が可能なのは基本的には色と画像。メニューの設定→デザインで変更が可能です。文字色(通常テキストとリンク)と右側サイドバーの背景色とライン色と、800MBまでの画像1枚もしくはタイル貼り(リピート)が設定可能。


↑2010年6月6日時点でのハム(@h2ham)の設定

上記は変更できる箇所ですが、変更できない箇所もあります。タイムライン側の色やTwitterのロゴ、メニュー箇所などは白背景色のままで変更ができません。また、タイムライン側のカラムとサイドバーのカラムを合わせた横幅、765pxも変更することはできません。このメインの部分はブラウザのウィンドウサイズに対して、中央に配置されるようになっています。

そこで、今回テーマとしているのは、そのメイン部分からはみ出た左右の背景部分。ここをオリジナリティのある背景を設定して、他の人と差をつけよう!というのが今回の目的です。

画面サイズと背景

Twitterの背景をデザインする時、人に見せる部分はメインの部分の左右に表示される背景部分。左右の空きは、画面サイズによって、見える広さが変化するので、まずはそれをチェック。

■少し大きめのモニタで見た場合(1280px)

■画面サイズが1280px時のイメージ

■少し大きめのモニタで見た場合(1024px)

■画面サイズが1024px時のイメージ

2種類の大きさを見てもらいましたが、みえている部分は、画面サイズが小さくなるに連れて少なくなっていきます。ネットブックなどの小さいサイズに設定していた場合、800pxになるので、ほぼ背景は見えないという・・・

つまり、どんな人でも同じように見ることができる・・・全員に合わせてデザインするというのは、タイル貼りにする以外はまず難しいですね。

ウィンドウサイズと画面左の空き

では、どの位のサイズで左側背景のデザインをしたら良いか。1024pxに合わせての広さにしたらいいか、1280pxに合わせたらいいか。ちなみに、それぞれの大きさで、額実に見えると思われる左側の空きサイズは、下記のようなくらいだと思われます。

左側の幅を大きくしすぎると当然重なる

ここからはあとは好みとかにデザインの重要度とかにも関わってきましすが、最終的にどのくらいの大きさでデザインするかは好みかなと。重なってもいいようなデザインの場合なら、250pxくらいの大きさをとってもいいと思います。実際、自分の顔の部分も下のURLとか載せている部分も1280pxくらいの大きさ用にしているので、それより小さい画面の時は重なってもいいかなってスタンスです。

右側の空き

ちょっと考えるのが面倒なのが右側かなと。画面サイズが小さい時の為に内側にも外側にも同じようなデザインを配置しておけば、先程の2種類の大きさであれば対応可能ですが、それ以上の大きさある画面だった場合・・・例えば1600pxとか1920pxとか・・・その場合は、かなり左右広くあいてしまうため、右側を長めにデザインして置かなければ、重なったり、左側に出てきてしまう・・・なんてこともある。個人的には2サイズ分だけ用意しておいて、それ以上は隠れてもいいかなというスタンスな自分です。

下側

左右どちらも言えるのですが、縦も長くしてしまうと、一部隠れたり見えなくなってしまいます。ウィンドウの大きさだけではなく、ブラウザのメニューバーの多さなんかにもよって変化してしまう部分なので、下過ぎないのがいいと思います。ちなみに自分のデザインは下側はおそらく隠れる場合が発生してしまいます。しかし、先程もかいたのですが、重なったりしてもいいかーという気持ちでいますので、特に気にしていません。重要な内容などを配置する場合は、できるだけ上の方で表示されるようにしたほうがいいです。

下地色

背景をタイル貼りにしている場合は特に関係無いのですが、タイル貼りをしていない場合は、作成した画像サイズ以上の大きさの画面の場合、下地色がでてきます。大きい画面で見た場合に、デザイン部分と下地部分で大きな差を出さない様にするには、デザイン部分の右側と下側の境界部分は、背景と同じような色になるようにしておくといいです。あらかじめデザインする部分の色と統一させたり、グラデーションさせる場合は画像内でグラデーションの変化を終えるようにしておき、滑らかに下地とつながるようにしておくといいでしょう。


白線がデザインと下地の境界

ファイルサイズ

オリジナリティあるデザインをする場合のもう一つの注意として、ファイル容量の制限があります。アップロードできるファイル容量は800KBまでなので、それ以下で作成をする必要があります。画像なんかも使えますが、容量要注意です。

気をつける点やポイントは以上のようなことでしょうか。

現在自分のアップしたデザイン

最終的に完成させたのはこんなデザイン。1260px×621px・・・高さが微妙だった。。。まぁ、気にしない〜(笑)

せっかくなので、皆さんも有効活用を

Twitterの背景、クライアントなどを使って利用している場合や携帯などでしか使わない場合は、あまり意味のないことになってしまうかもしれませんが、パソコンから見てくれる人もいるので、無駄ではないと思います。他と同じデザインを利用するのではなくて、デザイン出来たりする人は、ぜひここのオリジナリティーをだして利用してみるのはいかがでしょうか。

自分の場合はデザインセンスがないのでアレですが。。。

この記事へのコメント
右上にQRコード配置して
情報を持ち歩けるようにしたらおもしろいですよね。
Posted by 山本陽刃 at 2010年06月07日
>陽刃
QRコードは、モバイルで見てもらいたい情報があるということが前提ですよね。
PCで見ているひとに、あえてQRを見せて誘導させるには、それなりの意味がないと。
と、自分の場合に何かQRが使えないか!ってかんがえたけど、自分はモバイルへ誘導するコンテンツ(もしくは情報)を持ってなぃ><
コンテンツのアイディアプリーズです。
Posted by ハム at 2010年06月13日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。