> For the complete documentation index, see [llms.txt](https://manual.dxable.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.dxable.com/1password/design-your-website-to-work-best-with-1password.md).

# 1Passwordで最適に機能するウェブサイトをデザインする

1Password は、ほとんどのウェブサイトでパスワードを生Create、入力、Saveできるように設計されています。ベスト プラクティスに従ってページを開発する限り、ウェブサイトで 1Password をサポートするために特別なことをする必要はありません。これにより、各ページ要素の意図が明確になります。ページに変更を加えた場合でも、1Password がページを理解しやすくなります。

💡ヒント

1Password は[パスキーによるSaveとサインインもサポートしています。](https://support.1password.com/save-use-passkeys/)[パスキーで動作するようにウェブサイトを設計する](https://passkeys.dev/docs/intro/what-are-passkeys/)方法を紹介します。

### **Build logical forms** <a href="#id-3wuwj4v82i4i" id="id-3wuwj4v82i4i"></a>

1Password でサイトへのSaveや入力に問題がある場合は、フォームのベスト プラクティスに従っていることを確認してください。

* 全てのフィールドに一意の要素 ID を使用します。
* \<input>フィールドを\<form>要素で囲みます。
* 関連するフィールド (ユーザー名やパスワードなど) を同じ\<form>要素にグループ化します。
* 関連のないフィールドを別の\<form>要素に分離します。例えば登録フィールドとサインインフィールドを別のフォームに配置します。

1PasswordにフィールドのSaveや入力を促したくない場合は、data-1p-ignore属性を使用して 1Passwordにそのフィールドを無視するように指示できます。

例:

\<input type="text" id="username" name="ig" data-1p-ignore>

#### **パスワード変更およびリセットフォーム** <a href="#id-7je71f9eq2o3" id="id-7je71f9eq2o3"></a>

パスワード変更フォームでは、現在のパスワード、新しいパスワード、パスワードの確認の順に入力します。これにより、各フォーム要素の意図が明確になります。

例:

\<label for="current-password">Current Password: \</label>

\<input type="password" name="current-password" id="current-password" autocomplete="current-password" />

\<label for="password">New Password: \</label>

\<input type="password" name="new-password" id="new-password" autocomplete="new-password" />

\<label for="confirm-password">Confirm Password: \</label>

\<input type="password" name="confirm-password" id="confirm-password" autocomplete="new-password" />

パスワードのリセットおよび「パスワードを忘れた場合」のフォームでは、リセットするパスワードのユーザー名を含めます。これにより、1Password は新しいパスワードで更新する項目を判断できます。<br>

例:

\<input style="display: none;" type="text" name="username" id="username" autocomplete="username" value="wendy.appleseed" />\</br>

\<label for="password">New Password: \</label>

\<input type="password" name="password" id="new-password" autocomplete="new-password" />

### **Provide password requirements** <a href="#tnlm1xge2juc" id="tnlm1xge2juc"></a>

1Passwordは、あなたのウェブサイトのパスワード要件に合ったパスワードを生Createすることができます。 1Passwordは、[Appleのパスワードマネージャーリソース](https://github.com/apple/password-manager-resources)を使用して、同じアカウントシステムを共有する複数のドメインの同じリポジトリーにある[共有クレデンシャルバックエンドファイル](https://github.com/apple/password-manager-resources/blob/main/quirks/websites-with-shared-credential-backends.json)と共に、ウェブサイト独自のパスワードルールを識別します。

1Password がスマート パスワードを生Createするために使うルールを提供するには、各\<input type="password">要素に次の属性を追加します。

* passwordrules
* minlength
* maxlength

[passwordrules属性をCreateする方法はこちらで学んでください。](https://developer.apple.com/password-rules/)

### **アクセシビリティーを活用する** <a href="#l01ovmug13hd" id="l01ovmug13hd"></a>

ウェブサイトをアクセシブルにすることは、ウェブサイトを使う全ての人にメリットをもたらします。さらに、ウェブサイトをアクセシブルにすることで、1Passwordにも手がかりが提供されます。

ページを調べるとき、1Password はアクセシビリティーの手がかりを利用してフィールドを見つけることができます。

* 全てのフィールドに\<label>要素を割り当てます。
* ラベルの属性を使用してfor、ラベルを適切なフィールドに関連付けます。

\<label for="username-field">Username\</label>

\<input name="username" id="username-field">

* [ARIA属性](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)を使うフォーム フィールドに注釈を付けます。例えば表示されないフィールドにaria-hidden属性を使用します。

### **信頼性の向上** <a href="#tdhk55fhl8bk" id="tdhk55fhl8bk"></a>

サイトに変更を加えた場合でも 1Password が常に機能するようにするには、次の追加ガイドラインに従ってください。

* オーバーレイの代わりにplaceholderフィールドの属性を使用します。
* 生Createされたフィールド名と ID を使用しないでください。
* DOM からフィールドを動的に追加したり削除したりしないでください。フィールドを再利用し、必要のないときは非表示にします。
* フィールドに適切なautocomplete属性を使用します。これらの属性により、1Password がフィールドを識別しやすくなります。[使用可能な属性のリストを参照してください。](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)例えばワンタイムパスワードを入力できるフィールドにautocomplete="one-time-code"を追加します。

### **ヘルプを受ける** <a href="#vwamd2whm6ec" id="vwamd2whm6ec"></a>

必ず[最新の 1Password ベータ リリース](https://support.1password.com/betas/)でテストしてください。

上記のガイドラインに従っても問題が解決しない場合は、[1Password サポート コミュニティーからサポートを受けてください](https://1password.community/categories/saving-and-filling-logins)。