icon
icon

モックアップ作成ツールMockingbirdの使い方【初心者向け】

モックアップを作成するためのツール「Mockingbird」の使い方を解説しています。初心者の方でもわかるようにMockingbirdの登録から説明しているので、基本的な部分から習得することができるはずです。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

モックアップを作成するのに役立つMockingbirdの使い方について解説しています。Mockingbirdを初めて使うという人でも一連の動作の流れが分かるはずです。

他のツールと比較して便利な点も紹介しているので、ぜひ利用してみましょう。

他のモックアップツールも併せて紹介しています。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

Mockingbirdとは

Mockingbirdはブラウザ上で編集作業が可能なモックアップ作成ツールです。
テキストエリアや画像・ボタンなどを素材からドラッグで設置し、大きさや場所などを自由に変更することで簡単にモックアップを作ることができます。

 

Mockingbirdの便利な点

・Ctrl+zなどのショートカットキーに対応しているため、ブラウザ上であってもスムーズに作業できます。
・動画・地図・プロフィール写真・ページナビなど実際にサイトで使用するものをイメージした素材が多く実用的です。
・PDFやPNG形式での書き出しに対応しています。(無料版は制限あり)
・他のユーザーへの共有機能があり、公開の範囲も特定の人にだけにするなどの設定が可能です。

 

[PR] Webデザインで副業する方法とは

Mockingbirdの使い方

まず、以下のリンクにアクセスします。

https://gomockingbird.com/home

Mockingbirdはアカウントを作成しなくてもすぐに始めることができます。(メールアドレス・パスワードなども必要ありません)
有料会員への変更を行う場合は、Mockingbirdの作業画面下メニュー「Account」からいつでも登録が可能です。
無料で使用する場合はPDFによる書き出しなどに制限がありますが、有料会員に登録することにより自由にエクスポートすることが可能になります。

ここでは無料版での作業を行いたいと思います。
「Try creating wireframes for free」のボタンをクリックします。

mob_p_1

 

 

実際にMockingbirdで作業してみよう

Mockingbirdの作業画面が表示されます。
最初にサンプルとしていくつかの画像や文字が配置されています。

mob_p_2

 

これらの要素はドラッグにより拡大・縮小や移動が可能です。

mob_p_3

 

新しい素材を画面内に追加したい時は下メニューの「+Add element」をクリックします。

mob_p_4

 

使用できる素材の一覧が表示されます。閉じる時は右下の×をクリックします。

mob_p_5

 

素材を画面内にドラッグすることで追加することができます。

mob_p_6

 

新しく追加した素材も同様に拡大縮小・移動が可能です。

mob_p_7

 

また、テキストエリアの素材をダブルクリックすると文字欄に自由に入力することができます。(日本語入力も可能です)
この時文字の大きさなども調整することができます。

mob_p_8

 

デスクトップなどから画像ファイルを直接ドラッグ&ドロップすることで画面内に好きな画像を追加することができます。

mob_p_9

 

アップロードした画像も自由に大きさを変えたり移動させることが可能です。

mob_p_10

mob_p_11

 

 

各素材のカット・コピー・ペーストや動作の取り消し・やり直しなどは以下のメニューから選択することができます。また、ここで表記されているショートカットコマンドを入力することでも同様の処理を行うことが可能です。

mob_p_12

 

右下の「Pages」を選択し、「+New page」をクリックすると新しいページを追加することができます。

mob_p_13

 

逆にページの削除を行いたい場合は以下の「×」をクリックします。

mob_p_14

 

下メニューの「Preview」をクリックするとプレビューが表示されます。

mob_p_15

 

また、以下のメニューからPDF、あるいはPNG形式でエクスポートすることが可能です。(エクスポートとは別にブラウザ上でのセーブは作業中に自動で行われています)

mob_p_16

 

エクスポートはプレビュー表示時にも以下のメニューから行うことができます。
(※これらのエクスポート機能は7日間の無料体験版でも制限なく使用できますが、それ以降は有料のアカウント作成が必要になります)

mob_p_17

 

下メニューの「Share」をクリックするとプロジェクトの共有に使用するリンクが表示されます。この時共有の範囲を選択することができます。
これによりプロジェクトに他の人がコメントできるように設定したり、逆に特定のユーザーにのみ公開したりすることが可能です。

 

mob_p_18

 

以上、Mockingbirdについて説明しました。

Webサービスやサイトの企画ができて、実際にコーディングする前にモックアップを作っておくと共有も整理もできます。ぜひ利用してみましょう。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。