higuchi.com blog

The means justifies the ends

モバイルフレンドリー [ブログのデザインをレスポンシブにしてみたよ]

[PR] 本ブログの商品紹介リンクには広告が含まれています

Google 様が「今後、モバイル端末でも読みやすいように考慮されているページが検索結果の上位に現れるようにするから、そのつもりで」とおっしゃっています。

 Google では、4 月 21 日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。

出典:検索結果をもっとモバイルフレンドリーに(Googleウェブマスター向け公式ブログ)

そんでもって、Google様は「モバイルサイトのデザインはレスポンシブ ウェブ デザインを以て旨とする」との仰せです。

Google では、デザイン パターンとしてレスポンシブ デザインを推奨しています。

出典:Google Developers

仰せに従って、レスポンシブな Nucleus のスキンを作ってみました。

古くはガラケーから最近のスマホまで、モバイル端末で読みやすいページを作る方法には

  1. 表示端末に合わせて、別々のURLのページを用意して、それぞれに合ったHTMLを出す
  2. ひとつのURLだけど、アクセスしてきた端末の種類に合わせて、別のHTMLを出し分ける
  3. ひとつのURLで、同じHTMLなんだけど、画面の大きさに合わせて見え方が変わるようにデザインする

というような手法があるのですが、この3番目の、ひとつのHTMLで、表示する画面の大きさに合わせてデザインが変わるように作ったデザインのことをレスポンシブなデザインと言います。

このページを表示して、ブラウザのウィンドウの幅をぐりぐり狭めたり広げたりすると、画面の上の表示要素のレイアウトがいろいろ変わるのがお試しいただけますが、こういうやつのことです。

簡単なレスポンシブデザインの練習をしてみたよ、というお話でした。

(業務連絡。ブレイクポイントは450pxと600px。)

コメント

まだコメントはありません

コメントを書く

関連するかもしれない記事

230円

訳あって短い [シガーライターソケット用USB電源アダプタ]

最近お気に入りの香港ガジェット通販サイト DealExtreme.com からご紹介。 前回の記事にもちらっと出...

この記事を読む »

コンサル風4象限マトリクスチャートにはだまされないぞ [困ったプレゼン]

コンサル風4象限マトリクスチャートにはだまされないぞ [困ったプレゼン]

久しぶりにいいものをみせてもらいました。 私が関与しているある会社がWebサイトのリニューアル...

この記事を読む »

まちキュン ご当地婚姻届

ライフタイムバリュー [地方自治体が、ご当地婚姻届・ご当地出生届のプロモーションにノリノリな件]

一般消費者向けに幅広くマーケティング活動をする企業にとって、これから結婚する人や、これから生ま...

この記事を読む »

骨壺?

ビタミン水売りだって世界を変えるチャンスがあるのだ [glaceau vitaminwater]

昨日、炎天下をとぼとぼ歩いて赤坂の有名なお寺さんのビルに入っている某社に打ち合わせに出かけたら、...

この記事を読む »

G320の電動シートのスイッチ

意外とアナログ [どんどん前にせり出す電動シート]

右の写真は、中古で買ったメルセデスベンツG320の助手席についている電動シートを動かすスイッチ。 ...

この記事を読む »

Sir James Dyson with Airblade Tap

自宅トイレにハンドドライヤーのススメ [ダイソン・エアブレード]

先日、ダイソン創業者のサー・ジェームズ・ダイソンに会いに行ったイベントは「ダイソン社が業務用ハ...

この記事を読む »

誰のためのデザイン? [スピンドルグリル]

誰のためのデザイン? [スピンドルグリル]

最近のトヨタ車、レクサスとかクラウンとかのフロントグリルの形。 スピンドルグリルと呼ぶそう...

この記事を読む »

空想上の事業形態 [SIPS]

20世紀もそろそろ終わりに近づいた1990年代後半、SIPSという事業形態が脚光を浴びていました。 S...

この記事を読む »

白山陶器のG型しょうゆさし

おいしい卵かけご飯のために [白山陶器のしょうゆさし]

G型しょうゆさしお昼ごはんのついでにスモークチップ(燻製の煙を出すために使う、香りの強い材木を細切...

この記事を読む »

京都の“遺伝子” [うまいお茶]

先週末、氏家さん*1と京都・長岡京にある大阪成蹊大学芸術学部にお邪魔して、デザイン学科の先生方とBlo...

この記事を読む »