Clever Geek Handbook

サイト全体の代替としてのランディングページ





こんにちは、Habrausers様！ リンク先ページについて話すことをお勧めします。 あなたの多くは聞いたことがありますが、ほとんどの人はそれが何であるかを知っています。 しかし、まだこれに少し注意を向けたいと思います。



ランディングページ（ランディングページ）は、売り手またはサービスが数秒でその製品とサービスについて最も重要なことを伝える機会であり、潜在的なクライアントにとっては-「正しいターゲット」にヒットすることを確認する機会です。 ランディングページを作成するタスクの1つは、広告に対する肯定的な認識の形成と、さまざまな意味合いに基づく「標準的な」トリックを本格的な情報ブロックに置き換えることです。



今日、インターネットリソースの開発の進展により、特にWebスタジオにとって市場で際立っていることは非常に困難です。 この方向の類似体とは異なり、ユーザーに異なるものを提供する必要があるため。 Webスタジオの場合、顧客を引き付け、独自の能力を発揮するために、独自の創造的なWebサイトを作成することが重要です。



上記のすべてを考慮して、1ページのWebサイトを開発することを決定しましたが、ユーザーの利便性のために構造化された構造を備えています。したがって、必要な情報の検索に時間がかかりません。 選択は1ページのサイトで行われました。リンクをクリックするのに時間がかかるからです。しかし、これを避けて、ユーザーにすべてのコンテンツを一度に提供したいと思います。



そのようなリソースを作成するプロセス、どのツールが選択されたのか、なぜこれらのツールが選ばれたのかなどについてお話したいと思います。 そして、ユーザーや外部の人々からのコメントやフィードバックに基づいてこれを共有したいと思います。



開発プロセス



他の開発プロセスと同様に、すべては設計と適切なツールの選択から始まりました。 このデザインが選ばれた理由については、この記事はそれについてではないので、説明しません。 それは開発そのものについてです。



そのため、設計の承認後、どのスタックを開発に使用するかを考えることにしました。 サイトをスタイリングするために、デザインが個別であり、フレームワークが適合しなかったため、セルフスタイルのスタイルを使用することが決定されました。 サイトを再活性化するために、jQueryライブラリが選択されました。その助けを借りて、ページ上の要素を非常に簡単に操作し、アニメーションを作成できるからです。 開発に役立った最も重要なツールは、fullPage.jsです。 このプラグインは、メインのアイデアを実装し、スクロールするフルスクリーンセクションを作成するのに役立ちました。



書き方



セクションに配置されたコンテンツは画面の解像度に応じて変更する必要があるため、セルフスタイルのスタイルシートに決めました。



CSSメディアクエリを使用して、さまざまな画面解像度で、ページ上のブロック、フォント、およびその他の要素を比例的に減らすことができます。 このような操作のおかげで、同じコンテンツは大きな画面でも小さな画面でも同じように見えます。



メディアクエリのおかげでブロックの削減が発生する特定のブロックのコードを以下に示します。





図1





図2



コードを見てみましょう： 



.animation-box-2 { position: absolute; bottom: 0px; left: 0px; height: 24%; font-size: 36px; } @media (max-width: 1200px) .animation-box-2 { font-size: 22px; } @media (max-width: 1400px) .animation-box-2 { font-size: 26px; } @media (max-width: 1500px) .animation-box-2 { font-size: 30px; }


上記のコードからわかるように、特定の画面解像度では、ブロック内のフォントが減少または増加します。 着陸全体がこの原則に基づいています。 このメソッドは、常に表示する必要があるコンテンツがある場合に非常に便利ですが、一部の解像度では表示が不十分であるか、ブロックに収まりません。 このような場合、メディアクエリが役立ちます。



プラグインfullPage.js



次に、このプロジェクトで使用された最も基本的な概念についてお話ししたいと思います。 これはjQueryプラグインFullpage.jsです。



このプロジェクトを開発するとき、サイトを管理しやすく、有益であると同時に、創造的で思い出深いものにする方法について疑問が生じました。 すべての主要なセクションを1ページに配置し、画面間を便利に移動するという考えが思いつきました。 このタスク用のスタックを選択すると、Googleで多くのページが表示されましたが、その時点では機能の価値のある類似物は見つかりませんでした（そして今でも、見てみると似たようなプラグインはあまりありません） このツールを選択した理由をいくつか説明します。



  1. 簡単セットアップ
  2. 非常に柔軟で多機能な機能
  3. ブラウザー間の互換性（ie8まで）
  4. 優れた製品ドキュメント
  5. 更新情報
  6. 応答する


以下のコードは、どれほど簡単に使用できるかを示しています。 



 <div class="js-allscreens"> <div class="js-screen"> </div> <div class="js-screen" data-title="Why choose us"> Some Content </div> <div class="js-screen" data-title="Design"> Some Content </div> <div class="js-screen" data-title="Development"> Some Content </div> <div class="js-screen" data-title="Digital Marketing"> Some Content </div> <div class="js-screen" data-title="Integrated"> Some Content </div> <div class="js-screen" data-title="eCommerce"> Some Content </div> <div class="js-screen" data-title="Niche"> Some Content </div> <div class="js-screen" data-title="Additional"> Some Content </div> <div class="js-screen" data-title="Who We Are"> Some Content </div> </div>


上記のように、すべてが非常に簡単です。 このプラグインのHTML構造を作成する場合、主なことは、スクロールに含まれるすべてのセクションが1つの「diva」にラップされ、そのクラスがプラグインを呼び出すことです。 以下の例のように： 



 $(document).ready(function() { $('.js-allscreens').fullpage(); //     .js-allscreens });


プラグインの設定を提供したいと思いますが、非常に多くの設定があるため、開発に最も関連するものを提供します。





おわりに



この記事を、あたかも彼らがあなたに超複雑なことを教えようとしているか、あなたの意見を押し付けようとしているかのように思われたくありません。 オリジナルの外観、素敵なデザイン、有益なコンテンツを備えた1ページのWebサイトの作成方法に関する経験を共有することにしました。 まだプレゼンテーションの質が低いことは承知していますが、経験を交換するために、皆さんに愛と賛辞をお願いします。



ご清聴ありがとうございました！



作成者： greebn9k （Sergey Gribnyak）、 V1pBoy （Vitaliy Kalashnikov）、 silmarilion （Andrey Khakharev）


More articles:


All Articles