プロセスとツール
ランディングページのデザイン：究極のランディングページの構築
効果的なランディングページは、製品の成功に不可欠です
マーケティングはほとんどの人にとって外国の概念です デザイナー Y 開発者 。私たちは製品開発と技術的課題に優れていますが、製品を宣伝する時期になると、私たちはあまり知識がありません。
しかし、マーケティングは製品の成功に不可欠であり、見落とされるべきではありません。これは、開発者向けの世界の典型的なキーボードを設計して発売する準備をしたときの課題でした。 究極のハッキングキーボード 。
ハイエンドの製品写真は、eコマースのランディングページにとって重要なコンポーネントです。
幸いなことに、私は魅力的なホームページの重要性を認識したチームの一員でした。特に、クラウドファンディングキャンペーンの成功または失敗に至るまでの数か月間でした。一緒に、私たちは想像力を捉え、サブスクライバーを生成し、製品の発売を成功させるための準備をするランディングページの設計に着手しました。
これはの物語です 究極のハッキングキーボード究極のランディングページ 。
Webフォントと印刷フォント
技術的なアドバイス。実用的な前進。
「ランディングページのデザイン」をGoogleで検索すると、次のような重要なヒントが記載された多数の優れた記事が生成されます。
- 「コンテンツはすぐに読み込まれるはずです。」
- 「写真はサイトの視聴者に関連している必要があります。」
- e、「潜在的な顧客を集めるためのフォームを含める。」
これらは役立つポイントですが、さらに多くの要因があります ランディングページの成功 。このランディングページのデザインガイドは、技術的なアドバイスを提供するだけでなく、デザイナーや開発者が適切なサードパーティサービスを選択し、舞台裏で機能するテクノロジーを統合するのに役立つ実用的な情報も提供します。
最終的に、このガイドの目標は、設計者と開発者が無駄な試行錯誤で無駄になる可能性のある時間とお金を節約することです。
ハイエンドのビデオ制作とホスティングのターゲット
Webでのビデオの表示はこれまでになく簡単になりましたが、それを使用しているサイトは比較的少数です。 Webの観点からは、これは技術的な課題ではなく、時間とお金というリソースの投資です。
Ultimate Hacking Keyboard（UHK）ホームページの予告編ビデオは12回再生され、新しいバージョンごとに細部が徐々に洗練されていきました。ザ・ 設計プロセス それは厳しいがやりがいのあるものでした、そしてトレーラービデオは私たちのランディングページの王冠の宝石です。それは私達の製品をパッケージの他の部分から完全に区別します。
高品質のコンテンツを作成するには費用がかかることに注意してください。専門の専門家が製品を輝かせることができますが、あなたが何を買うことができるかを理解することは重要です。そうしないと、製品が地面から浮き上がる前に沈む可能性があります。
あなたまたは他の誰かの場合 デザイナー あなたのチームにはスキルとチームがあり、独自のビデオコンテンツを作成してみることができますが、ビデオは短くシンプルに保ちます。アマチュアの手による過度に野心的な作品はめったにうまくいきません。
UHKチームは、動的な3Dアニメーションを使用して、ホームページで基本的なキーボード機能をデモンストレーションしました。 2Dアニメーションが必要な場合（アプリケーションまたはWebサービスの場合）、またはライブアクションカメラの映像が必要な場合、プロセスにはさまざまな課題があります。
node js restapi認証
ビデオを作成したら、Webサイトでホストする必要があります。幸いなことに、多くのオプションがあります。
Youtube 誰もが認めるマーケットリーダーであり、ウェブ上のビデオの同義語です。それは有能なサービスであり、合理的な選択ですが、その組み込みプレーヤーは最も美的に満足できるオプションではありません。
Vimeo 非常にスタイリッシュなミニマリストデザインの統合プレーヤーが特徴です。高品質のコンテンツを提供し、優れた高解像度を提供することで知られています。
ウィスティア それはマーケターの間でもう一つの人気のある選択です。ビデオのどの部分が視聴、スキップ、および再視聴されたかを示すビデオヒートマップなどの高度な機能を提供します。
最終的に、UHKチームは、Vimeoが私たちのニーズに最も適していると判断しました。ランディングページの予告編は次のとおりです。 究極のハッキングキーボード
3Dアニメーションは、製品の機能を示すための優れた方法です。私たちが入ったことも注目に値します Vimeoアプリケーションプログラミングインターフェース （API）ビデオをより適切にキャプチャできるようにします。ランディングページの訪問者の注意。使用する Vimeo JavaScript API 、トレーラーが終了した後、サイトの「1つ欲しい」ボタンを3回続けてクリックするようにしました。正しく使用すれば、このような小さな調整により、ランディングページのコンバージョン率を上げることができます。
3Dコンテンツで没入型体験を作成する
ランディングページの訪問者に没入型の体験を提供することが重要な場合があります。訪問者が最新の3Dハッキングキーボードを探索できるようにしたかったので、この目的のために特別に作成されたWebGLベースのサービスを調査する必要がありました。
Sketchfab 最も人気のあるWebGLベースのサービスです。習得が簡単で、さまざまな視覚的設定を提供し、人気のあるさまざまなホスティングサービスと統合できます。
[P3d.in]（http://p3d.in/）は、使いやすさに重点を置いたシンプルなWebGLサービスですが、特定の高解像度テクスチャのサポートが制限されています。
慎重に検討した結果、Sketchfabを選択しました。これは、究極のハッキングキーボードがどのように見えるかです 3D 。
2Dアニメーションで問題と解決策を視覚化する
Ultimate Hacking Keyboardの主な利点の1つは、手の動きを劇的に減らすことです。チームは、通常のキーボードと並べて動作するUHKのアニメーションを表示することにより、ホームページでこれを視覚化したいと考えていました。これを実装することは、思ったほど簡単ではありませんでした。
アンドロイドベースのPOS
埋め込みビデオの使用はやり過ぎのようなものであり、追加のレンダリング作業も必要になります。アニメーションGIFは、ファイルサイズが大きく、カラーパレットが限られているため、オプションではありませんでした。最終的に、SVGアニメーションをインラインで使用することを選択しました。これは、手のグラフィックがページ上の他のグラフィックとは独立して移動できるためです。
この方法でランディングページのアニメーションを作成するには、予想よりも時間がかかりました。単純なアニメーションを作成するためだけに、ブラウザー間の問題、JavaScriptライブラリのエラー、およびその他の予期しない技術的な課題に対処する必要がありました。ただし、最終結果はかなり良好に見え、追加の作業の価値が十分にあることが証明されました。
賢明な一言：うまくいかない可能性のあるものの数を過小評価しないでください！
分析をリアルタイムで測定する
GoogleAnalyticsは素晴らしいです。広く使用されており、操作が簡単です。ただし、リアルタイム取引にはより良い候補があります。
チャートビート Webサイトが特定のしきい値、特にサイトの同時ユーザー数を超えたときに通知を送信する優れた仕事をします。たとえば、UHKサイトはオンラインフォーラムにリンクされていることがあり、トラフィックが急増します。 Chartbeatのおかげで、私たちはすぐにわかり、最初から進行中の会話に参加することができます。
Mixpanel Webマスターがサイト訪問などのイベントを分析し、サブスクリプションダイアログを開き、サブスクリプションを確認するのに役立ちます。これらのイベントから目標到達プロセスを作成し、コンバージョン率を視覚化して、数値を実用的なものにすることもできます。
Clicky 訪問者がサイトをクリックした場所を明らかにする驚くべきヒートマップ機能を提供します。結果に応じて、サイトのデザインやコンテンツを改善して、より良い結果を得ることができます。
HotJar Webサイトの所有者は、すべてのマウスとキーボードのアクションを保存してビデオに変換することにより、訪問者のインタラクションを記録できます。
これらのサービスにはそれぞれ独自の機能と利点がありますが、すべてがWebサイトの訪問者のアクティビティに関する貴重な瞬間的なフィードバックを提供します。どのタイプの情報がマーケティング目的で最も価値があるかを決定するのは、個々の企業次第です。
エラーをログに記録し、不要な頭痛を防ぎます
WebサイトはJavaScriptにますます依存するようになっているため、重要なサイト機能がJavaScriptに依存することがよくあります。たとえば、Ultimate Hacking Keyboardホームページのサブスクリプションダイアログは、JavaScriptコードによってトリガーされます。
サブスクリプション機能を実装することで、すべての主要なブラウザーでテストし、必要なすべてのことを実行したと確信しました。しかし、その後、訪問者からホームページのサブスクリプション機能が機能していないというメールが届きました。
問題の訪問者がAdblockPlusを最も厳密なモードで使用していたことが判明し、Clicky解析スクリプトがブロックされました。他の分析サービスとは異なり、Clicky埋め込みコードはこの点で柔軟性がなかったため、サブスクライブアクションを登録してClickyオブジェクトを参照すると、コードはエラーをスローしました。
Pythonでの機械学習の例
この事件の後、私たちは将来同様の状況を回避する方法を慎重に考えました。チームは、グローバルwindow.onerrorイベントハンドラーを使用して、このようなエラーをキャッチしてログに記録する必要があることに気付きました。次に、適切な登録サービスを探し、最終的に選択します エラーセプション 。
Errorceptionは、それが仕事をし、それを非常にうまく行うので驚くべきものです-それはJavaScriptエラーを見つけます。そのユーザーインターフェイスは最小限で機能的であり、サポートは優れており、サイト管理者は個々のエラーを確認し、スタックトレースを調査できます。何よりも、それはあなたのお金に本当の価値を提供します。
Errorceptionを統合して以来、約12のバグを解決しましたが、そのうちのいくつかはありそうもない予期しないものでした。たとえば、localStorageに関連するエラーを受け取った場合Safariがプライベートブラウジングモードの場合、 localStorage.setItem () エラーが発生します 。
すべての外れ値を説明することは不可能であるため、ロギングは、障害が大きな頭痛の種になる前に障害を見つけるための優れた方法です。
メンテナンスの少ないビルドプロセスを設計する
当初、UHKインデックスページは単一のWordPressでホストされるHTMLページとして開始され、すべてのコードが含まれていました CSS 、HTMLおよびJavaScript。最初はこれは実行可能なソリューションでしたが、ページが大きくなるにつれてメンテナンスの負担になり、よりモジュール化されたアプローチが必要になりました。
私たちの解決策？まず、CSS、HTML、およびJavaScriptコードをいくつかの個別のファイルに分割します。次に、CSSファイルをより少ないファイルに変換して、メンテナンスをさらに簡単にします。最後に、すべての小さなファイルをアセンブルするためのビルドプロセスを考案しました。
常にパフォーマンスを最適化する
UHKチームは、ランディングページがいつだったかなど、ウェブサイトのパフォーマンスが重要であることを経験から知っています。 スラッシュドット 同時に260人の来場者がありました。幸い、月額20ドルのLinode VPSはチャンピオンのように機能しましたが、これには盲目的な運以上のものが必要だったため、パフォーマンスを向上させるためのヒントをいくつか紹介します。
- 特に私たちのようなあなたのページにたくさんの画像が含まれている場合は、画像の読み込みが遅いのがあなたの友達です。 WordPressプラグインを使用しています 遅延読み込みを発表 。
- レイジーアセットをロードすることもできます。ページのセクションが追加のスクリプトに依存している場合、ビューポート内でロードが遅くなることがあります。ビューポートの可視性を jQueryinviewプラグイン 、およびでスクリプトをロードします jQuery.getScript（） または他のスクリプトマネージャー。
ランディングページのデザインは重要なデザイン分野です
のいくつかの問題に対処しました ランディングページのデザイン この投稿では、最も重要なポイントを要約します。
- テキストベースのコンテンツを超えて、ビデオ、3Dモデル、2Dアニメーションなどのリッチメディアを含めます。このタイプのコンテンツは、ランディングページをより魅力的にし、訪問者が他の人と共有することを奨励します。
- リアルタイム分析を使用すると、突然のトラフィックスパイクにすばやく対応し、進行中の会話に参加できます。
- 常にエラーをログに記録します。うまくいかない可能性がある（そしてうまくいかない）ことがたくさんあるので、フォローアップすることが重要です。
- パフォーマンスを最適化して、トラフィックの負荷が最も高い場合でもサイトを最新の状態に保ちます。
すべてのデザイン分野と同様に、ランディングページのデザインには、新しいツール、テクニック、およびプロセスについて学ぶための継続的な取り組みが必要です。テクノロジーとテイストは必然的に進化します-今日の最先端は明日の遺物です。
ゲシュタルト理論とは何ですか
幸いなことに、オーディエンスを明確に伝え、魅了するランディングページのデザインは、テクノロジーに完全に依存しているわけではありません。経験豊富な設計者は最新のツールを組み込む方法を知っていますが、設計プロセスは主に、適切な質問をし、プロジェクトを狂わせる恐れのある問題を巧みにナビゲートすることに基づいています。
最終的に、魅力的なランディングページは、新しいブランドや製品のマーケティング計画の重要な部分になるはずです。私たちのウェブ主導の世界では、うまく設計されたランディングページには、フォロワーを増やし、話題を生み出し、売り上げを増やす能力があります。これらはすべて、成長するビジネスの継続的な繁栄に不可欠です。
