Webマーケティングを極める/株式会社G.A.P http://html5-lab.jp Wed, 11 Sep 2013 08:57:03 +0000 ja hourly 1 http://wordpress.org/?v=4.1.13 Facebookアプリを利用したキャンペーンの反応 http://html5-lab.jp/marketing/311.html http://html5-lab.jp/marketing/311.html#comments Tue, 10 Sep 2013 01:51:20 +0000 http://html5-lab.jp/?p=311 続きを読む ]]> 三国志武将診断アプリ

2013年もFacebookアプリを利用したキャンペーンPJを、複数案件取り組みましたが、昨年2012年に比べると”いいね!”の獲得スピードが鈍化し、ユーザーの反応が鈍くなった感触があります。

一人あたりの、”いいね!”しているFacebookページの平均数は23とも、63とも、情報は様々です。仮に30近い企業に対して”いいね!”をしていると、ニュースフィードに更新された企業の投稿が複数入り込み、友人の近況投稿より企業の投稿の方が多くなってしまう事が多々あるため、スマートフォンからFacebookを閲覧する際には、企業の投稿を流し読みしてしまいます。

私は職業がら100以上のFacebookページの”いいね!”をしているのですが、必要なくなったページの”いいね!”は定期的に削除するようにしているくらいです。

Facebookが日本で普及してから3年以上経過して、キャンペーンが集中する中でユーザーが”いいね!”をするのに慎重になっている傾向にあります。

 

こちらのブログでも紹介されていますが

http://gaiax-socialmedialab.jp/facebook/071

2011年は、診断や検定アプリが流行り、徳川15判定というアプリが28万を超える”いいね!”を獲得したのを思い出します。

弊社も、プラットフォームの開発経験を積むために三国士の武将診断アプリを2012年2月にリリースいたしました。

https://www.facebook.com/sangokushi.shindan

このアプリは、広告費を一切利用していませんが、一週間で1,000、最終的には5,300”いいね!”を獲得しました。

ところが、今年実施したPJではFacebookアプリと合わせて、Facebook広告を利用したにもかかわらず1ヶ月の期間内に1,000”いいね!”を獲得することさえ苦戦しました。

PJの企画内容が獲得結果に影響することはもちろんですが、2011年のようにユーザーが興味を持ってアプリにチャレンジしてくれなくなったとも考えられます。

特に診断アプリに関しては、もうネタが出尽くした感もあり、ユーザーの反応が悪くなったことも考えられます。

2013年3月、Facebook によるソーシャルマーケティングを行ったことがある全国20~59歳の男女300名に、「ビジネスに関する Facebook 活用調査」をしたところ、「プロモーションが成功したかどうか?」の質問では、大きく分けて「成功した」と答えた人が55.4%、「失敗した」人が44.5%という結果で、回答はほぼ半数ずつに分かれました。2人に1人が「失敗」と捉えているのは決して低い数値ではありません。「失敗した」と回答した人は、要因をどのように捉えているのか、キャンペーンや新サービスの告知が「成功しなかった」と答えた人にその要因を質問したところ、「“いいね!”を集めることができず情報拡散ができなかった」の回答が1位で56.8%という結果になったそうです。

http://japan.internet.com/wmnews/20130430/2.html

 

様々なキャンペーンサービス

PJの反応結果や費用対効果の追究では、オリジナルのアプリ制作ではなく 無料プランもあるようなサービスを利用して、プレゼントキャンペーンを実施する検討も重要になってきます。

http://campaign.crocos.jp/

こちらのサービスは、一度キャンペーンに参加すると、他のキャンペーン情報がメルマガでも届くので、キャンペーンの告知にも利用できます。

サイト上では、594のキャンペーンが開催されていることがわかります。

商品企画に活用されることもある「モニプラ」では、313件のイベントが開催されていて、二つのサービス合計だけでも1,000近いキャンペーンがFacebook上で実施されていることがわかります。

http://monipla.jp/

未だ発展途上のFacebook広告

広告では、GoogleやYahoo!のSEMには無いインプレッション課金プランがあるものの、管理画面のシュミレーションから推奨単価を確認すると、クリック単価よりインプレッション課金単価の方が高くなってしまいました。Facebookの広告サービスは未だ開発途中のようです。

 

Facebook Japanが運営する「Facebookマーケティング」で日本国内のアクティブユーザー数が1,900万人突破と発表されました。

ユーザー数は増えているものの、ユーザーのモチベーション状況や、安価なツールの利用、注目をあびているオンラインとリアルな場を連携させたO2O施策を考慮したキャンペーンの設計が今後重要になってくるのではないでしょうか。

]]>
http://html5-lab.jp/marketing/311.html/feed 0
CSSとjQueryでパララックスとアニメーションを実現 http://html5-lab.jp/example/domestic_example/283.html http://html5-lab.jp/example/domestic_example/283.html#comments Wed, 24 Jul 2013 08:24:05 +0000 http://html5-lab.jp/?p=283 続きを読む ]]> 今回は、弊社の制作事例から、CSS3とjQueryを使ってパララックスやアニメーションを実現した化粧品のブランドサイトついてまとめてみました。

jQueryでパララックス
最近多くのサイトで利用されているパララックス。
「視差効果」とも呼ばれていますが、Webデザインで取り入れられるエフェクトのひとつです。
複数オブジェクトをスクロールするスピードを調整することで、奥行きのある立体的な空間を疑似的に生み出し、ユーザーに錯覚を起こさせる見せ方です。

クリックをさせずにスクロールだけでユーザーをページ下部まで誘導し、他ページに遷移させずに多くの情報を見せられる点や、ストーリー仕立てで見せたり、何かの空間に見立てたり、設計やデザイン次第でユニークな演出が出来ることなどが、メリットと言えるでしょう。
1ページが長すぎたり要素が多すぎると読み込み時間がかかるというデメリットもありますので、サイトの特性によって使い分ける事が必要となります。

Liretyブランドサイト
http://www.virtue-ec.com/lirety/index.html

◇デザインする上で気をつけたこと
1:パララックス効果を理解する
パララックスは異なるレイヤーのスクロール速度を変える事で、視差効果を与え奥行きを出す効果のこと。
まずは、その基本となる部分をデザイナーがしっかり理解し、動きをイメージした上で着手します。

2:重くなりすぎないように
ページが重くなりすぎないように考慮します。
シンプルなデザインであれば大きな問題はないですが、写真を多用する場合、アニメーションと組み合わせする場合など、ページの長さを調整するなどして、バランスを考慮しながらデザインするのも重要なポイントです。

3:奥行きを出すために
ぼかした画像をあえて手前に大きく配置する事で視差効果をプラスしさらに奥行き感を表現することができます。

Liretyブランドサイト

4:動きを制作サイドへしっかり伝える
デザインを制作サイドへ引き継ぐ際、イメージしている動きをしっかり伝えなくてはいけません。
手書きでラフを作成したり参考サイトを見たりなど、イメージを共有するための工夫が必要です。

◇使用するjsなど
デザイナーから引き継いだ制作サイドは、デザイナーがイメージしている動きに適したプラグインを探します。
プラグイン同士のバッティングによって干渉しあう場合があるため、それを考慮しながらプラグインを探すのは一苦労です。プラグインが見つからない場合には当然スクラッチでの実装となる場合もあります。

今回使用したプラグインをご紹介します。

【jquery-parallax-1.1.3】
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
ダウンロードすると以下のjsが入っています。

[jquery.parallax-1.1.3.js]
このjsは、スクロールバーの位置に応じて各divごとの背景画像を制御する、という役割を持っています。
各要素のスクロールスピードを調整してパララックス効果を生み出すのですが、「scrollTop」という値で、「何ピクセルスクロールしているのか」という値を取得、それを元に動かしたい要素の座標値やサイズを指定し、それで視差効果を与えているわけです。
「●●pxで〜な動きをつける」というように、値を見ながら地道にひとつひとつ動きを調整していく作業となります。

[jquery.localscroll-1.2.7-min.js]
[jquery.scrollTo-1.4.2-min.js]
この2つは、サイドナビゲーションをうまく動かすのに必要なjsです。(今回は使用していません)

【jquery.nicescroll】
http://areaaperta.com/nicescroll/
スクロール時に慣性スクロールで余韻を残す効果があります。
(※スクロールをとめてもすぐには止まらず、余韻が残ります。)
オプションでスクロールバーのデザインやスクロールのスピード等を変更する事が出来ます。

◇パララックスサイトを作る時に考えなければならないこと。
全てのオブジェクトを同様に動かしても、それは単に動作が重いとしか感じられなくなるので、ユーザーに不快感を与えてしまう可能性もあります。スクロールに伴うオブジェクト移動のスピード「差」によって疑似的に立体感を感じさせるので、少なくとも2つ以上の異なるスピードを持ったオブジェクトを動かす必要があります。
また、オブジェクト間の奥行きや、スピード「差」が大きすぎると、それぞれの動きに統一感が無いように見え、立体感が感じられなくなるので、奥行きやスピードを調整したり、間に異なるオブジェクトを入れたりすると良いようです。

CSSとjQueryでアニメーション
ブランドイメージをより印象づけるために、CSSとjQueryでダイナミックな動きを加えました。

□要素のフェードイン・フェードアウト
要素ごとに、段階的にフェードインするようなアニメーションをjQueryによって実現しました。
単純にフェードインするだけでなく、スクロールによって所定の位置に配置されたときや、マウスオーバーによってフェードイン、フェードアウトしたりするなどのタイミングやアクションでアニメーションを制御したりしています。

□蝶やBrand Concept、Brand Storyの浮遊する動き
こちらもjQueryによって実現させています。
各要素の上下の動き幅、スピードを変化させています。

□成分のこだわりの要素が左右から中央へスクロールに従って集合する動き
パララックスの応用で、スクロールすると要素が画面中央に集まるエフェクトです。
「scroll_herbs.js」というjQueryをカスタマイズしています。
http://pehaa.com/2011/08/intriguing-animate-on-scroll-effect-jquery-tutorial/

こちらのサイトにあるdemo(リンク)とは大きな構造が違うため、要素のスタート地点とゴール地点の座標を決定するのに少し手間取りました。

□蝶が円を描きながら羽ばたくアニメーション
CSS3で「羽ばたき」の3Dアニメーションを実現させました。
蝶が羽ばたきながらぐるりと回る3Dアニメーションは、遠近感が感じられ美しい表現を可能とします。
ただし、残念ながらCSS3のanimationやtranslate3dはIEに対応していませんので、同じような動きをIEでも表現するために、ブラウザ判定し分岐させ、IE用のjQueryを読み込みました。
複数のjQueryのプラグインを組み合わせ「蝶の羽ばたき」「楕円に沿って移動」「蝶の回転」の3つの動きを、CSS3のanimationやtranslate3dと同等レベルで実現する事が出来ました。

今回は、パララックス効果やアニメーションをCSSとjQueryを利用して実現しました。

パララックスやアニメーションなどは、使用するメリット、デメリット、それぞれあるので、プロジェクトやサイトの特性によって導入すべきかを検討する必要があります。流行っているからと言って安易に導入するのではなく、コンテンツや使用シーン、ユーザビリティなども考慮しなければならないでしょう。今回は情報量が多くないブランドサイトだったので、パララックス効果を利用して情報をコンパクトに見せ、ブランドの世界観を表現するために、アニメーション効果を散りばめました。
また、パララックス効果を実装する際には透過png画像はIEのバージョンによっては表現が難しくなったり、アニメーションはIEでは実現できなかったり、と、ブラウザによって表現が変わってくることもあるので、様々な環境も想定し構築しなければならないでしょう。

]]>
http://html5-lab.jp/example/domestic_example/283.html/feed 0
Facebookとhtml5、Fastbook http://html5-lab.jp/example/domestic_example/297.html http://html5-lab.jp/example/domestic_example/297.html#comments Sat, 20 Jul 2013 07:24:55 +0000 http://html5-lab.jp/?p=297 続きを読む ]]> これまでiOS向けのアプリを、プログラムの90%以上をHTML5で開発していたFacebookは動作速度や安定性で不評を買っていた為に、昨年、ObjectiveCをベースに動作を改善したネイティブアプリケーションをリリースしました。
マーク・ザッカーバーグ氏は、2012年9月、米メディアTechCrunchのイベントで『Facebookのモバイル戦略が、ネイティブアプリでなく、あまりにもHTML5に頼りすぎていた。モバイル戦略ばかりではなく、HTML5に重点をおいた時期そのものが、最大の過ちだった』と語ったそうです。

参考:
http://jp.techcrunch.com/2012/09/14/20120911mark-zuckerberg-our-biggest-mistake-with-mobile-was-betting-too-much-on-html5/

そんなFacebookの発言を聞いて、アプリケーション開発者の為にHTML5のフレームワークやツールを作っているSenchaの技術者が「Sencha Touch」というJavaScriptのフレームワークを利用したハイパフォーマンスなFacebookクライアントWebアプリケーションとして「Fastbook」を開発しました。「Fastbook」は、Facebookのネイティブアプリを模倣したHTML5アプリで、FacebookのAPIを使って実際のデータにアクセスしています

参考:HTML5の可能性を証明したFastbookとは?
http://fb.html5isready.com/
fastbookhero
Facebookのネイティブアプリを忠実に再現したHTML5アプリ「Fastbook」はiOSとAndroidの両方でネイティブアプリと同等、もしくはそれ以上のパフォーマンスを示し、開発したSenchaの技術力と同時に「HTML5」の可能性を証明してくれました。

参考:Fastbookを開発したSenchaのブログ
http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story

iOS/iPhone 4SとAndroid/Galaxy Nexus上でFacebookネイティブアプリをFastbookに対してテストした動画がブログの中で案内されていますので詳しくはご覧ください。
ニュースフィードのローディングやスクロールのスピード感、スムーズさ。ネイティブアプリと同等に動作するだけでなく、Facebookアプリをしのぐ快適な動きで「HTML5だから遅かった」というFacebookの言い訳をくつがえし、Facebookのように巨大なWebアプリケーションでも“使える”ものだと立証した事になります。更に、Facebookの新しい 「Facebook® Technology Partners」に、アプリケーションツールの提供者として追加されました。

このザッカーバーグの発言でHTML5への期待感が一気に萎んでしまった、とも言われていますが、ザッカーバーグ氏は、「HTML5には期待できるが、特にレスポンス重視のアプリでは時期尚早」として、HTML5が悪いわけではない、とも言っています。
そう、HTML5が悪いわけではありません。HTML5そのものの問題ではなく、プログラムの問題も、それを動かすブラウザの問題もある。ブラウザの動作が遅ければプログラムが遅くなるのも仕方無いのです。
この時点では色々なメリットデメリットを考慮した上でのネイティブアプリという選択であったはず、今後またいつかHTML5ベースのアプリが戻ってくるのかもしれません。

]]>
http://html5-lab.jp/example/domestic_example/297.html/feed 0
JavaScriptの役割 http://html5-lab.jp/javascript/278.html http://html5-lab.jp/javascript/278.html#comments Fri, 24 May 2013 01:25:53 +0000 http://html5-lab.jp/?p=278 続きを読む ]]> 今回は、CSS3と共に「HTML5」という言葉で一括りにされている事も多いJavascriptについて書いてみます。

JavaScriptとは、オブジェクト指向のスクリプト言語で、主にWebブラウザに実装され、動的なWebサイト構築や、リッチなアプリケーション、コンテンツなど高度なユーザインタフェースの開発に用いられることは皆さんご存知かと思います。
では、具体的にどのような役割を担っているのでしょうか。

■JavaScriptの役割
JavaScriptを使うと、ユーザインタラクションを監視してそれに反応したり、コンテンツを動的に読み込んだり、様々なAPIで端末固有の機能にアクセスしたりと言ったことが可能となります。
HTML、CSS、JavaScriptそれぞれの仕事としては、データそのものはHTMLコードに記述し、CSSでデータの視覚的要素を定義、JavaScriptで振る舞いを実装する、というそれぞれに役割分担がされているのです。

HTML5では、グラフィックス描画や動画・音楽の再生制御、データの保存、現在地情報の取得などJavaScript から追加できる機能が多く追加されました。ユーザーがプラグインを必要としないで動画を再生できるvideo要素、描画が可能なCanvas要素などJavaScriptからシンプルに扱う事が出来るようになり、HTML5以前ではWeb技術のみでは難しかったインタラクティブなコンテンツ制作が可能となりました。
また、昨今のスマートフォンブームの裏側で、スマートフォン向けアプリの開発が盛況ですが、以前アプリの開発と言えば、JavaやObject-Cを使うのが一般的でした。しかしHTML5をはじめ新しいWebの技術の台頭、モダンブラウザの普及によってネイティブな言語を使わずにWebの技術だけでアプリを作るという動きが活発になってきました。
このように今後ますます活用の場が増えるJavaScriptです。

■たくさんのライブラリがあるJavaScript
JavaScriptには多くのライブラリやフレームワークが提供されています。ライブラリ及びフレームワークのおかげで、JavaScriptが格段に習得しやすくなりました。これらをうまく利用することで、作業時間や技術検証の時間を短縮しながらインタラクティブなWebアプリを作成することが出来るわけです。機能によっては未対応のブラウザもあり、利用する際には確認が必要ですが利用価値は非常に高いとされています。
※ライブラリとは、イチからプログラムを書かなくてもよく使う機能が部品化されてダウンロードできるようになっているものです。

【jQuery】
http://jquery.com/
言わずと知れたjQuery。JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリです。多くのプラグインが公開されており、現在最も人気があるライブラリですから利用している方も多いと思います。シェアが高いので、解説サイトや書籍なども多くあり習得しやすいのも人気の理由のひとつです。
特徴としては、CSSに近い記述方法であり、非常に短いコードで済むので、比較的簡単に習得できると言われています。

参考)http://jquer.in/
JQueryのプラグインを紹介するサイトです。

ゲーム分野では数多くの開発用のフレームワークが登場しており、JavaScriptのライブラリーや情報をまとめているJSwikiによると80以上ものライブラリーが存在し、開発者はどのゲームエンジンを選べばいいのか判断が難しい状況とも言われています。
ゲーム用のライブラリを2点ご紹介します。

【Arctic.js】
http://denadev.github.io/Arctic.js/
DeNAが開発したゲームエンジンです。スマートフォン向けブラウザゲームのインタラクティブなアクションゲーム操作や、複雑なアニメーション表現を支援するJavaScriptです。「Arctic.js」を用いてJavaScriptのコーディングを行うことで、短期間かつ一度の開発でAndroidとiOSの様々なスマートフォンデバイスへ高品質なゲームを構築することが可能です。
また、DeNAが開発したという事で、ドキュメントや資料が日本語で読める事も大きなメリットです。

「Arctic.js」には以下の特徴があります。
・豊富なアニメーション作成支援機能
・表示ツリー、イベント伝播モデル
・ActionScript3.0と近いAPI による、Flash 開発経験者の学習負担軽減
・各種スマートフォンOSの断片化を吸収し、開発工数を大幅に削減

「Mobage」に提供されている「住み着き妖精セトルリン」「海賊トレジャー」「ガンダムロワイヤル」で使用されているそうです。

【Almight】
http://almight.jp/
ノベルゲーム・アドベンチャーゲーム用のゲームエンジンで、プログラムの知識が無くても素材を組み合わせる事でゲームを作成する事が出来ます。
ノベルゲーム・アドベンチャーゲームによく使われる機能を標準で搭載していいて、セーブ・ロード画面、環境設定から、選択肢の表示と分岐など。パラメータを少し編集すれば、CGモードや回想モードも実装出来ます。これらをプログラミング知識不要で、ゲームを作ることが出来ます。ゲームの開発に必要なものは、テキストエディタとブラウザのみ。ゲームエンジンの利用も、商用・非商用問わずに無料です。

上記のようなフレームワーク以外に、カヤックが運営している「jsdo.it」は、Webデザイナー、マークアップエンジニア、JavaScriptエンジニアといったフロントエンドエンジニアのための、コードコミュニティで、コードがWeb上に保存、作品として公開されています。

【jsdo.it】
http://jsdo.it/
共有されているコードをアレンジして、最先端のテクニックを手に入れることができます。
jsdo.itから2点印象に残ったものをご紹介します。

http://jsdo.it/os0x/4ObQ
クリックするたびに、画面がはじけるような演出がかっこいい!
JSだけでこんなにリッチな作品が!

http://jsdo.it/Biske/e36O
一瞬、「これ動画!?」と思ってしまうほどつくり込まれたアニメーション。
個人的には、東京モード学園のCMっぽいと思いました。

今回、JavaScriptについて調べてみて、いくつかのサイトや書籍にあったのですが、「JavaScriptはあくまで効果や振る舞いを実装するためのものであり、Webサイトはあくまでユーザーに情報を伝えるためのもの、という事を忘れてはならない」と。スマートデバイスの普及で、様々な場所から閲覧する人もいるでしょう、読み込みがうまくいかず情報が読み取れないという事が無いよう考慮すべきだという事でした。
伝えるべき情報はしっかりHTMLで記述し、JavaScriptで様々なエフェクト効果を実装する、という役割分担が必要という事ですね。

以前は敷居の高かったアプリ開発、HTML5やJavaScriptの技術向上により取り組みやすくなり、今後もユーザーを楽しませてくれるWebサービスやアプリが生まれるのが楽しみです。

]]>
http://html5-lab.jp/javascript/278.html/feed 0
CSS3とは? http://html5-lab.jp/css3/271.html http://html5-lab.jp/css3/271.html#comments Fri, 10 May 2013 07:09:26 +0000 http://html5-lab.jp/?p=271 続きを読む ]]> HTML5と共に話題になることの多いCSS3。今回はこのCSS3について調べてみました。
CSSは文書の論理構造を記述するHTMLに対し、視覚的構造を規定するための規格で、HTMLのスタイル(見栄え)を指示することが出来ます。これまでのCSSに新しく便利な仕様を加えた最新版がCSS3というわけです。2011年から段階的に公開されており、現在も仕様策定作業が進められています。

■これまでのCSSとCSS3との大きな違い
基本的な部分は特に変わりません。記述方法も以前のままです。
これまでのCSSとの大きな違いとしては、画像を使わなくても丸やグラデーションなどの表現ができるようになったという点に代表される、表現力が豊かになった点です。これまでは角丸にしたい場合は角が丸くなった画像を用意しておいて、といった処理をしていましたが、CSSだけで表現できるようになったのです。他にも影やグラデーションをつけたりすることもできるようになりました。このように表現力が豊かになり、便利な機能が増えました。
また、細分化して管理しようという考え方から、「セレクタ」や「フォント」、「テキスト」など、さまざまな機能がモジュール化され、モジュールごとの開発が進められています。つまりCSS3は、CSS2.1のような1つの仕様を指す呼称ではなく、モジュールの総称というわけです。

■HTML5と一緒に使わないとダメなのか?
冒頭でHTML5と共に話題になることが多いと書きましたが、HTML5+CSS3と表現されている事がとても多いのは事実です。しかしHTML5と組み合わせて利用しなくても、HTML4.01で作成したサイトであってもCSS3を使用することは可能です。
基本的には、HTML5でもHTML4でもXHTML1.0でも、関係なく使用できます。問題はブラウザが対応しているかどうかという事です。
また、従来のCSSとも互換性があるので、CSS3とCSS2.1の記述が混在していても問題ありません。

■ブラウザ対応~プログレッシブエンハンスメント
最新のブラウザではCSS3はほぼ実装されていますが、IE6~8は残念ながらほとんどサポートされていません。このような状況では、対応しているブラウザではよりリッチに、非対応ブラウザではそれなりに見ることのできる方法が必要になってくるでしょう。
この考え方を「プログレッシブエンハンスメント」と言います。
高度なブラウザ環境にあるユーザー(CSS3に対応しているブラウザを使用)に対しては、よりリッチなビジュアルデザインや機能を取り入れて提供、環境に恵まれていないユーザー(CSS3に対応していないブラウザを使用)には、それに合わせて最低限のビジュアルや機能を提供しようというものです。
もちろんWebサイトの情報としてはどちらでも過不足なく提供されることが前提となります。
どのブラウザでも同じように見せる「クロスブラウザ」という考え方もありますが、古いブラウザに合わせて制作されることが多く、新しい技術を取り入れることが難しくなります。昨今、デバイスが多様化してきた状況下では現実的ではないといった背景からプログレッシブエンハンスメントの考え方が普及しはじめました。

■事例
では実際どのように活用されているのかCSS3の事例をご紹介します。

1:1 pixel|サイバーエージェント公式クリエイターズブログ
『SPピグで見るCSS3活用事例』
http://ameblo.jp/ca-1pixel/entry-11215557737.html
あのアメーバピグのスマートフォン版ではCSS3を多用しているそうです。
丁寧な説明が書かれているのでとてもわかりやすいです。

2:noupe
『100 Great CSS Menu Tutorials(CSS3を使った かっこいいグローバルナビゲーションメニュー100事例と作り方。)』
http://www.noupe.com/css/100-great-css-menu-tutorials.html
CSS3で制作された(一部jQueryを併用)グローバルナビゲーション100事例と、その作り方が説明されています。ソースの解説もあるので便利ですね。

3: 裏技shop DD
『画像を一切使わずにCSS3だけでドラえもんを描いてみた! 』
http://shopdd.jp/blog-entry-932.html
すごいです、画像を使わずCSS3だけでここまで書けるとは驚きです。対応しているブラウザで見たドラえもんとIE8で見たドラえもんがありますので必見です。

これまで画像を使用して表現していた事が可能になったCSS3、画像の重さが懸念であったワンソースで制作するレスポンシブWebデザインには必要不可欠なものになっていくことでしょう。
既存のCSSソースに追加することも出来ますので、HTML5以前のHTMLでも使用出来るので、どんどん活用していきたいですね。

]]>
http://html5-lab.jp/css3/271.html/feed 0
HTML5事例/2014年度採用サイト http://html5-lab.jp/example/domestic_example/228.html http://html5-lab.jp/example/domestic_example/228.html#comments Tue, 09 Apr 2013 02:16:24 +0000 http://html5-lab.jp/?p=228 続きを読む ]]> 毎年12月ごろリリースされる採用サイト。毎年制作されるサイトだから、トレンドや最新の技術が盛り込まれているものが多く楽しみです。
これまでの採用サイトと言えばFlashの利用が目立ちましたが、今やほとんどの学生がスマートフォンを持ち採用活動にも使っているため、Flashを使わずにHTML5、CSS3で制作し、さらにレスポンシブとはいかないまでもスマートフォンでの最適化は必須となるでしょう。
それでは、今回は魅力的なHTML5の採用サイト事例をご紹介します。

1:リクルートホールディングス|新卒ネット領域採用サイト
http://recruit-jinji.jp/
リクルートホールディングス|新卒ネット領域採用サイト
グローバルナビゲーションのアニメーションに始まり、右端にもメニューを設ける画面構成に、スマートフォンでよくみかけるメニューのナビをリストとして起用している点、パララックスも取り入れたり、ナビゲーションを押すたびに配置や円の大きさがランダムで変わる芸の細かさ。新卒向けに最先端を走っている事をアピールするWEBトレンドが満載に盛り込まれたサイトです。

2:サイバーエージェント|2014年新卒採用特設サイト
http://www.cyberagent.co.jp/recruit/2014/
サイバーエージェント|2014年新卒採用特設サイト
社員の顔とマス目をいかしたデザインなど、1ページ1ページデザインが凝っています。レスポンシブではないもののスマートフォンサイトも見やすい画面構成と色鮮やかさでとても充実しています。

3:カヤック|いでよ!新社長 | 面白法人カヤック 新卒採用コンテンツ2014
http://www.kayac.com/company/fresh/2014/
カヤック|いでよ!新社長 | 面白法人カヤック 新卒採用コンテンツ2014
未来のCEO、CTO、CBOを募集というなんとも斬新なカヤックらしい企画。出世診断や初任給診断などのコンテンツも面白い。大学生でなくても興味をそそる、さすがの演出です。仁義なき戦いのBGMも。お仕事中の方、要注意。

4:コスモ石油|新卒採用サイト 2014
http://www.cosmo-oil.co.jp/recruit/newgraduate/
コスモ石油|新卒採用サイト 2014
コスモ石油だけに、宇宙(コスモ)をイメージしたデザイン。ふわふわと浮かんでいる様子で、宇宙の世界観を表現しています。全体的にかわいらしいイラストを多用していて、親しみやすく、学生も興味を持って見れそうです。

5:ホーマック|2014年度 新卒採用サイト
http://www.homac.co.jp/-/recruit/2014/
ホーマック|2014年度 新卒採用サイト
ホームセンター、ホーマックの採用サイト。シンプルでわかりやすいデザインと構成。さりげない雲やグラフの動きなど、細部にアニメーションが効果的に使われています。レスポンシブ風ですがそうではなく、スマートフォン最適化されていてとても見やすくなっていました。

6:日本調剤|プラスバイプラス 新卒採用2014
http://www.nicho.co.jp/shinsotsu/
日本調剤株式会社|プラスバイプラス 新卒採用2014
キーワードを組み合わせて見るコンテンツやゲームなど、楽しみながら企業を知ることが出来るような演出になっています。非常に濃く深い情報量ですが、キーワードを組み合わせることで探しやすくしています。レスポンシブWebデザインを採用しており、小さい画面の中でも情報は整理され非常に見やすい構成となっていました。

7:三井不動産リアルティ|リクルーティングサイト2014
http://recruit.mf-realty.jp/shinsotsu/
三井不動産リアルティ|リクルーティングサイト2014
レスポンシブWebデザイン。ブラウザサイズの変更に切り替わるコンテンツの動きがとても気持ち良いです。アニメーションなど特に凝ったギミックは使用していないものの、赤をポイントに美しくまとまったサイトでした。

8:オロ|2014年度採用サイト
http://www.oro.co.jp/recruit/
オロ|2014年度採用サイト
トップページで動きまわるバーはマウスに反応し、スタッフ紹介への導線となっています。スマートフォン最適化されていますが、一部コンテンツはPC向けのサイトへ誘導しています。PC用サイトも非常にシンプルな構成なので、そのままスマートフォンで見てもとてもわかりやすく操作しやすいです。

9:DNPデジタルコム|採用サイト
http://www.dnp-digi.com/recruit/2014/index.html
DNPデジタルコム|採用サイト
トップページはオフィスをイメージしているようで、常に人の動きが見えます。画面下の時間バーをスライドすると、人の動きや社内の様子が変化します。これらのアニメーションはもちろんFlashを使わずにHTML5にて作られています。

10:アトレ|2014新卒採用サイト
http://www.atre.co.jp/company/recruit/newgraduate/
アトレ|2014新卒採用サイト
駅ビルアトレの新卒採用サイト、トップページはドラマチックなイメージでカッコイイですね。直観的にクリックしやすくてわかりやすいです。レスポンシブではなくPC用ページがスマートフォンでも違和感無く見れるように作られています。グラフなどもアニメーション効果を入れてあり、単調な数値データも見せ方次第で楽しくなりますね。

以上10件、HTML5で制作された採用サイトの事例をご紹介しました。
レスポンシブWebデザインを採用していたのは、10社中2社でしたが、学生向けのサイトと言うことで他全てのサイトでスマートフォンでの最適化など、対応されているように見えました。
また、マウス操作に反応するギミックが多く取り入れられていたのと、グラフや背景など細かい箇所でアニメーションを使っていたりしました。
ただ、調査してみた結果、これは面白い!というサイトはたいていFlashで作られていました。魅力ある面白いコンテンツは“Flash”という認識がまだまだ常識なのかもしれません。
新しい技術にチャレンジしやすい採用サイト、今年は昨年よりHTML5の可能性は認知されていくでしょうから、今年度の終わりにまた多くのHTML5での採用サイト事例をご紹介することを楽しみにしたいと思います。

]]>
http://html5-lab.jp/example/domestic_example/228.html/feed 0
HTML5事例/Flashを使わなくてもここまで表現できる http://html5-lab.jp/example/domestic_example/182.html http://html5-lab.jp/example/domestic_example/182.html#comments Fri, 29 Mar 2013 08:05:55 +0000 http://html5-lab.jp/?p=182 続きを読む ]]> 今回はFlash を利用しなくてもここまでのアニメーションが実現できるのか!と実感できるHTML5の事例を紹介いたします。早くからHTML5を採用し、2010~2012年にリリースされたサイトです。

1:ユニクロ|UNIQLOOKS
http://uniqlooks.uniqlo.com/
02
Facebookと連動したjavascriptで作られたファッションコミュニティサイトです。ユニクロ商品を身に付けたユーザー自身が投稿するスナップ写真を通じ、グローバルで情報を共有することで世界最大のファッションコミュニティサイトを目指しているようです。

2:HTML5 Experiment
http://9elements.com/io/projects/html5/canvas/
03
ゲーム、WEBサイトの制作会社が作ったHTML5を利用した実験的なサイトです。HTML5に関連するツイートを読み取り、粒で表示されています。粒はマウスに反応し、クリックするとツイートが表示されます。ツイートの中に日本語からの投稿も含まれていました。

3:canvasmol
http://alteredqualia.com/canvasmol/
04
分子構造を確認できるサイトです、HTML5でアニメーションはここまでできるのかと実感したサイトです。iPhoneからでも見ることができますが、アニメーションの数を増やしていくとやはり、速度は遅くなります。

4:Mona Lisa Singing
http://roxik.com/mona/
05
こちらも同じく、HTML5のアニメーションの可能性を確認できたサイトです。モナリザや写楽の顔を引っ張って変形することができます。スマートフォンでも問題無く見ることができます。

5:The Shodo/書道
http://www.theshodo.com/
06
2010年にIE9の可能性を伝えるためにbAが制作したサイトです。
(記事参照:http://www.itmedia.co.jp/pcuser/articles/1009/17/news043_5.html
Web上で書道が楽しめるのですが、非常にスムーズに筆運びが出来、なかなかの文字が書けます。BGMも「和」のムード満点です。IE10をインストールして、とFunctionが出ましたが、Chromeでも問題無く動きました。サクサク気持ちよく書けました。

6:カヤック|HTML5杯
http://html5cup.kayac.com/
07
言わずと知れたカヤックの制作。CSSアニメーションとHTML5を活用して作成されたという9種類のゲームが楽しめるWebコンテンツ集、昨年夏ロンドンオリンピックを前に作られたものです。それぞれのゲームは面白くてちょっとはまりました。
キーボード連打でタイムを競ったり、画面解像度で砲丸投げの距離を測ったりアイデアも素晴らしいですが、これがCSSアニメーションやJSライブラリ、HTML5の技術で開発したとは驚きです。

7:パナソニック|LAMDASH DNA
http://panasonic.jp/lamdash/dna/
08
メンズシェーバー 「ラムダッシュ」のブランドコンセプトや歴史、開発者のインタビューを紹介するプロダクトサイト。canvasを使ってDNAの曲線を表現しています。
なめらかで美しい動きは圧巻です。多少の動きは違えどスマートフォンでも同じように見えました。

8:アドビ|The Expressive Web
http://beta.theexpressiveweb.com/
09
アドビが立ち上げたHTML5やCSS3の機能を使ったサンプルサイトです。ブラウザのサポート状況や該当機能を利用した他事例、チュートリアルまで用意されています。
まるでFlashのようなアニメーション、デザインも素晴らしい。当然レスポンシブにも対応しており、スマートフォン、iPadなどでも見ることが出来るのはさすがですね。とは言え、スマホの画面サイズで見るのは少々物足りないです。

9:Tunnel vision 3D CSS – CodePen
http://codepen.io/peterwestendorp/full/JEomi
Tunnel vision 3D CSS - CodePen
CSS3で作ったトンネルです。色のグラデーション、どこまでも続くトンネル、このままどこかに連れて行かれるような感覚になる、とても美しいサイト。
スマートフォンでもPCと同様に美しく見えました。吸い込まれそうです。

10:Mickaël Larchevêque – Interactive Designer
http://dotmick.com/
Mickaël Larchevêque - Interactive Designer
フランス人デザイナーのポートフォリオサイト。
最近流行っているサークル(円)を使用。デザイン上のワンポイントというだけでなく、ナビゲーションとしてサークルを利用していますが、マウスオーバー時やページ遷移時の効果が面白い。トップページのみレスポンシブ対応されており、サークルが縦に並んで見えましたが、下層ページはPCサイトと同じでした。

11:Canvas Cycle: True 8-bit Color Cycling with HTML5
http://www.effectgames.com/demos/canvascycle/
Canvas Cycle: True 8-bit Color Cycling with HTML5
256色の8bitカラーで描かれた絵をHTML5で動的に再現。canvas要素を使用しています。川の流れ、波の動きなどのアニメーション効果が施されており、スピードを変えられるというオプションも。ドット絵とは思えない美しい絵がたくさん用意されています。
スマートフォンでもPCと同様に見れました。

12:MoMA | Century of the Child
http://www.moma.org/interactives/exhibitions/2012/centuryofthechild/
MoMA | Century of the Child
ニューヨーク近代美術館(MoMA)で開催された、子供のためのデザインを集めた展覧会「Century of the Child: Growing by Design 1900-2000」のオンライン版です。玩具やポスターなど、子供にまつわるデザインを年代別に集めてあります。子供のテクテク歩く姿がかわいらしいです。
レスポンシブデザインではなく、スマホ用トップページが用意されていましたが、PCページのような効果や詳細ページ、PCページへの導線も無く残念でした。

13:Sketchy Structures: HTML5 Canvas – the works and portfolio of Jay Weeks
http://jayweeks.com/sketchy-structures-html5-canvas/
Sketchy Structures: HTML5 Canvas - the works and portfolio of Jay Weeks
デザイナーJay Weeksの作品。canvas要素を使用したツール、マウスの奇跡が描画され、描画されたものは画像として保存も出来ます。
スマホではサイトとしては見えるものの、PCサイトのように描画は出来ませんでした。

14:Sketch Toy
http://sketchtoy.com/
Sketch Toy
こちらもcanvas要素を使用したツールSketchToy、まさにスケッチブック。自由にお絵描き出来る描画ツールです。ツールの太さや色が変えられるのですが、VIBRATIONの値を変更すると、絵がブルブル震えて面白い。SAVEをクリックするとURLが記録され、ブルブルもしっかり保存されていました。
http://sketchtoy.com/29544809
PCサイトがスマホでも同じように見え、同じように描画出来ましたが、若干横幅が足りずメニューが全て見えませんでした。横にずらそうとすると描画されてしまうのでうまく横スクロールが出来ませんでした。

15:20 Things I Learned About Browsers and the Web
http://www.20thingsilearned.com/ja-JP/home
20 Things I Learned About Browsers and the Web
Google Chromeチームが制作したHTML5で表現された電子書籍。インターネットやWebの基礎をイラスト付きで楽しく学べるガイドブックです。デザインはもちろん、ページめくりのアニメーション効果も、まさに本物の絵本のよう。多言語対応で日本語でも読むことが可能です。ライトのオンオフの変更、拡大縮小、印刷機能などなど、とても良く出来ています。これらの技術はオープンソースとして公開しているようです。
スマホでもPCサイトが同じように見ることが出来ましたが、そのままのサイズで見えている為、スマホでの閲覧は小さくて厳しいかなという印象でした。

16:The Production Kitchen
http://www.jacquico.com/
The Production Kitchen
The Production Kitchenというケーキ屋さんのサイト。卵を割る工程から、ケーキが出来るまでを手書きイラストで紹介。可愛らしいアニメーションが入っていたり、キーボードで遊べたりあちこちに楽しい仕掛けがあり楽しいサイトです。スマホ用にLITE VERSIONが作成されていました。スマホで可愛いイラストやアニメーションが見れないのは残念。

17:modern carpentry rides the html5 canvas wave
http://modern-carpentry.com/workshop/html5/waveform/
modern carpentry rides the html5 canvas wave
ウエーブする破線の、広さ、波長などの効果をスライダーで変更することが出来ます。スマホでも同じように見えましたが、スライダーを動かすのが難しく効果を変更することは出来ませんでした。

18:Liquid Particles – spielzeugz.de canvas experiment
http://spielzeugz.de/html5/liquid-particles.html
Liquid Particles - spielzeugz.de canvas experiment
英国に拠点を置くエンジニアにおける実験サイト。鮮やかな色のドットがマウスポインタに集まり追いかけてきては弾けます。ドラッグすると、鮮やかな世界が広がり、とてもキレイです。スマホでもページとしては同じように見えましたが、マウスを追いかける等のアクションは表現されていませんでした。

PC向けの特設サイトや、試験的に制作されたサイトだからでしょうか、2010年、2011年と少し古いものもあったからかもしれませんが、レスポンシブ対応という観点で言うと、18件中1件が対応、5件がスマホでも問題無く閲覧できる程度にとどまりました。
次の記事では、毎年リニューアルされトレンドが盛り込まれる採用サイトの事例から、HTML5とレスポンシブWebデザインの事例を見ていきたいと思います。

]]>
http://html5-lab.jp/example/domestic_example/182.html/feed 0
HTML5へのIE対応について http://html5-lab.jp/html5/159.html http://html5-lab.jp/html5/159.html#comments Tue, 26 Feb 2013 06:51:49 +0000 http://html5-lab.jp/?p=159 続きを読む ]]> HTML5化は進んでいない?
以前、日本国内の上場会社(東証1部、2部、マザーズ、旧ヘラクレス)の「情報・通信業」355社のサイトがHTML5で構築されているかを調査しました。
サイトのデザインは刷新され、最新のトレンドを意識していても、ソースを開いてみるとHTML5で制作していないことがほとんどで、HTML5を使用していたのは27社(7.6%)、レスポンシブの対応は3社(0.84%)と、思いのほかHTML5の導入が進んでいないことがわかりました。

ブラウザのHTML5への対応状況など見ながら、考察してみます。

ブラウザーの対応状況
皆さんの使用しているブラウザがHTML5に対応しているか確認してみましょう。
http://html5test.com/

「your browser」では、自分の現在使用しているブラウザのスコア、つまり、どの機能に対応しているかによって自分の使っているブラウザに点数が付けられます。
「other browsers」では、様々なブラウザのバージョンのスコアが掲載されており、スコアが高いほどHTML5に対応しているということがわかります。

[You are using Chrome 25 on Mac OS X 10.8.2]

私の使っているOSとブラウザが表示されています。
私はChromeをメインブラウザとして使用していますが、500満点中463点というハイスコアが出ました。
各機能についても、ほぼ「Yes」になっていました。

IE10でやってみたところ、

なんと320点でした。
IE10でさえ320点という事は・・・ver8以下では・・・恐ろしい結果になりそうですね。

ブラウザシェアとHTML5対応バージョン/デスクトップ
2012年2月から2013年2月までのシェア率を調べてみました。
http://gs.statcounter.com/#browser-ww-daily-20120201-20130201

blog20130226_03

1位:Internet Explorer:53.99% → 8以降対応
2位:Chrome:20.58% → 3.0以降対応
3位:Firefox:14.35% → 3.1以降対応
4位:Safari:8.27% → 3.0以降
5位:Opera:0.98% → 9.6以降対応

やはり日本ではまだまだIEは強いですね。(地域をWorldWideに変更すると、1位(IE)と2位(Chrome)は逆転するのですが)
IEは、一部大手企業などで6、7を利用していると思いますが、HTML5にはver8以降しか対応していません。
以前にもご紹介したfindmebyIPで見てみます。

IEの列がほとんど「×」となっているのがわかります。
HTML5には新しい要素が多く追加されましたが、IE8以下はHTML5の新要素には対応していないので、要素が無視されてしまいスタイルが適用されません。スタイルが適用されないとはつまり、ソースコードで指示を出した通りに反映されないという事で、IE以外のブラウザでは表示や見栄えが全く異なってしまう、という事です。

IE以外のブラウザはどうでしょう。

MacOSに標準装備されているSafariは、Safari3.0からHTML5への対応が本格的に始まっています。

GoogleのChrome はHTML5でできることを示すために以下のサイトをリリースしています。
http://www.thewildernessdowntown.com/

Operaの開発チームは、HTML5の開発に関与しているという経緯があり、2009年現在でリリースされているOpera9.6はすでにHTML5の機能が実装されています。

IEのHTML5対応
さて、ver8以降にしか対応していないIEですが、どうにも出来ないのでしょうか。。

HTML文書内にIEに対応させるためのライブラリを読み込ませる処理で、IEの下位バージョンでもある程度は認識させる事が可能となります。ただ、完璧にHTML5+CSS3が実装でき保証があるものではないので、HTML5+CSS3を適用した箇所について、注意深く、正常に動作しているか一箇所ずつ検証していく必要があります。

それでは、IE対応によく使われているライブラリをご紹介します。
※出来る事、出来ない事がそれぞれありますので、各サイトでご確認ください。

・html5shiv
http://code.google.com/p/html5shiv/
IE8以前のブラウザにも、基本的なHTML5のタグを認識させるためのライブラリです。

・CSS3 PIE
http://css3pie.com/
JavaScript を使ってIE6〜8のCSS3プロパティを表示可能にします。
角丸、シャドウ、ボーダー画像、複数背景画像、グラデーションに対応しています。

・ie9.js
http://code.google.com/p/ie7-js/
IE6〜8でもセレクタを使えるようにするJavaScriptで開発されたライブラリです。
「W3C標準仕様に近づける」「IE9に近づける」ためのライブラリなので、出来なくなる事もありますので注意してください。
(参考)http://www.torounit.com/blog/2011/06/07/793/

・Selectivizr.js
http://selectivizr.com/
IE6~8でもCSS3セレクタが利用できるようになりますが、使えるセレクタの種類はライブラリによって異なるようです。

まとめ
社内で使用するメインブラウザにIEを指定し、IEのバージョンが6、7と古いものを推奨している企業もまだまだ多いと聞きます。大企業や上場企業は特にそうでしょう。

ここまで見てきたように、IEの古いバージョンに対応する為にはかなりの労力が必要になります。
このような技術力やコスト、かかる工数など様々な理由から企業での導入が遅れていると言えそうです。

HTMLで構築するメリットをもう一度考えてみます。
企業サイトであれば、マルチメディア対応などは現実的にはあまりメリットとして享受出来ないかもしれません。HTML5、CSS3と言うと派手なギミックが注目されがちですが、セマンティックなマークアップによるSEO効果、ビデオ、オーディオ機能、canvasによる描画機能にはメリットがあります。プラグインを使用せずに構築し、様々なデバイスで快適に閲覧する環境を作る事も可能です。

デメリットとしては、古いバージョンのブラウザに費やすHTML5の「実装」と「検証作業」の時間が、通常の制作と比べてコストが大幅に増加することです。

現状では上記の比較でデメリットのほうが大きいと判断する企業が多いため、全体的にもHTML5導入があまり進んでいないというのが実情なわけです。

構築する際には、これから作るサイトの特性やメリット・デメリットをよく考慮して導入を検討する事が必要ですね。

さて、次の記事では、アニメーションが目立つHTML5の事例をご紹介したいと思います。

]]>
http://html5-lab.jp/html5/159.html/feed 0
モバイルファーストという考え方 http://html5-lab.jp/responsive/146.html http://html5-lab.jp/responsive/146.html#comments Tue, 29 Jan 2013 03:01:57 +0000 http://html5-lab.jp/?p=146 続きを読む ]]> レスポンシブWebデザイン設計には非常に重要な「モバイルファースト」という考え方について調べてみました。

モバイルファーストとは

「モバイルファースト」を最初に唱えたのは、Luke Wroblewskiという米国のデザイナー、開発者で、2010年4月ごろ、とされています。
「モバイルファースト」とは、モバイルでの利用を起点に考えてWebサイトを設計しよう、という考え方です。

これまでは、PCで見るという大前提の中でのWeb制作であったため、当然、PCで見るためのWebサイトを優先的に設計するのが通常でした。
モバイル用のサイトはたいていの場合は後回しで、最低限の情報でいい、とかPC向けのサイトがほぼ完成してからサクッと作る、と言った具合に軽視されていたように思います。

しかし、現在のWeb閲覧状況と言うと、PCで見る時間はどんどん減り、スマートフォンなどのモバイル環境で見る時間が増え、これまでのようにPCで見る事が大前提という事自体が覆されてしまっているのです。

・2012年メディア定点調査
http://www.hakuhodody-media.co.jp/newsrelease/report/20120613_6197.html
特に携帯電話からのインターネット時間が40.4分と、2008年からの4年間で2.3倍以上になっています。
メディア定点調査

・スマートフォン市場規模の推移・予測(12年3月)
http://www.m2ri.jp/newsreleases/main.php?id=010120120313500
2012年3月末の時点で、スマートフォン契約数は2,522万件、2017年3月末には8,110万件になると予想されています。

これらのソースからも、モバイルを使う環境、接触する時間が増大し、またこれからも飛躍的に伸びていくと考えられ、我々、制作者やコンテンツ提供者は、モバイルで見られる事を大前提に考えなければなりません。

モバイルファースト、つまりコンテンツファースト

「モバイルファースト」は「コンテンツファースト」と言い換えることも出来ます。
モバイルでWebサイトを見るという事は、PCで見る場合と違い、ユーザーがどんな状況に置かれているかわからないので余計な情報を削ぎ落として、ユーザーに最適な情報だけを提供する、事が最善の形となります。

モバイルファーストは、「モバイルを起点に考える」という考え方ですが、それはつまり本当に必要なコンテンツを提供する、コンテンツそのものが大事であるという、コンテンツファーストに他ならない、というわけです。

レスポンシブWebデザインは、モバイルファーストで考える

レスポンシブWebデザインは、Webサイトを画面の解像度によって切り替える手法ですが、PCで見るWebサイトを基準に考えてしまうと、スマフォサイズで表示された時に、画像が重くて表示が遅い、情報が多過ぎて見づらい、など良い結果になりません。
ユーザーにとって、見た目はさほど重要ではなく、それよりも必要な情報をいかにスムーズに取得出来るか、と言う事が重要なのですから、設計時には、モバイルファースト(コンテンツファースト)で考え、最低限必要な要素から配置するなど、軽量なコンテンツ設計から始めるのが良いとされています。

但し、間違えやすいですが、モバイルファーストイコール、モバイルサイト優先ではないという事。
モバイルファーストの根底にはコンテンツファーストが有り、それは全てのデバイスのコンテンツにとって一番重要な要素です。

PCよりも機能が制限された、画面の小さい環境で、閲覧するユーザーのことを考えて制作することで優先度の高い情報や機能に絞られ、より洗練されたサービスやWebサイトが作りやすくなるのだと思います。

]]>
http://html5-lab.jp/responsive/146.html/feed 0
レスポンシブWebデザイン/海外事例と役立つサイト紹介 http://html5-lab.jp/example/overseas_example/92.html http://html5-lab.jp/example/overseas_example/92.html#comments Wed, 02 Jan 2013 18:16:46 +0000 http://html5-lab.jp/?p=92 続きを読む ]]> 本日は、 2回目にひき続きレスポンシブWebデザインの事例(海外)と知っておくと便利で役立つサイトをご紹介させていただきます。いちからCSSを組むのではなくフレームワークなどの利用が注目されており、グリッドシステムを採用し初心者でも簡単にカッコイイサイトが作れるtwitter bootstrapFoudation3などのCSSフレームワークがあります。

( レスポンシブWebデザイン海外事例 )
1:http://www.starbucks.com/


2:http://earthhour.fr/

3:http://bryanconnor.com/


4:http://www.barackobama.com/


5:http://www.tilde.io/


6:http://leica-explorer.com/

7:http://twitter.github.com/bootstrap/

8:http://www.brookings.edu/

9:http://interim.it/

10:http://owltastic.com/

 ( レスポンシブWebデザインに役立つ )
制作時間の短縮ができるフレームワークや検証ツール、設計に役立つサイトが出ていますのでご紹介いたします。

■フレームワーク:お手軽にレスポンシブデザインを実現できるCCSのフレームワークFoudation3

■設計:HTML5とCSS3のサポート状況が確認できるfindmebyIP.com

■検証:ホームページを端末毎に一括表示して確認できるサービス
The Responsinator


Responsive Design Testing

 

 

]]>
http://html5-lab.jp/example/overseas_example/92.html/feed 0