たった1時間でWEB初心者が1人でサイト構築!ディレクションシステムREVOLUTION

date_range 2020/11/10
G!FITブログ
廣澤 あやな
REVOLUTION

こんにちは、広報インターン生の廣澤です♪

今回の記事では、弊社ガーディアンが提供するディレクションシステム「REVOLUTION」についてご紹介するとともに、

WEB初心者の私が実際にREVOLUTIONを体験してみたので、未経験者でもどこまで使うことができるのかをご紹介していきたいと思います!


早速ですが、はじめにREVOLUTIONとは何か?解説とともに、魅力をお伝えしていきます!

そもそもREVOLUTIONとは?

REVOLUTION

そもそもREVOLUTIONとはお客様の目の前でホームページのパーツを組み立てていき、

その場でイメージ通りのサイト設計図を作り上げていくディレクションシステムのことです。



また、前回のオンライン商談特集でもお伝えしましたが、何と言ってもREVOLUTIONはアフターコロナ禍でも

ぴったりな営業支援ツールなのです!

アフターコロナ禍でどう活躍するの?

アクターコロナ禍

アフターコロナ禍では対面でお客様とお会いすることも少なくなり、オンラインでの活動が顕著になっている方も多いと思います。オンラインでは対面と違ったコミュニケーションになるので、対面の時とは異なるアプローチが求められる場面もあるのではないでしょうか。


その1つとして、ディレクションシステムであるREVOLUTIONは、リモートワークでもお客様のお手元でホームページのサイトパーツを組み立てていくことが出来るので、「お客様のイメージが掴みにくい」、「再現しにくい」などの悩みが大幅軽減します!


詳しくは『アフターコロナ、企業の取れる対策を解説します!』をご確認ください!

このようにオンライン商談でも活躍するREVOLUTIONを今回はWEB素人の私が実際に体験して、サイトディレクションを行なってみました!

WEB素人でも本当にサイトディレクション出来るのか?

REVOLUTION

冒頭で「web初心者」とお伝えしましたが、繰り返すと私はコーディングのコの字もわからない広報担当のインターン生です^^;

では念頭に置いていただきましたところで、まずはWEBサイトの基本情報を入力していきます!


ここでは会社名、サイト名、住所などの他に、facebook、twitter、instagramなどのSNSのリンクを入力することもできます!また、Google Mapのリンクを入れるだけでサイトにGoogle Mapを入れることもできるのです!


ここでサイトの基本情報をあらかじめ入力しておくことで、コンテンツを追加していく際に、基本情報を自動でコンテンツのパーツに入れることができます!

早速ですが次はコンテンツレイアウトに移ります!サクサク進みますよ〜!


メインビジュアルから追加スタート!

REVOLUTION

↑上図がコンテンツレイアウトの最初の画面です。まずはサイトの枠とメインビジュアルから決めていきます!


メインビジュアルとは簡単にいうとサイトのメインとなる画像のことを指します。

赤い四角で囲んである、「MV」という青のボタンを押すだけで、

メインビジュアル

サンプルの画像とともに様々なメインビジュアル例が表示され、

種類も豊富で自分の理想にあっメインビジュアルが再現できます!



サイトの枠も選び、メインビジュアルの画像も好みのものにボタン1つで差し替えると、

メインビジュアル

こんな感じで、簡単に画像差し替え、文字入力を行うことができます!


次にサイトの中身を充実させるために、「コンテンツを追加したい」そんな時には、

詳しいコンテンツを追加するには?

コンテンツ

たくさん用意されている枠のパーツからお好みのものをチョイスします!


背景色が付いているものや、画像設定できるもの等 色々あります!(今回は水色の背景に変更してみました!)

動画を入れるには?

コンテンツ

また「動画をつけてよりわかりやすく概要を説明したい!」という場合には、

ワイヤーの中に「動画」が用意されているのでそれをボタンで選択するだけで、

動画

動画を挿入することができました!もちろん好きな動画に変更可能です!



そういえばWEBサイトってリンクから飛んで、別のページに移動してもらうものだから、閲覧者にもわかりやすいように、リンクボタンがいります、、、、よね?


そこでリンクボタンを設置してみました!リンクボタンもパーツとして用意されているので、

リンクボタン

たくさんあるリンクボタンの中から1つ選び、色も、大きさも、入力する文字も変更することができます!


あとはたどり着かせたいサイトのURLをコピペするだけです!

リンクボタンの種類

ちなみにリンクボタンは上図のように種類豊富で、カラーチェンジも可能です!

ここで最後に、最初に入力したサイト基本情報である地図情報をコンテンツの中身として反映させてみたいと思います!

自社地図を入れてみます!

自社地図

まずは赤色のプラスボタンから枠を設定して、(今回は赤丸で囲っている枠をベースにしました!)

挿入してみると、設定した枠はテキストを打ち込めるので、自社地図だと分かりやすいように「見出し」の部分にアクセスと入力してみます・・・!

自社地図



ここで、一番下についている青いプラスボタンから、地図のパーツを追加していきます!



自社地図


赤枠の『自社地図』を選択するだけで、以下のようにサイトに反映されます!


下の電話番号も、サイトの基本情報に事前に入力した電話番号が自動で反映されているのです!





自社地図

ちなみにこれまで既存のパーツを利用して、サイトディレクションを行いましたが、実はサイトパーツを独自にカスタマイズすることが出来るのです!


この件につきましてはまた別の記事で、特集しようと思います!

今回作成したサイトについて

サイト

自分の好みの画像を入れて、G!FITのロゴのカラーを意識しながら、このサイトのデザインを考えてみました。

REVOLUTIONでは自由にサイトを作れるので、個性的にすることを試みて、当初の画像はもっと奇抜なものにしていました^^;


皆様もぜひ一度、サイトディレクションをお試しになってください!

新しいディレクションシステム『REVOLUTION』いかがだったでしょうか?

ここまで、サイトのURLをクリックすると一番最初に出てくるページのみをさらっと作りましたが、

初心者の私でもここまで、ものの1時間で仕上げることが出来ました!


私がREVOLUTIONを体験する上で、自分のイメージするサイトの再現性の高さに驚きましたが、何より最終確認画面が一番驚きました!

最終確認画面

上記の画像が最終確認画面なのですが、パソコン上でのサイトの映り方はもちろん、スマートフォンでどのように表示されるのかが、同一画面で確認することができます!


また、左のQRコードをお手持ちのスマートフォンでかざしていただくと、お手持ちのスマートフォンの画面からもどのようにサイトが映るのか、確認していただくことができるのです!

(上図にあるQRコードからも、今回私が作成したサイトのスマートフォン版をご確認いただけます!)


とても便利で、より自分のサイトという実感が湧きやすいです!




以上がREVOLUTIONを実際にWEB初心者が体験してみた、でした!

ここまでお付き合いいただいた皆様には少しでもREVOLUTIONの魅力を感じていただけたでしょうか?


REVOLUTIONについてさらに詳しくは下記リンクをご確認ください!

人物

現在、大学二回生の廣澤です♪ガーディアンでは、長期インターン制度G!FITの初期メンバーとして勤務しております!G!FITでは社会の基礎的な知識を日々学びながら、主に広報として活動しています!

GUARDIAN’Sが語る