スキップしてメイン コンテンツに移動

Webサイトのスマートウォッチ対応はお済みですか?

「えぇ、まだですって!それはいけません!」

スマートウォッチからの Web アクセスがうなぎのぼりだそうです。一方で天然ものうなぎは減っています。また 2020 年にはスマートウォッチからのアクセスが Web 利用の過半数に、手脂のついたカマボコ板はオワコンだそうですよ。かくいう私もようやく最近になって ガラケーからスマートフォンに切り替えたというのに…世の中の進歩が速すぎます。

「で …するの?しないの?」

ということで急遽このブログにもスマートウォッチ対応を実施することになりました、とさ。

さくっとスマートウォッチ対応

当ブログではすでにスマートフォン対応を終え、これらの端末に対してはシングルカラムで表示するようにしています。

この状態からさらに横 320px 240px 以下の画面サイズに対しては左右の余白を削って 0px にしてしまいます。コンテンツ領域が増えてスマートウォッチの限られた画面を活かすことができますね。

@media handheld, screen and (max-width: 240px) {
/* for smart watch */
}

借景テクニックを使って表示エリアを確保しつつ余白も設ける

しかし余白がゼロだと読者に窮屈な印象を与えてしまっていけません。Web デザイン・タイポグラフィの肝は余白のコントロールです。

そこでメインカラムの背景を黒にし文字色を白とします。ビジュアルバンドか個人ホームページ時代のページというわけじゃありません。なんということでしょう!この配色だとディスプレイの黒縁を余白として借用することができるのです。これはわが国の伝統的造園法である“借景”を髣髴とさせるスゴ技だぁ!

早速スマートウォッチを取り出し…残念ながら持っていないのでスマートウォッチに見立てた Xperia mini を取り出して確認。狙い通りパーフェクトです。これで 2020 年のおもてなし体勢は完璧です!本当にありがとうございました!

「ところで、貴 HP のEインク・ディスプレイ対応はお済ですか? …おゃ!?」