デジタルマーケティングやWebアプリの企画開発を手がけるtadashikuのメンバーが、いま話題のサイトをピックアップ。UIやフロントエンドの技術を中心に、サイトの裏側に迫ります。 アディダスが立ち上げた、フットボール向けシューズブランド「predator lethal zones」のキャンペーンサイト「predator lethal zones」。このスマートフォンサイト、操作感がたまらなく気持ちいいです。ついつい、細部まで見てしまう、商品が欲しくなってしまうサイトです。なにがそんなに気持ちいいのか、UIに注目してみましょう。

スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） 本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。 レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック 定価：2,625円 (本体2,500円)／形態：B5変 (232ページ) ISBN：978-4-04-886323-0 レスポンシブWebデザイン（Responsive Web Design）

jQuery Mobileの採用が国内でも進んでいる。jQuery Mobileは、iPhone/Android、WindowsPhoneやBlackBerryなど、主要なスマートフォンに対応したUIフレームワーク。HTMLに簡単な記述を追加するだけで、スマートフォンに最適化したサイトやWebアプリケーションを制作できる、注目のフレームワークだ。 昨年11月には、待望の「jQuery Mobile 1.0」正式版がリリースされ、実務でも本格的に利用しやすくなった。今後、ますます増えそうなjQuery Mobileを使ったスマートフォンサイトの事例をチェックしておこう。 ※商品紹介／キャンペーンサイトに、「太鼓の達人学園（太鼓の達人×AKB48キャンペーンサイト）」を追加しました。（2012年3月1日16時更新） ※ネットサービスに、「一休.com」「recbike」を追加しました。（201

2012年02月09日　13時58分更新 文●斉藤祐也／<a href="http://css.studiomohawk.com/">CSS Radar</a> 最近のWebサイトは大規模傾向にあり、Webアプリケーションを構築する機会も増えてきました。jQueryやMooToolsなど、JavaScriptを手軽に利用できるようにするライブラリーが普及する一方、Webサイトの表示を担うCSSにも、「Blueprint」や「960 Grid System」に代表されるフレームワークが登場しています。 「LESS」や「Sass」のようなCSS拡張メタ言語は、こうしたフレームワークとは異なり、CSSの言語自体を拡張し、CSSには存在しない機能を追加するものです。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加でき、CS

アップルが1月20日に発表した電子書籍作成ツール「iBooks Author」。さっそくダウンロードして使ってみた方も多いのではないでしょうか？　アップルは、学生が使用する電子教科書の作成を目的としたツールとしていますが、iBooks Authorを使えば、画像や動画などのリッチコンテンツを埋め込んだインタラクティブな電子書籍を手軽に作成できます。 注目は、電子書籍の中にHTMLも埋め込めることです。つまり、自分で作成したHTML5+JavaScriptのプログラムを組み合わせて、よりインタラクティブな電子書籍を作成できるのです。 実際に試してみると、MP3形式などのサウンドは埋め込めないなど、若干の制限はありますが、ちょっとしたゲームや観光案内コンテンツなどを1つのパッケージとして配布できるのはメリットです（ただし、有料で販売する場合はiBooks Storeを介する必要があります）。

おとそ気分で社内を暇そうにウロウロしていたら「HTML5の常識、わかっていますよね」と怖い怖い一回り年下の編集長から叱られてしまいました。この後、HTML5関係の仕事がくることは間違いがありません。 しかし、ワタクシは50代。困ったことに、この編集長の「わかる」とワタクシの「わかる」とは程度が違います。これは困りました。正月早々、首筋がすーっと寒くなってしまったので、優しいけど仕事に関しては編集長よりも厳しい二回り年下のデスクに相談。 「HTML 4と比較しながらHTML5の違いをまとめて記事にするところから、始めてみてはどうですか」と先手必勝のようなお題を与えてくれました。どこまでこのお題をこなせるのか。65歳定年になれば、あたりまえの日本企業の縮図のなかで、50歳を過ぎての「HTML5の基礎知識」をまとめてみました。 DOCTYPE宣言が超簡単に DOCTYPE宣言が超簡単になったのは

この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 好評だった前編に引き続き、Web制作者が見ておきたいスマートフォンサイト（日本語／企業サイト限定）を業種別に分類して紹介する。スマートフォンサイトの制作に入る前にチェックしておこう。

「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （本体2,600円）／形態：B5変 (240ページ) ISBN：978-4-04-866070-9 HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に（勝手に）リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思い

ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア　浜 俊太朗さんが解説します。（編集部） 「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き! HTML5マークアップ 現場で使える最短攻略ガイド 定価：2,808円 （

この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。

W3Cのインタラクション領域責任者であるフィリップ・ル＝エガレ氏が、米ニュースサイトInfoWorldの記事でWebサイトをHTML5化するのは時期尚早であると述べていることが話題になっている。HTML5の仕様はまだ確定しておらず、Webブラウザーの対応状況も各社各様で互換性があるとはいえない状況でWebサイトをHTML5に対応するのは問題だという。 ル＝エガレ氏が領域責任者（ドメインリーダー）を務めるW3Cのインタラクション領域は、HTML5やCSS3、Web APIなど、Webブラウザーを通じてユーザーと接する技術の仕様策定を担当している。そのル＝エガレ氏が「WebサイトがHTML5に対応するのは早すぎる。動画再生など、Webブラウザー間で互換性の問題が起きているからだ」と述べているのだ。 ただ、ル＝エガレ氏が懸念を示しているのはWebサイトへの早すぎる普及であって、HTML5という技

Google Analyticsの使い方を本格的に勉強しようとすると時間がかかる。そんな暇はない！という人向けに、Google Analyticsを使いこなしているふりをするための10のTIPSを用意した。原稿を書き始めてから、これってイギリスのOval Booksから刊行されている「Bluffer's Guide」に似ているよなと思い、「Bluffer's Guide to Google Analytics」というタイトルのつもりで書いてみた。 1.時間帯別のセッション数を見ると、ユーザーの性別がわかる 会社でPCをいじっているのはほぼ男性。したがって、セッション数が昼休みの時間帯に増えたり減ったりするサイトのユーザーは男性が多い。昼休みにセッション数が増えるサイトは暇つぶし型、減るサイトは仕事の情報源として使われている。一方、主婦向けサイトの場合、昼下がりからアクセスが増え始め、小学生

いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。

Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？　もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう

本格的なWebデザインに取り掛かる前に作るプロトタイプ。特に受託サイトの制作やチームで制作する場合にはある程度きっちり作っておきたいものだが、「なかなかちょうどいい作成ツールがない」という人も少なくないのではないだろうか。 FireworksやillustratorからVisio、PowerPointまで、プロトタイプの制作に使えるツールはいろいろあるが、今回は無償で使える便利な専用ツールを紹介しよう。それが、オープンソースの「Pencil」だ。Firefox 3のプラグインとして動作するものだが、実際の使い勝手としては独立したアプリケーションのように動く。 使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。 プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を

Google Analyticsの「トラフィック」レポートでは、ユーザーがWebサイトを訪れた「きっかけ」についての指標を確認できます。 ノーリファラー 「ノーリファラー」レポートでは、ノーリファラー（直接トラフィック）のセッション数、平均ページビュー、平均サイト滞在時間、新規セッション率、直帰率を、日別、週別、月別に確認できます。ノーリファラーのセッション数そのものを日々把握する必要はありませんが、平日よりも休日のセッション数が明らかに多いサイトはビジネスユーザー向け、平日と休日のセッション数がそれほど変わらない場合は家庭からの利用が多いと考えられます。ノーリファラーはWebサイトのURLをWebブラウザーに直接入力したり、ブックマークから訪れたり、RSSフィードやメールマガジンのリンクをクリックしたりしたユーザーのトラフィックです。 Webサイト全体のセッション数は時間帯別にも分析でき

Google Analyticsの「コンテンツ」レポートでは、どのページからユーザーが訪れ、どのようにページを読んでWebサイトを去ったのかについての指標を確認できます。 上位のコンテンツ 「上位のコンテンツ」レポートでは、コンテンツ（Webページ）のページビュー数、ページ別セッション数、平均ページ滞在時間、直帰率、離脱率を、日別、週別、月別に確認できます。各ページのページビュー数そのものを日々把握する必要はありませんが、上位のコンテンツが何かは把握しておくべきです。 「上位のコンテンツ」レポートは、表示形式を「比較」にして平均ページ滞在時間、直帰率、離脱率を比較し、どのような違いがあるか確かめ、コンテンツの出来不出来、パフォーマンスを確認するとよいでしょう。 タイトル別のコンテンツ 「タイトル別のコンテンツ」レポートでは、コンテンツ（Webページ）のページビュー数、ページ別セッション数、

Google Analyticsには、サイト内検索やeコマースなど、設定しなければ表示されないレポートがあります。今回から3回に渡って、プロファイルやフィルタなど、Google Analyticsを使いこなすための設定を紹介します。また、マイレポートやインテリジェンス、カスタムレポート、アドバンスセグメントなどのカスタマイズ機能についても説明します。 Google Analyticsのレポートは、「アカウント」や「プロファイル」によって管理されています。しかし、「Googleアカウント」と「Analyticsアカウント」が紛らわしい上に、サイトの指標をそのまま読むためのプロファイルと、フィルタによって切り口を変えて読むためのプロファイルがあり、しっかり使おうと思うとやや敷居が高くなっています。まずはアカウント、プロファイルの意味を説明しましょう。 Googleアカウント Googleアカウ

「フローティングウィンドウ」は、Webページ本文に重ねて表示し、ドラッグ＆ドロップ操作で移動できる子ウィ ンドウのことです。といっても、ブラウザーの画面内にウィンドウのように表示するだけですので、ブラウザーやウイルス対策ソフトのポップアップブロック機能に規制されることもありませんし、追加的な情報を元のWebページのレイアウトを崩さずに表示できるメリットがあります。 基本のフローティングウィンドウを作成する 今回は、「フローティングウィンドウを表示」のリンクをクリックするとフローティングウィンドウを開くWebページを作成します。開いたウィンドウはドラッグ＆ドロップ操作でページ内を自由に移動でき、右上に配置した「×」ボタンで閉じられます。 まず、以下のようなHTML／XHTML（以下、HTML）を用意します。リンクのテキストをa要素で包み、class属性に「open」を付けます。このa要素は、