自社のマーケティングサイトを設計・実装する: コンテンツから実装まで私の旅

もしログトのユーザーであれば、最近会社のウェブサイトが刷新されたことに気付くかもしれません。 もしそうでないなら、ウェブサイト logto.io をチェックして、これを実現するためにどれだけのリソースを投入したかを想像してみてください。

「大きな作業や努力、そして慎重な設計が、単に実行の卓越性を示すために必要だって自慢しているの？」と思うかもしれません。

違います！

逆に、私たちはどのようにスマートにツールと方法を活用して、製品の質を向上させ、ユーザーに最高の製品とサービスを提供しているかを示したいのです。

コミュニティからいくつかの肯定的なフィードバックを受け取り、どのようにそれを達成したか、ふと考えました。今回のアップデートは特別で、迅速に進行する環境の中で完全に新しいワークフローを再発明しました。私たちは、ベストプラクティスを紹介しつつ、チームワークとコラボレーション文化にも焦点を当てたいと思います。

背景#

私たちは、顧客のアイデンティティ関連の開発サービスとインフラ作業を提供することに焦点を当てた技術チームです。提供のプレッシャーも大きい一方で、ブランドのマーケティングウェブサイトの構築、ブログの執筆、プロジェクトのプロモーション、ユーザーとのエンゲージメントなど、さまざまなストーリーや運営業務をサポートする必要があります。

説得力のあるランディングウェブサイトは、しばしばオーディエンスが製品に対して抱く最初の印象を形成し、製品が解決しようとしている問題、価格設定、社会的証明のための顧客を理解するのに役立ちます。

さらに、それは複数のビジネス目的を果たすこともできます:

• 製品のブランドと価値提案を示す。
• リードを生成する。
• コンテンツハブとして機能し、特に製品主導または開発者主導の成長に焦点を当てている企業にとって重要です。
• SEO の最適化、ユーザー取得、定期的なトラフィック追跡の場所を提供します。

前職では、私はウェブサイトプロジェクトに関わったことがあります。典型的なワークフローがどのように進行するか見てみましょう:

1. まず、プロダクトマーケティングマネージャーとプロダクトマネージャーがコンテンツと要件を定義します。
2. プロダクトデザイナーと UX ライターがコンテンツを洗練させます。
3. 完成前にビジュアルとブランディングデザイナーが、制作のための最終調整を行います。
4. その後、エンジニアとプロダクトマネージャーが実装を開始し、アニメーションやレスポンシブウェブデザインに取り組みます。

このプロセスは退屈で、多くの人々とステークホルダーが関与するため、迅速に進行する環境には不向きです。

たとえ初めにプロダクトデザイナーとエンジニアの2人だけでメンテナンスしていても、ウェブパフォーマンスの管理、画像のアップロード、レスポンシブデザインの保証、画像形式の処理、コンテンツの更新などのタスクは、多くのコミュニケーションを必要とします。

このワークフローは非効率です。エンジニアリングリソースを核心の製品作業に集中させるための方法を常に考えています。

生産性を向上させるためのツールの使用は、私たちのチームの重要な哲学です。そのため、これらのプロセスを効率化するためのツールのリサーチを始めました。

必要性の分析#

成功する SaaS マーケティングサイトを開発するためには、必要な要素を以下のように分析しましょう:

1. コンテンツ: マーケティングサイトの基盤は、何を表示するかを正確に理解することです。ターゲット顧客、典型的なユースケース、製品の価値提案を深く理解する必要があります。これには置き換え可能なツールはありません。幸い、私のプロダクトデザインと市場投入戦略への関与により、ユーザーのニーズに合ったコンテンツを作成するための装備が整っています。
2. デザイン: サイトには洗練された視覚的な魅力が必要です。私の UX/プロダクトデザインのバックグラウンドは、専属のクリエイティブデザイナーほど広くはありませんが、かなりの部分を処理するのに十分です。
3. エンジニアリング: 主要な技術的考慮点には、サイトホスティング、レスポンシブデザインの確保、スムーズなマイクロインタラクションの実現が含まれます。また、サイトを他のコンポーネント（リンクリダイレクトや製品の認証ページなど）とシームレスに統合することも重要です。

いくつかの調査を行った結果、デザイン面で使用予定のツールキットは次の通りです:

プロダクトとマーケティングコンテンツ#

ChatGPT 3.5、ChatGPT 4.0、Gemini Advanced、Jasper、または類似の AI アプリケーション（コパイロット用）

これはマーケティングコンテンツやメッセージを微調整し、最適化するためのものです。その背後の目標と意図を明確にすることが重要です。AI はあくまでコパイロットであり、意思決定を行うものではありません。マーケティングメッセージを書く前に、いくつかの質問を自分に投げかけます:

1. 誰がこのメッセージを読むのか？
2. 彼らは追加のコンテキストが必要なのか？
3. メッセージで伝えたい要点は何ですか？
4. 次にユーザーに何をしてほしいのか？
5. このメッセージは教育するためのものか、特定の行動を促すためのものですか？
6. これが誤解を招いたり、誇大にしたりする可能性はありますか？

次に、伝えたいポイントの初稿を書きます。

AI は時折、古臭い言葉を挿入したり、論理的に正しいものにするために元の意図をねじ曲げることがあります。しかし、意図を再強調し、目標を堅持する必要があります。オーディエンスに届ける言葉が、明確、簡潔、ストレートで透明であることを保証するための基準を設定しなければなりません。特に、私たちのような多くのビジネスや開発者にサービスを提供するプロダクトドメインでは、このことは特に重要です。

デザイン#

Figma、Framer （インタラクションとビジュアルデザイン、アニメーションおよびプロトタイピング用）

私はデザイン分野のバックグラウンドを持っており、主にプロダクトデザインに焦点を当てています。これは、UI と UX の制作を伴います。洗練された UI のデザインは私にとっては難しくありませんが、私の作品はプロフェッショナルなものほど洗練されてはいません。しかし、基本的なビジュアルデザインとイラストレーションスキルがあれば、適切なツールを選ぶことで、仕事の質を向上させることができます。私はこのクリエイティブプロセスに Framer や Figma を使用しています。

これは Figma で完全に構築された私たちの旧デザインです

私たちの元のデザインは Figma で作成されました。公式の Framer プラグイン「Framer to HTML」を使用して、基本的なデザインを Framer にコピーして貼り付け、良いスタート地点を提供しました。

次のステップはデザインです。以前に Figma を使用していた場合、Framer への移行はスムーズです。全体的なユーザー体験が非常に似ているからです。生産性を大幅に向上させるいくつかの興味深いインタラクションを強調していきます。

レイアウト#

Figma ユーザーは、オートレイアウトのおかげで、要素の配置やレイアウトが非常に楽になることに感謝しています。しかし、Framer のレイアウト機能はさらにスマートで、フロントエンドの思考により近いものとなっています。Framer では、グリッドまたはスタックレイアウトを使用するか、列を定義し、最大幅を設定するか選択でき、必要に応じて自動的に別の行にラップされます。これにより、要素がライブのウェブ環境でどのように振る舞うかを反映した設計プロセスが強化されます。

レスポンシブデザインのブレークポイント#

ブレークポイントと幅の設定（例えば、fill、fixed、relative、fit to content のような）と異なるキャンバスを定義することで、さまざまなレスポンシブデザインを簡単かつ正確に実現することができます。このアプローチにより、異なる画面サイズやデバイスに対応してレイアウトを効率的に調整することができます。

アニメーション#

Framer にはさまざまなプリセットアニメーションがあり、私たちのウェブサイトで広く使用している ticker アニメーションを設定できます。コンポーネントをセットアップし、このウィジェットに埋め込むことができます。速度、方向、パディングなどのさまざまな構成を設定でき、アニメーションがサイトにどのように表示されるかについて柔軟性とコントロールが提供されます。

Framer ではスクロールアニメーションをカスタマイズする機能も便利です。例えば、スクロール中に項目がどのように表示されるかを指定できます。スクロールアニメーションの設定により、要素が表示されるタイミングとスタイルを制御し、ユーザー体験とコンテンツへのエンゲージメントを向上させます。

迅速な公開#

私の重要な要件の 1 つは次の通りです:

1. SEO の最適化とマーケティングキャンペーンのために複数のランディングページを迅速に設計すること。スピードが最重要です。
2. 自分で頻繁にコンテンツを更新すること。プロダクトのランディングページは、最新の開発状況や現在の製品ポジショニングを反映しています。古いコンテンツは、市場機会を逃し、顧客のニーズに最新の状態で対応できないことを意味します。

以前のワークフローでは、コンテンツを更新するたびにエンジニアに依頼するか、自分でプルリクエストを出さなければなりませんでした。私たちのエンジニアリングチームは、コード品質を確保するために厳しいプロセスを遵守しているため、それが時間を要し、迅速な変更が難しくなります。

Framer はこの問題を解決してくれました。今では、変更を加えて公開をクリックすると、それがすぐに反映され、プロダクション環境に表示されます。この機能により、プロセスが大幅に簡便化され、コンテンツ管理において迅速な更新とより大きな自律性が得られました。

エンジニアリング#

Framer にホストされているため、私たちの側では実装や技術的な作業は必要ありませんでした。エンジニアたちは、残りのウェブサイトとの統合に約 10 分しかかかりませんでした。

現在のウェブサイトは 20～30 ページで構成されており、一部は Framer を使用して開発されており、他の部分は従来のソフトウェア開発手法で作成されています。今、私たちはページを維持するための最適なツールを選定しています。例えば、Framer では管理が難しい開発者ドキュメントについては、開発者に優しいドキュメントフレームワークを使用してコンテンツをホストするのが最適な選択です。今後は、私たちのニーズを評価し、自社ホスティングを続けるか、完全に Framer へ移行するかを決定していきます。

ワークフローの変化#

ワークフローを完全に変えて、マーケティングサイトの制作が完全に無理なく進むようにしました。信頼性があり、メンテナンス可能で、非常に効率的です。

このブログを書いたのは、ベストプラクティスを共有するためです。Framer を使って美しいウェブサイトをデザインする経験がある方は、ぜひ教えていただきたいです。お互いに学び合いましょう。

さて、私たちの製品をチェックする時が来ました！ logto.io をご訪問ください。