日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
楽天撤退でも前年比1.7倍！北欧雑貨店のSEO戦略 (1/3)
北欧雑貨を販売する『北欧、暮らしの道具店』は、2007年にネットショップをオープンして1年3カ月後、楽天市場にも出店した。「やると決めたら、徹底する性格」という経営者兼プロデューサーの青木耕平氏は、出店後、半年間で700万円近くの広告費を投じて集客に精を出した。おかげで、月に300万円ほどの売り上げに達し、売り上げ全体の35％を占めるまでになった。 しかし、出店した翌年には、すでに強い疑問を感じながら運営していた。 「やはりというか、楽天市場に出店してメリットがあるのは、大量に仕入れてそれを安く販売できる粗利率の高いお店だったんです。例えば花粉症の時期になると、空気清浄器は確実に需要が見込めますよね？ そういう商品を、ベストなタイミングで大量に仕入れ、多額の広告費を投じて一気に売りさばくタイプのお店なら、向いていると思うんです」 前回でも紹介した通り、同店の平均客単価は1万円前後。「この商
ゴールのないサイトでもコンバージョンを測る方法 (1/2)
「ECサイトは明確なコンバージョンがあるので分析しやすそう」という声をよく聞きます。購入や会員登録、資料請求のような明確なゴールが無いサイトではアクセス解析ツールのコンバージョン機能を設定していないことが多いですが、実は立派なコンバージョンがあるのを忘れていませんか？ 「ゴール」「アクション」「コンバージョン」などと考えず、サイトに訪問してくれた人に「どうなってもらいたいのか？」と考えてみましょう。「二度と来ないで欲しい」と思ってサイトを運営している人はいないはず。そこで、今回は素直に「また来て欲しい」という想いが叶ったのかどうかをゴールとして計測する方法について考えてみます。 知るべきことを知る まず、知りたい訪問者の行動を図解しつつ、「また来る」ことは訪問者と運営側にとって何を意味するのかを整理してみましょう。 ユーザーは何かをきっかけとして、検索やソーシャル経由でサイトを訪問します。
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
スマホサイトを作る前に見たい国内38社の実例 (1/7)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 好評だった前編に引き続き、Web制作者が見ておきたいスマートフォンサイト（日本語／企業サイト限定）を業種別に分類して紹介する。スマートフォンサイトの制作に入る前にチェックしておこう。
絶対見ておきたい有名企業のスマホサイトまとめ (1/5)
この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 ここでは、Web制作者が見ておきたいスマートフォンサイトを紹介する。実務で参考にできるように、対象を日本語の企業サイトに絞り、業種別に分類してまとめた。スマートフォンサイトの制作に入る前にチェックしておこう。
「デジタルネイティブ」から「ソーシャルネイティブ」へ (1/2)
ネットの世界にも 巨大な“ゴリラ”が存在している 米国の2つの大学の研究者が行なって、話題となった実験がある。数人の若者にバスケットボールをしてもらい、別の数人に「60秒間に何回パスをしたか？」を数えてもらう。その最中、なぜか着ぐるみのゴリラが現れてコートの中を歩きまわり、こちらを向いて胸をボコボコボコと叩いて去っていく。まったく異常な出来事が起きたわけだが、数えている側の約半数は、ゴリラが入ってきたことに気がつかなかったという（『Scientific American MIND』“How Blind Are We？” June 2005）。 そんなことあるの？ と思われる方は、友達や同僚を使って似たような実験をすることも可能だ。数百字の英文に含まれる「f」の文字を数えてもらう。すると「if」や「of」を見落としてしまう人がかなりの割合で出てくるのだ（文章の内容にもよるのだが）。人間という
CSS＋jQueryでクロスデバイスサイトを作ろう (1/4)
WebサイトをiPhone/Androidに最適化するには、PCサイトとは別にスマートフォン専用サイトを用意するのがベストですが、コストや時間などの理由で難しい場合があります。そこで今回は、PC向けのWebサイト（HTML）はそのまま利用し、CSSとJavaScriptだけでレイアウトやデザインを変更する｢クロスデバイスサイト」の作り方を説明します。題材は、筆者が制作した「iPhone/Android Webサイト制作出張セミナー」のWebサイトです。 このサイトは1ページ完結の告知サイトで、左右2段組みで構成されています。左カラムにはナビゲーションメニューを、右カラムにはメインコンテンツを配置し、ナビゲーションメニューをクリックするとページ内リンクで表示する部分を変えられます。iPhone/Androidからアクセスしたとき、このページを以下のように表示するようにします。 PCサイトのマ
スマートフォン対応サイトの作り方、教えます (1/3)
「WebサイトをiPhoneやAndroidで見やすく表示したい」「スマートフォンをターゲットにしたWebサイトをデザインしたい」――そんなWeb制作者のための新連載がスタートします。PCサイト制作のノウハウさえあれば、「モバイルサイトは未経験」でも大丈夫。スマートフォン（iPhone/Android）向けサイト制作の基礎知識から実践的なテクニックまで、H2O Space.のたにぐちまことさんが解説します。（編集部） iPhoneの快進撃とiPhone 4の登場、Android端末のXperiaとDesireのヒット、au初の国産Android端末「IS01」の発売――と、スマートフォンの勢いが止まりません。いまや一部マニアやビジネスマンにとどまらず、女性やお年寄りなどの幅広い層にまでスマートフォンの利用は広がり、「1台目の携帯電話」として購入する人も珍しくなくなりました。 PCとの連携、
ユーザーを“納得”へ導く「サイトストーリー」の作り方 (1/3)
Webでは一度に1ページずつしか読めません。各ページはリンクされていても視覚的には分断されていますから、各ページがユーザーの心の中でしっかりつながるようなサイト構成にするには「サイトストーリー（納得への流れ）」が必要です。サイトストーリーを作ることで各ページ、各コンテンツが有機的にユーザーの心の中で結びつき、「納得」につながるのです。 Webサイトは、アクセスしてくれたユーザーに対して情報を提供します。情報の見せ方は「情報の持つ質、量、幅」によって大きく変わってきます。ある単独の商品について訴求するようなプロモーションサイトを作るケースと、会社案内サイトのように会社の規模、事業内容から社長の経歴、役員構成まで幅広く掲載するようなサイトを構築するケースでは、作り方もまったく変わってくるわけです。 プロモーションサイトは、「この商品を売りたい」「広く宣伝したい」と目的がハッキリしています。です
ユーザーの心を動かすWebコンテンツ設計の秘訣 (1/3)
サイトマスターには、ネットにアクセスしているユーザーの顔が見えません。つまり見えない相手、知らない相手とコミュニケーションを取るのがサイトマスターの仕事なのです。では、どうやれば見えないユーザーとコミュニケーションを取れるのでしょうか？ 鍵を握るのが「リアクション」です。リアクションを喚起するフックをコンテンツに埋め込んで、ユーザーに自発的に動いてもらえばいいのです。 見えない顧客「透明人間」との信頼をいかにして築くか ネットでは、実店舗のように店員とお客さまが直接顔を合わせることがなく、画面を通じてコミュニケーションを取ります。ネットにアクセスしているのは、サイトマスターにとって「姿の見えないユーザー」。いってみれば「透明人間」と付き合わなければならないのです。 直接顔を合わせられる実店舗なら、お客さまの表情、しぐさを伺いながら、コミュニケーションを取れます。店員が何かのサービスをしたと
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
「データベースってなんですか？」（由美） (1/3)
データベースはさまざまなアプリケーションを支える大切なシステムだ。そのため、データベースの基本を知らずにシステムを構築するのは無謀といえる。本連載では、特にリレーショナルデータベースの基本について、お父さん、由美ちゃんと一緒に勉強していこう。 先生（左）：由美ちゃんの通うテニススクールに来ている情報系大学の講師／由美ちゃん（中）：地元の大学に通う学生。大学の授業でコンピュータを少しかじっている／お父さん（右）：文房具屋の店主。表計算ソフトで商品や顧客の管理をしているが、最近面倒になってきている データベースを使ってみよう ここはある町の文房具屋。店主の中村さん（お父さん）は、顧客情報や商品管理の整理に四苦八苦していた。そこに、大学に通っている娘の由美ちゃんが帰宅した。 由美：ただいま。 お父さん：おかえり由美。 由美：何をしてるのお父さん？ お父さん：お客さんの情報とか商品の管理を、もっと
Flash for iPhoneの衝撃 これから何が起こる？ (1/2)
Adobe MAX 2009の様子はアドビのビデオ配信サービス「ADOBE TV」にて確認できる（関連リンク）。英語のみだが、Flash関連を知りたい人は基調講演の「MAX 2009 KEYNOTE - DAY 1」をチェックしてみよう。 マルチタッチに対応したFlash Player MAXにて発表されたFlash Player 10.1 は、モバイル環境で動作する、初の本格的なFlash Playerである（関連リンク）。 従来、モバイル用のFlash Playerには、サブセットである「Flash Lite」が使用されていた。一方、今回のFlash Player 10.1では、PC、携帯電話、ネットブックなどで同じ機能性を実現している。これにより（スペックさえ足りていれば）PCで表示されるものと同一のコンテンツを、携帯電話でも表示できるようになる。 ちなみにFlash Player
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
ASCII.jp：TCP/IPの基礎の基礎を理解していますか？｜TCP/IPまるわかり
インターネットは、TCP/IPというプロトコルを基盤とするコンピュータネットワークである。これからTCP/IPについて復習していくわけだが、まずは基礎的な用語とその概念を復習しよう。 インターネットを支えるTCP/IP いまやインターネットは、テレビや電話、新聞などと並ぶメジャーな媒体に数えられるようになった。この巨大なインターネットを下から支えているのが「TCP/IP」と呼ばれるプロトコル群である。 そもそも「プロトコル（protocol）」とは、ものごとの作法や手続きを明示的に取り決めて文書化したものだ。特にコンピュータネットワークの世界では、コンピュータ同士のデータのやり取りの方法を厳格に定めた規格（規約）のことを指す。コンピュータはプログラムに従って動作する機械であるため、厳密な取り決めがなければ複数のコンピュータを協調して動かすというのは難しい。 TCP/IPも、そのようなプロト
Googleマップ＋jQueryで作るAjaxなデザイン (1/5)
今やさまざまなWebサイトで使われ、すっかり地図の定番となったGoogleマップ。 コーポレートサイトや飲食店のサイトなどで、純粋に案内図としてページに埋め込むのが一般的ですが、中にはもっとおもしろい使い方で、ユーザーを楽しませているサイトもあります。 一例として、「hitotoki」というWebマガジンを紹介しましょう。hitotokiは、ある特定の場所に関するショートストーリーを地図と絡めて紹介するWebマガジンです。Googleマップをまるで独自に描いた絵地図のようにうまくサイトになじませ、「地理と文学を結びつけた町の文学地図」というコンセプトに合わせて効果的に活用しています。 今回は、このhitotokiのGoogleマップ活用法をお手本としましょう。 今回のお手本サイト： 『hitotoki―町の文学地図』 「場所」にまつわる読者の思い出を募り、地図と写真とともに紹介する投稿型の
ASCII.jp：黒船Google汐留沖に出現でWeb広告業界に激震！ PVもUVもユーザー属性も比較できる「Ad Planner」
Web業界に衝撃を与え続けてきたグーグルが、Web広告業界のビジネスの根幹を揺らがしかねないとんでもないツールを公開している。大手サイトのユニークビジター（UV）/ページビュー（PV）から、ユーザーの学歴や世帯収入といった属性まで丸見えにしてしまう「Google Ad Planner」だ。いったいどんなツールなのか。 「公称値」と「Google調べ」が比べられることに 「Google Ad Planner」は、Webニュースやポータルサイトなどへの広告出稿を検討している企業（広告主）の出稿計画をサポートするツールだ。昨年6月、米国でのサービス提供当初は招待制のクローズドなサービスで、日本のWebメディアは未対応だったため、国内のニュースサイトは簡単に紹介した程度だった。しかしその後、対応する国が増え、現在では日本のWebメディアにも対応、ユーザーインターフェイスは英語だが、Googleアカ
「5枚プレゼン」のレイアウトを理解する
本連載では、「1枚企画書」に続いて竹島愼一郎氏が提唱する「5枚プレゼン」をPowerPointで実践する手順を全5回で紹介します。即断即決を可能にするのが以前に紹介した「1枚企画書」ですが、プランニングの王道はやはり複数枚の企画書です。ただし枚数は5枚に限定するというのが秘中の秘策です。 第2回では、5枚プレゼンのトップとボトム、導線の作り方、流れのデザインなどについてレクチャーします。 ※本記事は「ビジネス極意シリーズ パワポで極める5枚プレゼン」から一部抜粋し、編集・再構成したものです。 レイアウト――「5枚プレゼン」のトップとボトム 「5枚プレゼン」のそれぞれのページが、どういった内容でどう見てほしいのかを瞬時に理解してもらえるよう、見出しのフレーズを書き入れておくといい。タイプとしては、ページの一番上を利用した「トップ型」、一番下の「ボトム型」、トップとボトムが呼応した「問答形式型
Flashを脱いで生まれ変わったユニクロ.COM
FlashでもAjaxでもない。シンプルで機能的なWebサイトへ――。ユニクロの公式サイト「UNIQLO.COM」（http://www.uniqlo.com/jp/）が3月26日にリニューアルした。従来のキャンペーン情報中心から、商品紹介とECを中心としたサイトへ転換。商品購入ページへダイレクトに飛べるようになった新しいトップページは、それまでの派手なFlashアニメーションが姿を消し、画像とHTMLのみで表現されたシンプルかつインパクトのあるデザインに一新された。 旬の商品がすぐ見られる・買える「シンプルで超合理的なデザイン」へ 新しい「UNIQLO.COM」のコンセプトは、「シンプルで超合理的なデザイン」（ユニクロ）。ユニクロの商品そのものにも通じるこのコンセプトは、「最新のトピックが一目で変わり、欲しい商品がすぐに買える」サイトデザインによって、具現化されている。 以前のUNIQL
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
