1. Webサイトモックアップジェネレーター
Webサイトモックアップを作成

無料でWebサイトモックアップを作成

簡単に作成してカスタマイズ

画像をアップロード

プロフェッショナルなデザインとフォーマット

ダウンロードや共有が簡単


魅力的なWebサイトモックアップで、あなたのWebサイトデザインをリアルに提示してみよう! 好きなモックアップを選んでデザインを微調整し、顧客、投資家、利害関係者に発表することができます。 Canvaの無料Webサイトモックアップまたはスマホモックアップ(新しいタブまたはウィンドウで開く)を使えば、数クリックであなたのアイデアを視覚的に伝えることができます。

Webサイトモックアップを作成

デザインに命を吹き込むWebサイトモックアップ

無料のWebサイトモックアップなら、クリックして数秒で完成します。 CanvaのWebサイトモックアップ作成機能を使えば、Webサイトの最終的なルックを即座に洗練させ、確認することができます。 Canvaは様々なスクリーンやデバイスでデザインを表現しやすくするので、リアルなWebサイトモックアップを簡単に作成できます。

Webサイトモックアップの厳選されたコレクションを、デザインプロセスの各段階でお役立てください。 最終製品を磨き上げ、あなたのデザイン・ポートフォリオに加えましょう。Webサイトモックアップなら、アイデアやコンセプトを生きた作品に変えるのを実現します。

Webサイトモックアップの作り方

リストの先頭:Webサイトモックアップの作り方

Canvaを起動する

Canvaを起動します。

Webサイトモックアップのテンプレートを選ぶ

Webサイトモックアップテンプレートのコレクションをご覧ください。 幅広い画面サイズとデバイスからお選びいただけます。テンプレートを選択してクリックします。

Webサイトのデザインをアップロードする

選択をクリックして、テンプレート上にWebサイトのデザインをアップロードします。 また、Canvaにアップロード済みの画像やデザインから選ぶことも可能です。

Webサイトのモックアップを微調整する

Webサイトモックアップのプレビューが表示されたら、画像の調整をクリックして画像の位置を調整することができます。サイズ、配置、向きの微調整が終わったら、「保存」をクリックします。

ダウンロードまたはデザインに使用する

Webサイトモックアップを高解像度のPNGファイルとして保存する場合はダウンロードをクリックします。モックアップを別のCanvaのデザインに使用することもできます。
リストの最後:Webサイトモックアップの作り方
Webサイトモックアップを作成!

Canvaを起動します。

Webサイトモックアップテンプレートのコレクションをご覧ください。 幅広い画面サイズとデバイスからお選びいただけます。テンプレートを選択してクリックします。

選択をクリックして、テンプレート上にWebサイトのデザインをアップロードします。 また、Canvaにアップロード済みの画像やデザインから選ぶことも可能です。

Webサイトモックアップのプレビューが表示されたら、画像の調整をクリックして画像の位置を調整することができます。サイズ、配置、向きの微調整が終わったら、「保存」をクリックします。

Webサイトモックアップを高解像度のPNGファイルとして保存する場合はダウンロードをクリックします。モックアップを別のCanvaのデザインに使用することもできます。
Webサイトモックアップを作成!

一連のWebサイトモックアップでレスポンシブ対応

さまざまなスクリーン、デバイス、設定でWebサイトがどのように見えるかを開発前に確認できます。 CanvaのWebサイトモックアップを活用して、あなたのウェブデザインを魅力的に表現しましょう。 豊富なテンプレートから、お好きなものをお選びください。 スマートフォンやタブレット、ノートパソコンやデスクトップ画面まで、Webサイトモックアップを無料で素早く作成できます。

さらに、異なる背景、設定、および角度に対応しています。 あなたのビジョンに沿ってWebサイトデザインに視覚的な魅力を与えるものをお選びください。 Canvaを使えば、オーディエンスに感動を与え、デザインの承認を促す本物そっくりのWebサイトモックアップを作成できます。マルチデバイス対応のWebサイトモックアップを最大限に活用しましょう。

Webサイトモックアップを好きなように微調整する

Webサイトモックアップを制作する際、テンプレートにデザインを載せるだけでなく、それ以上のことができるツールが欲しいはずです。 Canvaの無料Webサイトモックアップツールを使えば、あなたの仕様に合わせてWebサイトモックアップを調整することができます。 Webサイトのデザインを画面いっぱいにする、あるいは画面サイズに合わせるかのいずれかを選択できます。 配置を調整したり、デザインを縦や横に反転させて向きを変えたりできます。 Canvaアカウントに作品を保存しておけば、外出先からアクセスして編集することができます。

魅力的なWebサイトモックアップで聴衆を感動させる

プロフェッショナルかつ魅力的なプレゼンテーションには、Webサイトモックアップが便利になるでしょう。デザインを視覚化し、クライアントに好印象を与え、新規顧客を獲得しやすくする効果的な素材です。 初心者でもベテランのデザイナーでも簡単に使いやすいUIですばやくモックアップを作成し、デザインに追加することができます。新しいウェブサイト(新しいタブまたはウィンドウで開く) を立ち上げる際の宣伝材料として使うこともできます!

さらに、あなたのデザイン・ポートフォリオ(新しいタブまたはウィンドウで開く)にWebサイトモックアップを追加してください。 スクリーンショットやリンクの代わりにモックアップを使うことで、デザインやコンポーネントは見やすくなります。あなたの素晴らしい作品をアピールするために、ぜひお役立てください。

よくある質問

Webサイトのモックアップは、WebページやWebサイトが画面やデバイス上でどのように見えるかを示すプロトタイプのようなものです。 ウェブサイトのレイアウトと構造を見ることができ、ヘッダー、ナビゲーションメニュー、テキスト、ボタン、画像などのデザイン要素がウェブサイト上のどこに表示されるかを示します。

CanvaのWebサイトモックアップテンプレートのギャラリーからお選びいただき、ページに追加します。次に、Webサイトデザイン・画像をアップロードしてください。 モックアップにドラッグアンドドロップをして、左メニューで調整すれば完成!

Webモックアップは、Webデザインのプロセスに欠かせないものです。 最終製品がどのように見えるかを視覚的に伝え、フィードバックに基づいて改善することができます。 加えて、デザインや機能性の初期的な問題を簡単にキャッチし、対処することができます。 デザインしたものや製品をアピールする上でも役立つ宣伝ツールになります。
引用符
自分では思いつかないようなレイアウトや色使いに毎回Wow!となります。自分で作るとワンパターンになりがちですがCanvaのデザインサジェスチョンからアイデアを得るとより楽しいものが作ることができます。

高木 和子

モックアップ関連コンテンツ


その他のデザイン・機能