• 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』からモックアップを作ることができるほか、作ったモックアップのHTMLCSSJavaScriptが自動生成されるのが特徴です。

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

有料で英語版のみですが、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」は、時代の変化や環境にあわせてスキルを磨きたい、そんな人にぴったりのサービスです。

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

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



この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

シニアレベルを2名採用!現場の負荷を軽減した採用活動、その打ち手がOffersだった

700万ダウンロードを突破し、コスメの口コミアプリとして急成長を続ける「LIPS」。これまで正社員や業務委託問わず、各専門性をもったエンジニアが集うことでグロースを続けてきた。そんな同社のハイス...

インフラとフロントエンドの3名を採用! Hotspringが考える採用方針と旅行サービスの未来とは

旅行予約サービス『こころから』を運営するHotspringは、今後の旅行業界の変化を見据えたプロダクト開発を推進している。これまでリファラルやTwitter採用を行ってきた同社が、なぜOffer...

フロントエンジニアの採用に成功!複業採用の秘訣はコンシェルジュの伴走と、独特な1on1にあった

AIチャットボット市場で圧倒的なシェアを誇る「HiTTO(ヒット)」を展開するHiTTO株式会社。今後さらなる顧客満足の向上に向けて、自社プロダクトの強化を加速していく。そこで重要になるのが開発...

専任CSメンバーがサポート。わずか1ヶ月半で、採用難易度の高いリードクラス2名の採用に成功!

女性限定コミュニティに注力する株式会社SHEでは女性の「自分らしい生き方」の実現を目指し、クリエイティブスクール「SHElikes」に加え、美容領域「SHEbeauty」や金融領域「SHEmon...

デザイン

お金

採用・組織

グルメ