wireframing

/ˈwaɪərˌfreɪmɪŋ/ ワイヤーフレイミング

1. ウェブサイトやアプリケーションの基本的な構造とレイアウトを設計するプロセス。

ウェブサイトやアプリケーション開発の初期段階で、コンテンツの配置や機能、ユーザーインターフェースの基本的な構造を、視覚的要素を排除してシンプルに描画する作業を指します。これにより、レイアウトや情報設計を効率的に検討できます。

Wireframing is crucial for planning the layout of a new website. (新しいウェブサイトのレイアウトを計画するために、ワイヤーフレイミングは非常に重要です。)

• Wireframing: 「ワイヤーフレイミング」という、ウェブサイトやアプリの骨格設計プロセスのこと。
• is crucial: 「非常に重要である」という状態を表します。
• for planning: 「計画するために」という目的を示します。
• the layout: ウェブサイトやページの「配置」や「構成」を指します。
• of a new website: 「新しいウェブサイトの」という対象を示します。

Before coding, we spent a week on wireframing the user flow. (コーディングの前に、私たちはユーザーフローのワイヤーフレイミングに1週間を費やしました。)

• Before coding: 「コーディングをする前に」という時系列を示します。
• we spent: 「私たちは費やした」という行為を表します。
• a week: 「1週間」という期間を示します。
• on wireframing: 「ワイヤーフレイミングに」という対象や活動を示します。
• the user flow: 「ユーザーフロー」つまりユーザーがサービス内で取る一連の行動の流れを指します。

Low-fidelity wireframing allows for quick iterations and feedback. (ローフィデリティのワイヤーフレイミングは、迅速な反復とフィードバックを可能にします。)

• Low-fidelity: 「詳細度が低い」という意味で、初期段階の簡素な表現を指します。
• wireframing: ウェブサイトやアプリの骨格設計プロセスのこと。
• allows for: 「〜を可能にする」という意味です。
• quick iterations: 「迅速な反復」つまり、素早い修正や改善のサイクルを指します。
• and feedback: 「そしてフィードバック」つまり、意見や評価を指します。

関連

• UX design
• UI design
• prototyping
• mockup
• low-fidelity
• user interface
• user experience
• blueprint
• layout