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

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

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

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

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

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

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

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

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

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

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

あくあぽ

1987年生まれ。IT企業に勤めるごくごく普通のサラリーマン。初めてコンピュータを触ったのは3歳のとき。趣味はゲーム、動画編集、ウェブデザイン。好きなコトバは「迷ったら高い方を買う」「値段が同じなら両方買う」「明日は明日の風が吹く」

あくあぽをフォローする
SOCIALウェブサイト&デザイン関連
この記事をシェアしてくださいねっ
aquapple