超現場ブログ

Technique,Design and Events

サイトに設置するファビコンとタッチアイコンを作る

Twitter Facebook Google+ はてブ

サイトに設置するファビコンとタッチアイコンを作る

関東の田中です。
今回は、受講生が制作中のサイト用に制作した、faviconとタッチアイコンを取り上げてみました。

webページには、PCブラウザやデバイズ上で表示させるサイトのシンボルマークとして、
様々なサイズのアイコンを用意する必要があります。

サイズ(px) 使用箇所
16×16 お気に入り、タブ、IEのアドレスバー・ピン留めサイトなど
24×24 ピン留めサイトのブラウザUI
32×32 IEの新しいタブとタスクバーボタン
48×48 Windowsのサイトアイコン
64×64 高解像度デバイスでのWindowsのサイトアイコン
57×57 iOSのホームアイコン
72×72 iPadのホームアイコン
96×96 GoogleTVのアイコン
114×114 RetinaディスプレイのiPhoneのアイコン
128×128 Chrome ウェブストアのアイコン
144×144 IE10 Metroのピン留めサイトアイコン
152×152 RetinaディスプレイのiPadのアイコン
195×195 Operaスピードダイヤルのアイコン
228×228 OperaのiPad向けブラウザ「Coast」のアイコン

faviconやタッチアイコン制作で大切な事は、
それぞれのサイズで一番ハッキリ見える画像を制作する事です。

複数サイズの画像を一つのファイルで対応の.icoフォーマットでつくるfavicon用に
彼女が準備した画像が、以下の3種類です。
favicon

上が原寸、下はそれぞれのサイズの画像でピクセルがどのように配置されているのか、
確認できるように同じ大きさで表示したものです。
このように、16×16で魔法使いの帽子だと確認できる画像の書き方と
48×48で魔法使いの帽子だと確認できる画像の書き方は違います。

また、スマホデバイズには様々なサイズのタッチアイコンを用意する必要が
ありますので、彼女はfaviconとは別に、キャラクターを用いて
タッチアイコンのサイズを10種類準備しました。
アップルタッチアイコン

同じ画像をただ縮小しただけでは、原寸で見た時ぼやけてしまいますので、
それぞれのサイズを個別に制作します。

下に同じ大きさで見る4種類のサイズのタッチアイコンを並べてみました。
アップルタッチアイコン

ピクセル密度によって、ピクセルの配置の仕方が
全く変わってくるのがわかると思います。
どのサイズも、原寸で見た時同じ絵だとわかるためには、
それぞれのサイズの画像の描き方を変える必要があるのです。

top絵は彼女が、これらfaviconとタッチアイコンを設置して制作を続けている
サイトのデザインカンプの一部です。

これからコーディングに入る予定です。
完成したら、オリジナルサイトの1作品として、
彼女の就活用ポートフォリオを飾る事になります。

大変楽しみな受講生です。サイトが完成しましたら、
またブログで紹介しようと思います!

web塾関東では彼女をはじめとして、
web業界への就職を目指して地方から上京し師事を受ける受講生がいます。
web業界への就職を目指して上京を考えていらっしゃる地方の方、ご相談ください。

ご質問・ご相談の方はこちら

ご質問・ご相談ですか?

どんなことでもお気軽にご相談ください。

ご質問・ご相談はこちら

Copyright © 超現場主義 All rights reserved.