日本語
自社のマーケティングサイトを設計・実装する: コンテンツから実装まで私の旅
最近、私たちは会社のウェブサイトを刷新しました。このブログ記事では、ウェブサイトの改善に使用したツールと方法について詳しく述べています。
Guamian
Product & Design
Product & Design
最近、私たちは会社のウェブサイトを刷新しました。このブログ記事では、ウェブサイトの改善に使用したツールと方法について詳しく述べています。
もしログトのユーザーであれば、最近会社のウェブサイトが刷新されたことに気付くかもしれません。 もしそうでないなら、ウェブサイト logto.io をチェックして、これを実現するためにどれだけのリソースを投入したかを想像してみてください。
「大きな作業や努力、そして慎重な設計が、単に実行の卓越性を示すために必要だって自慢しているの？」と思うかもしれません。
違います！
逆に、私たちはどのようにスマートにツールと方法を活用して、製品の質を向上させ、ユーザーに最高の製品とサービスを提供しているかを示したいのです。
コミュニティからいくつかの肯定的なフィードバックを受け取り、どのようにそれを達成したか、ふと考えました。今回のアップデートは特別で、迅速に進行する環境の中で完全に新しいワークフローを再発明しました。私たちは、ベストプラクティスを紹介しつつ、チームワークとコラボレーション文化にも焦点を当てたいと思います。
私たちは、顧客のアイデンティティ関連の開発サービスとインフラ作業を提供することに焦点を当てた技術チームです。提供のプレッシャーも大きい一方で、ブランドのマーケティングウェブサイトの構築、ブログの執筆、プロジェクトのプロモーション、ユーザーとのエンゲージメントなど、さまざまなストーリーや運営業務をサポートする必要があります。
説得力のあるランディングウェブサイトは、しばしばオーディエンスが製品に対して抱く最初の印象を形成し、製品が解決しようとしている問題、価格設定、社会的証明のための顧客を理解するのに役立ちます。
さらに、それは複数のビジネス目的を果たすこともできます:
前職では、私はウェブサイトプロジェクトに関わったことがあります。典型的なワークフローがどのように進行するか見てみましょう:
このプロセスは退屈で、多くの人々とステークホルダーが関与するため、迅速に進行する環境には不向きです。
たとえ初めにプロダクトデザイナーとエンジニアの2人だけでメンテナンスしていても、ウェブパフォーマンスの管理、画像のアップロード、レスポンシブデザインの保証、画像形式の処理、コンテンツの更新などのタスクは、多くのコミュニケーションを必要とします。
このワークフローは非効率です。エンジニアリングリソースを核心の製品作業に集中させるための方法を常に考えています。
生産性を向上させるためのツールの使用は、私たちのチームの重要な哲学です。そのため、これらのプロセスを効率化するためのツールのリサーチを始めました。
成功する SaaS マーケティングサイトを開発するためには、必要な要素を以下のように分析しましょう:
いくつかの調査を行った結果、デザイン面で使用予定のツールキットは次の通りです:
ChatGPT 3.5、ChatGPT 4.0、Gemini Advanced、Jasper、または類似の AI アプリケーション（コパイロット用）
これはマーケティングコンテンツやメッセージを微調整し、最適化するためのものです。その背後の目標と意図を明確にすることが重要です。AI はあくまでコパイロットであり、意思決定を行うものではありません。マーケティングメッセージを書く前に、いくつかの質問を自分に投げかけます:
次に、伝えたいポイントの初稿を書きます。
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 つは次の通りです:
以前のワークフローでは、コンテンツを更新するたびにエンジニアに依頼するか、自分でプルリクエストを出さなければなりませんでした。私たちのエンジニアリングチームは、コード品質を確保するために厳しいプロセスを遵守しているため、それが時間を要し、迅速な変更が難しくなります。
Framer はこの問題を解決してくれました。今では、変更を加えて公開をクリックすると、それがすぐに反映され、プロダクション環境に表示されます。この機能により、プロセスが大幅に簡便化され、コンテンツ管理において迅速な更新とより大きな自律性が得られました。
Framer にホストされているため、私たちの側では実装や技術的な作業は必要ありませんでした。エンジニアたちは、残りのウェブサイトとの統合に約 10 分しかかかりませんでした。
現在のウェブサイトは 20～30 ページで構成されており、一部は Framer を使用して開発されており、他の部分は従来のソフトウェア開発手法で作成されています。今、私たちはページを維持するための最適なツールを選定しています。例えば、Framer では管理が難しい開発者ドキュメントについては、開発者に優しいドキュメントフレームワークを使用してコンテンツをホストするのが最適な選択です。今後は、私たちのニーズを評価し、自社ホスティングを続けるか、完全に Framer へ移行するかを決定していきます。
ワークフローを完全に変えて、マーケティングサイトの制作が完全に無理なく進むようにしました。信頼性があり、メンテナンス可能で、非常に効率的です。
このブログを書いたのは、ベストプラクティスを共有するためです。Framer を使って美しいウェブサイトをデザインする経験がある方は、ぜひ教えていただきたいです。お互いに学び合いましょう。
さて、私たちの製品をチェックする時が来ました！ logto.io をご訪問ください。