NEWS

669

2014/05/26

正式リリース間近!HTML5を使って動きのあるウェブサイト構築

1

こんにちは!塚本です。
突然ですが、みなさんはHTMLというものを知ってますでしょうか?

HTML

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)、略記・略称:HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。引用:ウェキペディア

要は、ホームページを作る際に使用する言語のことです。

こちらのHTML、現在はHTML4なのですが、2014年、正式にHTML5が勧告(リリース)される予定となっております。

既に、弊社でも制作時に実装しておりますが、今回はその中でも「動作」についてご説明いたします。(対応ブラウザもたくさんあるため、すでに実装は可能なのです)

HTML5で動きのあるサイトを!

スクリーンショット-2014-05-

 

現在、弊社ウェブサイト http://web-trust.co.jp/ のトップページメイン画像部分はHTML5で制作しております。

 

動作が分かりますでしょうか?

グラフィックデザインをバラバラに分解し、一つ一つに動きを付けて表現しております。

 

そしてお気づきになった方もいるかと思いますが、動作はスマートフォンやタブレットでも動作が発生します。

 

HTML5では、Flash Player等のプラグインソフトが必要がないため、今流行のパララックスサイトや動画を使ったサイト等をデバイスに左右されず、動きを制御することが出来ます。

その昔、Flashで様々な動きを使ったサイトが出てきましたが、今後はマルチデバイス(PC,スマフォ,タブレット)すべてに適応したサイト構築が求められて行きます。

理念に基づいたモーショングラフィックで、心を動かす!

PAK86_codeing20140517

 

ただカッコイイからだけで、動きを懲りすぎてしまうと、もはや何のサイトだかわからなくなってしまいます。

動作一つ一つに意味を持たせ、サイトのユーザビリティを損なわなくなった時に、魅力的で新しいサイトが完成します。

ちなみに今回の動きのコンセプトは、

「クライアントのアピールポイントを最大限にアウトプットさせるお手伝いをする」という 理念から創り出されたグラフィックスに、アニメーション効果を与える事により、 見る方の感情にダイレクトにメッセージを訴えかける効果を付加させています。

 

効果のあるビジュアル・アイデンティティやキャッチコピーは、 メッセージを伝えることに必要不可欠ですが、生き生きとしたアニメーションは そのメッセージの「理念」を超えて、人々の感情、「こころ」を動かします。

大切なのは、理念に基づいたモーショングラフィックを構築することです。

今回のケースは、以下の基本コンセプトをアニメーションで、 表現しています。

 

//////////ビジュアルコンセプト/////////////////////////

イメージはカットされた宝石をモチーフとしたビジュアル。 クライアント様の埋もれたアピールポイントを、原石を磨く要領で光らせ、 魅力を最大限に引き出す事業を展開していく決意を表しています。 /////////////////////////////////////////////////////////

 

オブジェクトが集まり合体していく様子は、 コミュニケーションを大事にして、ひとつひとつの仕事を大切に取り組んでいく様子を表し、 オブジェクトが拡散していく動きは、 常に成果がある未来にチャレンジしていく力、「殻を破る」思いを込めています。

 

みなさんのサイトにも最新技術で、訪問者の「こころ」を動かしてみませんか??

 


この記事を書いた人

wt_tsukamoto

塚本 貴一 / Tsukamoto Takakazu 1979年東京都町田市出身。16歳のとき高校を中退。その後、様々な職を経験しながら、独学でWEBサービスに関する勉強をはじめる。勉強することの楽しさを覚え、23歳で通信制高校に入学。卒業後、WEB事業を開始。個人事業主を経て、株式会社ウェブトラスト設立 代表取締役就任。