デザイン

公開日：2019-12-15 / 更新日：2019-12-15

Photoshop(PSDファイル)とSketchで使える無料レスポンシブモックアップ20選 Webデザインにすぐ活かせる

本記事は、20 Best Free Responsive Mockups for Inspiration in 2019 [PSD+Sketch]を
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

4,222 views

読了時間 : 約6分32秒

ウェブサイトのモックアップで最も良いタイプは何ですか？もちろん、レスポンシブモックアップでしょう！レスポンシブウェブサイトモックアップを作成する利点はいくつかあります。第一に、それはデザインのトレンドであるだけでなく、必要条件なのです。

グリッドシステムとフローレイアウトは、モダンデザインの標準となっています。その一方で、標準化と組み合わせ技術により、レスポンシブデザインは多くの個人や中小企業にとって優れたリソースとなります。

レスポンシブモックアップを採用する前に、レスポンシブデザインとは何かを理解する必要があります。ここでは、レスポンシブデザインとその利点と、その注意事項をご紹介します。

1. レスポンシブウェブデザインのガイドライン：その内容と使い方

2. レスポンシブデザインを学ぶ：はじめに12のレスポンシブウェブデザインのチュートリアルをご紹介します。

3. レスポンシブデザインの利点は何ですか？

・ユーザーはレスポンシブウェブページをよく知っています。

・プロトタイピングは迅速で簡単です。

・ウェブサイト構築技術は高度で標準化されています。

・レイアウトを迅速に構築してコストを削減できます。

・厳密なグリッドレイアウトはレスポンシブデザインにつながります。

・さまざまなデバイスでユーザーエクスペリエンスを向上させます。

標準化されていても、それが学習をあきらめるべきであるという意味ではありません。オンラインには優れたレスポンシブウェブデザインモックアップがたくさん紹介されています。これはインスピレーションを得るための20の無料レスポンシブモックアップのリストです。

１　セシスクリエイティブエージェンシー- レスポンシブウェブモックアップPSD

価格：無料

特徴

・ミニマリスト

・フレッシュカラーデザインとインタラクションデザイン

無料ダウンロード

これは、独立したエージェント、デザイナー、ブロガー、およびアーティストのコンポーネントを統合したレスポンシブPSDテンプレートです。1920pxスクリーン / 1170グリッドシステム/コンポーネントに基づいて、Wordpress、Joomla、WooCommerce、Magento、Drupalなどのさまざまなレスポンシブウェブサイトフレームワークを提供しています。

ページには、ホーム、会社情報、連絡先、エラー404、全画面メニュー、登録、ブログの一覧表示、単一のブログ、ポートフォリオ、単一のポートフォリオ、およびサービスを揃えていて、ユニークでモダンなデザインスタイル、そしてその非常に明確できれいなレイアウトが人気です。

2. MITV – 無料のレスポンシブウェブサイトPSDテンプレート

価格：無料

特徴

・Googleフォント

・太字

・オーバーレイデザイン

無料ダウンロード

MITVは、コンテンツマーケティング会社、映画、テレビ制作者向けにデザインされたパースペクティブウェブサイトのモックアップです。ダイナミックな動画とグラフィックは、ブランドマーケティングとコミュニケーション戦略において重要な役割を果たします。

このモックアップのユニークな点は、魅力的で大胆で明るい色、そして珍しいオーバーレイデザインです。7つのファイルはすべて完全に編集可能、階層化され、整理されています（画像は含まれません）。

3. Mimini – 無料スケッチレスポンシブモックアップテンプレート

価格：無料

特徴

・ミニマリスト

・クリーンインターフェース

・フレッシュカラーマッチング

・カードUIデザイン

無料ダウンロード

Miminiは、テクノロジー、創造性、ブランディング、マーケティング製品のために設計された無料のSketch ウェブサイトパースペクティブショーケースモックアップです。デザインは14項目が含まれています。

アートボードは無料でダウンロードでき、全て編集可能です。忠実度の高いプロトタイプとしても使用できます。プロトタイピングツールmockplus iDocallowでは、Sketchプラグインを使用してアートボードをiDocにインポートできます。ホットスポットのインタラクティブリンクを追加するだけで、クリック可能な高忠実度プロトタイプの作成が可能です。

4. Escape – 無料のレスポンシブEメール+テンプレートビルダー

価格：無料

特徴

・モジュールをドラッグアンドドロップ、コピー、または非表示にする

・インスタント編集

・完全レスポンシブ

・全幅デザイン

無料ダウンロード

Marbleは、Campaign Monitor、MailChimp、SendGrid、ExactTarget、Fresh Mail、Active Campaign、iContact、Genericなどのメールツール用にデザインされたレスポンシブデザインモックアップです。 Apple Mail、Outlook、Yahoo Mailなどの電子メールクライアントに適用できます。