レスポンシブデザインがすべてではない：マーケターが適応するべきデザインと開発のトレンド（中編） | Moz - SEOとインバウンドマーケティングの実践情報
トヨタをはじめとする競合は、サイトを訪れるほとんどのユーザーが車種の選択肢を見たがっているか、販売店を探しているのだと認識している。 ホンダもトヨタも、レーシングのサイトを用意しているし、産業用エンジンも販売している。しかしトヨタは、Toyota.comを訪れるほとんどのユーザーが消費者向けブランドを求めており、レーシングファンはグーグルで「Toyota racing（トヨタ レーシング）」と検索するだろうとわかっている。なお、Toyota.comのフッターには、さまざまな関連サイトへのリンクも置いてある。 僕の言う「モバイル限定デザイン」を避けるべきだとする原則の例外があるとすれば、それはデザイン事務所かもしれない。Big Spaceshipのサイトを見てほしい。 ここはデザインエージェンシーであり、僕よりはるかにウェブデザインに詳しい。これは素晴らしいサイトで、売り上げにもつながるだろ
ハンバーガーメニューのデザイン問題が決着！ABテスト7パターン結果
画面の表示領域の狭いスマホでは、表示されているページ以外にもメニューがあることをどう知ってもらうかは重要です。 今回は、メニューへの導線であるハンバーガーメニューのデザインで7パターンを回した結果をご紹介します。 仮説 メニューの存在があまり認識されていないのではないか。メニューをもっと分かりやすくすることで、気づいてもらえ、クリック率が向上するのではないか。 そこで、ハンバーガーメニューを既存のデザインとは別に6パターン、合計7パターンでどれが一番クリックされるのかテストして検証することにしました。 ハンバーガーメニューとは ハンバーガーメニューは、スマホの画面上部によくある三本線のメニューアイコンのことを指します。 用意したデザインは7パターン ※クリックすると拡大されます。 基本：よくあるスタンダードなハンバーガーメニュー A：囲いを付けたタイプ B：色を付けたタイプ C：色を付けて
レスポンシブサイト制作に効く デザインTipsあれこれ
2015年11月11日に開催されたAdobe Live Best of MAX」にて、crema design 黒野明子が発表した資料です。Read less
スマートフォンサイト構築時に気をつけたいポイント集
作成：2015/10/5 更新：2017/04/16 Web制作 > 開発環境 スマートフォンサイト構築時のコーディングで気を付けたいポイントを次回コーディングの時のためにメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 全般 viewport デバイスを横向きにした時の処理一例です。 一般（ページ拡大表示）ピンチアウト/ピンチインOK。通常はこれを使うことが多い。 <meta name="viewport" content="width=device-width"> サイズを変更せず、ピンチアウト/ピンチインOK <meta name="viewport" content="width=device-width,initial-scale=1.0"> 2倍に拡大した状態でページ表示 <meta name="viewport" content="wi
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
Microsoft Edge、レスポンシブイメージ対応の「srcset」に対応。夏以降は主要ブラウザすべてでsrcsetサポート
マイクロソフトはWindows 10に搭載予定の新ブラウザ「Microsoft Edge」で、imgタグの中で表示デバイスの解像度によって表示すべきイメージを複数指定できる「srcset」に対応することを明らかにしました。 srcsetはすでにChromeでは約1年前のChrome 34から、Firefoxは先月リリースされたFirefox 38から、Operaも先々月リリースのOpera 29からサポートされており、Safariも最新版の1つ前のSafari 7.1から部分的にサポートされています。 7月29日から提供が開始されるWindows 10のMicrosoft Edgeでsrcsetがサポートされれば、夏以降デスクトップ向けとしては主要なブラウザでのサポートがほぼ揃うことになります。 ただしChromeやFirefox、Operaなどが自動でアップデートされるのに対し、Wind
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline
見出しや文章など、テキストの読みやすさを重視して設計されたレスポンシブ対応のグリッドを実装するスタイルシートを紹介します。 Sassline Sassline -GitHub Sasslineはテキストが読みやすく、美しいタイポグラフィを実現するために開発されたもので、ブログでも企業サイトでも開発中のプロトタイプでも利用できます。単位には「rem」を使っており、ベースラインのグリッドからタイポグラフィのスタイルが機能するように設計されています。 テキストをデザインする際に、気を付けるべきことは「縦のリズム」。 Sasslineでは、ベースラインのグリッドに基づいて正確な縦方向のリズムを使うことができます。 レスポンシブ用に各サイズでの表示には、モジュール式のスケールを採用しています。これはブレイクポイントごとにテキストのサイズを簡単に設定でき、そのままベースラインのグリッドと連動して、美し
![[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline](https://cdn-ak-scissors.b.st-hatena.com/image/square/326599f01a29f1985c237ea13213cdb051872389/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060301-01.png)
alternate属性とcanonical属性を正しく使ってスマホサイトの存在をGoogleに伝えよう｜ferret [フェレット]
ウェブサイトを運営していて、デスクトップ用サイトURLとスマホ用サイトURLを分けている場合あります。この場合、きちんと検索エンジン向けに設定を行わないとスマホ用サイトの存在を認識してくれないケースがあります。それは主に、URLをデスクトップとスマホで分けて運用しているページの場合が多いです。 このような場合は、デスクトップ用URLとスマホ用URLの双方を検索クローラーに伝える必要があります。 今回は、canonical属性とalternate属性を使ってスマホページの存在を検索エンジン向けに伝える方法を紹介します。 目次 canonicalとは alternateとは Googleがサポートするデスクトップ用サイトとスマホ用サイトの最適化方法は3種類ある URLを分けている場合の対策方法 レスポンシブデザインの実装を検討しよう よくある質問とその回答 canonicalとは canoni
![alternate属性とcanonical属性を正しく使ってスマホサイトの存在をGoogleに伝えよう｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0730dbcc8279e5a9cf9e7e90cece0fca4736d6cf/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F1426%2Feyecatch%2Fdefault-2b35b1392942385f6e4a644bf6c0ba8b.jpeg)
レスポンシブコーディングのスニペットいろいろ - やっぱりWebが好き - Writing Mode
コーディングを自身でやることは少なくなってきたけれど、勘が廃れないように今でも時々デザインしたり、コーディングしたりってのも大事にしてます。たまにデザインやコーディングをするのは気分転換にもなるし、新しいテクニックを知っておくことだってまだまだ大切だと思うし。 今の僕は、作る仕事はできる限り任せる立場だと思うので、あくまでもやり過ぎない程度に、って考えてますけど。というわけで、最近覚えたスニペットまとめ。 レスポンシブでサイトを作ることが増えています。 予算やスケジュール、または技術的な問題など、レスポンシブで構築するのが難しいケースもありますが、今の僕はできる限りレスポンシブ優先で考えたいと思っています。 ワンソースで考えたほうが運用は効率的だと思うから。 Writing Modeは僕にとってレスポンシブデビューだったサイトで、今思うと「こうしておけばよかった」ってところはいっぱいありま
「スマホ対応」アルゴリズム更新の疑問にGoogle社員が答えた
[レベル: 初・中・上級] サイトがモバイルフレンドリーかどうか（モバイル対応しているかどうか）をランキング要素として使用することを先週Googleは発表しました。 4月21日から開始の予定です。 この記事では、このアルゴリズム変更に関連した疑問についての回答を紹介します。 Googleジョン・ミューラーがオフィスアワーで回答 発表の当日に、GoogleのJohn Mueller（ジョン・ミューラー）氏が英語版のオフィスアワーをGoogle+で開催しました。 当然のごとく、モバイルフレンドリーアルゴリズムの質問が終始たくさん出てきます。 僕たちが知りたいことも多く含まれています。 参加者から出てきた質問とそれに対するミューラー氏による回答をピックアップしてまとめました。 あなたのモバイル対応の参考にしてください。 モバイルフレンドリー アルゴリズム Q&A Q: サイトがモバイル対応してい
Google、「スマホ対応」をランキング要因に利用することを決定。4/21から導入。
[レベル: 初・中・上級] Googleは、スマホ対応しているかどうかをモバイル検索のランキング要因として使用することを発表しました。 4月21日からの導入を予定しています。 またApp Indexingに対応したアプリコンテンツもランキング要因として利用するようにしました。 こちらは今日（現地時間の2月26日）から導入されています。 モバイルフレンドリーが単なるラベル表示からランキング要因に 昨年11月に、そのページがスマートフォンに対応しているときに、「Mobile-friendly」（モバイル フレンドリー）というラベルをGoogleはモバイル検索結果に表示するようにしました。 日本には、翌月の12月に導入されました。 「スマホ対応」というラベルが付きます。 導入時点では、「スマホ対応」ラベルは単純に表示だけの仕様でした。 スマホ対応しているかどうかはランキング要因にはなっていません
スマホデザインで見やすいサイズ、行間は？デフォルトのアプリ等を調べてみた｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot
「モバイルファーストからコンテンツファーストへ」レスポンシブWebデザイン専門家が語る、コンテンツの捉え方
「モバイルファーストからコンテンツファーストへ」レスポンシブWebデザイン専門家が語る、コンテンツの捉え方 2014.11.11 火 モバイル端末の種類が増えた昨今、コンテンツはまずモバイルに合わせて作るべきというモバイルファーストという考え方。その本質はコンテンツファーストだ、と語るのがレスポンシブWebデザインの専門家である菊池崇氏。このコンテンツファーストについて詳しく聞きました。 関連する過去記事 コンテンツストラテジスト必見！レスポンシブWebデザインがアツい理由 レスポンシブWebデザインのワークフロー、デザイニングインブラウザとは レスポンシブWebデザインを語る上で欠かせない！コンテンツストラテジストが知っておくべき「HTML5」のポイント 今回は、レスポンシブWebデザインについて学ぼうとすると頻出するキーワード「モバイルファースト」を起点に、その根底にある概念「コンテン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Design
グーグルで「スマホ対応」ラベルを出すために僕がやった3つのこと | 初代編集長ブログ―安田英久