独自のユーザーインターフェイスを作成するためのUIモックアップテンプレート

公開: 2016-07-14

UIモックアップは、WebサイトまたはWeb/モバイルアプリケーションのデザインの現実的な表現または視覚的なドラフトです。 UIモックアップは、配色、画像、ロゴ、タイポグラフィ、ボタンなど、アプリまたはサイトのデザイン要素を反映しているため、アプリのインターフェイスの最終的な外観を表します。

以下は、CreatelyのUIモックアップツールを使用して専門的に作成された便利なUIモックアップテンプレートです。 それらを使用して、設計しているWebサイトおよびモバイル/Webサイトアプリケーションのユーザーインターフェイスを説明できます。 テンプレートをクリックするだけで、テンプレートとして使用するか、オンラインで編集できます。

  • サインインページのUIモックアップテンプレート
  • WebストアのUIモックアップテンプレート-ショッピングカート
  • WebページのUIモックアップテンプレート
  • Apple電子メールクライアントのUIモックアップテンプレート–作成画面
  • ブログのUIモックアップテンプレート
  • ウェブサイトお問い合わせフォームのUIモックアップテンプレート
  • TwitterページのUIモックアップテンプレート
  • ソフトウェアインストールウィザードのUIモックアップテンプレート
  • FacebookページのUIモックアップテンプレート
  • 給与システムのUIモックアップテンプレート

サインインページのUIモックアップテンプレート

このテンプレートは、基本的なメンバーログインのモックアップです。 メンバーのログイン情報を入力するための2つのフィールドと、まだメンバーでない人のためのサインアップボタンが含まれています。 さらに、ログインパスワードを忘れた方のためのオプションもあります。 画像をクリックするだけで、必要な変更を加えるか、これをテンプレートとして使用できます。

サインインページのUIモックアップテンプレート

オンラインで編集するには画像をクリックしてください

WebストアのUIモックアップテンプレート-ショッピングカート

このテンプレートは、WebストアまたはeコマースWebサイトのUIモックアップ、より具体的にはメンズセクションの下のシャツカテゴリページを示しています。 このテンプレートをインスピレーションとして使用して、新しいeコマースWebサイトのUIモックアップを作成できます。 画像をクリックして、ご自身のオンラインストアの要件に合うように詳細を変更してください。

WebストアのUIモックアップテンプレート-ショッピングカート

オンラインで編集するには画像をクリックしてください

WebページのUIモックアップテンプレート

次のテンプレートは、Webサイトページ（Webサイトのホームページ）のUIモックアップを表しています。 これは、ヘッダー（タブが表示される場所）、サブヘッダー（ヘッダー画像を表示できる場所）、およびフッター（他のランディングページへのリンクを表示できる場所）を備えたシンプルなタブスタイルのWebサイトです。

ヘッダーとフッターの間に、ユーザーフレンドリーな方法で詳細が表示されます。 アプリで利用可能な他のWebUIコントロールを使用して、ニーズに合わせてテンプレートを編集できます。 画像をクリックして、オンラインで変更を開始するだけです。

WebページのUIモックアップテンプレート

オンラインで編集するには画像をクリックしてください

Apple電子メールクライアントのUIモックアップテンプレート–作成画面

これは、Apple電子メールクライアントのコンポーザー画面のUIモックアップテンプレートです。 OSXアプリケーションの設計に必要なOSXコントロールは、アプリ内で利用できます。 画像をクリックしてテンプレートとして使用するか、必要に応じて変更してください。

iPhoneアプリケーションも設計している場合に役立つ、 iPhoneUIモックアップテンプレートをいくつか紹介します。

Apple電子メールクライアントのモックアップテンプレート-作成画面

オンラインで編集するには画像をクリックしてください

ブログのUIモックアップテンプレート

これは、ブログページのUIモックアップテンプレートです。 アプリでブログページのUIモックアップをデザインするために必要な、ソーシャル共有ボタン、ブログ投稿、パンくずリンク、メニューなど、より多くのUIコントロールを見つけることができます。 画像をクリックして、ブログデザインの要件に従ってテンプレートを編集します。

ブログのUIモックアップテンプレート

オンラインで編集するには画像をクリックしてください

ウェブサイトお問い合わせフォームのUIモックアップテンプレート

以下のUIモックアップテンプレートは、Webサイトの連絡フォームです。 右側には、住所、メールアドレス、連絡先番号などの重要な連絡先情報が追加されています。 これらの詳細の下には、お店の場所を示す地図があります。 ページの左側には、訪問者が予約に使用できるお問い合わせフォームがあります。 画像をクリックして、必要に応じてこのテンプレートを編集してください。

ウェブサイトお問い合わせフォームのUIモックアップテンプレート

オンラインで編集するには画像をクリックしてください

TwitterページのUIモックアップテンプレート

次のUIモックアップテンプレートは、Twitterページ（個人またはビジネスアカウント用）を示しています。 Createlyは、Twitterなどの商用アプリケーションのUIモックアップを作成するために必要なすべてのアイコンを提供します。 画像をクリックするだけでテンプレートとして使用でき、独自のデザインアイデアに従って変更できます。

TwitterページのUIモックアップテンプレート

オンラインで編集するには画像をクリックしてください

ソフトウェアインストールウィザードのUIモックアップテンプレート

次のテンプレートは、ソフトウェアインストールウィザードのUIモックアップを表しています。 ソフトウェアのインストールに一般的に使用されるウィザードは、ソフトウェアのインストールプロセスの手順を説明します。 このテンプレートはそのようなステップの1つを示しており、次のステップのUIモックアップテンプレートがリンクされて、リアルタイムシナリオをシミュレートします（[次へ]ボタンをクリックして次のテンプレートにアクセスします）。 画像をクリックして、必要に応じて変更します。

ソフトウェアインストールウィザードのUIモックアップテンプレート

オンラインで編集するには画像をクリックしてください

FacebookページのUIモックアップテンプレート

これは、FacebookページのUIモックアップテンプレートです。 Facebookなどのソーシャルメディアアプリケーションの設計プロセスでは、アプリを使用して、このようなUIモックアップテンプレートをすばやく設計できます。 画像をクリックしてテンプレートとして使用するか、必要に応じて調整してください。

Createlyで利用可能なUIモックアップテンプレートの1つ

オンラインで編集するには画像をクリックしてください

給与システムのUIモックアップテンプレート

以下のUIモックアップテンプレートは、Windowsオペレーティングシステム用の給与システムのものです。 テンプレートには、給与の計算、残業などの機能が表示されます。 アプリで使用可能なアイコンを使用して、テンプレートを編集し、システムに機能を追加できます。 画像をクリックして編集を開始します。

Createlyで利用可能なUIモックアップテンプレートの1つ

オンラインで編集するには画像をクリックしてください

その他のUIモックアップテンプレート

Createlyの使いやすいUIモックアップツールと専門的に設計されたUIモックアップテンプレートは、独自のWebサイトデザインまたはアプリケーションデザインをすぐに開始するのに役立ちます。 ちょっとしたインスピレーションや助けを探しているなら、私たちのコミュニティをチェックして、ユーザーから提供されたユニークなアイデアも探してください。

その他のダイアグラム作成テンプレート

  • ユースケース図テンプレート
  • フィッシュボーン図テンプレート
  • マインドマップテンプレート
  • ビジネスプロセスモデルテンプレート
  • ストーリーボードテンプレート
  • ネットワーク図テンプレート
  • ベン図テンプレート
  • KWLチャートテンプレート
  • 作業分解図テンプレート
  • SWOT分析テンプレート
  • クラス図テンプレート
  • ER図テンプレート
  • シーケンス図テンプレート
  • 組織図テンプレート
  • ガントチャートテンプレート
  • アクティビティ図テンプレート
  • 配置図テンプレート
  • AWSアーキテクチャダイアグラムテンプレート
  • ギャップ分析テンプレート