CSS Nite公式サイト

CSS Nite in Ginza, Vol.71「次世代のWebデザインへの2つのヒント」が終了しました

12 years 3ヶ月 ago

2013年9月19日(木)、アップルストア銀座 3FシアターでCSS Nite in Ginza, Vol.71を開催し、160名近い方にご参加いただきました。

「次世代のWebデザインへの2つのヒント」をテーマに、2セッションで構成しました。

  • マルチデバイス時代におけるWebサイトのUIについて/鍋坂 理恵(サン・サン)
  • Style Guide活用のススメ/大月 茂樹(ニイハチヨンサン)

20130919ginza71_0106.jpg

スライドは、追って、こちらのサイトで公開します。

ツイートは下記にまとめました。

本日のCSS Niteは紙のアンケートでなく、オンラインアンケートです。ご参加いただいた方は、ご協力をお願いします。回答いただいた方には、いち早くスライドをシェアします。

  • アンケート(アンケート回答は9月22日で締め切りました)

次のブログで取り上げていただきました。ありがとうございます。

こちらは出演者のブログ:

CSS Nite実行委員会

年末恒例のCSS Nite「Shift」を2013年12月14日に開催

12 years 3ヶ月 ago

CSS Nite LP31: Webデザイン行く年来る年(Shift7)

CSS Niteでは、その年のWeb制作シーンを振り返る「Shift」というイベントを毎年年末に開催しています。2007年から開始し、7回目となるCSS Nite LP, Disk 31「Webデザイン行く年来る年(Shift7)」を2013年12月15日に開催します。

前回は、スペシャルセッションが2つあったこともあり足早でしたが、今回は「ソーシャルメディア」セッションをお休みし、下記のラインアップでお送りします。

  • 基調講演:長谷川恭久
  • マークアップ:益子 貴寛、小山田 晃浩
  • アクセシビリティ:植木 真、中根雅文、山本 和泉
  • ツールと制作環境:鷹野 雅弘、石嶋未来
  • デザイントレンド:原 一浩、矢野 りん、坂本 邦夫
  • スマートフォン:たにぐち まこと、矢野 りん、松田 直樹

はじめて参加される方はもちろん、ご参加前に、前回(2012年末)のスライドや動画などを事前にチェックされておかれると、より楽しんでいただけると思います。

CSS Nite LP25(Shift 6)「Webデザイントレンド年末スペシャル!! 」 from CSS Nite on Vimeo.

 ShiftShift 2Shift 3Shift 4Shift5Shift6Shift7
キーノート OKOKOKOKOKOK
マークアップOKOKOKOKOKOKOK
アクセシビリティOKOKOKOKOKOKOK
ツールと制作環境OKOKOKOKOKOKOK
WebデザイントレンOKOKOKOKOKOKOK
RIA OKOKOK   
スマートフォン    OKOKOK
ソーシャルメディア     OK 
スペシャル    OKOK 
CSS Nite実行委員会

CSS Nite in OSAKA, Vol.36が終了しました。

12 years 3ヶ月 ago

2013年9月10日、中央会計セミナールームでCSS Nite in OSAKA, Vol.36を開催し、50名強の方にご参加いただきました。

DSC_2127.jpg

「次世代のWebデザイン」と題し、次の2セッションで構成しました。

  • マルチデバイス時代におけるWebサイトのUIについて/鍋坂 理恵(サン・サン)
  • Style Guide活用のススメ/大月 茂樹(ニイハチヨンサン)

ツイートは下記にまとめました。

ご参加いただいた方には、追って、フォローアップメールにて、スライドを共有します。

CSS Nite実行委員会

CSS Nite in Ginza, Vol.71のご入場に際し:優先入場には受講票の提示が必要です

12 years 3ヶ月 ago

CSS Nite in Ginza, Vol.71

来週の木曜日(9月19日)19:00からアップルストア銀座(3Fシアター)にて、CSS Nite in Ginza, Vol.71を開催します。

「次世代のWebデザイン」と題し、次の2セッションで構成します。

  • マルチデバイス時代におけるWebサイトのUIについて/鍋坂 理恵(サン・サン)
  • Style Guide活用のススメ/大月 茂樹(ニイハチヨンサン)
ご入場に際し

事前登録を行った方

  • 入場時に受講票をご呈示ください。ご呈示ない場合には、事前登録は無効とさせていただきます。
  • 受講票は9月10日23:00頃に、登録されたメールアドレスにお送りしています。
  • 18:45前にご来場の場合には1F右手奥からの階段にてお待ちください。開演時間までは階段をご利用ください。
  • 椅子席は先着順です。
  • 後から来る方の「椅子取り」はご遠慮ください。

※事前登録を行っていても、座れない可能性があります。

事前登録を行っていない方

  • エレベータは使用せず、1F右手奥からの階段をご利用ください。
  • 18:50からのご入場を予定しています(それまでは階段にてお待ちいただくことになります)
  • 当日枠は20-30人くらいの見込みですが、定員180名を超える場合、ご入場いただけない可能性があります。

CSS Niteに初参加の方へ

はじめてご参加される方へをぜひご一読ください。

注意事項

  • CSS Niteに関しては撮影、録音などOKですが、アップルストア銀座のその他のフロアーは、写真撮影不可です。現在、アップルストア銀座でのセミナーイベントは、写真・動画ともに撮影不可です。
  • アップルストア銀座の店内では飲食不可ですが、フタ付きのペットボトル等であれば問題ありません。
  • アップルストア内でのお食事はご遠慮ください。

公開ポリシーとTwitter

  • スライドは、イベント終了後にCSS Nite公式サイトにて公開予定です。アップルストア銀座でのイベントの規約変更に伴い、録音・録画がNGになりました。スライドのみを追って公開します。
  • 音声の公開は行いませんので、必要な方は、ご自身で録音してください。
  • 撮影いただく場合、携帯電話など、撮影時に音が出る機器はご遠慮ください。

キャンセルについて

事前登録された方で、ご都合が悪くなった場合には、キャンセルフォームからご連絡ください。

懇親会について

終了後、アップルストア銀座の近くのお店で懇親会を開催します。参加希望の方は、Facebookイベントにてご表明ください。懇親会のみの参加もOKです。

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップを公開しました

12 years 4ヶ月 ago

CSS Nite LP, Disk 27

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のすべてのセッションのフォローアップ(スライドなど)を公開しました。

現在、各フォローアップ内のビデオにパスワードが設定されています。講演者からOKが出次第、パスワード設定をはずします。

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(8)『よくあるトラブルと解決方法・回避方法』西畑 一馬さん、木村 哲朗さん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、西畑 一馬さん、木村 哲朗さん(まぼろし)の『よくあるトラブルと解決方法・回避方法』セッションのスライドなどを公開します。

「スマートフォンサイト制作 よくあるトラブルと解決方法・回避方法」のセッションを担当した株式会社まぼろしの木村・西畑です。みなさま長時間の受講おつかれさまでした。

私たちのセッションはトラブルシューティングという対面した方でないと、なかなか理解するのが難しい内容でしたが多くの方から「楽しかった」と評価いただいてホッとしております。

40分という短い時間でしたので、紹介できたバグは一部でしかありません。スマートフォン対応には他にも数々の落とし穴が含まれております。

セッション中に紹介した現象と対策方法のコードなどを納めたサンプルファイルをご用意しました。以下URLからダウンロードしていただき、解凍のうえでご覧いただければと存じます。
https://www.dropbox.com/s/glnnzxsrgo18gmg/CSSNiteLP27-s7-kimura-nishihata.zip

なお、セッションで紹介しきれなかったバグなども含め、以下の記事でスマートフォンのバグリストを公開しておりますので、こちらも参考にしてください。

紹介しているバグは氷山の一角です。このリストは定期的に更新しておりますので、時々見にきてもらえるとさまざまなバグへの心構えができると思います。

また、アンケートで「よくトラブルになる端末」を知りたいとの質問をいただきました。

セッション内でも紹介しましたが、最近の端末では「GALAXY S III」が群を抜いて他の端末と異なるバグを抱えている端末です。すこし前の端末ですと「INFOBAR A01」、「IS03」などがトラブルに陥りやすい端末です。他にも挙動が他の端末と少し異なる端末は多数存在します。

これは、Android端末ではOSの差異だけではなく、メーカーや搭載されているチップの違い、デバイスのスペックなどさまざまな要因でバグが発生している為です。(詳しくは以下の記事を参考)

そのため、全てのバグを事前に理解して防ぐということは不可能ですが、未知のトラブルが発生した際は「がんばる」or「諦める」メソッドで対応しましょう。
「がんばる」or「諦める」の判定には、セッションでもお話しした「リフロー」が原因である可能性を考慮すると、より多角的な判断が可能になります。
今回のセッションを、皆様の今後のスマフォサイト制作にお役立ていただければ幸いです。

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(11)『スマホ制作サイトのディレクション術』小林 信次さん+矢野 りんさん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、小林 信次さん(まぼろし)+矢野 りんさん(バイドゥ)の『スマホ制作サイトのディレクション術』セッションのスライドなどを公開します。

「スマホサイト制作のディレクション術」を担当した小林です。

伊原さんのフォローアップにあったように、ウェブサイト構築のプロジェクトでは「コレ!」という決まりがあるものではありません。
私がご紹介した良い感じにしておくというのも、従来のワークフローと理想のワークフローが混在している時期だからこそ受け入れられているもので、将来的には淘汰されていくかもしれません。

10個のセッションの中でさまざまな気づきを得られたかと思います。
皆さんの制作環境やクライアントとの関係に適した「良い感じの代替案」が増えれば幸いです。

## 以下、アンケートでいただいた質問への回答です。

ディレクターのリテラシーを上げる良い方法を知りたいです
個人の問題ということもあり、なかなか難しいところです。
フォローアップの内容をもとに社内で勉強会を開くなど、今回のイベントが積極的にまわりを巻き込んでいく助けになっていれば幸いです。
VimeoなどYouTube以外の動画サービスの使用はどうでしょうか?
どのサービスも動画配信を専門とするプロフェッショナル集団が運営しておりますので、自前で動画配信をするよりずっと効率的だと思います。
YouTube以外でも良いのですが、実績・知名度などからクライアントに受け入れてもらいやすい点で弊社ではYouTubeを推しております。

## 以下、togetterからです。

”eBayの社長が、あるインタビューで、彼らのモバイルアプリから週8,000台の車が売れていると言っていたそうです” @rriverさんから

海外では車をモバイルから購入するのも一般的ということでしょう。
気軽に車の購入はスマホで検討しないですよね、と言ってしまいましたが、日本でもモバイルから車を購入する未来がくるのかもしれません。
ご指摘ありがとうございました。

"I never imagined the sea change in consumer behavior over the last three to four years. People are buying 8,000 cars a week on EBay’s mobile app. "

フォローアップとメッセージ(矢野さんから)

「スマホサイト制作のディレクション術」も担当した矢野です。

ご参加ありがとうございました!
セッション全体で「アジャイル」というキーワードが頻出していましたね。バイドゥでは、自社製品をアジャイル式のワークフローで開発しています。弊社のプロセスはリリースまでに1ヶ月の開発期間をもうけ、「要件定義」「開発」「テスト」の3セットを1週間単位で3回繰り返しています。ユーザーのニーズを取り入れようとおもうと、どうしても「やってみて、改良の余地があったら即微調整」が許される状況を作る必要があります。これがアジャイルというものの必然性だと私は考えています。

車をスマホで買うのか?という話題をセッション中に取り上げました。
今後Webサービスは「クロススクリーン」の時代になる、と考えられています。もし「購入」という行為が最終着地点と考えた場合、PCをその着地用ツールにするのか、スマホを着地ツールにするのかは、サービスを提供する側の設計によりますが、現時点でスマホはリソースを収集して、何かを検討するためのツールではないと言われています。よって「スペック」や「商品の特徴」のようなコンテンツは、PCのほうがユーザーにとってはより意味のある情報といえるかもしれません。しかし、そうした情報をよくよく吟味して、すでに意思を決定したユーザーがスマートフォンで購入ボタンを「ポチる」可能性はあります。

なので、スマホでものを買うか、買わないか、は、そこにいたるプロセスをどう具体的に想像し、設計したコンテンツなのか、によって、変わるものだというほうがもっと正確かもしれませんね。
短い時間でまとめきれないこともありましたが、どんどん変わる常識について、これからもみなさんと一緒に考えて行きたいとおもいます。

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(10)『ケーススタディ:NTTデータグループウェブサイトのマルチデバイス対応』伊原 力也さん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、伊原 力也さん(ビジネス アーキテクツ)の『ケーススタディ:NTTデータグループウェブサイトのマルチデバイス対応』セッションのスライドなどを公開します。

皆様おつかれさまでした。

セッション9「NTTデータグループウェブサイトのマルチデバイス対応」を担当したビジネス・アーキテクツの伊原力也です。

ウェブサイト構築のプロジェクトというのは「コレ!」という決まりは少なく、さまざまな状況に対して、いろんな「やり方の引き出し」を使って対応していくことが多いものです。今回の内容が、その引き出しの一つになれば幸いです。私も今よりさらにイイ感じにプロジェクトが進められるよう、頑張っていきたいと思います。

なお、アンケートで「お客様がそのやり方に対してどう思ったか?(わかってもらえたのか?)」というご質問がありました。これは「クライアントが『デザインカンプを「旗」にする、ツッコミメソッド、後半は実装ベース』という進め方について理解を示してくれたのか?」というご質問として、お答えします。

このプロジェクトでは、社内でのツッコミを通り抜けたデザインを「旗」として出したわけですが、そのときに同時に「デザインコンセプト」という資料を提出し、クライアントにプレゼンしています。

これは、
・プロジェクトの要件をこのデザインがどう満たすか
・デザインの方向性やキーワード
・そのデザインを実現する実装の方向性
などを取りまとめたものです。

つまり「社内からのツッコミ」だけでなく「クライアントからもらいそうなツッコミ」にもきちんと答えられるようにして、信頼して任せてもらえるように準備したわけです。直接プレゼンできる相手だけでなく、海外にも関係者がいたというのも「根拠」のドキュメンテーションが必要だった理由です。

この内容に対してクライアントの納得感があったので、後半を実装ベースに移行することができたと考えています。プロジェクトによって力の掛けどころはさまざまですが、参考になれば幸いです。

今回のセッションのテーマについてじっくり腰を据えて考えたい方向けに、2冊ほど書籍をご紹介します。どちらも、デザイナーやエンジニアはもちろん、前段をきちんと考える部分に重点を置いてることから、むしろディレクターやウェブマスターにおすすめしたい内容です。

『スマートフォンデザインでラクするために』

タイトルだけ見るとスマートフォン向けのデザインTips本のように一瞬思えますが、実は、書籍の大半である8章中の4章までが「要件定義」「ヒアリング」「設計」「コンセプトメイキング」の話題に割かれています。言葉遣いが平易なため、ラクな気持ちで読めるところもポイントです。

『レスポンシブWebデザイン 制作の実践的ワークフローとテクニック』

書籍全体の半分以上を使って、「RWDそのもの」「RWDをとりまく状況」「RWDにどう対峙すればよいか」という点を解説しています。これほど懇切丁寧な解説がまとまっているものは、日本語ベースではちょっと他に見当たりません。

書籍と合わせて、以下のやりとりに目を通すのもおすすめです。

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(9)『ケーススタディ:iOS版CodeGrid 設計の裏側』徳田 和規さん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、徳田 和規さん(ピクセルグリッド)の『ケーススタディ:iOS版CodeGrid 設計の裏側』セッションのスライドなどを公開します。

iOS版CodeGrid設計の裏側を担当した徳田です。
当日はご静聴いただきありがとうございました。

■CodeGridについての捕捉

CodeGridについて、ご存知ない方が多数いらっしゃったようでCodeGridについての説明が少なかったとのご意見をいくつかいただきました。当サービスについては、オフィシャルサイトがありますのでこちらをご覧下さい。

サイトの補足を少ししておきます。

CodeGridはフロントエンドに関わる人々のためのガイドとあるようにフロントエンド(HTML、CSS、JavaScriptなどの技術や、それに関連した周辺技術)の最新動向や使い方などの記事を月4回木曜日にメールマガジンとして配信しています。

配信コンテンツ一覧はWebアプリのサイトで確認することができます。

https://app.codegrid.net
(購読されていない方は、記事の一覧と概要までをご確認いただけます。)

例えば、

* SassとCSS設計
* 現場で使えるGrunt入門
* Webアプリ構築のためのBackbone.js入門
* おすすめライブラリつまみ食い

など、さまざまな連載があります。また、読み物として弊社代表の「ピクセルグリッドの仕事術」という連載もあります。

それぞれの記事は、弊社(ピクセルグリッド)メンバーが制作時に身につけた知識を元に執筆しており、文章の編集はエンジニアではなく、専門の編集者が行っています。

■当日のセッションについての補足

当日のセッションでは、当アプリのiOS版開発に関する設計の裏側として、いくつかポイントになった点を紹介しました。

対象にしている端末は、iOS6以上のiPhone、iPadです。動作確認はiOS 5以上で行っていますが、快適に閲覧できるのはiOS 6以上です。

* iOS Safariのフルスクリーンモードの扱い
* ヘッダーナビゲーション
* 固定UIとスクロール
* シリーズやタグページ
* Table of Contents(目次)メニュー
* PC版とのサンプルの扱いの違い
* ソーシャルボタン

当日のセッションでも言われていましたが、スマートフォン向けにサイトを作る場合は、できることとできないことを把握することが大切です。

スマートフォン端末では、パフォーマンスもPCとは大きく異なり、動作が遅くなることが多いため、ひとつの機能の採用にも、それは本当に必要かどうか、PC以上に十分吟味する必要があるでしょう。

当セッションの内容は、基本iOS6以上(動作確認はiOS5以上)の端末向けと、かなり限られた環境下での話でしたので、限定的な話になってしまいましたが、どこか制作時のヒントになれるようなポイントがあれば幸いです。

当日は、長い時間おつかれさまでした。
これからもCodeGridをよろしくお願いいたします。

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(7)『スマホの検証が10倍はかどる!Remote TestKitの紹介』森本 恭平さん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、森本 恭平さん(NTTレゾナント)の『スマホの検証が10倍はかどる!Remote TestKitの紹介』セッションのスライドなどを公開します。

皆様おつかれさまでした。
Remote TestKit」を紹介いたしましたNTTレゾナントの森本恭平です。

元々は社内向けの検証ツールだったのが、いつの間にかこのような大きな舞台で紹介することができ、サービスの担当者としては非常に嬉しい限りです。

弊社のサービスを使ったとしてもAndroidの検証は非常に大変だと思います。

どこかで優先度を決めないといけないと思うのですが、大きく2つの観点から考えるのが良いと思います。

  1. メーカー x OS x チップセットが同一端末を1台と考える
    Android端末は上記に書いたようにメーカーとOSとチップセットによって、最終的に使えるメモリなどが決まります。
    Webアプリなどを制作する場合は上記の組み合わせを意識すれば検証がよりスムーズになると思います。
    これらの情報はRemote TestKitの端末一覧に記載されています。チップセットや積んでいるメモリを調べるのは手間がかかりますので、参考にしていただければと思います。
  2. 人気機種からOSを絞って選定する
    やはり多く出荷されている端末をサポートするのが良いと思います。
    国内での販売状況を考えますと下記の三社の端末を検証すれば、6割程度はカバーできるはずです。
    - Samsung
    - Sony Mobile(Xperia)
    - 富士通

Remote TestKit後は、画面解像度が少し違うシャープも少し検証すれば、よりバグの少ないページが作成できるのではないかなと思います。
もっとくわしく知りたいという方は弊社のサイトにて、情報をまとめておりますので一読いただければと思います。

ぜひRemote TestKitを使っていて改善点などがあれば、お気軽に@appkitboxまでご連絡ください。

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(6)『スマートフォンサイトにおける画像の最適化と使いどころ』松田 直樹さん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、松田 直樹さん(まぼろし)の『スマートフォンサイトにおける画像の最適化と使いどころ』セッションのスライドなどを公開します。

ご参加いただきました皆様、大変ありがとうございました。「スマートフォンサイトにおける画像の最適化と使いどころ」セッションを担当しました、まぼろしの松田でございます。

SVG、Web Icon Fonts、Data URI Scheme など、今まではあまり使われてこなかったフォーマットや手法をご紹介いたしましたが、駆け足的な説明になってしまいそれぞれ詳細までお伝えすることができませんでした。真意としては、まずは画像を扱う上での選択肢が増えている、という現状をご理解いただきたかったという点です。

紹介したネタは特段新しいもの、未来の画像の扱い方、というわけではありません。すべて今日からでも使えるネタ、特にスマホにおいては実用的なものです。どのフォーマットや手法がベストなのか、というのはサイトデザインや性質にもよりますので、まずはこれらの選択肢を使ってみる、とりあえず試してみるということからチャレンジいただく機会になれば幸いです!

以下、アンケートでいただきました質問への回答です。

SVG は .htaccess 使えないといけないのか?
.htaccess に、SVG の MIME Type「image/svg+xml」を AddType しておいた方がいいのですが、なくても大抵のブラウザは表示可能です。念のため img要素には「type="image/svg+xml"」を指定しておくといいでしょう。
ソフトバンクの Android では Gzip が効かない噂がある?
もしかしたら、Android 組込みの HttpComponent が標準では Gzip が有効になっていない件のことかもしれませんね。普通のスマートフォンのWebサイトで使用する分には問題ないように思います。
Base64 は拡大すると?
Base64 は、ビットマップなどのフォーマットではなく、単にエンコード手法なので、どんなフォーマットでも変換可能です。ですので、拡大するとボケるかどうかなどは変換元のフォーマットに準じます。
WebP とかどうなんでしょう?
Google が開発元となっている静止画の新フォーマットで、非可逆圧縮と可逆圧縮のどちらも扱えて、かつより軽量化できる、という期待のフォーマットですが、現状、Android 4以降のブラウザ、およびChrome、Operaしか対応していません。他ブラウザへの Fallback が手間でなければ使ってみてもいいかもしれません。ちなみに、YouTube の UI は WebP を多用して実装されていますのでご参考まで。
SVG が使えない環境での代替手段でベストなものは何?
個人的には、modernizr.js での判別、もしくは canvg.js による変換で対処しています。スライドの中で SVG 非対応ブラウザに対する Fallback を紹介しておりますので、そちらをご参考ください。

また、セッションにてご紹介した参考サイトとなります。

SVGの最適化ツール

SVGの参考サイト

SVG関連ライブラリ

Web Icon Fonts 参考サイト

Web Icon Fonts の生成

Data URI Scheme

Base64への変換

Gzip

改して、みなさまありがとうございました!

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(5)『スマートデバイス時代のWebサイト構築術 LIVE』たにぐち まことさん、田代 豊さん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、たにぐち まことさん、田代 豊さん(anygraphica)の『スマートデバイス時代のWebサイト構築術 LIVE』セッションのスライドなどを公開します。

セッション 5「スマートデバイス時代のWebサイト構築術 LIVE」を担当させていただいた、anygraphica 田代とたにぐちです。

私たちからは、スマホサイト制作に活用できるツール類を、実際の作業フローに合わせてご紹介しました。説明が早口になってしまって申し訳ありませんでしたが、各ツールを使ってみていただき、便利なものは活用していただければ幸いです。

紹介したツール類です。

動作デモのムービー
http://www.youtube.com

また、アンケートの感想欄でいただいたご質問に回答いたします。

● jQueryは CDNではなく、ローカルに落とすことが推奨されているが、どう思われますか?
これは、私のセッションでそのように感じられたと言うことでしょうか? それでしたら、分かりにくかったかも知れず申し訳ありません。CDNは積極的に使っていただいて良いと思います。私がデモ中で挿入した jQueryの参照コードはこちらです。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script>window.jQuery || document.write(" title="<script src="shared/js/jquery-1.7.1.min.js"><\/script>">Easy Switch Keyboard</script>window.jQuery || document.write('<\/script>')
これは、最初に CDNから jQueryのロードを試みます。その後、正常にロードできていなければ、ローカル(shared/js/フォルダ内)の jQueryをロードするという2段階になっています。参考にしてくださいませ。
Firefox OS・・・ まだ全然これからなんですね。
ごめんなさい、言葉が足りませんでした。これは Firefox OSのせいではありません。私たちがデモで使ったサイトが、WebKitのことのみを考えて作ったサイトであったため、Mozillaで崩れてしまったものでした。
スマートフォン専用サイトの場合、WebKitでしか確認していない Webサイトも多いため、表示が崩れることもあるかと思います。今後、確認をして調整をしていかなければならないかも知れません。
● Firefox OSをこれからフォローすべきでしょうか?
もちろん、フォローすることが「理想」ではありますが、対応するためには予算や手間がかかりますので、現実的にはこれからシェアなどを見ていきながら、クライアントとの判断になっていくかなと考えています。
ただ、シミュレーターは無料ですぐに利用できますので、まずは触ってみて、どんな風に崩れるのか、どんなクセがあるのかなどは見ておくのは良いと思います。
● Dreamweaverでのコーディングはもう古い?
そ んなことはありません。私たちも今も Dreamweaverは活用していて、ベースのHTMLコーディングなどでは Dreamweaverを利用します。ただ、SCSSを利用したり、jQueryを利用しようとしたときは、別の Sublime Textや Codaの方が優れているかなと思います。
ツールは「どれか1つ」に決める必要はないと思っています。それぞれのツールの良い所を使い分けて、一番最適な作業フローを作れるようにすると良いでしょう。
● どのように情報収集をしていますか?
基本的には、Facebookで友人がつぶやくのを見たり、Gunosyや Ziteなどのニュースアプリを活用しています。気になったニュースやアプリは、必ず試して評価をし、使えそうなものを随時ワークフローに組み入れて試しています。

気になったニュースは、今 Twitterで流していますので、よろしければフォローしてください。
https://twitter.com/seltzer

レスポンシブWebデザイン実践編 こもり まさあき from indd-jp on Vimeo.

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(4)『レスポンシブWebデザイン実践編』こもり まさあきさん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、こもり まさあきさんの『レスポンシブWebデザイン実践編』セッションのスライドなどを公開します。

CSS Nite LP, Disk 27に参加された皆様、10セッションの長丁場お疲れ様でした。
4番目のセッションを担当したこもりです。

今回は「レスポンシブWebデザイン実践編」ということで、実際の制作時の困った、レスポンシブだとこうなるから…という誤解をどうにか解けないかということで、設計時の考え方や全体的なワークフローには一切触れずに実装のみに話を絞りました。

「Content Choreography」の部分は、さまざまなデバイスで情報を適切に伝えるためにアクセシビリティのことも踏まえながら、コンテンツの順番や配置位置を設計段階で考えるといったことですが、現在のWeb制作ワークフローにおいては「企画、情報設計」「ヴィジュアルデザイン」「コードの実装」といったパートが分離していて、実装サイドが無理矢理どうにかしなければならない状況が多々あると考えています。

そういう無理な設計や注文を実装サイドでどうにかしたいときに、最悪「Flex Box Layout Module」を使うという方法もあるよ、ということで覚えておいていただければ。伊原さんのセッションであったようにスクリーンリーダーの利用の際に情報構造と表示内容に相違が出る、という問題はありますので、使いすぎというよりはむしろ使わないでも済むような方向で前段の設計をちゃんとしておいた方が良いでしょう。

レスポンシブに限った話ではないですが、セッション全体に流れていたように「無理をしない」というのが一番の解決策です。これまではデスクトップオンリーで済んだものが、端末毎の実装差異、バグを山ほどもった端末が今後次から次に発売されていくでしょう。

こもり自身、旧来の携帯電話向けのコンテンツ制作・運営などをやっていた経験もあり、端末がドンドン発売されるような状況での制作や運用対応の大変さは身をもって実感しています。参考までにお伝えしておくと、1日にFacebookにアクセスするデバイスは「7,000」種類といわれています。

これは世界レベルの話ですが、日本でも今後端末の発売は相次ぐでしょうし、機種変は進まないと思って良いのではないか?、さらにある日突然スマートフォン以外のデバイスが出てきて、携帯電話が突然消えてしまったような今の状況に近しいことになるかもしれません。

そういった部分はもちろん、サイトの性質、利用者のコンテキストを考慮しながら、どういった方法で実装するのが良いか、いま一度実装サイド以外のクライアントも含めたメンバーと考えていただれけばと思います。

以上、長くなりましたが、本セッションの一部でも皆様の今後の制作に役立てたら幸いです。

こもり

--

最後に「あのお化けアイコンは何だ?」という声をいただいてたのでご紹介まで。

Adobeの「Edge Inspect」と同様の機能をもったコンテンツの確認ツールです。これの特徴は「自分自身がローカルのProxyになってサーバを起動する」「特別なソフトや拡張機能、端末側のアプリのインストールが不要」「同一ネットワークにある端末から直接アクセスできる」「任意のディレクトリや外部のURLをホストすることができる」といったものです。もちろん、すべてが同期するので、面倒なフォームの入力もPC側からおこなうことができます。

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(3)『スマートフォン向けサイト制作の基本』益子 貴寛さん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、益子 貴寛さん(サイバーガーデン)の『スマートフォン向けサイト制作の基本』セッションのスライドなどを公開します。

セッション3「スマートフォン向けサイト制作の基本」を担当したサイバーガーデンの益子です。

今回のイベントでは、それほど触れられていなかったパターンとして、あえてユーザーの利用シーンを絞ったスマートフォンサイトを提供する、という方法もあります。

ほかのイベントで紹介したことがあるかもしれません。
みそかつの「矢場とん」です(スマートフォンでアクセスしてみてください)。

コンテンツをかなり絞っているのはもちろん、とにかく「いますぐ矢場とんに行きたい人に向けて」というのが如実に感じられます(裏側から見れば、コンバージョン最優先ということ)。

予算が少ない、期間が短いなど制約が多い場合だけでなく、このように「あえて」という判断があって然るべきですし、もしかしたら今後増えていくのでは、と思っています。

最後に、ひとりの聞き手としても、すごく勉強になったイベントでした。みなさんにも同じように感じていただけたなら幸いです。

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(2)『モバイルデザインパターンの取り入れかた』矢野 りんさん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、矢野 りんさん(バイドゥ)の『モバイルデザインパターンの取り入れかた 』セッションのスライドなどを公開します。

モバイルデザインパターンの取り入れ方 を担当した矢野です。
ご参加ありがとうございました。

セッションでは、ユーザーは基本的に文字の入力を避けるというお話をしました。

アンケートで「どんなフォームデザインなら(入力の)ハードルが下がるか」という質問がございましたので解答します。

フォームの目的にもよりますが、大きくは
・入力項目がすくないこと
・フォーム要素のサイズが大きいこと
・長文の入力が必要ない構成にすること
・プルダウンのような入力サポートを取り入れること
・手続きを小分けにすること
です。

そのような体裁であっても、オンラインアンケートのような基本、ユーザーの好意で操作してもらうようなコンテンツは機能しにくいです。
ユーザーの嗜好を知る手段はアンケートにたよらず、特定のコンテンツに対する興味などをログで確認、分析して把握するほうがよいでしょう。

今回のセッションは来場者属性に基づいて入門寄りの内容に整えました。ちょっと食い足りないというご意見もありましたので、今後の理解を深めるための情報も共有いたします。

『モバイルフロンティア よりよいモバイルUXを生み出すためのデザインガイド』

丸善出版 価格:?2,940
少々アカデミックな内容ながら、普遍的なUIのセオリーを扱っている書籍です。モバイルを扱うとき、何に注意を払うべきか、これからどうなっていくのか、について書かれています。翻訳メンバーにはCSS Niteに登壇されたこともあるインフォメーションアーキテクチャのオーソリティ佐藤伸哉氏も加わっています。

スマートフォンデザイン見本帳『スマートフォンデザイン見本帳』

MdN 価格:?2,625円
矢野の近著です。モバイルフロンティアが概念的な話だとすると、矢野の書籍はこうした概念にどのような服を着せればよいのかというスタイルの参考例を中心に解説しています。設計の話がメインになりがちなモバイルコンテンツデザインですが、やはり最後は視覚的な質がコンテンツの信頼感を左右するのはPCの時代と変わりません。カラーリングの美しさなどは常にデザイナーが責任を持つべき部分です。

モバイルインターフェースに関する考察は始まったばかりです。この先おこる変化を楽しみながら仕事をしましょう!

CSS Nite実行委員会

CSS Nite LP27「スマートフォン対応サイト制作」フォローアップ(1)『スマートフォン今昔物語』神森 勉さん

12 years 4ヶ月 ago

2013年5月25日(土)、ベルサール九段で開催したCSS Nite LP, Disk 27「スマートフォン対応サイト制作(3)」のフォローアップとして、神森 勉さん(KDDIウェブコミュニケーションズ)の『スマートフォン今昔物語』セッションのスライドなどを公開します。

長い時間のイベントでしたが、ご参加いただいたみなさま、大変お疲れ様でした。
セッション1「スマートフォン今昔物語」を担当した、KDDIウェブコミュニケーションズの神森です。

セッションでは、駆け足でスマートフォンの今までの流れをご紹介しました。
普段なにげなく使っているスマートフォンですが、Android端末に関しては、最新のOSと提供される端末では約半年ほどのずれがあります。細かなバージョンアップでより使いやすいOSになってきているものの、現在の国内に限っては、新しいOSを搭載した端末を手にする機会のずれは、常に意識しておくことで、実装時に起こる思わぬトラブルは多少なりとも回避できると思います。

また、画面サイズに至っては、今年は4.7?5インチサイズが主流となり、フルHD解像度の端末がどんどん増えてくるでしょう。それに伴い、コンテンツリッチなサイトがどんどん増えてくるとは思います。LTEにより、通信環境の高速化が進んできますが、まだしばらくは一世代前の3G環境との併用になるでしょう。LTEカバーエリアではLTEで、それ以外は3Gで接続するので、LTEの高速通信を見越した大きな画像などをやたらと貼り付けるのは、3G環境で接続した際には非常にストレスになります。また、携帯各事業者のLTE向け料金プランに関しては、どの事業者も7GBの通信制限を設けています。これは、一ヶ月の中で、7GBを超える通信を行うと、通信制限がかかってしまうというものです。大量のデータを受信すればするほど、通信量は増え、上限に達してしまう可能性は否定できません。
そうした理由から、画像の最適化やサイトの最適化はこれまで同様行っていくことが大切だと思います。

作る立場では非常に悩ましいスマートフォンサイトですが、スマートフォンを使うという立場になると、非常に楽しいガジェットです。是非、楽しいスマートフォンライフを送っていただければと思います。
ありがとうございました!

最後に、今回のセッションで参考にさせていただいたサイトなどをいくつかご紹介いたします。

  • スマートフォンデータベース
    2008年3月から2013年10月までのスマートフォンに関する情報が網羅されたサイトです。OS別や、端末の販売時期、色やディスプレイ、OSの種類、そして携帯事業者ごとに絞り込んでの検索ができます。現在最強のスマートフォンデータベースだと思います。
  • IDC Japan
    世界で有名なIT専門の調査会社。
  • Kanter Worldpanel
    世界主要各国のスマートフォンOSシェアのデータシートはこのサイトからダウンロードしました。以下のページにあります。
    http://www.kantarworldpanel.com/global/News/Android-set-to-spike-with-HTC-One-and-Samsung-Galaxy-S4-launches
  • MM総研
    国内の調査会社。調査データと予測データが非常に参考になります。
  • TCA
    国内の携帯電話の契約数などはここに集約されています。
  • 価格.com
    意外かもしれませんが、端末リリース時期のOSを調べるのは、ここをフル活用しました。事業者のサイトでは、古い端末を調べるのに一苦労なのですが、ここだと端末の型番さえわかれば、ほぼ一発で結果が出てきます。
CSS Nite実行委員会

3年ぶりのCSS Nite沖縄版を10月5日に開催

12 years 4ヶ月 ago

3年ぶりに沖縄で開催。CSS Nite in OKINAWA, Vol.5 with Microsoft(2013年10月5日、IT創造館)

2013年10月5日(土)、 IT創造館でCSS Nite in OKINAWA, Vol.5 with Microsoft「HTML5+CSS3 Web Camp 2013」を開催します。会津(福島)、土佐(高知)、札幌、広島、長崎に続けて開催するマイクロソフトとのコラボイベントで、沖縄での開催は3年ぶり。

次の5つのセッションを予定しています。

  • 羽田野 太巳(futomi/ニューフォリア)/キーノート:HTML5が拓く未来 ~HTML5との正しいつきあい方~
  • 益子貴寛(サイバーガーデン)/HTML5マークアップの基本
  • 鷹野 雅弘(スイッチ)/マルチデバイス対応とCSS3、レスポンシブWebデザイン
  • 中川 直樹(アンティ・ファクトリー)/調整中
  • 春日井 良隆(日本マイクロソフト) /HTML5とマイクロソフト

9月5日までは早期割引を設定しています。

CSS Nite実行委員会

CSS Nite in NAGASAKI, Vol.1 with Microsoftを9月28日に開催

12 years 4ヶ月 ago

長崎で初開催。CSS Nite in NAGASAKI, Vol.1 with Microsoft(2013年9月28日、メトロ総合 ビジネスカレッジで開催)

2013年9月28日(土)、メトロ総合 ビジネスカレッジ セミナールームでCSS Nite in NAGASAKI, Vol.1 with Microsoft「HTML5+CSS3 Web Camp 2013」を開催します。会津(福島)、土佐(高知)、札幌、広島に続けて開催するマイクロソフトとのコラボイベントで、長崎県でのCSS Niteは初開催。

次の5つのセッションを予定しています。

  • 羽田野 太巳(futomi/ニューフォリア)/キーノート:HTML5が拓く未来 ~HTML5との正しいつきあい方~
  • 益子貴寛(サイバーガーデン)/HTML5マークアップの基本
  • 鷹野 雅弘(スイッチ)/マルチデバイス対応とCSS3、レスポンシブWebデザイン
  • 中川 直樹(アンティ・ファクトリー)/調整中
  • 春日井 良隆(日本マイクロソフト) /HTML5とマイクロソフト

8月28日までは早期割引を設定しています。

CSS Nite実行委員会
確認済み
3 時間 14 分 ago
「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント。都内のほか、大阪、名古屋、青森、福岡、沖縄、秋田、札幌、福井、仙台、福島、広島、新潟、京都でも開催。 Movable Type Pro 4.23-ja
CSS Nite公式サイト フィード を購読

人気記事トップ10

人気記事ランキングをもっと見る

企画広告も役立つ情報バッチリ! Sponsored