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

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

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

Offers」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。「副業・複業」で、本業では経験できない、新しい環境/デザイン組織を経験しよう!

→「Offers」をもっと詳しくみる! かんたん60秒で副業を始めてみる

モックアップとは

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

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

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

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

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

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

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

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

\新しい環境/デザイン組織を経験するなら「0ffers」!/

Offersの詳細はこちら

モックアップの作り方例

モックアップは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」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

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

本業では経験できない、新しい環境/デザイン組織を経験しよう!



この記事をシェア

関連記事


副業・フリーランス

プログラミング

デザイン

インタビュー

【Unity&バックエンド採用】Offersコンシェルジュを活用し、VPoE業務に集中できた恩恵とは

幼児や小学生の家庭学習の必要性が求められている今、企業や団体がICTを活用した学習コンテンツの開発に注目している。ファンタムスティックは子ども用の学習アプリやデジタル教育コンテンツの開発に強みを...

転職前提の複業オファーで、2ヶ月後に正社員へ!未来のCTOを採用した注目スタートアップの採用術

スニーカー市場は熱狂的なファンも多く、一次流通・二次流通ともに毎年拡大を続けている。そのような市場の中、スニダンことスニーカーダンク(SNKRDUNK)は市場の拡大を追い風に成長し続けてきたが、...

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

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

ヤフーが実践するギグワーク活用がこれからの新しい採用手法に!?リモート環境で求められる人材とはーこれからの「強い組織の作り方」CEOセッションー

新型コロナウイルスで、働き方改革やデジタル・トランスフォーメーションの流れが急激に加速し、採用・育成・マネジメントの状況は大きく変化しています。 株式会社overflow、株式会社zenkig...

お金

採用・組織

グルメ