コードからキャンバスへ: Logtoがサインイン体験デザインをオープンソース化
私たちは公開されたサインイン体験の Figma リソースを公開し、包括的な認証フローデザインと多用途なスタイルとコンポーネントを含めました。
Product & Design
Logto では、協力と透明性の力を信じています。だからこそ、私たちのサインイン体験デザインを Figma でオープンソース化し、誰でも使用できるようにしたことをお知らせします。Figma リソースにアクセスするには:
サインイン体験デザインリソースカタログ
このデザインには、2 つの主要なコンポーネントが含まれています: 認証フロー（サインイン体験）とスタイルとコンポーネント。それぞれを詳しく見ていきましょう。
認証フロー
私たちは、モバイルと PC プラットフォームの両方におけるサインアップ、サインイン、最初のソーシャルサインインシナリオのさまざまな組み合わせを注意深く作成しました。各シナリオにはそれに対応するコンソール設定が付いており、認証フローの包括的な概要を提供します。ここにいくつかのシナリオを紹介します:
| サインアップ | サインイン | 最初のソーシャルサインイン | |
|---|---|---|---|
| ユーザー名 | ユーザー名 + パスワード | ユーザー名 + パスワード | ソーシャルサ インイン + ユーザー名を設定 |
| メール（最も人気がある） | メール + 認証コード + パスワード | メール + パスワード | ソーシャルサインイン + メールをリンク |
| 電話番号 | 電話番号 + 認証コード | 電話番号 + 認証コード | ソーシャルサインイン + 電話番号をリンク |
| メールと電話の混合 | メール／電話番号 + 認証コード + パスワード | メール／電話番号 + 認証コード／パスワード | ソーシャルサインイン + メール／電話番号をリンク |
| ソーシャルサインインのみ | / | / | ソーシャルサインインのみ |
| パスワードを忘れた場合 | |
|---|---|
| メールと電話の混合 | メール／電話番号の確認でパスワードをリセット |
スタイルとコンポーネント
私たちのデザインには、サインイン体験の全体的な UI を簡単にカスタマイズできるようにするシンプルで多用途なスタイルとコンポーネントのセットも含まれています。手に入るものは次のとおりです:
| 紹介 | |
|---|---|
| フォントスタイル | 本文、ラベル、タイトル、ヘッドラインなどのカテゴリにフォントの分類を簡素化しました。同じフォントスタイルがモバイルおよび PC プ ラットフォームの両方で使用され、一貫性と使いやすさを確保しています。 |
| カラースタイル | パレットとトークンを使用して、テーマの色を簡単にカスタマイズしてブランドに一致させることができます。私たちのカラーパレットは Google のマテリアルデザインを使用して生成されており、ライトモードとダークモードの両方を提供し、デザイナーが簡単に理解できるようにします。 |
| アイコン | 幅広いユースケースをカバーする機能的なアイコンを厳選して含めました。これらは直接使用または簡単に置き換えることができます。また、ソーシャルサインインボタン用に特別にデザインされたさまざまなソーシャルメディアアイコンも提供しています。 |
| コンポーネント | ブランド、ボタン、チェックボックス、ダイアログ、ナビゲーション、トースト、テキストフィールド、キーボード（モバイル）を含むモバイルおよびウェブプラットフォーム用のコンポーネントを整理しました。 |
簡略化された構成
しかし、それだけではありません！Logto を使用すると、上記の面倒な詳細をスキップし、シームレスな統合体験を提供することを信頼できます。Logto コンソールでは、方法の構成を簡単に探り、ブランドの UI と一致させることができます。数分で、ビジネスに完全に一致するカスタマイズされたログインおよび登録体験を 手に入れることができます。
なぜ Figma デザインを公開したのか？
Logto は常にオープンソースのコードサービスを提供することにコミットしていますが、なぜデザインにもこのオープン性を拡大することにしたのか疑問に思うかもしれません。
サインイン体験の理解と構成
Logto を開発者にとってだけでなく、PM やデザイナーにとっても親友にしたいと考えています。全体の開発プロセスを通じてより良い協力を促進し、高効率、透明性、信頼を築くことを信じています。
- 包括的な認証フローの理解：あなたのプロダクトが特定のログインまたは登録方法だけを使用する場合でも、デザイナーとして包括的な視点を持ちたいと思うはずです。この知識により、ビジネスに最も適したアプローチを決定し、コンバージョン率を最大化することができます。認証ロジックは、曖昧な存在であってはなりません。ただし、識別子と認証方法の一致は簡単な N*N 関係ではなく、さま ざまな制約とプロダクトの決定が関係しています。私たちの Figma が役立ちます。これに関する詳細は、記事「シームレスなサインイン体験のためのデザインの考慮事項」を参照してください。
- 直接的な UI 設計：デザイナーは通常、Figma で完全なソリューションを提供することに慣れています。プロジェクトにデザイナーが関与している場合、このオープンソースデザインが、ブランドのビジュアルアイデンティティに迅速に一致させるのに役立ちます。
Logto の体験とサービスを強化
Logto は効率的なクラウドサービスを提供することにコミットしている一方で、オープンソースコミュニティから発展し、長期的には公開透明を保つことを意図しています。
- オープンソースの精神の受け入れ：コードをオープンソース化することで得られるメリットは、デザインにも適用できると信じています。オープンソースコミュニティ内でオープン性、使用、議論を通じてユーザー体験への注目を集めることで、認証体験を継続的に向上させることができます。
- 長期的なプロダクトデザインに対する洞察の提供：私たちの取り組みの大部分は現在、認証と認可の機能開発に焦点を当てていますが、提供するサインイン体験は非常に拡張性が高く、大多数のニーズに対応しています。オープンソースのフィードバックとコラボレーションを通じて、SIE のプロセスとビジュアル構成を製品によりよく統合し、最終的に製品化のコストを削減したいと考えています。
最後に
Logto 製品の反復を続ける中で、Figma デザインを最新の状態に保ちます。Logto を利用して、製品の優れたファーストステップエクスペリエンスを作成し、ブランドに長く残る印象を与えることを願っています。
あなたの体験とフィードバックを大切にしているため、コミュニケーションチャネルをオープンに保ってください。皆様からのお便りをお待ちしております。