スマートフォン対応してみた。ずっとつくってみたかったけど、忙しくてできてなかったので頑張ってみました。特に頑張るでもなく、意外にサクッと。スマートフォンの画面って小さいから、メニュー画面をどうやって設置するかがネックなんだろうけど、カテゴリ毎の導線もつくれそう。ちなみに、Facebookのオープングラフを使ってコメント欄をつくっているのだけれども、それも自動で挿入できそう。

 ユーザーエージェンを判別してスマートフォン用のCSS(スタイルシートを適応)を適応させています。

 

 

 カテゴリはこんな感じ。あと、ウェブサイトをiPhoneのホームするとアイコンが現れますが、あれ専用の画像ファイル(apple-touch-icon.pngというファイル名にして)をルートディレクトリに入れるだけでいいらしい。画面はこんな感じ(右)。参考は下記まで。

・iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定

 ブログだとカテゴリと外部へのリンクを書くだけでいいらしいけど、オフィシャルなコーポレートサイトやスペシャルサイトだと、もっと商品検索とか、位置情報、もっというとデバイス向けのウェブアプリ、とかとか。

 

 

 サントリーのスマホサイトは清潔感があっていいよね。カラーセットがきちんとルール決めされてて、それぞれの<div>要素も見やすい。そもそもコーポレートサイトを全ての企業がつくる意味っていうのも前提として考える必要はある部分ではあるけれど、「レシピ」検索とか便利そう。

・Copyright © 2009-2012 SUNTORY HOLDINGS LIMITED. All Rights Reserved

 企業としての優先順位→各ブロック毎の要素→ルール決めっていう手順をふまないと、ごちゃっとしたサイトになっちゃいそうですね。まあ、普通のサイトもそうなんだけれども。