Framerの共同創業者兼CEOであるYorn Van Djkが、Framerで構築された複数のスタートアップウェブサイトを専門的な視点から詳細にレビューする。調達プラットフォームLumari、プレゼンテーション作成ツールa lie、AI採用プラットフォームJuicebox、音声AIのLeaping AI、そして成長支援サービスthe hogまで、各サイトのデザイン、アニメーション、ユーザー体験、コンバージョン戦略を徹底分析する。デザインの細部がいかにユーザーの信頼感や製品理解に影響を与えるか、そして効果的なランディングページ構築のための実践的なアドバイスが満載である。
デザインレビューの始まり
今回はFramerのCEO兼共同創業者であるYorn Van Djkをお迎えしています。Framerは業界をリードするウェブサイトデザインプラットフォームです。Yornは専門的なデザインの知見を活かして、Framerで構築されたユーザー提出のウェブサイトを数多くレビューしていきます。デザインレビューの新しいエピソードへようこそ。
ようこそ、Yorn。
ありがとうございます。お招きいただき光栄です。
こちらこそ参加していただいてありがとうございます。素晴らしいですね。それでは早速、ウェブサイトのレビューに入りましょう。
Lumari:AIによる調達プラットフォーム
まず最初はLumariです。調達のためのAIプラットフォームということで、Lumariはサプライチェーン業務を効率化します。ソーシングから配送まで、常時稼働するシステムが監視し、調整し、アクションを実行します。私の第一印象としては、ここには本当にたくさんの要素があるということです。
たくさんの動きがありますね。たくさんのアイコンが入ってきては飛び出していきます。調達のためのAIプラットフォーム、それ自体は十分明確で何なのかが分かります。私には今すぐに必要なソリューションではないと思いますが、そうですね、このアニメーションについては、おそらく少しトーンダウンさせた方がいいでしょう。アニメーションがあること自体はクールですが、ちょっと多すぎます。
本当にたくさんのことが起こっていますね。
デモを予約するボタンが2つあります。行動喚起としては良い選択ですが、ページ上にもたくさんのオレンジ色があるため、ボタンが少し埋もれてしまっている感じがします。ここで起こっている他のオレンジ色の要素に溶け込んでしまっているように見えます。
そうですね、それには同意します。黒を試してみるか、あるいはCTAを1つにして大きなものを使い、もう1つのスペースは別の用途に使うといいかもしれません。
またこのデモを予約するボタンですが、この種の一般的なCTAのコンバージョン率はそれほど良くないのではないかと思います。私が初めてこのウェブサイトに来たと想像してみてください。おそらく最初に、これが何で何についてのものなのかを私に納得させる必要があります。それから私が何か劇的なことをする前に、
デモを予約するという行動は、私の時間を奪い、20分間も人と電話で話さなければならないわけですから。
そうですね、これらのグラフィックの多くが曖昧で一般的なグラフィックのように感じられます。そして私には、これが何なのかを理解するのに役立つ、何か実際のものが欠けています。製品はどのように見えるのでしょうか。何に使うのでしょうか。
そうですね、それには同意します。おそらくスクリーンショットが役立つでしょう。動画によるウォークスルーも役立つかもしれません。価値提案について語る際に少し抽象的すぎる部分があります。その2つのことで、正確に何を見ているのかがもう少し明確になるかもしれません。
現時点でおそらくページの4分の3くらいまで来ています。そしてここで統合されたサプライヤー受信箱、PO追跡、変更管理といった具体的なものが出てきています。
これらは具体的なもので、どのように機能するのか、誰かが何に使うのかを想像できると思います。さて、ここにはたくさんの要素があります。このようなタブについて言えることの1つは、ほとんどの人はこれらをクリックしないということです。つまりこれらのタブの裏にあるものは、人々が決して見ることはないと想定しなければなりません。
そうですね。スクロール動作と連動させるというクールなトリックがあります。ページをスクロールすると、調達業務からサプライヤーコラボレーションへと移行していきます。つまりユーザーの手を取って、それらのタブのコンテキストやコンテンツを見せていくわけです。
でも思うに、このセクションは製品のスクリーンショットがあればもっと良くなるでしょう。
そうですね。
これはまだかなり一般的です。つまり、本当のところ、このカードが良くなくて、もう一方が良いということなのかが分からないんです。
それがイラストが示唆していることですね。
それともこのカードを削除して、こちらを承認するという削除の操作なのでしょうか。
そうですね。つまり何が起こっているのかが少し抽象的すぎるのです。製品のスクリーンショットがあればそれを解決できるかもしれません。
分かりました。すべてのツールと統合されます。つまりサプライチェーンビジネスを持っていて、これらすべてのツールを使っている場合、これらすべてと一緒に使えるという安心感を与えてくれます。
これらのロゴがアニメーション表示される方法は、ティッカー効果と呼ばれるもので、Framerで使用できます。これを2に設定してから、ホバー時に半分の速度で動くようにすることができます。つまりクールな効果なのですが、これは速すぎると思います。
そうですね。
だからこれを遅くして、ホバー時にクリックできるようにして、その機能について何か見られるようにするといいでしょう。
そうですね。
ここではおそらくGoogleドライブとどのように統合されるのかを知りたいと思うでしょう。2クリックの操作なのか、それとも何かプラグインをインストールしなければならないのか。でもユーザーにそのコンテキストを提供するのです。
スクロールすると要素がページ上にアニメーション表示されるというのはどう思いますか。
それは実装の仕方次第だと思います。非常に上品で自然に感じられる例をたくさん見てきましたが、それを正しく実装するのは難しいです。
一般的にアニメーションというのは、うまくやるのがかなり難しいと感じています。すぐに気を散らすものになってしまう可能性があるからです。もしアニメーションを作っていて初めてなら、常に少し経験のある人に尋ねるべきです。ここで何を改善すべきか、と。トランジションでやりすぎてしまうのは非常に簡単だからです。
そうですね。アニメーションの最良の使用例は何でしょうか。いつ使うことを推奨しますか。
何かに注意を引くこと。それがおそらく第一です。そして何かを過度に明白にすること。だからこのヘッダーで彼らが伝えようとしていることは、アニメーションで非常に明確にできると思います。
でもこれには少し作業が必要です。私が思うに機能しているのは、左からソースが来て
Lumariを通過しています。
そして右側で何かが起こります。でもそれが何なのかが非常に曖昧です。ただ封筒が飛んでいるだけで
だから話していると、特に今ウェブサイトの残りの部分を読んだ後だと理解できるのですが、新しい訪問者は
私たちが3分前にそうだったように
この動画を見るのにそれほど時間をかけません。
だから物事をもっとずっとシンプルにして、それが本当に機能するためには極めて明白にする必要があります。
そうですね。伝えようとしていることでユーザーの頭を叩くようにしなければなりませんよね。超明白にするのです。そして、一番下まで来てFAQがいくつかあって、AIをサプライチェーンに導入する準備はできていますか。
そうですね、サイトの最後の部分はちょっと一般的だと思います。これは全体として問題ないウェブサイトだと思いますが、細部やこれを本当に完成させるには多くの作業が必要です。特にアニメーションの面では。
もし改善するために最も効果的なフィードバックを1つだけ与えるとしたら、それは何だと思いますか。
まあ、製品を見せることです。それが第一でしょう。製品がどのように見えて、どう機能するのかを少しでも味わわせてもらわない限り、デモを予約することはないでしょう。だからスクリーンショット1枚でも、スクリーンショットのコレクションでも、あるいは2分間の短い動画ウォークスルーでも。
このデモを予約するボタンは、動画ウォークスルーを見せるとか、製品がどのように見えるかを見せる、というものであるべきだと思います。
人々にLumariが何を達成するのかを本当に明確に理解してもらって、それからデモを予約してもらえるようにするのです。
そうですね。製品をより現実的にします。ここに実際の製品があるのか、それともFramerですばやく作ったサイトだけなのかが分かりません。彼らはこれらの人々に信頼されていると言っているので、製品があって人々が使っているのだと推測します。それは役立ちます。
でも私の最大の指摘は、視覚的にこれらのイラストの多くは見栄えが良く、共通のテーマとブランドに合っています。しかし、それらは私に情報を伝えてくれませんし、製品や実際に何をするのかを理解する助けになりません。だからそれが私にとって最大の改善ポイントだと思います。
素晴らしい。Lumariさん、ありがとうございました。
a lie:AIでプレゼンテーションを作成
さて、次はa lieです。AIで高品質なプレゼンテーションを作成。ここでもたくさんのアニメーションが起こっていますね。ここで違う点の1つは、製品の一部が見えている気がすることです。テンプレート化されたスライドのようなものをクリックしているようですね。
つまり、ここで見ているのは、PowerPointやGoogle Slidesのようなもので、テンプレートの編集やスライドのデザイン、コンテンツの移動を簡単にするものだと思います。レイアウト配置機能があるようで、ほとんどのスライド製品にはない機能です。それはかなりクールそうです。そうですね、このヒーロー部分を見ることで、この製品が何をするのかについて一般的な理解は得られると思います。
製品のシンプル化が本当に役立つかどうかは分かりません。これは製品が実際にどのように見えるかではありません。彼らは製品の動作の一部を取り出して、この動画でそれを見せているのです。
だから少し、今やったように、組み合わせて理解しなければなりません。テーマに関して何かをしているんだな、レイアウトに関して何かをしているんだな、でも実際の製品そのものを見せてはいないんだな、と。
そうですね、
上部のバーは本当に気に入っています。プロにアップグレードして、デッキを完璧にするための30分間の無料セッションを手に入れよう。
なるほど、それはデッキ作りのために位置付けられています。そしてこちらのタグラインは高品質なプレゼンテーションを作成するために位置付けられています。
そうですね。この虹色の背景は少し気が散ると感じます。ここで起こっていることを完全に囲むコンテナではないのです。
そうですね。
だから、ここで起こっているアニメーションで何が起こっているのかを理解するのが難しくなったのだと思います。
そうですね。
さて、他に何があるか見てみましょう。よし、Product Huntで今日の製品第2位。ただ使ってみただけで完全にクレイジー、Gammaからa lieに乗り換えました。Gammaは大きな資金調達でニュースになっていて、順調に進んでいるようです。だから彼らがGammaに対して自分たちを位置付けようとしているのは明らかです。ここにはたくさんの引用があります。これらの引用についてどう感じますか。特にFramerの製品やサイトについて考えているときに、これらはあなたに響くタイプのものですか。
上にスクロールしていただけますか。高品質なプレゼンテーションを作成するというような見出しを読むと、
通常は、誰かがそれを裏付ける必要がありますよね。それについて自分で言うことはできません、
これらのプレゼンテーションが高品質だと人々が思っているという証拠がない限りは。
だから、ページ上での位置付けとしては、折り返しの下に配置したのは機能していると思います。引用文がプレゼンテーションの品質について本当に語っているかどうかは分かりません。
もう少し一般的なようです。だから
そうですね、他にも私に響くことの1つは、ここに見出しがあって明確ですが、サブ見出しか何かで文字通りこれが何なのかを説明する機会を逃しているかもしれません。
そして私たちはこれをフォローして理解しようと時間をかけました。このアニメーションを3回か4回繰り返して、それで理解したと思いますが、彼らは最初から教えてくれればよかったのです。そうすればたくさんの時間を節約できました。
そうですね。
そしてほとんどのユーザーはその時間をかけません。それが難しい課題です。5秒から10秒で明白にしなければなりません。それだけです。そして10秒というのはこれが自分に合っているかどうかを理解しようとする人々にとって長い時間です。
またここでは明らかではありません。プレゼンテーションと言っていますが、これはウェブサイトのセクションか何かのようにも見えます。
だからもっと深く掘り下げるといいかもしれません。さて、二度とゼロから始める必要はありません。アイデアに集中し、ピクセルの調整には集中しません。AIがすべてのコンテキストを持っています。あなたがコントロールします。これはタブ付きコンセプトのバリエーションで、各セクションにタイマーがあって、人々がすべてを見やすくしています。
セクションをクリックできますか。
できます。
なるほど。まあ、これはかなりうまく実装されていますね。
そうですね。これはいいです。ここの大きなテキストが気に入っています。多くの場合、人々がタブを作ると、小さな文字とかがあって本当に見逃しやすいです。でもこれが本当に大きくて、私の注意を引き、すべての見出しを読みました。
そうですね。
それがコミュニケーションするのかどうかは確信が持てません。製品について具体的なことを。これらを読んでも理解が深まるとは思いません。まだマーケティング用語のようなものです。二度とゼロから始める必要はありません。アイデアに集中し、ピクセルの調整には集中しません。AIがすべてのコンテキストを持っています。あなたがコントロールします。
製品で何ができるのかを理解するのに役立つ文字通りのことが必要なのです。まだそれを得ていません。
少し一般的です。
つまり正直に言って、これの方が良く聞こえます。ここのサブ見出しの方が。
そうですね、サブラインの方が見出しより説明的です。
そして消えてしまいます。
だからタイマーが切れるまで5秒しかなくて、それから消えます。読むのが難しくなります。でもこれらのサブ見出しは、何が起こっているかを理解するのに最も説得力のある説明的なもののようです。作成されたプレゼンテーション。さて、ここに例があると思います。
つまりこれはいいです。
そうですね。
どんな出力が期待できるかの例を与えてくれています。1つ難しいことがあって、それは聴衆によりますが、何かが本当に高品質だという主張をしている場合、
高品質の基準は私のものとは違い、部屋にいる全員のものとも違います。
だから高品質と言っているなら、これは高品質である必要があります。全員の基準で。
そうですね。
そして私が見ている出力は、見栄えはいいですが、かなり一般的でもあります。この種の出力は少しテンプレート的に感じます。
だからこの製品の位置付けは、もしAIで速度と使いやすさを求めているなら、それについてもっと語るべきかもしれません。
プレミアムな、
最高品質のソリューションとして位置付けるよりも。
そうですね。
そしてそれは正しく理解するのが時々難しいです。自分の製品の価値提案について正直であることと、
それがそうあってほしいと思うこととの間で。
そうですね。これらは似たようなフォーマットですが、異なるスキンが適用されています。
ここで見ているものはそうですね。
無料で試す。
だからそれはいい行動喚起です。
試してみたいと思いますか。
そうですね、もしプレゼンテーションを作りたくて、この無料で試すボタンをクリックできるなら、おそらくそうするでしょう。でもこれは逃した機会です。サインアップを強制します。エクスポートしたいときや共有リンクか何かを取得したいときに、サインインを強制する方がもっとクールだと思います。
だから私はすでにコミットしています。
そうですね。そうですね。これはプロンプトバーをフロントページに置くのに良い製品かもしれません。Y Combinatorについてのプレゼンテーションを作りたいと入力して、何が生成されるか見てください。
そうですね。最大のことの1つは、人々にアハモーメントに到達してもらいたいということだと思います。
できるだけ早く製品の価値を体験してもらうにはどうすればいいか。そしてこれは、ログインまたはアカウントを作成するという、考えられる最大のブロッカーです。
そうですね、まず製品を試してもらえるようにするか、デモモードのようなものがあれば、おそらくいいでしょう。
そうですね。
また厄介なことの1つは、特にこのような製品の場合、Google Slidesと競合しているということです。
そうですね。
無料で誰でもアクセスでき、おそらくすでに使ったことがあるものです。だからできるだけ早く人々を取り込むことが実際には本当に重要だと思います。多くの無料のものとも競合しているので、本当に摩擦を少なくすることです。素晴らしい。
クールです。
a lieさん、ありがとうございました。
Juicebox:AI採用プラットフォーム
次はJuiceboxです。
さあ、これはクールに見えます。
人材戦争に勝つ。Juiceboxはあなたが探している人を理解するAI採用プラットフォームです。検索、CRM、エージェントでチームをレベルアップしましょう。
私に飛び込んでくることは、かなり独特でユニークなスタイルを持っているということです。
そしてそれは、新しいJuiceboxエージェントを試すという小さな紫色のボタンから、あのコーナーフラップのような状況まで、私がすぐに気づいたことです。
そうですね、それで何もできません。でも
でも、誰かが詳細を見ているのは明らかです。これがどのように見えるかの。
これがあなたが興奮する美学かどうかは、自分の好みによります。でもそうですね、これはかなり面白く見えると思います。
そうですね。もし何のためのものなのかを理解しているとすれば、人材戦争に勝つ、Juiceboxを使う。AI採用プラットフォーム。そうですね。これはあなたが探しているものを理解します。
つまり彼らは、いくつかの入力に基づいて本当に質の高い人材を見つける手助けをすると言っているわけです。
そうですね。
そうですね。それも私の推測です。この見出しが気に入っています。人材戦争に勝つ。注目を集めます。そして人材戦争の中にいると感じている人々、つまり自分の会社に最高の人材を連れてこようとしている人々に語りかけていると思います。
そうですね。認知できる企業のロゴがたくさんあって、本当にクールです。Cursor、Corora、Perplexityがあります。これらの多くは非常に現代的なAI時代の企業のように見えます。それもクールです。大きな恐竜の束ではありません。最先端でAIを使っている現代的な企業がJuiceboxを採用に使っていると伝えています。
そしてこれはクールです。試してみましょう。
試してみましょう。誰を雇いたいですか。うーん、AIの動画マーケターか、Framerデザインチームのために、ちょうど今それについて話していたので
やられました
サインアップしたいと思いますか。
つまり、今は、おそらく戻って製品がどのように見えるかを先に見るでしょう。
なるほど。ここで戻るボタンを押すわけですね。
そうですね。
ここで見たいことは何ですか。
これはすでにかなりいいです。次に何が起こるかをもっと明確にすることだと思います。そのイラストは悪くないです。People GPTへようこそ。フロントページのメッセージに基づいて、ある程度推測できます。
彼らは人を見つける手助けをしてくれます。信頼されているという部分もうまく機能していると思います。すでにこれを使っている企業がいくつかあることを強調しています。でもこの地球儀の状況に小さなテキストがたくさんあるのは難しいです。HRテクノロジーの専門家。なるほど。つまり世界中にたくさんの人がいて、私たちがあなたのために見つけられますと言っているわけです。
全体的にこれは問題ないと思いますが、プロンプトボックスに何かを入力させて、その情報で何かをしてそれを見せる代わりに、まずこの障害を置くのは機会損失だと思います。
なるほど。そうですね、私の結論としては、これはクールだと思います。すぐに本題に入ります。あなたはこれを試したでしょう。
試しました。でも、次のところで障害に当たったときに、完全に進める十分な情報がありませんでした。そして私の推測では、それはここに来るのだと思います。
そうですね、これがポップアップしています。さて、今もっと情報を得ています。これは私には少し混乱しています。異なるプロファイルを見せて、彼らの経験について教えているのだと思います。
いえいえいえ。彼らが例を与えようとしていると思います。だからこれを私たちのために書いたのです。シリーズB企業で働いているサンフランシスコのソフトウェアエンジニア。それをクリックすると、これらの候補者がポップアップします。
なるほど、それは私には明白ではありませんでした。採用は書き換えられています。精密さに駆動され、スピードと結果を求めるチームのために構築されています。
なるほど、動作の仕方。人間プラスエージェント。全体の人材発見。なるほど、彼らはたくさんのプロファイルをインデックス化しています。それらに関する洞察を提供します。ここには洞察が見当たりません。そして自動化されたアウトリーチで返信を増やします。なるほど、クールです。
これが動作する方法については、他のもので議論したように、自動的にスクロールしてタブを順に見せていくと、あなたに写真を見せます。
これはまだ実際のUIではありませんが、
そのメタファーのようなもので、これは明らかに私たちがチャートやバーをあなたに見せますと言っています。
そうですね。見るために。それがどれほど魅力的かは分かりません。おそらく試すでしょう。
そうですね、これは改善されるべきだと思います。何が起こっているのか明確ではありません。
そうですね。
こちらは、たくさんのプロファイルが見つかりました。だから私には理にかなっています。そしてこちらは自動ドラフト作成で、プレースホルダーのファーストネームが見えて、クールです。そうですね、かなり良さそうです。
視覚的に、これはすべてかなり新鮮でモダンに見えると思います。
そうですね。
そうですね、素晴らしく見えます。そして一番上の方を見ると、JuiceboxがSequoia主導で3600万ドルを調達したことが分かります。
それは素晴らしいです。
おめでとうございます。すべての採用担当者にAIエージェントを展開。
そうですね、これらの小さなカードがポップアップし続けていて、新しい情報を得るのを助けるというよりも、私には圧倒的に感じられます。
そうですね、たくさん、ランダムなことについてのたくさんの通知です。
そうですね、通知のように感じられます。
それが正しい言葉です。ストレスフルです。自動操縦での検索は、採用ごとに良くなります。個人的に感じられるアウトリーチ。なるほど。これは統合が何であるかを見せるクールな方法です。
そうですね。
視覚的に面白いです。それらすべてを見させてくれます。トップチームがJuiceboxで勝つ方法。さて、ケーススタディがいくつかあります。これは横スクロールですか。そうは見えません。ああ、ここに何かがあります。なるほど。Coin trackerが多くの時間を節約しました。Monte Carloがいくつかのポジションを埋めました。なるほど、クールです。AI駆動採用の次に来るものを見てください。なるほど、製品。これは新機能を発表する製品ブログのようです。
それはクールです。彼らがどんどんリリースしていることが分かります。ここの日付を見ることもできて、10月2日、10月3日、10月21日、11月12日。つまりこの製品は常に良くなっているということです。
そうですね。
そしてFAQがあります。
クールです。そして行動喚起。
このサインアップを無料で試すという部分にしたいです。
メールアドレスを入れると次のステップに進むと思います。
そうですね。でもここにもプロンプトボックスを置いてみてはどうでしょう。
そうですね。
人々を製品に引き込もうとする。
そうですね。これもうまくいきますが、もう少し一般的です。ユーザーの意図を得る機会があって、それから
誰もがこれをやらなければなりません。Framerもこれをやっています。ウェブサイトを作りたいですか。
うまくいきますよね。
人々が何かを欲しいとき、彼らはサインアップします。もう1つ面白いかもしれないのは、入力したクエリに基づいて、プロファイルを表示するけれどもぼかしがかかっているとか、私たちが持っていますよというスニペットを人々に与えて、ここに入力するだけでそれを見られるようにすることです。全体的に、これは本当に素晴らしいウェブサイトだと思います、Juicebox。時間をかけて投資したことが明らかです。ユニークに感じられます。
私が覚えているブランドのように感じられます。そして製品をコミュニケーションする方法が非常に思慮深いです。
美的に、これは非常に非常にモダンで、ある意味AI先進的に見えると思います。少しブルータリスト的で、私は好きです。
それは今トレンドのスタイルですね。
そうですね、トレンドです。でも、もしこれが人についてのものなら、人のソリューションであることから非常に遠く感じられます。
誰かを雇うのを助けていますが、非常に白黒で、色のヒントはかなり控えめで、紫と少しの青、そしてロゴと名前が、それが試みているソリューションから最も切り離されて感じられます。
それは素晴らしい指摘です。人々の顔や人間性がそれほどありません。ここに数個のアバターがあると思いますが、それ以外にはあまりないようです。
そうですね。私は好きです。人材戦争に勝つというのは、でもJuiceboxという製品にしてはかなり強硬的に聞こえます。
そうですね。
人材戦争。分かりますか。
そうですね。そしてスタイルが、実際にはAndurilやPalantirのようなものにずっと似ているのは興味深いです。それらの多くは文字通り戦争のためのものです。
これはそうではなく人材を見つけることですが、それを読んで私の注意を引いたことは確かです。素晴らしい。
素晴らしい仕事、Juicebox。
Leaping AI:音声AIでコールセンターを自動化
次はLeaping AIです。
音声AIでコールセンターを自動化。人間のようなAI音声エージェントで複雑なコールセンター全体を置き換えます。企業や大規模コールセンターから信頼され、規模に応じて人間のエージェントと同等またはそれ以上の顧客満足度を提供します。
なるほど、ここにあるすべてが、これは大規模コールセンター、企業、規模、人間より良い、複雑のためのものだと私に伝えています。ここにあるすべての言葉が、複雑で大規模なコールセンターを持っているなら、私たちがあなたのためのソリューションですと叩きつけているようです。
そうですね。そうですね、位置付けとテキストは何であるかが非常に明確だと思います。レイアウトと物事の見え方や感じ方への私の最初の反応は、これは私が見ている消費者向けのもののように感じられるということです。1人の人が映っている電話だからです。
でもメッセージングは別の方法で位置付けています。いいえ、これは
大規模コールセンター向けです。
だからもし大規模コールセンターについて考えてほしいなら、これらの電話を7つ、たくさんの異なる人々と一緒に見せてください。そうすれば、1つではなく複数のことが起こっていることを考えます。
そうですね。通常、音声AIサイトを見ると、再生ボタンか、会話を始めるための何かがあります。クリックして応答するというのがあるようですが、実際にこれを試すためにクリックすべきものだということは私には明白ではありませんでした。これをクリックしたらどうなるか見てみましょう。
こんにちは、Leaping AIのAlexです。どなたとお話ししていますか。
やあ、Alex、Aaronです。
やあ、Aaron。はじめまして。それで、今日AIと電話について何が気になっていますか。あなたの会社では鳴り止まない電話を自動化しようとしていますか。
そうですね、コールセンターがあります。本当に複雑です。助けてもらえるか気になっています。
もちろんです、Aaron。複雑なコールセンターは私の好きなパズルです。
ああ、言い忘れましたが、実は海外にもあるんです。
心配いりません、Aaron。海外とおっしゃったのは、コールセンターが電話とチャットの両方を扱っているという意味ですか、それとも別の何かですか。ああ、いえ。実際には海外と言いました。
ああ、分かりました。海外ですね。明確にしてくれてありがとう、Aaron。コールセンターのエージェントは国際的に拠点を置いていますか、それとも顧客のほとんどが海外にいますか。今直面している最大の頭痛の種は何ですか。
タイムゾーンの調整が大きな問題です。
ああ、タイムゾーン。究極のボスレベルですね。それは本当に痛いことです。
かなりいいですね。
そうですね。
つまり、困らせようとしていましたが、よくやりました。
そうですね、うまく対処しました。パンチを受け流しました。私が言っていることのほとんどを理解していました。デモから得た最大の収穫は、もし実際に潜在的な顧客だったら、その顧客の問題に向かって導いていないということです。
ただ、ああ、電話について教えてくださいという感じでした。コールセンターについて教えてくださいという感じであるべきです。
アニメーションについて話していたところだと思います。これはアニメーションがかなりうまく行われている例だと思います。だから、この脈動する背景、クリックして応答。ユーザーがクリックして応答ボタンをクリックするように導きたいことはかなり明確です。
そうですね。
そしてスクロールすると。なるほど。ワオ。これは没入的です。非常にクールです。
どんどん大きくなっていって
もっと紫になります。
これは興味深いです。画面を占有して、ナビゲーションバーを取り除きますが、メールアドレスを入力してくださいというのは残しています。
そうですね。
上の方に行動喚起があります。
そうですね、ここのインタラクションとアニメーションは本当に没入的で、私を引き込もうとしていて、ここにもっとエージェントが表示されているのを見られて嬉しいです。
ただ1人のプレイヤーのような感じではなくなりました。
そうですね。業界リーダーから信頼されている、大学のコールセンターが50%の電話を自動化。なるほど、ここに顧客の社会的証明があります。企業レベルのセキュリティがありますが、これも重要です。彼らが最初に企業を追いかけていることを非常に明確にしていたからです。
そうですね。
データは社内、堅牢なガードレール、ユニットテスト、専門的な実験。無料相談をスケジュール、ここに詳細を提供します。これが何なのか分かりません。そうですね。これもまた、iPhoneで起こるように思わせるのではなくコールセンターであることに戻ります。私は分散システムで動作するソフトウェアのようなものを想像します。
そうですね。
だからそれは少し切り離されて感じられます。もっとFAQがあります。そして下部に小さな隠れたフッターがあります。非常にクールです。
そうですね。インタラクションとアニメーションの面で多くの詳細があって、それらが高品質だと思います。
そうですね。
そうですね。かなり独特な美学を持っています。だから美的にはよく磨かれていると感じます。インタラクションは役立ち、邪魔になりません。アニメーションはかなり素晴らしいと思います。
主なフィードバックとして、このページを上から下まで見ると、明らかに企業の大規模チームソリューションとして位置付けようとしています。
そうですね、
でもその美学のどれも、私にとってそれを本当に実感させるものではありません。
ふむ。だから企業が実際に何を必要としているのか、そして解決しようとしているユースケースのいくつかは何なのかと、もう少し整合させる方法を見つけ出すことを試みるでしょう。上部のデモはかなり素晴らしいと思います。
そうですね。
機能して、サインアップフィールドなしにブラウザで製品を試させてくれたという事実において。
そうですね。
でも、それはもし私が企業で、これを試したいなら、次に何が起こるのかということから少し切り離されています。
そうですね。これはステレオタイプ的で真実ではないかもしれません。でも、もし彼がヘッドセットをつけていたら、彼がコールセンターにいると思わせて、それをデモするんだなと思います。
そしてここでも、クリックして応答。これに似たものを探していたので見つけました。再生ボタンか、会話をするための電話ボタンのようなものを探していました。それがここにありました。でも、もしこれに脈動する紫の光があって、これをクリックしてくださいと教えてくれたら。
これが次にやってほしいことです。もっとクリックされる可能性が高いと思います。全体的に、これは素晴らしいと思います。あなたの言う通りだと思います。アニメーションが機能性と製品が実際に何をするかを伝えるのを助けることで価値を加える素晴らしい例です。それは本当に素晴らしいです。
そして全体的に、モダンでプロフェッショナルに見えます。
そうですね、同意します。素晴らしい。
よくできました。
the hog:成長戦略サービス
次はthe hogです。
ワオ、the hog。
ここにはたくさんのことが起こっています。成長を拡大しましょう。the hogはあなたにガスを与えます。Growth as a service。GTM戦略を調査し、計画し、実行するAIエージェントを備えた完全な営業およびマーケティングチームの力を解き放ちます。
何百時間もの作業を節約します。
分かりました。
つまり、確実に印象を残します。the hog。
そうですね。最大のことの1つは、メッセージングですよね。the hogはあなたにガスを与えます。彼らは
やっています。
まず最初に気づくのはフォントです。たくさんの、渦巻き要素があって読みにくくしています。
そうですね。
そしてここで際立ったことの1つ、正しく見えますが、theとgivesの間に2つのスペースがあります。
もしかしたら彼らはもっとスペースを作るために意図的にそうしたのかもしれません。scaleとyourの間もそうですか、1つですか2つですか。
そうですね、だから私はここにエラーがあると思わせます。
そうですね。
見てみましょう。そうですね、これは1つです。これは1つです。これは2つです。
スペーシングは改善できます。
それがデザイナーの呪いですね。そのような細部は非常に些細に感じられますが、何かがおかしいという印象につながります。
何かが完全には正しくありません。非常に些細なことですが。同じことがここにも実際にあります。ピリオドとSの間にスペースがあります。ピリオドまで。だから私がこれを見ると、私の結論は、この背後にいる誰かが細部志向ではないということです。
そうですね。でも全体的に、このラッピングのようなものには最大幅が必要で、これを超えてはいけないと言いたいです。だからここから始まってそこで終わります。
理想的には、ここから始まって、
そこで終わります。そして、
ファネルのようになりますよね、ボタンに向かって。
そうですね。
でも最も際立っているのは、明らかに名前ですが、それから彼らはロゴとして何らかの絵文字を選びました。それをどう受け止めていいか分かりません。
それが非常に良いロゴだとは思いません。命名に関して、本当にhogを私の成長サービスと関連付けたいですか。分からない、多分私が理解していない参照かもしれません。何か文化的なものかもしれません。
そうですね。これはここからは明らかではありませんが、この会社の最近のローンチを見ました。
なるほど。
hogはhead of growthの略だと思います。
おお、なるほど。
それを言うべきかもしれませんね。
つまり、あなたは知っていましたか。
もしそれを見ていなければ分からなかったでしょう。
そうですね。私だけではないと聞いて良かったです。
なるほど。だからhead of growthがhogで、それから
彼はあなたにガスを与えます、それは彼があなたにgrowth as a serviceを与えるということです。
なるほど。
いくつか際立つことがあります。1つは、フォントの選択がランダムに見えます。
ここにこのスクリプトのようなものがあります。そしてここには、ただの一般的なHelveticaか何かのようなものがあります。そしてこれは奇妙です。ログインとrequest a demoがあります。
トグルボタンのように見えますが、おそらく両方とも個別のボタンだと思います。それは奇妙です。そしてここで何が起こっているのか分かりません。たくさんのアイコンがhogに入って、それからpaid digital marketingとLinkedIn outreachが出てきています。それは私には理にかなりません。
そうですね。これは、かなり受け止めるべきものがたくさんあります。私たちが売ろうとしているワークフローが何なのかが明白ではありません。
そうですね。そして彼らは何をするのでしょうか。GTM戦略を調査し、計画し、実行すると思います。そしてこれらのものがあります。そしてこれらはかなり速く動いているので、すべてを読むのは難しいです。
the hogの紹介、オールインワンのマーケティングおよび営業ツール。調査、計画、実行のための1つのプラットフォーム。これも非常に幅広いです。この文全体を読まなければならないのは疲れるように感じられます。the hog.ai AIは競合を追跡し、ソーシャル全体を聞き、ROIによってチャネルをランク付けし、思想的リーダーシップとブランド成長を促進するブログと投稿を書きます。
なるほど、つまりそれは明確です。そして動画があります。
そうですね、興味深いことに、これは最初の動画なので、チェックしてみましょう。
私はトリュフが大好きですが、問題があります。本当に高価で、見つけるのが信じられないほど難しいのです。これはHanzoです。彼はトリュフ豚です。
イエイ。
彼の仕事は私の貴重なトリュフを見つけるのを助けることです。ここに問題があります。
顧客を見つけることも同じくらい難しいことを私たちは知っています。だからこそ私たちはthe hogを作りました。これは顧客獲得のためのGoogle mapsのようなものです。
私たちはあらゆる可能なルートを明らかにし、顧客に到達するための最も最適化されたパスをハイライトするのを助けます。
go to marketの未来はそれではありません。
これは2分間の動画のようです。
なるほど。少なくともhogを理解していて、それが良い参照である理由を理解しています。うまくいく可能性があります。トリュフ、顧客を見つけるのに役立ちます。
そうですね。そうですね。そうですね。最大幅が必要です。設定。
ここにdaily action centerがあります。なるほど。今、製品を見始めています。これはここで初めて見ました。何が起こっているのか完全には分かりません。私はthe hogの中にいます。LinkedInの何かに返信を生成できると思います。だからソーシャルインタラクションと顧客アウトリーチをこれらのプラットフォーム上で多く一元化しているのだと思います。
そうですね、
もしそれが正しいなら。ああ、それからagent centerがあります。control roomです。なるほど。
何が起こっているのか完全には分かりません。たくさんのテキストとかがあります。
これは長いランディングページです。3分の1くらいだと思います。
なるほど、スピードアップしましょう。いや、そう言っているわけではなくて、それくらいコミュニケーションすべきことがあるということです。
もしpricingをクリックしたらページの下にジャンプするのかな。そうですね、ページの下にジャンプします。
なるほど。
今半分です。そうですね。
実際の測定可能な結果を得る、ROI、云々。ここに何人かいます。どの会社の人なのか書いていないので、作り話のように見えます。ただこの人がhead of growthで、この人がVP of marketingというだけで、どこの会社なのか。聞いたことがありますか。良い会社ですか。これを作っただけですか。なぜここですべての単語が大文字になっているのですか。人間はこんな風に書きません。
そうですね。
だから、これは実際に直接の引用ではないように感じられます。これもそうです。両方の人が実際に各文の最初の単語を大文字にして書いている可能性、私は信じません。したがってこれらが本当の引用だとは信じません。
そして、それは書かれている数字も疑問に思わせます。
そうですね。
まさに。それが先ほどのあなたの指摘と同じで、小さなことが無意識のうちに積み重なって、ここで本当に何が起こっているのかについての物語を語るのです。そうですね。
私たちの機能、営業およびマーケティングチーム全体の力を解き放ちます。なるほど。顧客を見つけます。分かりました。
だからここでたくさんのスクリーンショットを見ているだけで、それから価格設定があります。
でもこれはSaaS製品なのか、それともサービスのようなものなのか。上部ではサービスだと言っていたからです。
そうですね、彼らはgrowth as a serviceと言ったと思います。SaaSで遊ぼうとしていたのだと思います。それが彼らがやろうとしていたことだと思います。
でもあなたの言う通り、もしそれをサービスとして受け取るだけなら、月額200ドルで支払う代理店のようなもので、人間が来てこれを手伝ってくれると思うかもしれません。
そうですね。
興味深いことに、ここでもloginとrequest demoに同じウィジェットを使っていますが、これは実際にmonthlyとyearlyを切り替えるトグルのように感じられます。
そうですね。
なるほど。そしてloginをクリックすると。そうですね。
これは実際にログインページに連れて行きます。だから問題は、これは同じページ上の同じウィジェット間で完全に異なるインタラクションだということですよね。
そうですね、それは非常に混乱します。
the hog essentialsは常に含まれています。クライアントが言うこと、再び会社名なし、business analyst、product designer、すべての単語が大文字、sales executive。
もっと現実的にするために名前を入れてください。具体的であればあるほど良いです。なるほど。そして私たちと一緒に働きましょう。カスタムダッシュボード。そうですね。つまりここにはたくさんのものがあって、すべて1ページにありますよね。
そうですね。そうですね。全体的なスタイルから言って、タイポグラフィ、レイアウトまで、おそらくはるかに多くのことが起こっています。多すぎます。
そうですね。興味深いのは、創業者は時々、すべてを入れてすべてを伝えなければならないと感じると思いますが、実際に起こることは、本当に持ち帰ってほしい核心から気を散らすたくさんのノイズを作り出すことです。
そうですね。
つまり、私にとってこれはかなり圧倒的でした。名前を理解し、何が起こっているのか、それはサービスなのか製品なのか、何を買っているのか、どんな問題を解決するのかを理解しようとすること、そしてあなたが指摘しているように、小さな細部がすべて圧倒されている感覚に加わります。だから、ここでの私たちのアドバイスはシンプル化することのようです。
そうですね。
コンテンツとページ上のスタイルの両方で絞り込みます。これは役に立たなかったと思います。
いいえ。
このアニメーション。ウェブサイトに複数のページを持つのは問題ありません。
問題ありません。
aboutのようなものは別のページに置けます。pricingは別のページに置けます。
これは最初のステップのようなもので、これが何なのか本当に分からないという感じだと思います。
だからこのチームにとって本当に良い練習は、このページを脇に置くことです。
ふむ。
新しいものを作って、そこに置くことが許されているのは、これが何であるかを理解するのを助けるものだけです。
それから、それが何なのか知らない20人の人々でテストします。
そうですね。
そして彼らに聞きます。
これは何だと思いますか。そこから拡張して、より完全なランディングページにすることができます。でも良い練習です。
製品は本当にクールに見えます。多くの創業者がこれを使いたいでしょう。成長を得る。
確実に。
小さな月額料金で、ですよね。
そうですね。つまりこれは誰もの夢です。ここで購読するだけで私の会社が上昇していきます。
そうですね。素晴らしい。よくできました、the hog。
デザインレビューの締めくくり
今回は以上です。
分かりました。
ありがとうございます。これは信じられないほど素晴らしかったです。素晴らしいフィードバックでした。サイトや製品を評価するときに、あなたが注目し、探している種類のものを見られて大好きです。
クールです。そうですね、お招きいただきありがとうございました。これは本当に楽しかったです。これらのスタートアップのいずれかが助けが必要なら、guy@framer.comまでご連絡ください。喜んで専門家をセットアップして、細部について手助けします。
素晴らしい。それでは、Yorn、参加してくれてありがとうございました。そして視聴してくださった皆さん、デザインレビューの別のエピソードをありがとうございました。次回またお会いしましょう。
コメント