2015年5月14日に開催された書籍出版記念イベント「Webサイト設計・UI実装・アクセシビリティのモダンアプローチ」のセッション2で使用した資料です。Read less
WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
2015年5月14日に開催された書籍出版記念イベント「Webサイト設計・UI実装・アクセシビリティのモダンアプローチ」のセッション2で使用した資料です。Read less
Webサイトをマルチデバイスに対応させる、たった一つの方法
2015年4月22日 著 タイトルは釣りというか、どうでもよくて。何度となく同じようなことは書いてきたつもりですが、Googleがモバイル フレンドリー アップデートを開始したのを記念して、改めて書いておきます。Webサイトを、モバイルデバイスを含めマルチデバイスに対応させるうえで何よりまず必要なのは、コンテンツや機能をアクセシブルに実装することです。最近、SEO Japanで読んだユーザー、デバイス、そしてコンテンツマーケティングの未来という記事に、以下のようなくだりがありました。 我々はコンテンツを目で読むことのみを想定して作成している。技術の発達により、音声やジェスチャーによってコンテンツと関わる機会は、今後も増加していくだろう。マーケターは、音声による命令や、手の動きでも機能するコンテンツを作成することが求められるようになるだろう。コンテンツを消費する方法は今後も進化し、キーボード
モバイル フレンドリーを超えて | コラム | ミツエーリンクス
Googleは4月21日よりモバイル フレンドリー、つまりWebページがスマートフォンなどのデバイスに対応しているかどうかをランキング要素として使い始めます。以降、モバイル フレンドリーでないWebページは、モバイル検索において相対的に不利になることが見込まれます。これは、今年2月27日付でGoogle ウェブマスター向け公式ブログに掲載された記事『 検索結果をもっとモバイル フレンドリーに 』で明言されていたことで、ご存知のWeb担当者の方も少なくないでしょう。 このGoogleの動きを踏まえ、Webサイトのモバイル対応、モバイル フレンドリー化を煽るような動きが、一部にはあるようです。先のブログ記事のなかで、検索結果に大きな変化をもたらすとGoogle自身が述べている以上、確かに注目に値する動向ではあります。しかし、スマートフォンが本格的に普及し始めて数年が経ったいま、アクセスログ解析
マルチデバイス対応における「三本の矢」 | コラム | ミツエーリンクス
「三矢の教え」と呼ばれるエピソードがあります。戦国時代の武将・毛利元就の記した『三子教訓状』に由来するもので、元就が三人の息子に対し「一本の矢は簡単に折れるが、三本に束ねれば容易には折れない」と説き、結束を求めたとされるものです。安倍内閣の経済財政政策が「アベノミクス」という言葉で呼称されていますが、そのアベノミクスとセットで「三本の矢」という比喩も割とよく報道されていますから、聞き覚えのある方も少なくないでしょう。 昨今、盛んにその必要性が喧伝されているWebサイトのマルチデバイス対応においても、実は「三本の矢」とでも称すべき要件があると考えています。具体的にはアクセシビリティ、マルチスクリーン・デザイン、高速な表示パフォーマンスの3つで、そのいずれを欠いてもマルチデバイス対応としては不完全にならざるを得ません。それぞれの意義や必要性について簡単にご紹介しますと、次のようになります。 い
マルチデバイス時代に最適なウェブサイトのナビゲーション構造とは？※未解
今回も、このブログでいま流行りの「マルチデバイス時代」シリーズです。 前回に引き続き、これからのレスポンシブ・デザインについて書いていきます。今回はナビゲーションについてです。 BootstrapやFoundationで実装されているように、レスポンシブ・デザインでのナビゲーション・インターフェイスには標準的なものが確立されつつあります。しかし、それが従来のウェブサイトの構造に簡単に当てはめられるかというと、そうでもありません。使っている技術は根本的にはあまり変わりませんが、マルチデバイス時代の今、解決しようとしている課題は以前と大きく異なります。 全くサイズの違う複数の端末に、デスクトップ向けの考え方で作ったサイト構造を最適化しようとしているわけですから、ゼロから考え直さないと、根本的な解決は難しいのかもしれません。 そもそも従来型のナビゲーションは必要なのか レスポンシブ・デザインでサ
マルチデバイス時代の制作手法の選び方
遅ればせながら、あけましておめでとうございます。 昨年10月後半から職場での環境が大きく変わったこともあり、ブログは放置状態で、ソーシャルメディアでの投稿すらあまりできませんでした（言いわけ）。 2014年も1月も後半に差し掛かってしまいましたが、今年もRriverを、どうぞよろしくお願いします。役に立つ情報を掲載することを目標に、今年も1年頑張ります。 2012年5月に「レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと」という記事を書いてから、はやくも1年半以上が過ぎ、RWDの本を出してから約1年もの年月が過ぎました。2014年のはじめということもありますし、これから何回かに分けて、これからのレスポンシブWebデザインについて考察をまとめていきたいと思います。 今回は、以下の2つについて： 「レスポンシブWebデザイン」はどうなる？ 制作手法を選択する際の判断基準とは
WebサイトのRetina対応は必要か？
アップルのWebサイトにRetina対応のiPadでアクセスすると、一昔前のWebサイト（インターレースGIF）のように、ボケた画像がジワっとシャープに切り替わります。通常の画像を表示した後で、Retinaディスプレイの場合には解像度が高い画像へ切り替えているのです。 それぞれの画像について、低解像度版と高解像度版の2種類を読み込むことになるので、転送データ量が増えてサイトの表示が遅くなってしまいますが、アップルは自社商品のイチオシ機能であるRetinaディスプレイでの表示の美しさを優先させたのでしょう。 このような画像切り替えは、「retina.js」や「retina-replace.js」などのJavaScriptライブラリーを使うと比較的簡単に実装できますが、すでに掲載している画像の高解像度版を用意したり（素材が残っていない場合は作り直しになる）、今後掲載する新しい画像を通常版と高解
マルチデバイス時代のWebページ | Yomotsu net
レスポンシブ・ウェブデザインという言葉が多くの Web 制作者に認知されるようになり、”端末に合わせたコンテンツの出し分け” は古いなどという意見も出てきていますが、果たして本当にそうなのでしょうか。この記事では、それについてちょっと考えて見たことをまとめています。 さて、最近、日本国内でもスマートフォンやタブレットといった PC 以外で Web ブラウジングできる端末が増えてきました。これにより、 Web ページは様々なサイズの画面で閲覧される マウス / キーボード以外の入力が利用される (主にタッチ入力) という、これまでの大きな画面でマウスを主体とした入力から大きく変わりつつあります。それにより、Web 制作者は、これらのデバイスへの対応が仕事の一つとなりました。 こういった、マルチデバイスへの対応には主に 3 つの方法があると考えています。 メディアクエリー採用によるいわゆるレス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://developers.google.com/web/tools/setup/workspace/setup-devtools