11Diviで構築されたSAASWebサイトの例

公開: 2017-05-01

SAAS（Software as a Service）は人気のあるビジネスモデルであり、イメージできるように、SAASシステムには、潜在的なクライアントにサービスを説明およびデモンストレーションするためのWebサイトが必要です。幸い、Diviで構築されたSAASWebサイトはたくさんあります。この記事では、Diviで構築されたSAAS Webサイトの11の例を見て、次のSAASプロジェクトに刺激を与えます。

これらのサイトは、レイアウト、色、画像、製品の説明、埋め込みビデオ、ケーススタディ、CTA（召喚状）、ナビゲーションなどのインスピレーションに役立ちます。ほとんどは価格表付きのパンフレットです。多くはチャットや他の通信システムが含まれています。ウェブサイトは順不同です。

1.インボイスセントラル

Invoice Centralは、タグラインとCTAを含む全幅の画像と、サービスが紹介されているメディアのロゴを含むセクションを表示します。画像をクリックすると、埋め込まれたVimeoビデオが開きます。トップメニューには、チャットボタンとサインイン/サインアップボタンが含まれています。次のセクションでは、セクションが重複している機能を示します。 [はじめに]セクションには、アイコンを使用したプロセスが表示されます。スクロールするティッカーには、クライアントのロゴが表示されます。紹介文のスライダーには、ズームアニメーション付きの紹介文が表示され、その後にCTAとリンク付きのフッターが表示されます。このサイトは、グラフィックと色を使用した優れた例です。

2.ビジュアルプランニング

Visual Planningには、フルスクリーンの投稿スライダー、さまざまなSAASオプションへのリンクを含むフラットデザインの画像を含むセクション、ニュースレターのサインアップフォームとイベントカレンダーを含む2列のセクションが含まれます。これに続くのは、SAASソリューション、2つのCTA、およびリンク付きのフッターを説明する宣伝文のセクションです。メニューシステムには、クリック可能な連絡先情報と、カラーブランドに一致するソーシャルリンクが含まれています。

3. Traineaze

Traineazeは、プラットフォームとCTAに関する情報を含むフルスクリーンの背景画像を使用します。スクロールすると、アイコン付きのセクションが表示され、ほんの数語でメリットが示されます。次のセクションでは、画像とテキストを交互に使用して、システムの詳細を示します。これに続いて、価格設定とCTAのセクション、会社のロゴのあるクライアントの声、賞とCTAのセクション、連絡先と情報についてのフッターがあります。メニューにはCTAも含まれています。 Zendeskメッセージボックスは画面に残ります。このサイトは、すっきりとしたレイアウトを使用して、色と画像を最大限に活用しています。

4.高度365

Altitude 365は、サービスに関する情報を提供しながら出入りするアニメーションオーバーレイを備えたフルスクリーンの背景画像を使用します。ブログ投稿へのリンクは、さまざまな色の背景で右側に表示されます。メニューには、複数のロゴ、電子メールリンク、ヘルプリンク、および標準メニューとハンバーガーメニューの両方が含まれています。ハンバーガーメニューには、クリック可能な連絡先とソーシャルリンクが含まれています。次のセクションでは、プロセスのタイムライン、サービスのリスト、オーバーレイを使用したケーススタディ、および詳細情報へのリンクを含むタイムラインを使用した概要セクションを示します。ブログページには、最後の3つの投稿が大きなブロックで表示され、その後に通常のブログリストが4列で表示されます。レイアウトもすっきりしていて、色使いも充実しています。

5.フォーマリティ

Formalitiは、片面のオーバーレイに情報とCTAを含むフルスクリーン画像を表示します。小さなセクションには簡単な説明があり、その後にCTAと埋め込みビデオを含むより詳細なセクション、および画像と情報を含むセクションが続きます。メリットはカラーブランドのアイコンで表示され、別のセクションでは各ビジネスセクターがどのプランからメリットを得るかを示します。お客様の声のセクションには、お客様の声とケーススタディを表示するための名前とリンクが記載された画像が表示されます。 CTAはパーティクルの背景の上に配置されます。フッターには、ブランドカラーのリンクが表示されます。このサイトは、色と空白をうまく利用しています。

6. Netsil

Netsilは、タグラインとCTAを含むフルスクリーン画像を使用します。メニューにはCTAも含まれています。これに続くのは、ホワイトペーパーへのダウンロードリンクのあるaboutセクション、サービスに関する宣伝文のセクション、およびアイコンとCTAを含むその仕組みを示すセクションです。ブログセクションには、注目の記事が表示されます。カスタムフッターには、パーティクルの背景にリンクとサインアップフォームが含まれています。チャットボタンは画面に残ります。これらのサイトは、ブランドカラーとアニメーションを大いに活用しています。

7.カシスト

Kasistoは、タグラインとCTAがオーバーレイされたフルスクリーンの背景画像を使用します。次のセクションでは、情報、ロゴ、CTAがオーバーレイされたアイコンのある背景を使用します。これに続いて、製品をデモンストレーションし、機能を一覧表示するオーバーレイ付きの全幅画像、CTAで動作する製品のアニメーションを示すセクション、メディアからの引用を含むセクション、背景に会社の声明、およびお問い合わせフォーム。このサイトは、色と画像をうまく利用しています。

8.ランクアバブ

RankAboveは、オーバーレイにタグラインとCTAを含む全幅の画像を使用します。スクロールすると、アイコンとCTAのあるぼかし、真の視差のある顧客のWebサイトの画像の上にオーバーレイされたリンクのある顧客のロゴのあるセクション、サークルカウンターとフラットデザインのグラフィックを使用した統計のあるセクションが表示されます。視差のある会社の画像の上に、お客様の声がオーバーレイで表示されます。サービスに関するセクションでは、丸で囲んだ画像とリンクを使用しています。大きなフッターには、リンクとお問い合わせフォームが含まれています。連絡先とログインのリンクはトップメニューに配置されます。このサイトは、オーバーレイと視差をうまく利用しています。

9.Ezypay

Ezypayは、オーバーレイに情報とCTAを含むフルスクリーンの背景画像を使用します。モーダルウィンドウでYouTubeビデオを再生するビデオ再生ボタンも含まれています。詳細については、いくつかのセクションにリンク付きの製品機能が表示されます。全幅セクションには、オーバーレイにウェビナーCTAを含む背景画像が含まれます。お問い合わせは全幅お問い合わせフォームより。フッターには、さまざまな言語でのサイトへのリンクが含まれています。価格設定ページには国セレクターが含まれています。このサイトはブランドカラーをうまく利用しています。

10. vcita

vcitaには、タグラインとCTAを備えたフルスクリーンのアニメーション背景が含まれています。メニューにはCTAも含まれています。スクロールすると、いくつかのセクションが表示され、箇条書きと利点のアイコンが交互に配置されたアプリのアニメーションデモが表示されます。これに続いて、連絡先情報、証言、システムが統合されているプラットフォームのロゴ、価格表、リンク付きのフッターを含む完全なCTAがあります。このサイトは、アニメーションとブランドカラーをうまく利用しています。

11.OpenRemote

OpenRemoteは、タグラインとYouTubeビデオリンクをオーバーレイしたフルスクリーン画像を表示します。ボタンがクリックされると、ビデオはモーダルで再生されます。区切り線を含むロゴの下に全幅メニューが含まれています。次のセクションでは、アイコンを使用したプロセスの手順を示します。これに続いて、サービスに関する宣伝文句のセクション、背景画像上の全幅の紹介文スライダー、ニュースフィードと最新のツイートのセクション、クライアントと賞のスライダー、リンクと検索のフッターがあります。このサイトはブランドカラーを大いに活用しています。

最終的な考え

Diviで構築されたSAASWebサイトのこれらの11の例は、詳細な製品情報と利点、価格表、ケーススタディ、埋め込みビデオ、チャットシステムなどを備えた興味深いSAASWebサイトを作成するためにDiviが使用されている優れた例です。

これらのサイトは、レイアウト、色、画像、背景、ビデオ、ナビゲーションなどのアイデアを提供するのに最適です。SAASWebサイトは、製品の展示例として優れており、製品写真やケーススタディの例としても機能します。これらのWebサイトは、次のSAAS設計に刺激を与えることでしょう。

これらのDiviSAASサイトのお気に入りの要素は何ですか？ 以下のコメントでお知らせください！

venimo /shutterstock.com経由の注目の画像