シニアビジュアルデザイナーFreddierickMesiasによるランディングページデザインのQ&A

公開: 2017-07-05

Instapageでは、最高の期待、つまりあなたの期待に応えます。 多くのマーケターから、私たちのプラットフォームは直感的であり、キャンペーンがより高いコンバージョン率を獲得するのに役立つと聞いています。 特にデザイナーは、過去数年間にリリースした特定の機能のために、ビルダーを使用していることを私たちは知っています。

私たちのチームは、ユーザビリティテスト、モデレートインタビュー、およびNPSスコアでデザイナーから常にフィードバックを受け取っています。 私たちはそのフィードバックを非常に真剣に受け止め、デザイナーの現在のニーズだけでなく将来の要望にも対応するプラットフォームを構築し続けます。

私はシニアビジュアルデザイナーのFreddierickMesiasと話をして、クリック後のランディングページとInstapageプラットフォームの経験を積みました。

BW:あなたのデザインのバックグラウンドは何ですか?Instapageでのあなたの役割は何ですか?

FM:私のデザイン経験は、ウェブデザイン、ブランディング、ユーザーインターフェイスデザインにまで及びます。 私が使用する主なデザインツールは、Sketch(忠実度の高いモックアップを作成するため)、Adobe Photoshop、およびIllustrator(アイコン、写真編集、イラストなどのクリック後のランディングページのビジュアルアセットを作成するため)です。

ここインスタページでは、私たちのデザインチームは、ウェブデザイン、イラスト、ブランドコミュニケーションなどの多様なスキルセットによって補完されています。 私たちの主な目的は、ビジュアルを通じて視聴者と効果的にコミュニケーションすることです。 私の役割は特に、マーケティングチームのために、美しく、コンバージョン率の高いクリック後のランディングページをデザインすることです。

BW:Instapageでクリック後のランディングページをデザインしたときの最初の経験はどのようなものでしたか?

FM:私にとっては、2016年11月に参加した時点で製品はすでにかなり進歩していたため、学習曲線はあまりありませんでした。Instapageを最初に始めたとき、プラットフォームがデザイナーを念頭に置いて構築されていることに感銘を受けました。 。 ビルダーは、迷子になる可能性のあるたくさんのメニューオプションでいっぱいではありませんでした。

もちろん、ビルダーには要素の配置を支援する緑色のガイダーがありましたが、最初のクリック後のランディングページを設計したとき、モバイル、グループ化、および配置機能に驚かされました。 モバイル用に各要素を揃えて間隔を空ける代わりに、アイテムをグループ化して、モバイル用にアスペクト比を維持しながら一度にすべて移動できるようになりました。

インターネットはモバイルをより頻繁に使用するため、マーケターのクリック後のランディングページをモバイル向けに最適化することが重要であるため、この最後の部分は特に特別です。 その機能により、完成したデスクトップバージョンを取得し、ボタンをクリックするだけで自動的にモバイルに変換することができました。 これを行うことで、時間を大幅に節約し、チームのためにページをより速く公開できるようになりました。

Instapageの2つの特性を定義するとしたら、それはカスタマイズ可能で痛みがないということです。

BW:Instapageを快適に使用できるようになるまでどのくらいかかりましたか?

FM:それほど長くはありません。 Instapageの特徴は、デザイナーに優しいということです。 Sketch、Illustrator、Photoshopなどの他のデザインツールに精通している場合は、プラットフォームに慣れても問題ありません。

私が作成したHubSpot統合のクリック後のランディングページをご覧ください。 ページ全体がInstapageで作成されましたが、Photoshopで3層のページグラフィックを作成し、それをプラットフォームに挿入して、優れたビジュアルコンポーネントを追加しました(クリック後のランディングページ全体を表示するには、ここをクリックしてください)。

クリック後のランディングページのデザインに関するQ&A

BW:クリック後のランディングページを作成するときにデザイナーが直面する典型的なフラストレーションは何ですか?

FM:デザイナーは本質的に完璧主義者です。 私たちの仕事はその属性に依存しています。 したがって、たとえば、何かが訓練されていない目に完全に一致しているよう見える場合でも、そうではありませんが、設計者はそれがより良い可能性があることを知っています。

そのため、インラインスタイルエディター機能は、要素レベルのカスタムスタイルの変更を行うことができるため、特に役立ちます。 テキストのパディングの変更、境界線の半径、行の高さなど、あらゆるものがあります。 もう何も目玉にする必要はありません。 私たちのビルダーでは、最後のピクセルまでカスタマイズできるため、必要なものを正確に作成できます。

(カスタムスタイルを使用して要素を分離し、ボタンにドロップシャドウを追加する方法の例を次に示します:)

BW:ページをデザインするとき、誰と最もコラボレーションしますか?

FM:キャンペーンにもよりますが、少なくとも3〜5人の利害関係者がいます。1人のコピーライター、1〜2人のデザイナー、1〜2人のマーケティングリーダーです。 コピーライターは、オファーの価値提案と主な利点を示すために説得力のある言葉を作り、最終的なデザインのためにコピーを私に渡し、マーケティングリーダーはプロジェクトを監督し、途中で承認を与えます。 また、クリック後のランディングページのデザインニーズによっては、グラフィックデザイナーと連絡を取り、メッセージの伝達に役立つgifやその他のビジュアルを作成することもあります。

あなたは私が開発者を含まなかったことに気付くでしょう。 ごくまれに、複雑な設計を実装するための開発者を招きます。 コラボレーションソリューションを使用してクリック後のランディングページを作成すると、コラボレーションと相互フィードバックの提供が2倍効率的になりました。 Slackまたはサードパーティのツールを介して送信されたスクリーンショットを使用する代わりに、クリック後のランディングページ要素にホットスポットを配置し、必要な更新を行うようにデザイナー(コピーライターまたは別の利害関係者)に通知できます。

(コラボレーションの詳細については、以下をご覧ください—ホットスポットを介したコミュニケーションとマーケティングチームとのページの共有。または、ここにアクセスできます。)

BW:お気に入りのInstapage機能とその理由は何ですか?

FM:デザイナーとして、それは私が答えるのは難しいですが、私のお気に入りのInstapage機能は、2017年6月に発表した3つの新しいデザイン機能です。

  • エッジ測定
  • 軸ロック
  • キーボードショートカット

私が知っているほとんどの設計者は、設計プロセスをより効率的にするために使用する適切なツールに常に飢えています。 しかし、それはまた、ピクセルパーフェクトなデザイン作品を作成する必要があります。 そうは言っても、Instapageはまさにそれを行っていると思います。

Sketchアプリの使用と同様に、エッジ測定とキーボードショートカットがあります。 エッジ測定は、要素をピクセルごとまたはピクセルの範囲で移動および整列できるため、特に優れています。必要な場所に正確に配置できます。 軸ロックを使用すると、面倒なガイダーを処理することなく、X軸またはY軸に沿って要素をシームレスに移動できます。

これらの機能を組み合わせることで、プラットフォーム自体の中に、ピクセル単位で完璧な美しいランディングページを作成できます。 今、あなたは無制限にデザインすることができます! (エッジ測定と軸ロックの詳細については、以下をご覧ください:)

クリック後のランディングページを公開した後、最初のデザインを最適化して反復することは、最も重要な段階の1つです。 ここで、Instapage A / Bテスト機能が役立ちます。

BW:あなたが最も誇りに思っている特定のクリック後のランディングページはありますか?

FM:もちろんです! 数か月前、コラボレーションソリューションの立ち上げのためにクリック後のランディングページを設計および構築するプロジェクトがありました。 私はチームに比較的慣れていなかったので、ブランドガイドラインとスタイルガイドを学び、それに従うことが、その過程で大きな役割を果たしました。 クリック後のランディングページは非常に簡単に作成できました。現在、コンバージョン率は24%です(ページ全体を表示するには、こちらにアクセスしてください)。

クリック後のランディングページのコラボレーションに関するQ&Aの設計

追加してほしいデザイン機能はありますか?

私たちは常にお客様からのフィードバックを求めており、より優れた、コンバージョン率の高いクリック後のランディングページを大規模に作成できるよう支援したいと考えています。 ビルダーに追加してほしいデザイン機能がある場合は、フィードバックをお送りください。 また、Capterra、Trustpilot、またはG2CrowdのInstapageを確認することを歓迎します。

次に、Instapageを使用して100%カスタマイズ可能なクリック後のランディングページの作成を開始します。 デザイナーフレンドリーなプラットフォームと高度なA / Bテスト機能で間違いはありません。 あなたのコンバージョン率はあなたに感謝します。 今すぐInstapageEnterpriseデモにサインアップしてください。