ランディングページの背後にあるグラフィックデザイン理論
回答:
960.gsやBootstrapなどのグリッドフレームワークのせいにします。彼らはこの正確なレイアウトを構築することを非常に簡単にしました：
http://getbootstrap.com/examples/carousel/
これらのフレームワークは、CSSレイアウトの多くの問題を解決し、Web開発者/デザイナーが快適で使い慣れた使いやすい構造化されたグリッドベースのサイトを簡単に作成できるようにしました。
テーマサイトは、この種類のレイアウトの既製バージョンのバリエーションの販売を開始し、平均的なジョーやジェーンでも使用するのが苦痛でなくなりました。この一般的なデザインパターンは、最近ほとんどの人が「ウェブサイト」に関連付ける事実上の見方になりました。
Twitterユーザー@jongoldのツイートは、これをかなり簡潔に要約しています。
NNGのこの記事は、この特定の場合、特に「1ページ」のレイアウトに役立つと思います。
https://www.nngroup.com/articles/page-fold-manifesto/
要するに、読者を「スクロールする」テキスト/コンテンツを使用してページをスクロールする理由を読者/ユーザーに与える必要があります。興味を引く要素、たとえば、スクロールせずに見える範囲に表示される新しいセクションの画像を配置することで、ユーザーの心に欲望を作り出します。販売と同じで、本能だけでスクロールしたり読んだりするのではなく、ウェブサイトに時間を投資する理由を人々に与える必要があります。
提供された回答に見られる例は、その背後に実際の理論はなく、単なるテンプレートであり、デザイナーとして常に独創性を目指す必要があります。
コンテンツはページのフローを指示する必要があります。コンテンツを読んで理解すれば、理想的な配置が得られます。私には、Webページをデザインするための「1つのサイズですべてに対応する」ソリューションはありません。組み込むことができる要素やレイアウトはありますが、これらは拡張調査と現在のコンテンツを理解することによってのみ特定できます。
良い質問ですが、要点がありません。それは、「良い」ホームページのデザイン理論ではなく、デザインアプローチの期間に関するものです。Webサイト、パンフレット、タッチスクリーンアプリケーションなどに関わらず、クライアントの目的/聴衆に最も役立つ論理的なクリエイティブソリューションです。プロジェクトのコア要素と同じ場所（私は長年にわたって自分のプロセスを開発してきました）。これには、クライアントの基盤、ブランド、色、フォント、画像、そして最も重要なこととして、短期的、中期的、長期的に達成しようとしているものが含まれます。
これが鍵です-例：私は国際大会のスタンドを一度構築する必要がありましたが、これまで行ったことがないので、ショーのスタンドを獲得しました。どうして？私は木、ガラス、カーペット、大判グラフィックス、他のようなプラズマスクリーン（つまり、ホームページのブートストラップテンプレート）から始めなかったからです。クライアントは新製品で市場を開拓したいと考えていました。彼らは優れた営業スタッフを持っていたので、ブリーフはイベントを通してスタンドに集まって彼らと話し合うことができました-それだけです。私は、ソフトな座席、高価なコーヒーと紅茶（無料）、ウェブとメールのアクセスポイント（無料）、デモ用の大画面表示画面（サウンドとライト付き）を備えたサイバーカフェの周りにスタンドを設計しました。真ん中にタワーを置いて、天井の6インチ手前でNSEWに面した看板を設置しました。これはホールのどこからでも見ることができます。スタンドは3日間ぶつけられました。
あなたのウェブサイトに戻ります。私は、クライアントがサイトのアプリケーションを通じて達成しようとしていることと、それが彼らのより広いオンライン/オフラインのマーケティング計画にどのように適合するかから始めます。サービスや連絡先などの一般的な要素があっても、明らかにクライアントが異なれば目的も異なります。物事は、これらはそれ自体で販売しないので、あなたはそれらから始めるべきではありません。アドバンテージとベネフィットを表現することはユーザーと関わり、クライアントを理解し、ビジネスで何をしようとしているのかを知ることができます。たとえば、全体的な推進力は、ソーシャルメディアとコンテンツ開発のサポート、またはサービスとフォームの電子化による完全なデジタル変革のサポート、または主に地方自治体の観点からの情報/データの可能性があります。
別の質問：モバイルが主な焦点ですか？これは、トラフィックの80％がそのように進んでいる場合は問題がないように思われるかもしれませんが、商業的にデスクトップ/ワイドスクリーンは健在であり、クライアントの主要なオーディエンスになる可能性があります。すべての場合において、UX、サイト計画、チャネル/パイプ、ナビゲーション、およびホームページの優先順位を決定する前に、これを最初に知る必要があります。
いくつかの簡単な例-金融（商業オフショア）と地方自治体（水道）。
金融会社の主な要件：（1）スタッフ/経験を促進する（2）オフショアのメリット（3）彼らが何をしているか、およびその市場セクターを明確にする（4）ガバナンス（基礎、規制、積極的/前向きな考え方、レベル/適性）（5）推進力新しいモバイルプレゼンス（今後のアプリ）上記は、以下に示す私のホームページに向けられています。メニューは非常にシンプルで、チームと連絡先（他のサイトではハンバーガー）につながり、明確なロゴとヒーローは彼らが誰であるかを示し、オフショア（カルーセルはありません）、簡単なイントロの段落で、ファンデーションの（最大2パラ）とオファーの概要/テキストについて右に続きます。4つのCTA（行動を促すフレーズ）パネルは、ガバナンスをサポートする主要な情報への直接チャネルを提供します。ボディ85％ブラックのSansを開きます-モバイル対応。できました。
地方自治体の要件：（水道および排水に関するサービスと情報の提供）。組織は毎日ソーシャル投稿を含む環境とマーケティングに強いが、その中での真の優先事項は、（1）デジタルサービスとePayへの変換（2）緊急ヘルプライン（3）主要な情報発信チャネルとしてのモバイルへの移行（4）24時間年中無休現在の作業と現場のエンジニアからの問題を含む問題のライブ通知。分析と顧客調査から特定された3つの主要なチャネルは、（a）水道サービス（b）排水（c）アドバイス/サポート（ファクトシート、FAQ、メディアセンターを含め、顧客が自分自身を助けるのを助け、電話を減らす）
以下の解決策はこのリードに従います。ヒーローそのもの、カルーセルはありません-eServicesの紹介とリンクにスペースは使用されません。3つのコアチャネル+モバイルフレンドリーアイコンを使用したサイト検索は、メインのナビゲーションバー（白）の下のセカンダリメニューにあり、緊急リンクとサイトハンバーガーのみを非常に明確に保ちます。対象者として紹介されたピンク75％の女性（請求者）は、ブルースやアクア（水）に対して効果的です。アイコン別注、シンプルなクリア。主な通知（Twitterによる）は、ホーム画面でこれに従います。アクセシビリティ規制のための強い色のコントラスト/読みやすさ（Gov部門は厳格）。モバイルレスポンシブを含むCMS駆動。
最後に、テンプレートサイトとブートストラップのトレンドに導かれないでください。現在（2016年秋）、淡い背景の上に白いテキスト、薄い見出しフォント（Helvetica Ultra Lightなど）、本文テキスト（グレー）が60％未満になる傾向があります。これらは、複数のアクセシビリティの問題を引き起こしますが（たとえば、視覚障害やモバイル画面での表現のため）、印刷デザインに由来します。画面上で商業的に特に重要なバランスである、デザインのトレーニング、フォーム、機能を忘れないでください。あなたはデザイナーであり、レミングではありません。ロジックをリードし、盲目的に他人をフォローしないでください。
基本的にこのアプローチを信じており、あなたや他の人を助けたいと思っているので、これを書くのに時間をかけました。私のデザインスタイルやクリエイティブにこだわらないでください。あなたは自分のスタイルを持っています-ソリューションへのアプローチについて考えてください。それはフルサービスデザインで20年近く働いており、1997年からMacIIでページを40Kと256色しか使っていなかったので、ウェブサイトをうまく構築してきました:)。
あなたの旅で最高の幸運
ランディングページはすべてエレベーターピッチに関するものです。そして、最近のほとんどのウェブサイトはランディングページに過ぎません。すべてのページは、購入に向けてユーザーを誘導するように注意深く設計されています。
多くの人にとって、これは見出し、エレベーターピッチ、購入ボタンです。そして理論的には多くの企業にとってこれはうまくいきます。簡単に言えば、これは「フォールドの上」と呼ばれます。しかし、これは完全に真実ではありません。
「フォールドの上」は、文字通り新聞にフォールドがある新聞の用語から来ています。折り目の上の広告は、下の広告よりも優れています。これは実際にはウェブデザインのケースではありません。研究を重ねていくと、正しい研究が行われていないことが原因であることが証明されます。キスメトリックスに関するこの記事をご覧ください- より良い研究のために、フォールドが神話である理由
それを適切に見ると、「私のページがロードされたときに人々が何を見るか」については、次のものよりもわかりません。
- 私の製品の利点を提示しましたか？
- 行動を促すフレーズ（CTA）は簡単に見つけられ、よく表現されていますか？
マーケティング担当者はこれをよりよく理解しているため、デザインがこれらの基準を満たすことを望んでいます。次に、グリッドやブートストラップなどのテンプレートが登場します。間違いありません。テンプレートがどれほどきれいであるかは関係ありません。売上に変換されなかった場合、だれもそれを使用しません。
それらのテンプレートなどを入力します。デザイナーやデザイナー以外の人でも、適切なページを作成して実行するための迅速かつ簡単な方法です。優れたマーケティング担当者はそれをベースとして使用しますが、正確なニーズに合わせてハッキングするか、正確なニーズに合わせてハッキングする人を雇います（私の人生の物語！）。
次に、本当に優れたマーケティング担当者は、デザインまたはコピーのいずれかにわずかな変更を加えてA / Bテストを行います。コンバージョン率を向上させるために慎重に調整します。ほとんどの企業には、これを行うためのリソースがありません。しかし、大規模なサイトを調べてテンプレートを作成することで、すでに順調に進んでいると思います。
概要
その背後に設計理論はありますか？特にランディングページのデザイン理論は、デザイン理論よりも市場調査と理論に由来しています。最終的にランディングページは変換ツールです。見るのに慣れている実証済みの技術を使用する場合でも、まったく異なるものを使用する場合でも、最終的には、どれだけうまく変換されて生きて死ぬのでしょう。
関連する質問
あなたが説明しているこのタイプのレイアウトは試してテストすることができますが、2012年または2013年にかつてあった影響を失っていることがわかります。上記の別の言い方のように、Bootstrapのようなフレームワークは、テーマやテンプレートも同様で、その多くはBootstrapを採用しています。
私の経験では、これは非常に簡単に優雅に縮小できるレイアウトです。偶然ではありませんが、2012年頃にはスマートフォンの価格が下がり、誰もが利用できるようになり、タブレットも増えました。
残念ながら、この要素の基本的な配置を視覚的に興味深いものに改良することはますます難しくなり、このトレンド以前に私が持っていたレイアウトのアイデアを再検討し、それらを改良し始めました。