ランディングページをリライトする趣味の話

最近、ランディングページのコードをいかにシンプルに作ることができるか、こだわっている、ユゲタです。 キレイでカッコいい、素敵なランディングページをみつけると、スクリーンショットをとっておいても、その後それを再活用することなどほぼないので、 最近は、ランディングページを自分コードでコピーするようにしています。 そんなことをしていると、いくつか気がついたことがあり、今回は効率を考えたエンジニア視点で、ランディングページ（ホームページ全般的）に対してのいろいろなポイントを備忘録として残しておこうと思います。

表示の遅いランディングページについて

webマーケティングに精通している人は、当たり前とされているのですが、「表示の３秒ルール」というのをご存知でしょうか？ ３秒以内にページが表示さないと、それを見に来たユーザーのほとんどが、離脱してしまうというモノなんですが、 SNSやニュースサイトで、面白そうな記事をクリックした時に、表示されるのが遅くて、ブラウザのページを閉じてしまった事ある人は、多いんじゃないでしょうか？ もちろん、セッカチなボクとしては、２秒で閉じてしまいます。 だけど、なんで表示が遅いのかということに興味が湧いてきて、そのページを分析することもあるんですが、 サーバーアクセスが遅いというケースは、最近では、あまりなく、読み込んでいるライブラリやAPIツールなどが極端に遅くなっているというのが多いようです。 残念なのは、せっかくいい記事のページなのに、表示される広告がクソ重い動画を読み込んでいる間待たされてしまって、読み込みに１０秒以上かかってしまっているような場合、 「そのアフェリエイト、辞めたほうがいいですよ」とおせっかいに教えてあげたくなります。 あと、比較的多いのが、クソ重いフォントの読み込みで遅延してしまうページというのもあります。 デザイナーが、クソこだわって作ったデザインなんでしょうが、結果的に、離脱の多いページが出来上がっているという事に気がついていないというページという風に、評価します。

HTTP1.1の制約で遅いサイト

HTML1.1制約というのは、サーバーから同時に読み込みができるファイル数は２つまでという暗黙の制約があるんですが、 最近のライブラリ満載のフレームワークなどを使って、豪華絢爛なランディングページを作り上げているケースもたまに見かけます。 おそらく、ローカル環境や、立ち上げたてのサーバーで検証をしても、素早く読み込まれて問題は見つけづらいんですが、 アクセス数が増えてくると、すぐにサーバーがパンクして、てんやわんやになってしまうんですよね。 よく企業サイトで、テレビで紹介されてアクセスでパンクしてしまうような場合、こういう事を想定しているエンジニアが中にいないと、 単に「アクセス過多」という原因で終わりガチですが、実は、構成がとんでもなく悪いというケースも少なくないんですよ。 使いもしないのに、お作法と言うだけで、jQueryを読み込んでいるとか、 無駄にフォントを大量に読み込んだり、cssのimportantを爆使いしているような場合に、実はそれ無駄パケットが膨大に膨らんでいるということに気がつかなければ、無駄にサーバーコストが増えていくだけですからね。

ランディングページ収集って結構勉強になるよって話

最近、webエンジニアや、フロント・エンドエンジニアになりたいという人のツィートをよく見かけますが、 効率的に学習する方法などをツィッター上で議論していますが、何が良くて何が良くない学習法なのかって、ひとそれぞれなので、人に押し付けるものでも、他人の良かれと思ってやっていることにダメ出しをするのって、 それを見ていて、何ともレベルの低い話をしているようにしか見えないんですが、 他人の作ったランディングページを、自分のコードで書き直すって、非常に学習になるという事がよくわかりました。 もちろん、上から目線で、コードをリライトするという意味ではなく、どうやってこの表現をしているのか、cssの値や、DOMの組み方など、参考になることもしばしばあります。 コレまじでオススメですよ。 自分のライブラリとしては、画像などはそのまま使ってもいいんですが、その後、画像を入れ替えたりするだけで、仕事の素材としても使えるので、かなり効率のいいweb制作が行えるという利点もあります。 そして、ランディングページって、文章構成が一番重要なポイントなので、自分の何かの案件でサンプルとして、文章も自分用に作っておくと、その先の汎用性も増して、効率アップが半端ないです。 あまりこうした事をしている人は、ボクの周辺にいないので、今後web制作技術の向上を聞かれたら、コレをオススメしてあげようと思います。 そのうち、ブログかwebサイトで、集めたランディングページを公開しようと考えているので、興味のある人は、待っていてください。