Web制作会社のマーズデザイン  »  Web制作会社のブログ  

 

Web制作会社のブログ

お客様に最適なWEB戦略で、 ブランド価値の向上、お問い合わせの増加、迅速な情報の配信、 営業・広告費用の削減、顧客満足の向上、リピート率の増加 の成功事例を実現しております。

2012年2月28日

Flashを抜いた?HTML5の技術

またまたHTML5でセンスの良い音楽と動きの連動が
再現されたサイトサンプルがありました。

html5canvas.png


ドットが音にあわせてぐるぐると動きます。
マウスの動きにもあわせて、移動するので、
見た目にもふれても面白く,センスの良いサイトになっています。

これだけの動きがHTML5で実現できるとなると、確かに
Flashを超えた?と思わせられますね。


もう少しブラウザが対応できるようになると良いのですが・・・。
でもFlashもApple製品では見られないというデメリットがあるので、
それほどネックにならないかもしれませんね。
それよりはブラウザの変更だけでPCでは見られるように
なるので、遥かにハードルは低いと言えるかもしれません。


HTML5でのページ制作もわくわくしますね。





2012年2月24日

HTML5の可能性が感じられるサンプル

HMTLで3Dポリゴンのような図を動かせるサンプルが
ありました。
こんなこともHMTL5で実現可能なんですね。

html5_3dporygon.png


下記のリンクからサンプルがアップされているサイトに
いって触ってみてください。
マウスの動きで様々に3Dの動きができます。


Flashをある部分では超えた表現が可能になってますね。
すごいことです。
そのうちホントにFlashはみなくなってしまうことになるのかも
しれませんね。


HTML5の可能性が感じられる3Dの動きをするサンプル





2012年2月23日

HTML5でできる演出とデモと対応ブラウザがわかる!

HTML5でできることがブラウザに制限されると
取り上げましたが、その動きと対応ブラウザの
一覧になっており、デモも見られるサイトがありました。

html_demo.png


このサイトをみると自分がいま使っているブラウザで見ることができるのか、
対応しているブラウザは何かというのが、一目瞭然です。

また動きのデモもみられるので、どのようなことが可能に
なるのかも分かり易く整理されています。


英語のサイトですが、このようなまとめサイトがあると
開発者サイドも確認と対応が早くできて便利ですね。

クライアントサイドでもこちらをみると、ユーザー環境というか
対応ブラウザについての知識がたかまり、最新技術に対応可能な
ブラウザに変更すると言う選択のきっかけを与えることができるかも
しれませんね。

はやくブラウザは使いやすいものを自分で選ぶのが
当たり前の時代になってほしいなと思う今日この頃です。

HTML5演出の対応ブラウザが一目瞭然!!





2012年2月22日

意識させずにHTML5で多彩な表現

HTML5で作成されるサイト、見た目はこれまでのサイトと
なんら変わりなく見えます。
この「なんら変わりなく見える」というのがキモでしょうか。

edulabo0222_01.png


これまでは、裏側でFlashだのなんだのと、いろいろと
プログラムがないとこのような表現ができなかったものが、
いとも簡単に構築できるというのが、スゴイところです。


edulabo0222_02.png


こちらのサイトも左サイドにナビゲーションとして時系列で
放送スケジュールが表示され、上下にスクロールの動きをします。


任意のスケジュールをクリックすると、メインコンテンツエリアに
ウィンドウが広がり、その中に細かい番組情報が表示されており、
さらにサブウィンドウ内からのリンク設定などがあり、
情報量の大さと広がりを感じさせるサイトとなっています。


サブウィンドウを開いたまま、サイドナビの放送スケジュールを
動かすとサブウィンドウはひらいたまま、コンテンツのみが差し変わって
いきます。


ページのスクロールもなく、情報が次々と切り替わる感覚は
テレビのチャンネルを変えてザッピングするようなイメージでしょうか。

とても便利で使いやすいサイトになったかと思います。
HTML5で実現されているのを意識させずに,かなり便利な
サイト構築ができるというのが注目点でしょうか。

意識させないHTML5構築サイトの多彩な表現





2012年2月21日

できる!!HTML5の可能性

Javascriptをだいぶ紹介してきましたが、最新の技術で
スマホなどにも最適化されているのはHTML5でしょうか。
絵をかけるようにしたり、動画がみられるようにしたり、
簡単にドラッグしてレイアウト変えられたりと、その
表現力は素晴らしいものがあります。

toilet0221.png


こちらのサイトでは、整然と並んだコンテンツ枠が
ドラッグして移動することができ、その枠をどかしてみると
背景にいろいろと情報が隠れているというデザインです。


表の枠で見せる情報と、ちょっと遊び心を持たせてその後ろに
忍ばせる情報と使い方によって、いろいろと遊べそうです。


またインタラクティブ性ももたせられるので、触って楽しい
演出ということも可能です。


ただ最新の技術で、かなりブラウザを選んでしまうという
ネックはあります。
ネットに詳しい方、好きな方は早くてさくさく動くブラウザや
使いやすいものをご自身でインストールして利用されていると
思いますが買ってきたPCそのまま使用される場合は、ほぼ
IEかと思います。(Winの場合)


そうなるとIEだと表示できないケースが多いので、
ユーザー環境を意識してしまうとまだまだ本格的に
使えないのかということになってしまいます。


ブラウザもだいぶ勢力図が変わってきてますので、
ユーザー環境ももう少し進歩してくれるとよいのですが・・・。

HTML5で触って楽しいWEBサイト





2012年2月20日

Javascriptでゲームのような世界地図を表現

また素晴らしいサイトを見つけました。
世界地図がまるでビデオゲームのようにぐりぐりと動いてます。

notcoffee05.jpg


アニメーションでずっと流れて動いているのですが、
右上のサブウィンドウのところで、マウスで動かすと
任意の位置に移動できます。

コンテンツは下部のメニューをクリックすると、そのアニメーションの
マップの上にライトボックスのように展開します。


表現力と情報表示の早さと兼ね備えたサイトだと思います。


Javascriptでゲームのようにぐりぐり動かせる世界地図





2012年2月17日

Javascriptでここまでできる。面白い表現Javaの可能性

かなり面白い動きをjavascriptで表現しているものが紹介されています。

java010217.png


スクロールバーがならんでいるのですが、これが
マウスの動きにあわせウェーブする動きになります。

java020217.png

こちらはボールがはねるような動きをします。
それだけでなく、別ウィンドウをひらくと、そちらとも
連動した動きを見せてくれます。


Flashでしか表現できないと思われている演出がJavascriptで
軽く表現できるというのがすごいですね。


ウェーブするスクロールバー


飛び跳ねるボール





2012年2月16日

Javascriptで美しいシングルページWEBデザイン

Javascriptを使用して、イラストに動きを持たせ、
まるでFlashで制作したかのようなサイトデザイン例が
ありました。

single_volll.png


目立つアイコン部分が常に色が変わり、周りを光がまわって
動くようなアニメーションで目を引かせながら、細かいイラストが
画面内で動いています。


マウスオンやクリックで動くものもあり、見ていても
さわっても飽きさせない作りになっています。

こちらのサイトはシングルページでできており、長い1ページが
メニューをクリックする事でスクロール移動するものとなっています。


別ページを設けず、多くの情報提供の画面を持っておくことが
できます。
どのページにも少し動きのある仕掛けが施してあり、
どちらのページに遷移しても、目を楽しませてくれます。


Flashと違い、動作が軽く,情報を早く伝達できることも
メリットと言えます。


イラストを使っていますが、ここまで動かせると
Flashサイトにもひけをとらない、美しいデザインの
サイトが構築できますね。


コンテンツごとにエリアを切り分けたり、内容によって
テイストを買えると言った打ち出し方も出来そうですね。


触って調べる、読み進める楽しみも兼ね備えることが
できる良い例ではないでしょうか。
ちょっと柔らかめな業種や職種の企業サイトとしても
面白いかもしれませんね。

Javascriptで美しいシングルページWEBサイト例





2012年2月15日

Javascriptをうまく使ったデザイン例

Jacvascriptを使ってうまくデザインし、情報も見やすくしている
サイト事例がありました。

1md.png


レイアウトはごくシンプルなのですが、マウスオンでの動きと
エリアが広がることによる情報提供がしっかりされており、
飽きさせずに次々と見せることが出来ると思います。


たとえば商業施設のすべてのテナントの情報をなるべく
一画面でみせるとか、カテゴリーごとにおすすめメニューや
クーポン、セール情報などをアピールするのにもってこいでは
ないでしょうか。


シンプルに、美しく、情報提供ができ、さわっても
面白いスクリプトをうまくデザインに組み込んでいる
事例ではないでしょうか。


いろいろと使い道がありそうです。


Jacascriptをうまく使ったデザインサイトサンプル








ホームページ掲載以外にもWEBサイト制作実績・成功事例紹介多数ございます。
Webサイトからお問い合わせのお客様に限り、納品後3ヶ月のコンサルティング(期間限定)

Web制作の無料見積もり・お問い合わせ