[対象: 全員] Googleは、タブレット端末に適したサイト構成についてのアドバイスを英語版ウェブマスター向け公式ブログに投稿しました。 ただし最初に次のように断っています。 we do not have specific recommendations for building search engine friendly tablet-optimized websites, “検索エンジンにとってわかりやすい、タブレットに最適化したウェブサイトを構築するための明確に定めた推奨はありません” スマートフォン向けサイトとフィーチャーフォン向けサイトに対しては推奨する構成をGoogleは公開しています。 しかしタブレット向けサイトに対しては推奨構成は設けていないということになります。 そのうえでいくつかアドバイスしています。 ここからは、Googleによるタブレットサイトのアドバイスを説明
2012年後半から2013年にかけてタブレット市場は賑わいを見せておりますが、タブレットに最適化されたサイトは、数える程度しかまだ存在していません。 現状は、多くのWEBサイトは、タブレットでの表示内容をPC表示と同じ状態にしておりますが、「画面サイズだけが類似している」から、といった理由だけで「とりあえずPC表示をさせておけば良い」という考え方では非常に安易です。 タブレットもスマートフォンも使い勝手は同じ 「スマホ広告の誤タップ率はPCの11倍 」と日経デジタルマーケティングが調査結果を報告しておりました。 スマホ広告の誤タップ率はPCの11倍 スマートフォンの場合は、画面サイズが小さく、指先での操作する上で、誤タップする確率も高く、このような調査結果についても納得ができます。 しかしスマートフォンよりも3~4倍サイズの大きいタブレットに対しては、ディスプレイサイズの大きさに惑わされて
iPhone、iPadを基準にした数値が目立ちます。 レイアウトをPC、タブレット、モバイルで変更すると考えた時に、 代表的なデバイスでありユーザー数も多いiPhone、iPadが基準になるのも自然な流れかも知れません。 しかし、例えばブレークポイントをiPad基準にした768pxにすると、 幾つかのAndroidタブレットは800pxなのでこれらのデバイスにはタブレット用のレイアウトが適用されません。 ブレークポイントの数 少ないサイトは1〜多いところでは十数のブレークポイントを設けてるサイトもあります。 ただし、多く設定してるサイトもその全てでレイアウトが大きく変化する訳ではなく、 ごく一部のコンテンツのみ調整するといった使い方をしています。 例えば下記のサイトでは1300pxを境に境界線(.splitter)のみスタイルが変わります。 Remodelista: Sourcebook
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
*device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 描写のプロセスを検証するに当たっての条件 以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。 viewport Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。 コンテンツ(サイズ) HTMLに設置したコンテンツのサイズ ドキュメント(サイズ) 余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。 ウィンドウ
デバイスの振り分けをどう考えるか、 ということについて書いてみたいと思います。 今回は、PC/タブレット/スマートフォンと振り分ける場合の参考です。 パターンは4パターン。 ちなみにiPad/Garapagosが出たてくらいまでは、画面解像度とUserEgentで判定して振り分けていたみたいなんだけど、 iPadはもはや次のモデルでは2000px以上の解像度であるし、 今後のモデルがどんどんと高解像度化されることを考えると、少しキリがない感もあるよね。 ただ、高解像度化されても画面サイズは変わらないわけだから、フォントと画像サイズは気にかけなければいけないかもしれないねえ。 1)Media Queriesで分ける もっとも一般的なやり方。IEの対応だけ気をつけないと。 2)Javascript + UserAgentで振り分けてリダイレクト先を分岐 そもそもHTML側を分けておくという考え
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries(メディアクエリ)。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました! 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries(メディアクエリ)を使って、iPad、iPhone など、いろんなデバイスに対応(対応というか、一応見れる程度)にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
”モバイルファースト”の第一人者、Luke Wroblewskiのブログから記事を翻訳してご紹介します。文中にたくさん“デバイスエクスペリエンス”という言葉が出てきます。デバイスエクスペリエンスとは、数あるデバイスを画面サイズや機能性・ユーザーの利用方法、といった括りで分類し、それぞれに向けた専用のサイトを提供すること、と理解して頂ければよいかと思います。 元記事:Which One: Responsive Design, Device Experiences, or RESS?, February 29, 2012 As more organizations realize they need to invest heavily in multi-device Web designs, the inevitable question of “how” comes up. Responsi
ちょうど1年前に私が書いた記事(スマホ対応の新潮流「レスポンシブ・Webデザイン」とは?)を皮きりに、日本のWebメディアやブログでも「レスポンシブ・Webデザイン」が話題になっている。みなさんも一度はレスポンシブ・Webデザインについて聞いた、あるいは記事を目にしたことがあるのではないだろうか? スマートフォン向けのWebサイトを提供する上で、レスポンシブ・Webデザインは有効な手段だという認識が海外で広がっているが、日本では「流行」「夢の世界」「現実的ではない」などと誤解している方が多いようだ。誤解を生む背景には、レスポンシブ・Webデザインの定義を勘違いしていたり、深く理解せずに言葉遊びとして捉えていたりする傾向があるように思う。 そこで、あらためてレスポンシブ ・Webデザインのメリットと今後の動向について紹介する。 レスポンシブ・Webデザインとは? レスポンシブ・Webデザイン
2013年5月31日 著 ( [2013-05-31 追記] Google+ のほうでツッコミいただきましたが、引き合いに出している記事における話が「Webの」デザインなのか、もっと広い意味でのデザインなのか、がやや不明瞭であるにもかかわらず、自分のほうで勝手に前者=Webデザインの話として一方的に解釈のうえ記事を書いてしまいました。その点は自分の読解力不足であり、反省すべくこのまま恥を晒しておきます。) 社内でもレスポンシブからアダプティブへ - 必要な情報を、必要なときに、必要としている人へ | Digital experience Universityという記事が話題になったので。自分がこの記事で気になったのは、センサーを搭載したデバイスを用いてパーソナライズされた情報を届ける「アダプティブデザイン」というコンセプトという出だし。何も知らない読み手であれば、アダプティブWebデザイン
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 2013/05/31公開 《Fashionably Flexible ワークショップレポート》 2013年4月6日に、Web Directions East主催による、Andy Clarke氏のワークショップが東京ミッドタウンで開催された。その内容を、主催であり通訳をした菊池崇がレポートをする。 ■ Andy Clarkeって誰? 世界的に著名であるものの、日本では一部のコアなWebデザイナーでないとその名を知らない人がいるので、まずはAndy Clarke氏について紹介したい。 Andy Clarke はイギリスのウェールズ地方在住のWebデザイナーである。1990年代後半より、Webサイトの制作をはじめ、そのデザインセンスとCSSの先進性を活かしたデザインの取り組みで注目を浴
スマートフォン対応サイト制作の手法として注目されている、 レスポンシブWebデザイン(Responsive Web Design)の実用TIPSを紹介します。 PC用表示・スマートフォン用表示の切り替え方法、お役立ちアプリなども紹介します。 関連記事 レスポンシブWebデザインで、PCとスマホ表示を切り替える方法 レスポンシブWebデザインのメリット、デメリットとその解消方法 レスポンシブWebデザインのメディアクエリサイズサンプル レスポンシブWebデザインとは レスポンシブWebデザインでは、CSSを利用し、ウインドウサイズに応じてデザインを変更します。 そのため、PC用とスマートフォン用に複数のHTMLを作成する必要がないなど様々なメリットがあります。 レスポンシブWebデザインについては下記サイトが非常に詳しく、参考にさせていただいています。 ASCII.jp:スマホ対応の新潮流「
あまりWEB系のネタ以外に触れても良いものかと思いつつ。まぁ今日までも散々色々書いてきたので今さらかと腹をくくって書きます。僕の可愛い妹は現在専門学校生、まぁ丁度就職活動ってヤツにも関わる時期だと思うので、ちょっと日本の外にいながら思う所を書いてみたいと思っています。 『大学卒業して就活、就職できなければ落ちこぼれ。』みたいな流れというか空気、確実にありますよね?じゃぁ、もし皆さんが高卒だったら絶望してるんでしょうか?たぶん、大卒で就職できないのに、高卒で就職できるわけがないみたいな感じになるんですかね? 僕は大学に行ったことが無いので、大学生の気持ちにはなれません。しかし、たとえ高卒だろうが人生楽しむことに関係無いと断言することはできます。 というわけで、突然ですが、僕の学歴は高卒止まりです。しかし、今はバンクーバーで週に3回働き、2回は自宅で作りたい物を作り、時間は朝10時から6時以外
スマフォの横と縦のサイズっていくつだっけ? タブレットは? ネットブックは? とウェブページの制作で、レスポンシブ対応用に複数のブレイクポイントで簡単に確認できるツールを紹介します。 Wood Cuttr Wood Cuttrの対応ブラウザ・デバイス Wood Cuttrの使い方 Wood Cuttrのセットアップ Wood Cuttrの対応ブラウザ・デバイス 対応ブラウザ・デバイスは、下記の通りです。 動作するブラウザ IE9+ Firefox 3.6+ Chrome 10+ Safari 5.1+ Opera 11.6+ ※Wood Cuttrが動作するブラウザです。 サポートしているデバイス iPad & iPhone Models Android スタンダードなTVスクリーン デスクトップ ※ビューポートのサイズをサポートしているデバイスです。 Wood Cuttrの使い方 使い方
ブレイクポイントの考え方 レスポンシブウェブデザインを実現するのによく使われる手法がメディアクエリを使った画面サイズ別スタイリングです。レスポンシブウェブデザインの場合、ある画面サイズを境目として適用させるスタイルを切替えますが、この境目を『ブレイクポイント』といいます。 この『ブレイクポイント』ですが、特に「こうするべき」というものが今のところありません。この境目をどの値にするかもそうですし、何分割させるのかというのも制作者がいろいろ試行錯誤しています。 これまでのウェブ制作では、デスクトップの場合はアクセス解析からよく見られている画面サイズを分析、モバイルは横幅240pxが主流、などの明確な指針があったのでそれに合わせたデザインを行えば問題ありませんでした。 しかし多様なデバイスが次から次へと出てくるようになり、PCやタブレット、スマートフォンだけでなく、テレビやウェアラブルタイプのデ
googleからNexus7が格安で販売されていたり、microsoftからsurfaceが日本でも発売になったり、 ますますタブレットでのウェブビューイングが広まっていくのは必至でしょう。 そんななか、検索エンジンでもあるgoogleが推奨しているのはレスポンシブ表示。 今回は、そんなレスポンシブなサイトを作る際のブレークポイントをキーにして 実際どんなものが作られているかを交えて考えていきたいとおもいます。 ざっくり言うと、どのサイズでどの表示をするかというのをピクセル幅で切り替えていくポイントのことです。 320, 480, 600, 768, 1024 あたりで区切ります。 googleのドキュメントにもあるように @media only screen and (max-width: 640px) {...} のようなカタチでCSSを切り分けていきます。 1024と320のみのPC
米Appleは6月10日(現地時間)、年次開発者会議「WWDC」において、うわさされていたストリーミング音楽サービス「iTunes Radio」を発表した。まずは米国で、今秋のiOS 7のリリースに合わせてスタートし、提供地域を順次拡大していくという(日本で利用できるようになるかどうかは不明)。 iTunes Radioは、iOS 7の「Music」アプリの一部として提供される広告付きの無料サービス。iOS端末(iPhone、iPad、iPod touch)だけでなく、Mac、PC、Apple TVでも利用できる。年額24.99ドルの音楽クラウドサービスMusic Match(日本では提供していない)を利用していれば、オーディオ広告を聞かずに済む。 Pandoraと同様、ユーザーの好みに合わせて選択した音楽をストリーミング配信するオンラインラジオのようなもので、あらかじめ用意されている20
米Appleは6月10日(現地時間)、次期モバイルOSの「iOS 7」を発表した。アイコンデザインを含めユーザーインターフェイスが大幅に刷新されたのが特徴で、iPhone 4以降の端末に無償アップデートとして今年秋に提供される見込み。同日米カリフォルニア州サンフランシスコで行われたWWDCにおいて、そのプレビューが公開されている。 一新されたUI 発表前からの噂にあったように、iOS 7におけるアイコンはよりシンボリックでフラットなデザインとなり、ホーム画面の雰囲気は一新された。また設定メニュー等の項目は半透明のデザインで背景にオーバーレイで表示されるようになり、OS全体が大きく変化した印象を受ける。iOSは初代iPhoneから基本デザインは変更されていないため、実に6年越しの初めての大幅刷新といえるだろう。 UIの変更としてほかに特徴的なのは「Control Center」「Notifi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く