モックアップ作成ツール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形式での書き出しに対応しています。(無料版は制限あり)
・他のユーザーへの共有機能があり、公開の範囲も特定の人にだけにするなどの設定が可能です。
Mockingbirdの使い方
まず、以下のリンクにアクセスします。
https://gomockingbird.com/home
Mockingbirdはアカウントを作成しなくてもすぐに始めることができます。(メールアドレス・パスワードなども必要ありません)
有料会員への変更を行う場合は、Mockingbirdの作業画面下メニュー「Account」からいつでも登録が可能です。
無料で使用する場合はPDFによる書き出しなどに制限がありますが、有料会員に登録することにより自由にエクスポートすることが可能になります。
ここでは無料版での作業を行いたいと思います。
「Try creating wireframes for free」のボタンをクリックします。
実際にMockingbirdで作業してみよう
Mockingbirdの作業画面が表示されます。
最初にサンプルとしていくつかの画像や文字が配置されています。
これらの要素はドラッグにより拡大・縮小や移動が可能です。
新しい素材を画面内に追加したい時は下メニューの「＋Add element」をクリックします。
使用できる素材の一覧が表示されます。閉じる時は右下の×をクリックします。
素材を画面内にドラッグすることで追加することができます。
新しく追加した素材も同様に拡大縮小・移動が可能です。
また、テキストエリアの素材をダブルクリックすると文字欄に自由に入力することができます。(日本語入力も可能です)
この時文字の大きさなども調整することができます。
デスクトップなどから画像ファイルを直接ドラッグ＆ドロップすることで画面内に好きな画像を追加することができます。
アップロードした画像も自由に大きさを変えたり移動させることが可能です。
各素材のカット・コピー・ペーストや動作の取り消し・やり直しなどは以下のメニューから選択することができます。また、ここで表記されているショートカットコマンドを入力することでも同様の処理を行うことが可能です。
右下の「Pages」を選択し、「＋New page」をクリックすると新しいページを追加することができます。
逆にページの削除を行いたい場合は以下の「×」をクリックします。
下メニューの「Preview」をクリックするとプレビューが表示されます。
また、以下のメニューからPDF、あるいはPNG形式でエクスポートすることが可能です。(エクスポートとは別にブラウザ上でのセーブは作業中に自動で行われています)
エクスポートはプレビュー表示時にも以下のメニューから行うことができます。
(※これらのエクスポート機能は7日間の無料体験版でも制限なく使用できますが、それ以降は有料のアカウント作成が必要になります)
下メニューの「Share」をクリックするとプロジェクトの共有に使用するリンクが表示されます。この時共有の範囲を選択することができます。
これによりプロジェクトに他の人がコメントできるように設定したり、逆に特定のユーザーにのみ公開したりすることが可能です。
以上、Mockingbirdについて説明しました。
Webサービスやサイトの企画ができて、実際にコーディングする前にモックアップを作っておくと共有も整理もできます。ぜひ利用してみましょう。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
