シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > 軌道を描くだけで、動きのあるWebサイトが作成・公開できる「Makemake.io」はコードも不要!
注目記事ピックアップ
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2015/03/18 20:50

軌道を描くだけで、動きのあるWebサイトが作成・公開できる「Makemake.io」はコードも不要!

makemake-io_01 どうも、まさとらん(@0310lan)です!

最近のWebサイトは、動きのある「アニメーション効果」を使う事例が増えています。

もし、そのようなWebサイトを「作りたい!」「興味がある!」という人は、今回ご紹介する無料Webサービスが役立つかもしれません!

【Makemake.io】
makemake-io_02 コーディングは一切不要で、マウス操作だけで思い通りの「アニメーション効果」を作成することが出来るようになっています!


どうやって使うの?
それでは、どのようなアニメーションが作れるのかを、サンプルを見ながら確認してみましょう!

まず、サイトにアクセスして「赤いボタン」をクリックします。
makemake-io_03

すると、「Makemake.io」を使って作られたサンプルサイトが表示されるので、好きなモノを1つ選択。
makemake-io_04

Webサイト編集エディタが表示されるので、画面上部の「Preview」をクリックします。
makemake-io_05

これでプレビューモードになるので、ひとまずサンプルサイト内にある「Projects」をクリックしてみます。
makemake-io_06

そして、左上の画像をクリック。
makemake-io_07

すると、以下のような「アニメーション効果」が使われているのが分かります。
makemake-io_08
さて、このアニメーションがどのように作られているのか、編集画面に戻って確認してみましょう!


編集画面から、以下の手順で進めていくと「動き」の軌道を描いた線を確認することができます。
makemake-io_09 ①:トランジションモードをクリック。
②:Start Pageに「Project Page」、End Pageに「Makemakeio」を設定。
③:シングルモードをクリック。
④:Objectに「Makemake Image」を設定。

この「軌道線」は、マウスでドラッグして自由に変化させることが出来るようになっています。
makemake-io_10 (軌道線が見えない場合は、オブジェクトを少し動かしてみてください…)


「軌道線」を変化させると、先ほどとは違ったアニメーションを簡単に作れることが分かります。
makemake-io_11
このように、「Makemake.io」では軌道線をマウスでいじりながら、自分の思い描く動きを簡単に表現できるようになっているのが最大の特徴です。


また、以下のような「ページ遷移」の場合…、
makemake-io_12
全体の要素を、同時に動かさなくてはいけません。


実はコレも簡単にコントロールすることが可能で、先ほど編集画面で「シングルモード」を選択していましたが、コレを「グループモード」に変更すれば、一斉に軌道を変更す>ることが可能です。
makemake-io_13

すると、アニメーション効果も変化し、以下のようになります!
makemake-io_14
単純に右から左へ移動するのではなく、少しカーブを描いた軌道に変わったのが分かると思います。


ちなみに、あらかじめ用意されている「トランジション」をミックスすることで、動きのバリエーションは無限に作れてしまうでしょう。
makemake-io_15

Webサイトに楽しい「仕掛け」を作る!
軌道線を描くことで、自在にアニメーションを作ることが出来るわけですが、任意の箇所をマウスオーバーすることで、面白い「動き」を加えることも可能です。

例として、人物画像の上をマウスオーバーした時に「動き」を付けるようにしてみましょう!

そこで、まずは右サイドメニューにある「HOVER」の「+」アイコンをクリックします。
makemake-io_16 そして、人物画像が小さくなるようなアニメーションにしてみたいと思います。


HOVERの設定値は、「ポジション」「サイズ」「透明度」「アニメーション時間」を変更することで設定できます。
makemake-io_17

変更後にプレビューすると、こんな感じになります!
makemake-io_18
とても簡単ですね。


さらに、サイトが完成したら画面上部の「Publish」ボタンをクリックするだけで、すぐに一般公開することも可能です!
makemake-io_21 このように、「軌道線」と「HOVER」の使い方を覚えるだけでも、かなり楽しいWebサイトが作れるようになっています。


また、制作事例としては「ポートフォリオ」のようなWebサイトや…、
makemake-io_19

Webアプリのように、インタラクティブな仕掛けを実装したサイトなどが簡単に出来ます。
makemake-io_20

また、個人的には「スライド資料」を作ったりするのにも使えそうだなぁと実感しました。


おまけ
最後に、アプギガで過去にご紹介したWebサイト制作サービスも、合わせてご紹介しようと思います!

【1日でプロに匹敵するwebサイトをデザインから公開まで完結できる「Webflow」正式版に驚愕!】
makemake-io_22 今回ご紹介した「Makemake.io」よりも、さらに本格的なWebサイトを作りたい人に最適な高機能サービスがコチラ!

今のトレンドを抑えたテンプレートや、あらゆるCSSの操作をGUIで作れたり、ファイルの書き出し機能からそのまま一般公開まで可能になっています。


【スマホのブラウザから、指先1本でWebサイトを制作できる「adsy.me」がスゴイ!】
makemake-io_23 「スマホ」のブラウザから利用できる、ちょっと珍しいWebサービスがコチラ!

スマホの特性を活かし、指でタッチしながらまるで絵を描くようにWebサイトが作れてしまうのが最大の特徴となっています。

YouTubeやWeb画像検索、SoundCloud、Googleマップなどと連携できるのも魅力の1つでしょう。


まとめ
「Makemake.io」は、まだ実験的な要素も多く、これからバージョンアップしてさらに使いやすくなっていくそうです。

誰でも簡単にWebサイトへ「動き」を加えて、そのまま公開まで可能というお手軽さは、なかなか貴重な存在ではないでしょうか。

少しクセのあるサービスですが、遊んでいるうちにすぐ慣れてくるので、ぜひみなさんも楽しい「アニメーション効果」にトライしてみてください!

<参考>
「Makemake.io」公式サイト


wirtten by まさとらん



まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る