Mockup

[ˈmɑːkˌʌp] モックアップ

1. 完成品と同じ大きさ・外観で作られた、機能のないモデル。

製品やデザインの最終的な見た目を、機能は持たずに確認するための模型や図を指します。特にデザインや開発の初期段階で、関係者間の共通認識を作るために用いられます。

They created a mockup of the new phone. (彼らは新しい電話のモックアップを作った。)

• They: 「彼ら」や「それら」など複数の人や物を指します。
• created: 「作った」「創造した」という意味です。createの過去形です。
• a: 単数名詞の前につく不定冠詞で、「一つの」といった意味合いです。
• mockup: 「モックアップ」「試作品」という意味です。
• of: 「～の」「～に関する」といった前置詞です。
• the: 特定のものを指す定冠詞です。
• new: 「新しい」という意味の形容詞です。
• phone: 「電話」「スマートフォン」という意味です。

The designer showed us the website mockup for approval. (デザイナーは承認を得るためにウェブサイトのモックアップを私たちに見せた。)

• The: 特定のものを指す定冠詞です。
• designer: 「デザイナー」「設計者」という意味です。
• showed: 「見せた」という意味です。showの過去形です。
• us: 「私たちに」「私たちを」という意味です。weの目的格です。
• the: 特定のものを指す定冠詞です。
• website: 「ウェブサイト」という意味です。
• mockup: 「モックアップ」「試作品」という意味です。
• for: 「～のために」「～に関して」といった前置詞です。
• approval.: 「承認」「承諾」という意味です。

A mockup is essential for visualizing the final product. (最終製品を視覚化するためにモックアップは不可欠だ。)

• A: 単数名詞の前につく不定冠詞で、「一つの」といった意味合いです。
• mockup: 「モックアップ」「試作品」という意味です。
• is: 「～である」という意味のbe動詞です。単数・現在の主語に対して使われます。
• essential: 「不可欠な」「非常に重要な」という意味の形容詞です。
• for: 「～のために」「～にとって」といった前置詞です。
• visualizing: 「視覚化すること」「イメージすること」という意味です。visualizeのing形です。
• the: 特定のものを指す定冠詞です。
• final: 「最終的な」「最後の」という意味の形容詞です。
• product.: 「製品」「商品」という意味です。

2. ソフトウェアやウェブサイトのUI（ユーザーインターフェース）の静的な視覚表現。

ソフトウェアやウェブサイトの画面レイアウトやデザインを、実際にコーディングする前に静的な画像や図として表現したものを指します。ユーザーフローや要素配置の確認に使われます。

We need to create a mockup of the new feature UI. (新しい機能のUIモックアップを作成する必要がある。)

• We: 「私たち」という意味です。
• need: 「～が必要である」という意味です。
• to: 不定詞を作るtoで、ここでは「～するために」という意味合いです。
• create: 「作る」「創造する」という意味です。
• a: 単数名詞の前につく不定冠詞で、「一つの」といった意味合いです。
• mockup: 「モックアップ」「静的なデザイン案」という意味です。
• of: 「～の」という意味の前置詞です。
• the: 特定のものを指す定冠詞です。
• new: 「新しい」という意味の形容詞です。
• feature: 「機能」「特徴」という意味です。
• UI.: 「ユーザーインターフェース」の略です。

The client approved the login page mockup. (クライアントはログインページのモックアップを承認した。)

• The: 特定のものを指す定冠詞です。
• client: 「クライアント」「顧客」という意味です。
• approved: 「承認した」という意味です。approveの過去形です。
• the: 特定のものを指す定冠詞です。
• login: 「ログイン」という意味です。ここでは名詞的に使われています。
• page: 「ページ」という意味です。
• mockup.: 「モックアップ」「デザイン案」という意味です。

Using a mockup tool can speed up the design process. (モックアップツールを使うことでデザインプロセスを早めることができる。)

• Using: 「使うこと」「使用すること」という意味です。useのing形です。
• a: 単数名詞の前につく不定冠詞で、「一つの」といった意味合いです。
• mockup: 「モックアップ」「デザイン案」という意味です。
• tool: 「ツール」「道具」という意味です。
• can: 「～できる」という能力や可能性を表す助動詞です。
• speed: 「スピードアップする」「加速する」という意味です。
• up: 句動詞の一部で、「～を向上させる」「完了させる」といった意味合いを加えます。
• the: 特定のものを指す定冠詞です。
• design: 「デザイン」「設計」という意味です。
• process.: 「プロセス」「過程」という意味です。

関連

• prototype
• wireframe
• model
• design
• layout
• render