webデザイナー大阪 > webデザインの実践レポート > ツイッターアイコン作成のコツ

ツイッターアイコン作成のコツ

ツイッターアイコンの作成のコツを、実際に作成した事例を元にまとめました!

2011年の震災後に開催された
デジハリ様主催のツイッターアイコン作成企画、
「元気アイコンプロジェクト」に参加しました!

この企画は、震災で影響を受けた日本を応援し元気になるようなツイッターアイコンを作成し、無料素材として公開していこう!という企画でした。クリエーターなら誰でも参加できるということで、恐縮ながら私も上記の画像の通り、2点提出させていただきました。実際に参加してみて、ツイッターアイコンの作成には様々な注意点そしてコツがあるんですよね!

ツイッターアイコンのデザイン画像

POINTその1
ツイッターアイコンのサイズは
128×128ピクセル以上で作成しておくのが望ましい!

一見、48×48ピクセルのサイズでOKかと思いきや、実はプロフィール画面では横128pxのサイズで表示されるんです。
ですのでツイッターアイコンの画像を作る際には、最低でも 128px以上のサイズが望ましいと思います。しかし今後の仕様変更の事を念頭に置くと、あえて200px程度で作成しておくのが良いと思います。下記の画像は、私の個人的なツイッターアイコンの画像です。(左から200px、128px、48pxのツイッターアイコン)

ツイッターアイコン(大) ツイッターアイコン(中) ツイッターアイコン(小)

POINTその2
フォーマットはPNG、JPG、GIFの3種類が使えるが
あえてPNGで作成するのがオススメ。

ツイッターアイコンのアップロードには700KB以下という制限があります。
その制限を守りさえすればどんな形式でもOKなのですが、アイコンのような縮小させるものには劣化の少ないPNGがお勧めです。それにツイッターアプリによっては、ツイートの背景色が白以外の色になる事がありえます。(ツイートデックの場合、黒に近いグレーが背景となるので、時々GIFで透過させているアイコンの人は、ガタガタになって表示されていたりします。)でも、もしアイコンを透過させていた場合、PINGだったら美しく透過させることが可能なので安心ですね!

POINTその3
ツイッターアイコンに文字を入れてデザインするなら
48pxのサイズに縮小した際、きちんと文字が読み取れるか
確認しておく事。

作成時、128px以上で作成するとしても、実際に多く使われるのは48pxのサイズです。
もしツイッターアイコンに、文字を入れてデザインするならば、必ずその文字がきちんと読み取れるか確認しておきたいところです!このアイコン作成企画で他の参加者の皆様の作品を見たのですが、多くの方のアイコンが文字潰れで読めない状態でした。私も実際に文字入りでアイコン作成してみたのですが、これも結構キワドイですね…。もうちょっとくっきり見せられると良いのだけど!

ツイッター画像(日本) ツイッター画像(日本) ツイッター画像(日本)

twitterアイコン(JP) twitterアイコン(JP) twitterアイコン(JP)