ウェブデザイン僕はレスポンシブ・ウェブデザインが、それぞれの環境(PCやスマートデバイス)における表示面でのウェブ本来の最適な形だと考えています。レスポンシブ・ウェブデザインについて綴る前に、ウェブサイトの閲覧環境ごとに表示状態が変わることについての考え方を綴っておきたいと思います。ウェブに対して知識の無い方の中には、PCやスマートデバイスなどどんな閲覧環境でも、表示が同じであることが正であると考えている方がいらっしゃいます。今はさすがに減ってきましたが、前まではどの閲覧環境でも文章の文字が折れる箇所も同じに、と求める方もいらっしゃいました。環境ごとに表示が同じであるということは、基本PCビューをもとに作成することが多く、スマートフォンでは文字が小さくなってしまい拡大しないと読めない状況になってしまいます。ウェブ本来の表示面でのメリットは『環境ごとに表示が変わること』にあると僕は思います。環境ごとに表示が変わることを受け入れ、そしてその中でそれぞれの環境で出来うる限り閲覧しやすくしてあげることが大事なのではないかと考えています。前振りが長くなってしまいましたが、レスポンシブ・ウェブデザインについて綴ります。ユーザビリティ上の問題を検出』というエラーメッセージをGoogleウェブマスターツールで受けている人が増えています。ユーザビリティ上の問題を検出』と怒られた!背景としては、モバイルユーザが多くなっていることが影響していますが、今後のGoogleの検索の評価対象にモバイル対応をしているかどうかが含まれる可能性があります。実際にGoogleはモバイル表示対応を勧めています。http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.htmlGoogleが指摘している通りモバイルファーストへの意識が不可欠であると思います。レスポンシブ・ウェブデザインとは何かレスポンシブ・ウェブデザインは、CSS3のメディアクエリを使用して見た目を変更するWebページの構築手法です。メディアクエリを使用して、そのページを表示する画面サイズからデバイスを判断しCSSを選択し、そのデザインを変更します。引用:http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.htmlレスポンシブ・ウェブデザインはユーザエージェントなどではなく、ウィンドウサイズに合わせて自動的にページのデザインやコンテンツ配置が最適化されるデザインのことを言います。下記に挙げるサイトなど、レスポンシブ・ウェブデザインに対応しているサイトを開いてウィンドウを縮めたり広げたりするとわかりやすいですね。http://www.team-lab.net/当ブログでも導入していますので、ウィンドウを操作していただければわかるかと思います。アルゴリズムにとってはコンテンツを適切にインデックスできるようになります。効率的にコンテンツを発見することができます。Analyticsの解析などもURLが統一されるため、PCとモバイルそれぞれを確認する手間がなくなります。レスポンシブ・ウェブデザインをどう取り入れるかviewportとメディアクエリを使って作成します。viewportについてスマートデバイスで表示する際のページの表示の仕方を指定します。縦幅や横幅の設定はもとより、拡大率の指定やピンチイン・ピンチアウトを許可するかどうかの指定をします。HTMLのheadタグ内に、meta要素で指定します。指定できる項目としては、下記のようなものがあります。content="width=device-width">device-widthはデバイスの幅となり、この設定がGoogleの推奨する仕様を満たすためには重要。OS)に合わせて、css内に適用する条件を細かく指定する仕組みのことです。時点で、幅等のサイズはパーセント指定にします。テキストの位置を調整している場合には絶対値で指定します。サイズを固定してしまうと、表示領域からはみ出てしまい、デバイスごとにサイズ指定しないといけなくなるためですレスポンシブ・ウェブデザインの設定の方法は、Googleも公式に説明しています。(※ただし英語)http://googlewebmastercentral.blogspot.jp/2012/04/responsive-design-harnessing-power-of.html最後にご自分のサイトがGoogleのモバイル対応の基準に準じているか調べましょう。https://www.google.com/webmasters/tools/mobile-friendly/ここでエラーがでれば、遅かれ早かれウェブマスターツールでエラーメッセージがくるでしょう。モバイル対応のデザインは予め設計することが不可欠です。いざという時に焦らないように対策しておきたいところです。*メールアドレス(公開はされません。*カテゴリー(ウェブデザイン)人気記事Webデザイン用フリー素材集+デザイン参考用サイト15選!筆者(ishikawa)プロフィールウェブサイト制作・ブログ運営などをおこなうフリーランス。仕事関係ではウェブの世界にどっぷり浸かっているが、趣味はアウトドア。〜イズログ〜旅行・旅先でのグルメ情報を中心に綴る雑記ブログ。FISH釣りや釣った魚を調理して食べる釣り飯をメインにキャンプなどのアウトドアについて綴るブログ。大切な人や自分へのプレゼント・ギフトに、オモイを伝えられる素敵なモノを紹介・販売しています。無料で使えるウェブツール集。随時追加していきます。当ブログに掲載するコンテンツ(テキスト、画像等)を無断に複製・転用することを禁止します。