命名規則
このページでは、プロジェクトの整理に役立つWebflowインタラクションの命名アプローチについて説明します。
要素 [アクション + 状態]
要素とは、インタラクションを適用するsection/div/buttonなどを指します。
アクションとは、インタラクションのことを指します。状況に応じて状態を追加します。
例：
- 要素 = Sort Button Arrow
- アクション =Rotate
- 状態 = Open
正式インタラクション名：
Sort Button Arrow [Rotate Open]
最大限の文脈を提供する
要素とアクションのフレーズは、このプロジェクトでのインタラクションの目的について可能な限りの文脈を提供すべきです。
インタラクションの名前を作成する際には、「このインタラクションは何か？」という質問に答えるような名前を選ぶべきです。
新しいデベロッパーがビルドに参加したときに、プロジェクトにおけるそのインタラクションの役割がわかるようにするべきです。そのインタラクションについて説明する強力なキーワードを使用してください。
単語数は最小限に抑える
単語数は常に最小限に保つことが理想です。できるだけ短いものを選ぶことがおすすめです。ただし、最小限の単語数であってもより多くの情報を提供できることが望ましいです。
理想的には、過去のDesignerのインタラクションUIパネルからはみ出さないことです。
名前がUIパネルから連続してはみ出る場合、インタラクションの命名が情報的すぎる可能性があります。
各単語の最初の文字に大文字を使用することで、インタラクション名の読みやすさを改善することもできます。
角括弧の使用
アクションと状態のキーワードを要素のキーワードから分離するために、アクションと状態の周りに角括弧を使用します。
これにより、インタラクション名の両部分が視覚的に分離されます。
例
普遍的な命名を使用した例
''ボタン''や''画像''のような普遍的な名前が使用されている場合、そのインタラクションがユニバーサルなインタラクションとして使用されていることを暗示しています。
ButtonArrow [Move In]
デフォルトのボタン矢印が移動します。「入」は移動アクションの状態です。
Button Arrow [Move Out]
主要なボタン効果の「出」状態は、矢印を元の位置に移動します。
Image [Show Scroll In]
ユーザーがセクションにスクロールすると、画像が表示されます。
Image [Hide Scroll Out]
ユーザーがセクションからスクロールアウトすると、画像が非表示になります。
Nav Menu [Open]
主要なnavメニューを開くインタラクション。
Nav Menu [Close]
主要なnavメニューを閉じるインタラクション。
具体的な命名を使用した例
具体的な命名を使用することで、特定の要素に対してユニークなインタラクションが何をしているのかを明確にすることができます。命名によって、インタラクションが特定のユースケースとして使用されていることを暗示します。
Home Hero Lottie [Show]
ホームヒーローセクションでLottieエクスプロージョンを表示、再生します。
Home Hero Lottie [Hide]
ホームヒーローセクションのLottieエクスプロージョンアニメーションを非表示にし、リセットします。
Jobs Item Modal [Open]
求人アイテムによってトリガーされる応募モーダルを開きます。
Jobs Item Modal [Close]
求人アイテムによってトリガーされる応募モーダルを閉じます。
Contact Form Input [Height Increase]
問い合わせフォームの入力の高さを増やします。
Contact Form Input [Height Decrease]
問い合わせフォームの入力の高さを減らします。
キーワード
アクションキーワード
インタラクションが実行されるときに何が起こるかを最もよく表すキーワードを使用してください。
インタラクションの目的についてできる限り多くの文脈を提供するために、最小限の単語を使用します。
よく使われるアクションキーワード
- Show
- Hide
- Move
- Rotate
- Scale
状態キーワード
インタラクションシーケンスの切り替え状態を伝えるために状態キーワードを追加します。
よく使われる状態キーワード
- In / Out
- Open / Close
- Increase / Decrease
- Expand / Collapse
アクションと状態の組み合わせ
[Action + state]の組み合わせを厳格に守る必要はありません。括弧内のキーワードについては柔軟に扱うことができます。
アクションと状態のキーワードが要素[Action + state]と一緒に使われることもあります。
要素 [Action + state]あるいは要素 [State]が、それぞれ単独で使われることもあります。
状態キーワードだけを使用する方がAction + Stateよりも優れている場合もあります。例えば「Jobs Item Modal [Open]」はその例です。
「表示」と「非表示」はアクションまたは状態（表示/非表示）として見ることができます。 例: 「Jobs Item Modal [Show]」
Action + Stateについてあまり時間をかけて考える必要はありません。わかりやすいものを選んで作業を続けます。
目標：アクションと状態のキーワードは括弧内で配置され、インタラクションの目的について最大限の文脈を提供するべきです。
トリガーキーワード
インタラクション名に更なる情報を追加する必要がある場合、トリガーを理解するのに役立つキーワードを使用できます。
トリガーキーワードの例
- Click
- Hover
- Mouse Move
- Scroll
- While Scrolling
- Load
トリガーキーワードは注意深く追加しなければなりません。
トリガーキーワードの任意追加
Webflowインタラクションの設定に基づいて考えると、インタラクション名にトリガーキーワードを追加することは厳密には不正確です。
Webflowのインタラクションでは、アクションステップにトリガーは含まれません。したがって、Webflowのインタラクションは異なるトリガーで実行することになります。
もしインタラクションの名前にトリガーを含めてしまうと、そのインタラクションは異なるトリガーから共有することができません。
例えば、インタラクションがメガメニューでナビゲーションコンポーネント内のドロップダウンナビアイテムを「開く」ために作られているとします。
- デスクトップでは、インタラクションは「ホバー」トリガーで実行されます。
- モバイルでは、インタラクションは「クリック」トリガーで実行されます。
- 同じインタラクションが両方のデバイスで使用されています。要素のトリガーは、デバイスによって異なります。
- これはトリガーがインタラクションに属していない分かりやすい例です。トリガーは別物として機能します。
- 「Nav Dropdown [Open Hover In]」という名前を使用することは、モバイルでは異なるトリガーがあるため不正確です。
- 「Nav Dropdown [Open]」という名前は、インタラクションの設定を正確に表しています。インタラクションはドロップダウンを開きます。これが設定の目的です。
トリガーキーワードの使用
トリガーキーワードを追加することがインタラクションの文脈を大幅に向上させる場合、キーワードを追加したいと思うかもしれません。
トリガーがインタラクション設定に含まれてなくても、トリガーが重要な文脈を提供するケースがあります。
Discount Modal [Delay On Load]
この名前には「delay（遅延）」と「load（ロード）」という単語を使用していますが、これはこのモーダルのアクションについて重要な情報を伝えています。このインタラクションの目的が「ロード時の遅延」である場合、これらのキーワードによって明確性が生まれます。
Blank Div [Open Modal With JS Click]
このDivブロックはJavaScriptからのクリックを待ち受けるWebflowインタラクションを開始するためのクリックトリガーとして使用されます。インタラクションはJavaScriptからのクリックを待ち受けて作成されます。JSのクリック後、Webflowのインタラクションが実行されます。この名前に「クリック」トリガーキーワードを追加することで、それを伝えるのに役立ちます。
レスポンシブキーワード
インタラクションが特定のブレークポイント、レスポンシブレベル、またはデバイスタイプ専用に作られた場合、そのキーワードをインタラクション名の末尾に追加することができます。
Nav Sidebar Slide [Show] [Mobile]
モバイルだけでナビゲーションサイドバーを表示する
Hero Scroll Trigger Div [In] [Tablet Mobile]
ナビゲーションサイドバーを表示する
Background Textures [Hover In] [Desktop]
これはデスクトップ専用で、タブレットとモバイルではオフになっている場合にのみデスクトップを指定する必要があります。
命名に迷ったら
命名について迷ったら、考えすぎないように気をつけましょう。とりあえず決定を下して、次に進むようにしてください。
要素、アクション、状態、またはトリガーに良い名前をつけることは必ずしも簡単ではありません。あまり考えすぎずに、とりあえず何かを選んで進むようにしてください。
命名について悩むことに時間を使うことはおすすめしません。命名を考えすぎて作業の流れを止めてしまうことも望ましくありません。
楽しくインタラクションを行なってくださいね。