CSS3だけで作る、アニメーションロゴを試験中

サイト開設から今年で18年を迎える「aquapple」ですが、それに伴い新しいロゴをデザインしています。

円型 アイコンから 角丸四角形 へ

今回のロゴは従来の円型から一転、角ばった角丸四角形に変更しました。

最大のポイントはアニメーション化

CSS3がだいぶ普及しました。その中の一つ、アニメーション効果を今回のロゴにも取り入れています。現在はトップページのみアニメーションを見ることができます。

すべてのページに適用しないのは、ブラッシュアップの余地があること、ページ読み込みの速度低下を防止するためです。

Retinaディスプレイから4Kディスプレイに対応

そして、ロゴの解像度自体も従来の2倍となりました。オリジナルのロゴからは縦横4倍になりました。オリジナルサイズは1,304px × 412pxです。これを326px × 103pxに縮小して表示しています。4K解像度を持つiMacや、4K対応スマートフォンでもジャギーが表示されずに見ることができるようになったと思います。その分ファイルサイズも増加しましたが。

転送量などを確認しながら、新しいロゴについて今後も試験的に適用していきたいと思います。