モックアップの作り方はどんな流れ?作成例やおすすめツールを紹介

モックアップとは本来模型を意味する言葉ですが、Webサイトやアプリを開発する際にも完成イメージの確認をするためにモックアップが使われます。モックアップの概要や作り方、モックアップ作成に便利なおすすめツールを紹介します。

【2022年最新】 Offersで人気の副業・業務委託案件・求人!
  • 【1位】【リモート/自社サービス】上流から一気通貫で携わりたいデザイナー
    様々なユーザーが使いやすいデザイン・ユーザー体験の設計、業務委託からスタートOK
  • 【2位】HRTechの業務特性をベースにUX領域から事業を加速させるデザイナー
    時給3,500円~8,000円!働く人のキャリア形成とwell-beingを実現
  • 【3位】大手顧客案件で新しい技術にチャレンジしたいデザイナー(Figma)
    Asana、miro、Figmaを利用したスクラム開発となり、協力していただけるデザイナーを募集
  • 今すぐ副業求人・案件を探す!

    モックアップとは

    モックアップとは模型を意味する言葉です。Webサイトやアプリのデザインにも使われるモックアップの概要について解説します。

    模型やプロダクトデザインの試作

    モックアップとは模型やプロダクトデザインの試作を指します。Webサイトやアプリデザインで使われるモックアップは、完成形に近いデザインやコンテンツを確認するために使われます。

    ただし、モックアップはデザインやコンテンツの完成イメージを確認するためのものなので、画面の遷移やプログラムが動作することはありません。動作するものはプロトタイプと呼びます。

    モックアップはなぜ必要か

    前述のとおり、モックアップはWebサイトやアプリの完成イメージを確認するためものものです。

    Webサイトやアプリを本格的に作り込む前に、一度立ち止まってイメージを形にすることで、全体のデザインやバランスを確認したり、気づかなかった問題を洗い出したりできます。

    本格的な開発に入ってからの手戻りはコストや納期に影響するので、モックアップを作ることは必要な工程だと言えます。

    モックアップの作り方例

    モックアップはAdobeのイラストレーターやフォトショップを使えば簡単に作成することができます。フォトショップを例に、具体的な作り方を紹介しますので参考にしてください。

    イラストレーターでの作成など素材準備

    まずはモックアップに必要な素材を集めます。素材はAdobe StockやAdobe Creative Cloud マーケットから入手することが可能です。

    例えばスマートフォンアプリのモックアップを作るのであれば、フォトショップからAdobe Stock検索し、スマートフォンの外観画像を選びます。

    次に、スマートフォンの画面にはめ込むアプリの画像を準備します。アプリの特徴が分かりやすい画像を選ぶのがポイントです。また必要に応じて、イラストレーターで素材を作成します。

    ストック写真、ロイヤリティフリーの画像、グラフィック、ベクターおよびビデオ | Adobe Stock

    Adobe Creative Cloud

    画像のはめ込みと調整

    それぞれの画像が準備できたら、実際にはめ込みを行います。フォトショップでスマートフォンの外観画像を開き、次にはめ込み用のアプリ画像を配置します。

    アプリ画像はスマートフォンの画面の大きさに合わせて縮小し、角度を調整してスマートフォンの画面にぴったりと重なるようにします。

    さらに、レイヤーをかけることでスマートフォンとアプリ画面の境目に立体感を出すと、自然な感じに仕上がります。

    おすすめモックアップ作成ツール

    モックアップはフォトショップやイラストレーターを使わなくても作ることができます。さまざまなモックアップ作成ツールがありますが、その中からおすすめのツールを紹介します。

    Webブラウザ利用で共有可能なInVision

    『InVision』はWebブラウザ上で動作するモックアップ作成ツールです。TwitterやEvernoteといった海外の有名企業でも使用されており、信頼性は高いと言えるでしょう。

    作ったモックアップファイルは共有することができるほか、ログやコメントを残すことができるので、チームでの開発作業に向いているツールです。

    無料版と有料版(月額15ドル~)がありますが、無料版は1個のモックアップしか作れないため、本格的に使うのであれば有料版が必要です。

    InVision | Digital product design, workflow & collaboration

    iPhoneアプリならAppCooker

    『AppCooker』はiPhoneやiPadなどのiOSアプリのモックアップが作成できるツールです。

    モックアップ作成だけでなく、画面遷移や売上予測など多彩な機能を備えているので、幅広く活用することができます。

    有料アプリですが、公式サイトの動画で使用イメージをチェックすることができます。iOSアプリを作るのであれば、そろえておいて損はないでしょう。

    HTML自動生成のBootstrap Studio

    『Bootstrap Studio』はWindows、MacOS、Linuxで動作するツールです。

    CSSフレームワークである『Bootstrap』からモックアップを作ることができるほか、作ったモックアップのHTMLとCSS、JavaScriptが自動生成されるのが特徴です。

    ドラッグ&ドロップだけでかなりの部分を作成できるため、コーディングをほぼ必要としません。また、編集した結果はリアルタイムで確認できるため、効率的に作業を行うことができます。

    有料で英語版のみですが、Bootstrapを使っているのであれば購入を検討する価値は十分ありそうです。

    Bootstrap Studio - The Revolutionary Web Design Tool

    名刺モックアップならBusinesscardstar

    『Businesscardstar』は名刺作成に特化したツールです。Webブラウザ上で動作し、名刺だけでなくポストカードを作ることもできます。

    あらかじめ用意されたテンプレートから好みのものを選び、名刺デザインを作ります。作った名刺データはモックアップとしてだけでなく、名刺用紙に印刷して使うこともできます。

    Business Card Star - It's easy to make your own business cards online - Try it for free.

    まとめ

    モックアップはWebサイトやアプリのデザインを効率よく開発するために欠かせないものです。モックアップを作ることは、開発の方向性を再確認すると同時に、潜在的な課題を見つけるきっかけになります。

    本格的な開発作業に入る前に必ずモックアップを作るようにしましょう。

    Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

    いくつもの転職媒体を使って、企業を探し回るのはもう終わり。「副業」から始まる新しい働き方を実現します!

    本業では経験できない、新しい環境/開発スタイルを経験しよう!



    この記事をシェア

    関連記事


    副業・フリーランス

    プログラミング

    インタビュー

    医療・介護系SaaSの開発組織をOffersで構築へ!エピグノが実践する業務委託の採用手法とは?

    医療・介護機関向け人材マネジメント領域において、「エピタルHR」「エピタク」「エピオペ」という3プロダクトを展開する株式会社エピグノ。2021年に資金調達を行い、同領域におけるデジタルトランスフ...

    3回の面談を経てTech Leadを採用!タレントプールとしてOffersを活用するサイカの採用術

    データサイエンスを駆使したマーケティングソリューションを提供するサイカ。2020年に「モノづくりビジョン」を定義し、時代や社会にインパクトを与えるプロダクトを生み出すべく、開発組織の構築を進めて...

    MLエンジニアを2名採用。1年間ずっと出会えなかった層にOffersですぐ出会えました

    SO Technologiesは広告会社支援SaaS「ATOM」や店舗集客支援サービス「ライクル」、ネット広告仕入・提案・ 運用支援サービス「AG Boost」、Webマーケティングのノウハウメ...

    『実践TypeScript』の著者・吉井健文が考えるTypeScriptの魅力と可能性

    世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことをマニ...

    デザイン

    お金

    採用・組織