🛕 ⛹🏾 🥈 ランディングページデザインの作成 🚑 🚢 📵

ランディングページ-（以降、 ランディングページと呼びます）は、最大数のターゲット訪問者の連絡先を収集し、その使用のコンテキストで最大のコンバージョンを確保するように構築された1ページのサイトです。

ランディングページを開発する際、開発者を混乱に陥れる可能性のある2つの主な問題に遭遇するか、最終的な結果に深刻な影響を及ぼす可能性があります。 最初の問題は、愚かな「販売」コンテンツです。 2番目の問題はがらくたです。優れたコンテンツを持ち、見栄えの良いリンク先ページは非常にまれです。ほとんどの場合、ランディングページは鈍いスラグです。

高品質で美しいリンク先ページを作成する方法を学びます。レッスンを3つの部分に分けます。内容、設計、および実践。

素材のプレゼンテーションのタイムラインは最初から最後まで行くので、次の販売の傑作を開発するときにこの記事を安全に活用できます。ここでは、ランディングページの開発における人類の経験に関連するすべてのものと、実際に機能するものをすべて収集し、考慮に入れようとしますが、この形式の販売は依然として関連しています。

理論の後、「実践」セクションで、デザインを作成します。考慮されるすべてのルールと推奨事項を考慮して、「正しい」ランディングページという言葉を恐れません。

パート1.コンテンツランディングページ

1.1テキストがすべて

まず、テキストを書く必要があります。テキストを書き、Wordを開いてテキストを書きます。タイトルテキスト、オファーテキスト、フィードバックテキスト。多くの経験豊富なWebデザイナーの問題は、テキストではなくPhotoshopウィンドウで作業を開始することです。本当に高品質のランディングページを作成し、その機能を果たさず、原則として道具ではないだけでなく、鈍い創造物を作りたくない場合は、自分自身をまとめ、忍耐を持ち、すべてを順番に行う必要があります。ボーナスとして、それはあなたの全体的な健康に悪影響を及ぼし、プロジェクトをクライアントに引き渡すときにあなた自身の無能さからフラストレーションを引き起こします。

順番にテキストについて。

1.2リンク先ページのタイトル

最初に理解しておくべきことは、ランディングページはナチュラル検索結果ではなく、広告、サイト上の適切な位置または場所を購入する特定の要求に対して作成されることです。そして、ここで多くのウェブデザイナーが完全に混乱し始めます。「あなたは住所に来ました」、「私たちはビジネスで最高です」、「私たちはとてもクールなので、原則として私たちは何をする必要さえありません。」などの奇妙な見出しを発明し始めます。

間違いは何ですか？ユーザーが検索行に「モスクワのiRobot Roomba掃除機」と入力した場合、あなたが誰であるか、あなたがどれだけクールか、そしてあなたが市場にいる年齢はかなり紫色になります。彼は、iRobot Roomba掃除機を見て、モスクワで購入できるようにしたいと考えています。タイトルが検索クエリに一致するほど、ランディングページが改善されます。

「最高、最速、最強」などの言葉でタイトルを強化できます。結果は「スマートロボットiRobot Roombaモスクワの掃除機」のようなものになるはずです。お気軽に、それは本当に機能します。

1.3テキストの水を減らす

ここには非常にハックされた、常に明らかではないが、同時に重大な間違いがあります。水。ユーザーは水を感じ、テキストから非常に嘔吐し始めるまでテキストを読みます。また、テキストがなく、ヘッダーに価格と注文ボタンが付いた掃除機の明るい絵しかなかったとしても、100のうち50がこの掃除機を購入するでしょう。しかし、あなたのテキストと半日殺したエッセイの試みのおかげで、ターゲットオーディエンスは、特に悲しみのページとその作者への吐き気を催す衝動で全方向に散らばっています。

水を取り除く方法は？ FACTS、NUMBERS、およびGRAPHICSを使用して各ステートメントをサポートします。「多くの満足している顧客がいる」と書いて、満足している顧客の数、詳細とセグメントの顧客を書く必要はありません。非常に多くの女性が掃除機を手に入れ、多くの独身者が奇跡の装置に満足しました。この掃除機は何時間も時間を節約し、何時間も働きました。訪問者を白人の友人にしたいという欲求から救うために、数字で各声明を支持するか、声明をまったくしないでください。

不要な単語や不要な単語を取り除きます。ページが空白になることを恐れる必要はありません。「する」ためだけにページを詰まらせる必要はありません。有能な仕事をすると、調和の取れたランディングページが作成されます。大事なのは急がないことです。

1.4だまされてはいけません

あなたがランディングページのデザイナーである場合、あなたには重大な責任があり、すべての情報が正確であることを確認する必要があります。多くの場合、クライアント自身は、この詐欺的で信頼性の低い情報がどのようなひどい結果をもたらすかを理解しておらず、無能なマーケティング担当者に導かれることを喜んでいます。すべての秘密が明らかになります。それを忘れないでください。 本当に存在する利点を見つけ、それらを美しく打ち負かします。そこにないものを発明し、クライアントの評判を指から吸い取る必要はありません。

1.5利点/利点

潜在的な購入者がランディングページでサービスまたは製品を注文することで受け取る特典のリストをドキュメントに記述し、各特典の簡単な説明を作成します。これは、真剣に考え、すべての可能な利点を分析する必要がある唯一の場所です。

しかし、注意してください。時々、ランディングページを注文した顧客から特典のリストが送られてきましたが、それを控えめに言っても指から吸い出されました。売り手が見るものだけでなく、本当の利点を分析します。明らかな理由により、その評価は客観的ではなく、実際のバイヤーの目にはかなり愚かに見える場合があります。これは頻繁には発生しませんが、顧客がかなり長い間製品を扱っており、必要な情報を提供できるため、顧客の声に耳を傾ける必要があります。分析します。

設計上の利点をできるだけおもしろくしてください。インフォグラフィック、キャラクター、興味深い視覚デザイン、マーカーを自由に使用してください。それに取り組みます。レイアウトで、アニメーションを追加します。

1.6製品またはサービスが新しいことを示す

はい、どんなに奇妙に聞こえても、ターゲットオーディエンスはこの種の声明に非常に気を配っています。「New」、「New」、「Modern」、「Fresh」という言葉は、ランディングページの変換に非常に積極的に影響します。一般的にお気軽に。

1.7必ずレビューを投稿してください

補足します。これらのレビューを投稿してください。状況を想像してみてください。潜在的なクライアントがランディングページに行き、条件に精通し、商品を購入する準備ができていましたが、標準、砂糖のレビュー、さらに、すでにどこかで見た写真に出くわしました-または同じランディングページ、フォトバンク、または検索結果に表示されます。ユーザーが詐欺を感じた後-あなたは永遠にそれを失います。 信頼されている人から、嘘をついている人からは買わない 。

実際の写真には実際のレビューのみを使用してください。最高の顧客とコミュニケーションをとるために顧客を引き締めます。それは見た目ほど難しくはありませんが、結果として、あなたは質の高い仕事を誇りに思うでしょう。

各レビューは見出しから始まる必要があります。見出しは、レビュー自体のテキストからの抜粋であり、クライアントにとっての利点を説明しています。たとえば、「 iRobot Roomba掃除機のおかげで、1か月で約20時間節約できます... 」タイトルの後はレビューのテキストです。そして、レビューを書いた人と彼が誰であるかの名前は、家族の男、遺伝子です。取締役、会計士、主婦などレビューが良い見出しだけでなく、実在の人物の写真によってもサポートされていることが重要です。それぞれ太字または色のテキスト、および設計中の設計で、クライアントの重要な成果（もちろん製品またはサービスのおかげ）を強調します。

1.8返金保証

返金保証により、売り手の信頼性が高まり、ランディングページへの訪問者がお金を手放しやすくなります。ランディングページにこのようなミクロセクションを作成し、テキストエディターで適切なテキストを準備して、すばやくデザインできるようにしてください。また、保証テキストの横にあるアイコンである、印刷または視覚的なコンポーネントを使用することをお勧めします。そのような要素は、知覚効果を強化します。

パート2.リンク先ページのデザイン

2.1動作中の製品

ヘッダーまたは最初の画面の製品画像はすべてです。事実に裏付けられていない空のテキストを書くことの無謀さをすべて理解したら、この時間をかけて、商品の明るいカラフルな絵をヘッダーに作成してください。これに十分な時間を与えてください。適切な結果が得られるまで、Photoshopで製品やサービスを実験して改善してください。

帽子をかぶった腐ったピザ、車の白黒写真、空を飛んでいる不可解なデバイス、その他のエラーなどの恥をよく見なければなりません。製品やサービスの購入を希望する必要があります。これがピザの場合は、クリームチーズを使って、すぐに食べたいほど明るくておいしいものにします。製品に色を追加し、かすみ、サクサクした地殻。もちろん、当然です。動作中の製品を表示します。このアプリケーションがモバイルデバイス用の場合-携帯電話とソフトウェアを搭載したユーザーの写真を撮るか、最悪の場合、携帯電話を手に持ってモックアップPSDをダウンロードし、動作状態のアプリケーションのスクリーンショットを投稿します。明るく、熱く、すぐに食べられる食べ物を表示します。それは帽子である必要があります。さらに、製品のプレゼンテーションと一緒にビデオを投稿するといいでしょう。簡単なタイトル、ボタン、および動作中の製品...

2.2最初の画面のアクションボタンを呼び出す

ここでは複雑なことはありません-最初の画面でアクションボタン（「掃除機を注文する」）を呼び出します。もちろん、これは、この要素を他の場所に配置しないことを意味するものではなく、サイトを訪問した訪問者が商品を購入したり、サービスを注文したりする機会を確認するようにしてください。

呼び出しボタンをページ全体に複製することを忘れないでください。ただし、賢明に実行してください。このボタンは、各要素の後の各セクションでかなりおかしく見えます。無理をしないでください。

2.3 Popunderを忘れる

ユーザーの意志に関係なくポップアップするポパンダーは忘れてください。残念ながら、この業界の発展の残りはまだ時々発生します。最初の数日でアプリケーションの成長に気付くことができた場合、しばらくすると聴衆の間であなたについて非常に否定的な印象が生じます。市場で長く実りある仕事をするつもりなら、ポップアンダーを使わないでください。

これは、アクション呼び出しボタン（ユーザーがクリックするボタン）をクリックしたときに表示されるポップアップフォームに関するものではありません。制御されたポップアップフォームは非常にうまく機能し、訪問者を悩ませません。

2.4フォームに多くのフィールドを作成しないでください

ランディングページが必要なのは、連絡先を収集し、処理のためにマネージャーに送信することだけです。フィードバックフォームにフィールドを追加しないでください。名前、電話。状況に応じて、おそらく電子メール。しかし、もうありません。

2.5顔、住所、電話番号を表示してください

控えめだが、人、ランディングページ-地図、電話、または従業員の写真を見ると、無意識のうちに彼はすでにプロジェクトを信頼しています。顔、住所、電話番号を見せることを恥ずかしがらないように顧客を説得しなければなりません。どうやら、90年代の反響が感じられ、彼らが買って解き放たれたとしても、隠蔽の習慣は、困難な時代と「私たちが最善を尽くして生き残った」連合の崩壊後のこの期間に正確に始まります。

ランディングページには、マネージャー、電話、実際の連絡先の写真を含める必要があります。 会社に恒久的な住所がある場合は、カードが必要です。

2.6有名ブランドのロゴを配置する

ランディングページを開発している会社が、何らかの形で有名なブランド、使用済みのサービス、技術と連携している場合は、必ずページの下部に記載してください。通常、このセクションは「当社のパートナー」と呼ばれます。

そこで、ランディングページを開発する際に考慮すべき重要なポイントを検討しました。次のセクションで上記のすべてを組み合わせて、テキストを記述し、Photoshopでランディングページのデザインを作成しましょう。

私たちは、 iRobot Roomba掃除機のランディングページを、運命により開発します。この例は完全にランダムであり、このマニュアルを作成する過程で思い浮かびました。

レッスンを完了するには、 GitHubから取得できるソースデータが必要です。

パート3.練習

3.1リンク先ページのテキスト

そのため、パート1と2を学習した後、「正しい」ランディングページがどうあるべきかについて、すでにある程度の考えがあります。テキストを書くにはこれで十分です。主な推奨事項は上記のとおりですが、製品やサービスによっては、アイテム、セクション、機能が追加される場合があります。オブジェクトを調べて少し考える必要があります。

さらに、当社の製品には特定のモデル範囲があり、潜在的な購入者に提示しないのは奇妙です。

テキスト

帽子：ロゴ、掃除機の画像、見出し：「モスクワのスマートロボットiRobot Roomba掃除機」、電話、住所、ボタン。
ビデオ付きセクション：「iRobot Roomba at work」。ビデオの下にはボタンがあります。
セクションモデルの範囲（写真-価格-旧価格-購入）：
- ルンバ630
- ルンバ870
- ルンバ880
- スクーバ450
保証モデルの下の返金保証テキスト。
特典セクション：
- タイトル：「従来の掃除機を超える利点」
- 副題：「これは非常に「スマート」な手法であり、独立して部屋を掃除し、作業完了後にステーションに戻って充電します」
- ＃1 時間を節約します。より楽しいアクティビティに費やすことで、エネルギーと時間を節約できます。
- ＃2 管理は不要です。インテリジェントなAWAREシステムのおかげで、掃除機自体が最適なルートです。
- ＃3 コンパクト 。機器は多くのスペースを占有せず、主電源に接続しなくても機能します。
- ＃4。 自己充電 。バッテリーは2時間持続し、その後、ロボットは独立してプラットフォームに戻って充電します。
セクションのレビュー。写真-名前-誰-レビューテキスト。
カスタマーサポートセクション。スペシャリストの写真-名前-連絡先（電話、ソーシャルネットワーク）。
連絡先セクション。住所とラベル付き地図。

3.2設計

すべての試みの最終結果はここで見られます。

設計を始める前に、設計を作成するときに考慮すべき事項を決定しましょう（一般的な推奨事項）：

ブランド、製品スタイル、アイデンティティ（ある場合）を常に考慮し、サイトを1つのスタイルで描くようにしてください。
デザインと派生した複数の色合いで3色以下を使用してください。
デザインに適したフォントの組み合わせを選択してください。
要素を互いに近くに彫刻しないでください-これは悪い味の兆候です。
要素の配置の垂直方向のリズムを観察し、デザインに空気を与えます。
テキストブロックの行間で行の高さを小さくしすぎないでください。
質の悪い写真をデザインに使用しないでください。
TinyPngまたは同様のツールですべてのグラフィックを圧縮します。
画像のサイズを変更する前に、Photoshopでスマートオブジェクトに変換してください。突然品質を損なうことなく画像を拡大する必要がある場合に備えてください。
この例では、コンテンツの最大幅は1170pxです（ブートストラップグリッド、参照内のクリーンファイル/ bootstrap-1170.psdアーカイブ）。

ここで、3.1項でコンパイルされたテキストに従ってデザインを描画します。 Photoshopでの作業の基本を掘り下げることはせず、ランディングページのデザインを作成する際の重要なポイントを検討します。すべてのセクションは、レイアウトの全幅、およびBootstrapグリッド内のコンテンツになります。 FontsフォルダーからRalewayフォントをインストールします。完成したレイアウト参照/ ready_design.psdでサイズと色を確認できます。

だから、本文で。