CSS Nite LP25(Shift 6)フォローアップ(7)『スマホ・タブレット・ミニタブ時代の Webサイト制作術』(たにぐち まこと、松田 直樹さん、矢野 りんさん)

_DSC6087.jpg

2012年12月15日(土) 、ベルサール神田で開催したCSS Nite LP25(Shift 6)のフォローアップとして、 たにぐち まことさん(エイチツーオー・スペース、anygraphica)、松田 直樹さん(まぼろし)、矢野 りんさん(Android女子部部長/Baidu Inc. デザイナー)の『スマホ・タブレット・ミニタブ時代の Webサイト制作術』のスライドなどを公開します。

メッセージ(たにぐちさん)

スマートフォンセッションを担当した、たにぐちです。

今年のスマートフォンセッションは、「マークアップセッション」と話が重なる部分が多かったと思います。それはきっと、「スマートフォン(タブレット端末含む)」と呼ばれるものがすでに、「携帯電話の代替」という存在から、Webを閲覧するスタンダードな存在になりつつあるといえるでしょう。

来年以降、私たちはかつて「記憶媒体はカセットテープだったんですよー」とか「プリンタはパンチカードで・・」というような話を懐かしく聞くのと同じ感覚で、「マウスというデバイスが昔はあってね・・」という時代に突入します。

そのとき、それでもマウスにかじりついてしまう人たちと、そうでない人たちに大きく分かれることになるでしょう。私たちはぜひ後者になれるよう、一緒にキャッチアップを続けていきましょう!

セッションで取り上げたツール類の URLです。   * Google Now * Pinterest * Path App Fly-out Menu using CSS3 & jQuery * Google ウェブマスター向け公式ブログ: Google がお勧めするスマートフォンに最適化されたウェブサイトの構築方法 * Media Queries - W3C * 歴史雑談録 * Resizer * Aptus * Chrome for iPhone * Adobe Edge Inspect   また、一点補足です。

Adobe Edge Inspectについて

Adobe Edge Inspectは、次の2ライセンスから構成されています。

  • 無償メンバーシップ:1端末までが利用可能です
  • 有償メンバーシップ:端末数に制限はありません。Edgeツールのみの「1,000円/月」のライセンスまたは、Creative Cloudライセンス(5,000円/月)があります

以上です。来年もどうぞよろしくお願いいたします。

メッセージ(矢野さん)

_DSC6300.jpg

ご参加ありがとうございました。矢野りん@スマートフォンセッションです

公演中、デバイスごとにコンテンツを最適化する必要がある、という話の根拠になる記事を紹介します。

Googleが運営しているインサイトコンテンツ「think with Google」のなかの、The New Multi-Screen Worldをぜひ一度御覧ください。

PC、スマートフォン、タブレットではそれぞれユースケースが異なっています。求められるコンテンツの量も質も違うのだとうことが想像できるでしょう。それと同時に、今後は「マルチデバイス」に対してコンテンツを常時配信できる組織がどんどん強くなるということもわかります。しかしそのような運用力のある組織は限られてきます。

マルチスクリーン、マルチデバイス時代突入の初速を確保するため、とにかく手持ちのコンテンツをレスポンシブにすることは間違っていません。でも、やはりそこからどんどん最適解を求める必要も同時にあるハズ。

制作コミュニティが知恵を出し合いつつ、 New Multi-Screen Worldを楽しく、便利な世界にしましょう!

メッセージ(松田さん)

121215shift6_0996-2.jpg

スマートフォンセッションにて、レスポンシブWebデザインについてお話いたしました松田直樹です。みなさま、ご参加いただきありがとうございました。

スマートフォン視点からのRWDはどうなの?という路線での内容をご紹介しましたが、今後のRWDがどう普及するのか分からない、というのが個人的にも客観的にも正直なところです。

今年、一挙に流行した感が強く、また各所で賛否両論、難しい話が繰り広げられていたりして、導入に二の足を踏んでおられる方もいらっしゃるかと思います。ただ「RWDというスマホ対応の選択肢が増えた」ということで我々Web制作に携わる者としては喜ばしいことだと考えてみましょう。

公演でも「むずかしく考えない」とお話しましたが、まずは一度、簡単にでもRWDでサイト設計されてみることをおすすめします。RWDそのものは決して難しいものではありません。自ずと向いている点、使うべき点が見えてくると思います。RWDが向いているケースは多々ありますので、このセッションがその判断のご参考になれば幸いです。

Adobe Edoge Inspect

講演中に紹介した「Adobe Edge Inspect」ですが、Creative Cloudの有償メンバーシップであれば、一度に接続できるデバイスの数は無制限でした。  

RWDの検証に使えるWebツール・サービス

ビデオ

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション+αを選びました。

2010年から2019年のベスト・セッション