ライラック自工

タイルレイアウトの欠点の一つは、トップページの文字情報が減り、SEOの面で不利になることです。本サイトでは、タイルにマウスオーバーで概要説明を表示させる機能を盛り込むことでこの問題を克服しました。

また、レスポンシブデザインに完全対応しています。

本サイトの特徴の一つはトップページのアニメーションです。

アニメーションを行うJavaScriptコードは、CSSのpositionプロパティの値をリアルタイムで変更して行う例が多くみられますが、再レンダリングの負荷が高く、ブラウザによってはアニメーションがスムーズに動かないことがあります。

このサイトではCSS3のアニメーション機能を用い、JavaScriptの関与をクラス名のOn,Offにとどめることでブラウザの負荷を大きく減らし、スムーズなアニメーションを実現しています。

また、曲線を多用することでサイト全体に柔らかさを持たせています。PCサイト表示ではグローバルメニューが下に反った緩やかな曲線を描いていますが、これはCSSで実装しています。トップページのキービジュアルの下辺の曲線もCSSで実装しています。