う、もうTCDテンプレートの言うなりになっていて、サイト数の制作スピードよりも、開発者のスピードに負けてしまい、全種類は試せないのですが、またまた欲望に負けてAMORE (TCD028)買ってしまいました!
でもそのくらい今回のデザインはパララックスですよ?これは平面的なワードプレスサイトを3Dのように立体的に動かして、インパクトを与える手法です。これから増えるのかもしれませんが、初めて見た人は、その不思議な空間に引き込まれるような間隔に陥るはずです!!
AMORE (TCD028)はスマホでもインパクトがありランディングページにも最適
とにかくワードプレスの世界も、「今の時代はスマホ!スマホ!」ってことで、スマホ対策をきちんとしていないものは消え失せてしまう運命です。TCDの他のシリーズは実はヘッダー画像にインパクトをおきすぎるあまり、結構カスタマイズしないとスピードが遅かったり、逆に複雑すぎてインパクトに欠ける部分もあったのですが、今回のAMORE (TCD028)はスマホから見てもめちゃくちゃきれいです。
思わず自分のスマホから画像キャプチャをとってしまいました・・・・。
・・・ドコモのスマホですけど、トップページが相当シンプルにまとまっているのでこれはランディングページを作るのに最適!というわで、このテンプレートを使ってスマホ用ランディングページテンプレート比較サイトというものを作ってみることにしました!!
どうです?いろんな技術を詰め込んで作りましたが、PCとスマホの両方で非常にきれいに見えていると思いませんか?
AMORE (TCD028)のパララックスは写真と表示スピード
今回カスタマイズをしてみてわかったのですが、AMORE (TCD028)はヘッダー画像に3枚大きな写真を必要とし、さらにバララックスデザインを有効に生かすためには他にも記事中に大きな写真を3枚追加しなければなりません。そのため、表示スピードが非常に遅くなってしまい、初期の段階ではグーグルスピードテストで20点代という悲惨な状況になっていました。
なんとか改善して50点にもって来るまで苦労しました。
そこで私が今回AMORE (TCD028)のスピードアップカスタマイズでやったことを公開したいと思います。
① 多少画質は下がるがトップページ画像にはツールでロスレス圧縮をかける
→ 今回使ったツールはコチラ!ドラッグアンドドロップですぐに画像変換ができます。元の画像は名前を変えて一度保存しましょう
② EWWW Image Optimizerでできる限りメディアの写真を圧縮
→ 過去にも書きましたが便利です。
③ jetpackのPhotonを使う
④ キャッシュ系のブラグインを設定する
→ W3 Total Cacheなどを設定する詳しくはバズ部さんが解説してくれてますね♪
分からなければ、導入するだけでスピードアップするプラグインを使ってください
⑤ エックスサーバーの「mod_pagespeed設定」「PHP高速化設定(FastCGI化)」を使う
でもカスタマイズさえできば、トップページのインパクトは最高峰!デモサイトは飲食系になっていますが、ちょっと変わったランディングページとして使えると思います。使い方次第で面白いことになりそうです♪
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。