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

アプギガトップ > Webサービス > 軌道を描くだけで、動きのあるWebサイトが作成・公開できる「Makemake.io」はコードも不要!
注目記事ピックアップ
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
share0
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
share0
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
share0
複数人コラボも可能な楽譜作成エディタを搭載した新SNS「Flat.io」が、完全無料で公開中!
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
share0
わずか数行のコードで、Adobe製の画像編集エディタを無料で使い放題にできる「Creative SDK」がヤバイ!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
share0
Chromeの「新規タブ」機能が拡張され過ぎて、もはや別アプリと化している件!
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
share0
小学生でもゲーム制作を可能にするWeb統合エディタ「Tynker」が、むしろ大人がハマると話題に!
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
share0
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
share0
ブログ感覚で、独自の「オンライン講座」を作って公開できる「Classmill(無料)」を使ってみた!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
Webサービス
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...

ページトップへ戻る