THE HAM MEDIA BLOG

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

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

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

作成するのは背景画像

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

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

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

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

画面サイズと背景

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

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

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

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

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

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

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

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

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

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

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

右側の空き

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

下側

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

下地色

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

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

ファイルサイズ

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

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

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

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

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

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

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