XDで簡単にプロトタイプを作れる!おすすめの無料テンプレート15選2018年08月15日UX会員登録するホームページやECサイトなどを構築する際、全体のデザインや表示などを決めるためにプロトタイプを作成することがあります。プロトタイプの作成は主にUI/UXデザイナーが行いますが、ゼロから作るのは時間も体力も必要です。XDで使える、おすすめの無料テンプレート15選を紹介します。テンプレートを応用できる部分は有効活用することで、整ったデザインを少しでも短時間で作成することができますので、ぜひ参考にしてみましょう。XDとは、Adobe社が提供しているプロトタイピングツールです。UI/UXデザイナー向けのオールインワンツールで、日本語にも対応しています。スピード感と直感的な操作が特徴で、コーディングなどの知識のない方でも簡単にホームページやモバイルアプリのデザインとプロトタイプの作成が可能です。XDで使用できるテンプレートも数多くあります。好みのテンプレートを組み合わせて配置すれば、手軽にオリジナリティのあるプロトタイプを作成できます。10のUIを完全再現したテンプレートです。XDだけでなく、Photoshop、Illustrator、Sketchなどにも対応しています。XDGuru.com画像を中心としたランディングページのテンプレートです。企業の写真と企業理念やアピールしたい項目を付け加えるだけで一気に雰囲気のあるページに仕上げることができます。XDGuru.comログインページのテンプレートです。入力項目は3つで、メールアドレス、パスワード、規約への同意となっています。堅苦しさのないデザインですので、一般向けのサービスを展開している企業や個人の方におすすめです。XDGuru.comランディングページのテンプレートです。波状のデザインが目に入りやすく、インパクトのあるデザインとなっています。XDGuru.com値段の記載に特化したランディングページのテンプレートです。ベーシックなデザインで、どんなジャンルのホームページにも合わせやすい構成になっています。SupplyインスタグラムのようなSNSを模したテンプレートです。写真や動画を見やすく配置できるので、ファッション関連をはじめとしたビジュアルをメインにしたホームページにおすすめです。Supply曲線のデザインが独特なテンプレートです。ブルーを貴重とした爽やかなデザインで、かつ遊び心も感じられるので、企業のホームページとして使用してみてはいかがでしょうか。Behance食べ物の写真をアップロードすることに特化したSNSを想定したテンプレートです。写真や動画のほかレシピなどの情報を掲載でき、そのままレシピを保存することも可能です。ブログとしての使用もおすすめです。XDGuru.com時計を例にあげた商品ページのテンプレートです。モノトーンで洗練されたデザインとなっています。色を変更して自社のホームページの雰囲気に合わせた調整をすることもできます。Slomchinskiy8ポイントのグリッドを表示するテンプレートです。XDではスピードが重視されるため、グリッドが表示されません。グリッドをつけて作業したい方におすすめです。Dribbbleタブレット用のワイヤーフレームを2種類搭載したテンプレートです。縦と横の2パターンがありますので、各種ホームページに応用可能です。Medium豊富なパターンのワイヤーフレームを、白黒で提供しているテンプレートです。シンプルなデザインのワイヤーフレームで、高い汎用性がおすすめです。Behance青色のグラデーションで構成されたテンプレート&素材集です。600種類以上の素材が入っていますので、たくさんの素材を用意しておきたい方におすすめです。Behanceスマートフォン向けのワイヤーフレームがケース別にまとめられたテンプレート集です。用途ごとに整理されていますので、必要なものだけ選んで利用できます。Behanceスマートフォン向けのECサイト用のテンプレートです。16パターン用意されており、このテンプレートひとつでECサイトを開設することも可能です。XDはチュートリアルも配布されているため、初心者でも比較的取り組みやすいツールです。テンプレートは、初心者の方にとってデザインの参考にもなります。ベテランデザイナーの方はもちろんですが、UI/UXデザインやワイヤーフレーム制作を任されるようになったばかりのWebディレクターや、今後やってみたいと考えている方は、まずはテンプレートを使ってプロトタイプを1つ仕上げてみることからはじめましょう。ページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るアプリアプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るレイアウトレイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。OS、スマートフォンではiOSやAndroidが有名です。Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。Webマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。Webマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。page)とは、ユーザーが検索エンジンあるいは広告などから最初にアクセスしたページのことです。「LP」とも呼ばれています。Webマーケティングにおいては、商品を売るために作られた1枚で完結するWebページをランディングページと呼びます。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るタグタグとは、原義では「モノを分類するために付ける小さな札」のことです。英語の「tag」を意味するものであり、荷札、付箋といった意味を持っています。インターネットに関する用語としてのタグは、本文以外の情報を付与するときに用いられます。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るブログブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。詳しく見るタブレットタブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。詳しく見るページ印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。詳しく見るデザインUX会員登録するおすすめ記事ADCMS・Webサイト制作Webサイト制作でよくある失敗例5選。プロのディレクターが教える処方箋とはCMS・Webサイト制作ADカスタマーサポート・カスタマーサクセスあえて初仕事で「チャットボット導入」を。今年の新人をたくましく育てる「逆説の育成術」カスタマーサポート・カスタマーサクセスADSEO(検索エンジン最適化)顕在ニーズを引き寄せる。株式会社SoLabo「0→1」「1→10」がどちらも叶う。株式会社ベーシック【求人】サービス価値を高め市場を創造。ferret編集部卒業後は、沖縄にてフリーランサーとして子育てをしながらWeb関連業務のなんでも屋さんをしています。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。【2019年版】無料で使える画像編集ソフト・GIMP(ギンプ、ジンプ)の使い方ADWebサイト制作でよくある失敗例5選。PIECE』を超える異例の売上。人気記事をもれなくチェックSNSで話題!BtoBビジネスで勝てるマーティングのノウハウを1冊の資料にまとめました。