以前Re:veryさんでやっていた「レスポンシブ・ウェブデザインに挑戦!」という記事を読んで、自分もやってみたいなあと思いながら早くも半年。
ブログ全体を手掛けるのはちょっと難しそうなので簡単なものでやってみました。
今回着手したのは、全く流行らないツールでお馴染み「そうか、もう君はいないのかメーカー」
こちらをレスポンシブ・ウェブデザイン対応にしてみることにしました。
構成
最初の構成はこんな感じ。
1.画像部分
2.ツール本体
3.広告
全体を3ブロックに分割して可変させるようにしました。
結果、以下の通りに。
2と3が合体。
スマホ(iPhone5だとこんな感じになります)
ちょっと引っ掛かった点
スマホで引っ掛かった点がありました。
ブラウザのサイズを縮小させたりすると普通に画面が変化するのですが、実機で確認すると2番目の「2と3が合体」の構成になってしまう状態に。
以前も引っ掛かったのですがこちらはmeta viewportの設定で解決。
モバマスツール作成時の知識(?)が役に立ちました。
ちなみにviewportに関しては以下の記述がわかりやすいかもです。
iPhoneやスマートフォンでサイトを表示させると、文字や画像がすごく小さく表示されてしまいます。
これはiPhoneのブラウザが、横幅980pxとして擬似的に表示しているためです。
(中略)
これを見やすく表示させるには、METAタグでviewportを指定してやります。
viewportとは
普段制作をやらないとこのへんの知識は抜けてしまいがち。
参考にしたサイト
以下が参考にしたサイト。
今回は複雑なものではなかっったのでweb上で完結することができました。
レスポンシブ・ウェブデザインの簡単な作り方 [ホームページ作成] All About
→仕組みが凄く分かりやすいです。
Media Queriesで、画面サイズ別にCSSを切り替える方法 [ホームページ作成] All About
→media queriesの説明。
これぞレスポンシブ確認ツールの決定版!OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer | コリス
→確認用ツールの紹介。ブックマークレットが便利。
Google/SEO関連
Googleが言及しているスマホ対応。
Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法
→レスポンシブ・ウェブデザイン以外の構成もサポートしています。
レスポンシブ・ウェブデザイン – メディアクエリのパワーを使いこなす
→事例。
レスポンシブ・ウェブデザイン以外にもサポートはされているもののSEO的には重複インデックスなどが気になるところですね。
以下は当サイトの記事です。
マーケティング・テクノロジーフェア2013でアイレップ・紺野さんのセミナーを(途中から)受けて来ました。
最後となりますが、日々の雑事がちょっと切ない出来事に変わるツール「そうか、もう君はいないのかメーカー」。
ぜひご活用ください。
そうか、もう君はいないのかメーカー
※「そうか、もう君はいないのか」でぐぐると10位前後でうろうろしてますw
[…] 【初めての制作】そうか、もうレスポンシブ・ウェブデザインになったのか。 […]