どうも、まさとらん（@0310lan）です！

最近は、Webページの背景に大きなサイズの「動画」を埋め込んだサイトが多くなってきました。

しかし、いざやってみると…コードをいじったり、動画を加工したりなど…、いろいろ手間が掛かるのも事実。そこで、今回は誰でも無料でコードもいじることなく、動画を背景にしたWebページが作れるサービスをご紹介しようと思います！

それが、「Readymag」です！


 

 

どんなサービスなの？

「Readymag」は、そもそもポートフォリオやWebマガジン、ブログなど、多彩なWebページを作れるサービスとして海外では人気を集めています。

そして、最近トレンドになってきた「動く背景」も、以下のような感じで簡単に作れるのが魅力です。


（デモサイトはコチラ）

 

作り方も簡単で、

無償のユーザー登録を済ませると、自分専用の「マイページ」が表示されるので、画面の下段にある「Create」ボタンをクリックします。


 

すると、Webページの「1ページ目」を作る画面になるので「編集」ボタンをクリック！


 

これが「メインの編集画面」となります！


ココで、自分の好きなWebページが作れるようになるわけです。

 

そこで、下段のメニューから「＋」ボタンをクリックして、「Video」アイコンをクリックします。


 

ポップアップ画面が表示されて、「YouTube」と「Vimeo」を選択できるようになっているので、ひとまずYouTubeを選んでみましょう。


 

今回は、検索ボックスに「basketball」と入力してみました。

すると、関連する動画一覧がズラッと表示されます。


この中から、自分が気に入ったモノを選択するわけです。

 

すると、先ほどの編集画面に動画が挿入されるので、設定ボタンをクリックして細かい挙動を指定してやります。


細かい挙動というのは、「自動再生」や「ループ再生」、「音の有り無し」などです。

 

設定が終わったら、動画の端をドラッグしながらサイズを画面いっぱいに広げてやります。


画面からはみ出すくらいに大きくすれば、さらに迫力のある動画背景になるのでオススメです。

 

そして、画面右上のプレビューボタンをクリックしてみましょう！


 

ブラウザの画面いっぱいに、動画が再生されたのが分かります。


ちなみに、あらかじめ動画の画質を高めに設定しておけば、拡大してもキレイな状態で表示されます。

 

 

さらに、Webページを作りこむ！

動画の背景が完成したので、今度は通常のWebページに必要なパーツを組み合わせていきます。

方法は、先ほどの動画を埋め込む作業と同じです！

例えば、

文字を入力したい場合は、「文字パーツ」を選択してから、任意の場所へドラッグするだけです。


もちろん、文字のサイズやカラー、大きさなど細かく編集できます。

 

多彩なフォントも利用できるようになっているので便利です。


 

「地図パーツ」を使えば、簡単にGoogleマップを挿入することもできます。


マップの場所を指定したり、経路を表示したり、カスタムマップも利用できます。

 

さらに埋め込みタグにも対応しているので、他のWebサービスとの連携も簡単に組み込めます！


 

よくある「スライドショー」なども、画像をアップロードするだけで完了します。


 

そして、ある程度作り込んだら、画面右上の「メニュー」ボタンをクリックします。


 

ひとまず、今回は完了ボタンをクリックしてみます！


もし、ページを追加したい場合は、画面下段の「＋」ボタンで作成できます。

 

最後に、必要な情報を入力して「Publish」ボタンをクリックします。


 

これで、自分だけのWebページを世界中に公開することができました！


あとは、表示されているURLを、SNSやメールなどで「友人・知人」に教えてあげればOKですね！
（有料プランは、カスタムドメインも可能）

このように、非常に簡単なステップで、動く背景を取り入れたWebページを作成できるので、ご興味ある方はぜひ挑戦してみてください！

公式ページには、この「Readymag」を使って作られたWebサイトやポートフォリオなどが多数公開されているので、時間の空いている時にでも見てみると楽しいですよ！

（サンプルサイトはコチラ）

 

 

おまけ

最後に、今回ご紹介した「Readymag」よりも、さらに強力な本格仕様のWebページ作成サービスも合わせてご紹介しておきます！

【1日でプロに匹敵するwebサイトをデザインから公開まで完結できる「Webflow」正式版に驚愕！】


実際の業務にも耐えられる仕様になっており、ほとんどコーディングを意識しなくても、マウス操作でプロ並みのWeb制作ができるようになっています。

もし、ご興味ある方は、ぜひ一読くださいませ！

 

 

まとめ

今回の「Readymag」を利用すれば、作り方次第ではかなり面白いサイトが作れるようになります。

また、今回は紹介できませんでしたが、Webマガジンのような雑誌風のページを作りこむことも可能で、かなり斬新な広告用の「宣伝ページ」を作り込むことも可能です。

ちなみにですが…、動画はYouTubeよりも、Vimeoの方がクオリティの高い作品が多いので、個人的にはVimeoをオススメしておきます…。

 

 

written by まさとらん