ランディングページのデザイン：究極のランディングページの構築

効果的なランディングページは、製品の成功にとって重要です

マーケティングは、ほとんどのデザイナーや開発者にとって外国の概念です。 私たちは製品開発と技術的課題に優れていますが、製品を宣伝するときが来たとき、私たちはあまり精通していません。

しかし、マーケティングは製品の成功に不可欠であり、見落としてはなりません。 これは、開発者向けの世界有数のキーボードであるUltimate Hacking Keyboardを設計し、発売する準備をしたときの課題でした。

ありがたいことに、私は魅力的なランディングページの重要性を認識したチームの一員でした。特に、クラウドファンディングキャンペーンに至るまでの数か月間でした。 一緒に、私たちは想像力を捕らえ、加入者を生み出し、そして成功する発売のために私たちの製品を準備するランディングページを設計することに着手しました。

これは、UltimateHackingKeyboardの究極のランディングページのストーリーです。

技術的なアドバイス。 実用的な前進。

「ランディングページのデザイン」をGoogleで検索すると、次のような重要なヒントが満載の優れた記事が多数見つかります。

• 「コンテンツはすぐに読み込まれるはずです。」
• 「写真はサイトのオーディエンスに関連している必要があります。」
• そして、「リードを集めるためのフォームを含めてください。」

これらは役立つポイントですが、ランディングページの成功にはさらに多くの要因があります。 このランディングページデザインガイドは、技術的なアドバイスを提供しますが、デザイナーと開発者が適切なサードパーティサービスを選択し、舞台裏で機能するテクノロジーを統合するのに役立つ実用的な洞察も提供します。

最終的に、このガイドの目的は、設計者と開発者の時間とお金を節約することです。そうしないと、無駄な試行錯誤で無駄になる可能性があります。

ハイエンドのビデオ制作とホスティングを目指す

Webでのビデオの表示はこれまでになく簡単になりましたが、それを使用しているサイトは比較的少数です。 Webの観点からは、これは技術的な課題ではなく、時間とお金というリソースの投資です。

Ultimate Hacking Keyboard（UHK）のランディングページの予告編ビデオは12回繰り返され、新しいバージョンごとに細部が徐々に洗練されていきました。 デザインプロセスは疲れ果てていましたが、やりがいがありました。予告編のビデオは、ランディングページの最高峰です。 それは私たちの製品を他のパックから完全に差別化します。

高品質のコンテンツ作成には費用がかかることに注意してください。 専門の専門家は製品を輝かせることができますが、あなたが何を買うことができるかを理解することは重要です。 そうしないと、製品が地面に落ちる前にタンクに入れられる可能性があります。

あなたまたはあなたのチームの他のデザイナーがスキルと設備を持っている場合は、独自のビデオコンテンツを作成してみてください。ただし、ビデオは短くシンプルにしてください。 アマチュアの手による過度に野心的な作品がうまくいくことはめったにありません。

UHKチームは、ダイナミック3Dアニメーションを使用して、ランディングページのキーボードの基本的な機能をデモンストレーションしました。 2Dアニメーションが必要な場合（アプリまたはWebサービスの場合）、またはライブアクションカメラの映像が必要な場合、プロセスにはさまざまな課題があります。

ビデオが作成されたら、Webサイトでホストする必要があります。 ありがたいことに、たくさんのオプションがあります：

YouTubeは、誰もが認めるマーケットリーダーであり、ウェブ上のビデオの同義語です。 それは有能なサービスであり、合理的な選択ですが、その組み込みプレーヤーは最も美的に満足できるオプションではありません。

Vimeoは、非常にエレガントなミニマリストデザインの埋め込みプレーヤーを備えています。 高品質のコンテンツをホストし、優れた高解像度を提供することで知られています。

Wistiaは、マーケターの間で人気のあるもう1つの選択肢です。 ビデオのどの部分が視聴、スキップ、再視聴されたかを示すビデオヒートマップなどの高度な機能を提供します。

最終的に、UHKチームはVimeoが私たちのニーズを最もよく満たすと判断しました。 これが私たちのランディングページの予告編です：Ultimate Hacking Keyboard

また、ビデオがランディングページの訪問者の注意をよりよく捉えられるように、Vimeoのアプリケーションプログラミングインターフェイス（API）に飛び込んだことも注目に値します。 VimeoのJavaScriptAPIを使用して、トレーラーが終了した後、サイトの「Iwantone」ボタンを3回続けてパルス化しました。 適切に使用すると、このような微調整により、ランディングページのコンバージョン率を上げることができます。

3Dコンテンツで没入型体験を作成する

ランディングページの訪問者に没入型の体験を提供することが重要な場合があります。 訪問者がUltimateHackingKeyboardを3Dで探索できるようにしたかったので、この目的のために特別に作成されたWebGLベースのサービスを調査する必要がありました。

Sketchfabは最も人気のあるWebGLベースのサービスです。 習得が簡単で、さまざまな視覚的設定を提供し、さまざまな人気のあるホスティングサービスに組み込むことができます。

P3d.inは、使いやすさに重点を置いたシンプルなWebGLサービスですが、特定の高解像度テクスチャのサポートには制限があります。

慎重に検討した結果、Sketchfabを選択しました。 これが、UltimateHackingKeyboardが3Dでどのように見えるかです。

2Dアニメーションで問題と解決策を視覚化する

Ultimate Hacking Keyboardの主な利点の1つは、手の動きが劇的に減少することです。 チームは、通常のキーボードと並べて動作するUHKのアニメーションを表示することにより、ランディングページでこれを視覚化したいと考えていました。 これを実装することは、思ったほど簡単ではありませんでした。

埋め込まれたビデオを使用することはやり過ぎのように感じられ、レンダリングの余分な作業も必要になります。 アニメーションGIFは、ファイルサイズが大きく、カラーパレットが限られているため、オプションではありませんでした。 最終的に、インラインSVGアニメーションを使用することを選択しました。これは、手のグラフィックをページ上の他のグラフィックから独立して移動できるためです。

この方法でランディングページのアニメーションを作成するのは、予想よりも時間がかかりました。 単純なアニメーションを作成するためだけに、クロスブラウザーの問題、JavaScriptライブラリのバグ、およびその他の予期しない技術的な課題に対処する必要がありました。 ただし、最終結果は非常に見栄えがよく、追加の作業に十分な価値があることが証明されました。

賢明な一言—うまくいかない可能性のあるものの数を過小評価しないでください！

リアルタイムで分析を測定する

GoogleAnalyticsは素晴らしいです。 広く使用されており、操作が簡単です。 ただし、リアルタイム操作にはより良い候補があります。

Chartbeatは、Webサイトが特定のしきい値、特にサイトの同時ユーザー数を超えたときに通知を送信するという優れた機能を果たします。 たとえば、UHKサイトはオンラインフォーラムにリンクされていることがあり、突然のトラフィックの急増を引き起こします。 Chartbeatのおかげで、すぐにわかり、進行中の会話に早く参加することができます。

Mixpanelは、Web管理者がサイト訪問、サブスクリプションダイアログの開始、サブスクリプションの確認などのイベントを分析するのに役立ちます。 また、これらのイベントから目標到達プロセスを構築し、コンバージョン率を視覚化して、数値を実用的なものにすることもできます。

Clickyは、訪問者がサイトをクリックした場所を明らかにする素晴らしいヒートマップ機能を提供します。 結果に基づいて、サイトのレイアウトまたはコンテンツを改善して、より良い結果を達成することができます。

HotJarを使用すると、Webサイトの所有者は、すべてのマウスとキーボードのアクションを保存してビデオに変換することにより、訪問者のインタラクションを記録できます。

これらのサービスにはそれぞれ独自の機能と利点がありますが、それらはすべて、Webサイトの訪問者のアクティビティに関する貴重な瞬間的なフィードバックを提供します。 どのタイプの情報がマーケティング目的で最も価値があるかを判断するのは、個々の企業次第です。

エラーを記録し、不必要な頭痛を防ぎます

WebサイトはますますJavaScriptに依存するようになっているため、重要なサイト機能がJavaScriptに依存することがよくあります。 たとえば、Ultimate Hacking Keyboardランディングページのサブスクリプションダイアログは、JavaScriptコードによってトリガーされます。

サブスクリプション機能を実装するとき、私たちは主要なブラウザーでそれをテストし、必要なすべてを実行したと確信しました。 しかし、その後、訪問者から、ランディングページのサブスクリプション機能が機能しないという苦情のメールを受け取りました。

結局のところ、問題の訪問者はAdblock Plusを最も厳密なモードで使用していたため、Clicky分析スクリプトがブロックされていました。 他の分析サービスとは異なり、Clickyの埋め込みコードはこの点で回復力がなかったため、サブスクリプションアクションをログに記録し、Clickyオブジェクトを参照すると、コードはエラーを生成しました。

この事件の後、私たちは将来同様の状況を回避する方法を慎重に考えました。 チームは、グローバルwindow.onerrorイベントハンドラーを使用して、このようなエラーをキャッチしてログに記録する必要があることに気付きました。 次に、適切なロギングサービスを検索し、Errorceptionを選択することになりました。

Errorceptionは、JavaScriptエラーを見つけるという、1つの仕事を実行し、非常にうまく機能するため、驚くべきものです。 そのユーザーインターフェイスは最小限で機能的であり、サポートは素晴らしく、サイト管理者は個々のエラーを表示してスタックトレースを調査できます。 何よりも、それはあなたのお金に本当の価値を提供します。

Errorceptionを統合して以来、およそ12のバグを解決しましたが、そのうちのいくつかはありそうもない予期しないものでした。 たとえば、 localStorage関連のエラーを受け取ったことがありますが、Safariがプライベートブラウジングモードの場合、 localStorage.setItem()でエラーが発生することがわかりました。

すべての外れ値エラーのケースを説明することは不可能であるため、ロギングは、欠陥が大きな頭痛の種になる前にそれをキャプチャするための優れた方法です。

メンテナンスの少ないビルドプロセスを設計する

当初、UHKインデックスページはWordPressでホストされている単一のHTMLページとして始まり、すべてのCSS、HTML、およびJavaScriptコードが含まれていました。 当初、これは実行可能な解決策でしたが、ページが大きくなるにつれて、メンテナンスの負担になり、よりモジュール化されたアプローチが必要になりました。

私たちの解決策？ まず、CSS、HTML、およびJavaScriptコードをいくつかの個別のファイルに分割します。 次に、CSSファイルをLessファイルに変換して、メンテナンスをさらに簡単にしました。 最後に、すべての小さなファイルをアセンブルするためのビルドプロセスを考案しました。

常にパフォーマンスを最適化する

UHKチームは、ウェブサイトのパフォーマンスが非常に重要であることを経験から知っています。たとえば、ランディングページがスラッシュドットで、同時に260人の訪問者を受け入れたときなどです。 ありがたいことに、月額20ドルのLinode VPSはチャンピオンのように機能しましたが、これには盲目的な運以上のものが必要だったので、パフォーマンスを向上させるためのヒントをいくつか紹介します。

• 画像の遅延読み込みは、特に私たちのようなページに多くの画像が含まれている場合は、友だちです。 WordPress UnveilLazyLoadプラグインを使用しています。

• アセットを遅延ロードすることもできます。 ページのセクションが追加のスクリプトに依存している場合、ビューポート内に入るときに遅延ロードすることができます。 jQuery inviewプラグインを使用してビューポートの可視性を確認し、jQuery.getScript（）またはその他のスクリプトローダーを使用してスクリプトをロードします。

ランディングページのデザインは重要なデザイン分野です

この投稿では、ランディングページのデザインに関するかなりの数の問題に触れたので、最も重要なポイントを要約しましょう。

• テキストベースのコンテンツを超えて、ビデオ、3Dモデル、2Dアニメーションなどのリッチメディアを含めます。 このタイプのコンテンツは、ランディングページをより魅力的にし、訪問者が他の人と共有することを奨励します。
• リアルタイムの分析を使用して、突然のトラフィックの急増に迅速に対応し、進行中の会話に参加できるようにします。
• 常にエラーをログに記録します。 うまくいかない可能性がある（そしてうまくいかない）ことがたくさんあるので、追跡することが重要です。
• パフォーマンスを最適化して、トラフィックの負荷が最も高い場合でもサイトが維持されるようにします。

すべてのデザイン分野と同様に、ランディングページのデザインには、新しいツール、テクニック、およびプロセスについて学ぶための継続的な取り組みが必要です。 テクノロジーと味は必然的に進化します—今日の最先端は明日の遺物です。

ありがたいことに、明確にコミュニケーションを取り、視聴者を魅了するランディングページのデザインは、テクノロジーに完全に依存しているわけではありません。 経験豊富な設計者は最新のツールを組み込む方法を知っていますが、設計プロセスは主に、適切な質問をし、プロジェクトを狂わせる恐れのある問題を巧みにナビゲートすることによって推進されます。

最終的に、魅力的なランディングページは、新しいブランドや製品のマーケティング計画に欠かせない要素でなければなりません。 私たちのウェブ主導の世界では、うまく設計されたランディングページには、フォロワーを増やし、話題を生み出し、売り上げを伸ばす能力があります。これらはすべて、新進気鋭の企業の継続的な繁栄に不可欠です。