Aggregator

2013年12月14日、ベルサール神田　イベントホール（2F）で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）のフォローアップとして、原 一浩さん（Greative）、矢野 りんさん、坂本 邦夫さん（フォルトゥナ）の『デザイントレンド： キャプチャで振り返る2013年 』セッションのスライドなどをシェアします。

長時間のイベントの一番最後ということで、お疲れのところ最後まで聴いていただきありがとうございました。
セッションを担当した、原、矢野、坂本からのフォローアップコメントは以下となります。

坂本邦夫

デザイントレンドに登壇した坂本です。長時間のセミナーでしたが、最後のセッションまでお付き合いいただいた皆様、本当にありがとうございました。

今年は良くも悪くもフラットデザインという印象でしたが、Webサイトの「構造」そのものの変化を感じた年でもありました。

1ページにつき1枚のHTMLファイルという形式が普通でしたが、ランディングページが登場したり、PC以外の様々なデバイスが普及して「アプリ」が一般的になった今となっては、もしかすると旧来の構造はかなり古いものになったのではないかと感じたりもしており、私自身も大きく意識が変わった年となりました。

今回のセッションを見ていただいてもわかる通り、誰が見てもわかるくらい、Webサイトの見た目は変わっていますが、その一方で発注者側が考えるWebサイトの目的が大きく変わってきたわけではないはずです。私自身、トレンドを気にしつつ、クライアントの利益のために最適なデザインを追求することを来年も続けていきたいと思います。

話は変わりますが、昨年開催されたShift6のフォローアップメールで、「今までおまけのような扱いであったファビコンに変わり、イメージを左右するスマートフォン用のホームアイコンが、デザインの主役に躍り出るかもしれないとも感じています」などと書いたのですが、Windows8に加えて、iOS7が一気に推し進めてしまいまして、ほんとにファビコンが作りやすくなったなぁと感じております。

また来年もどこかでお会いできればと思っています。
皆様、どうぞよい年をお迎え下さい。

原 一浩

今年のデザイントレンド、トレンド自体は昨年からの地続きな状態でしたが、アーカイブをするという意味では2013年はターニングポイントと言えるなあと感じました。

Webサイトを静的なキャプチャで保存することは、今後ますます難しくなりそうだという確信があります。ユーザの操作軸、時間軸、画面サイズの観点によって変化するタイプが増えてくる時代に、どうやって「記録」としてそれらを残していくかという課題に突き当たります。

きっと、これらの課題は archive.org のようなサイトにとっても大きな課題となっているのではと推測します。

デザイントレンドは7年目ですが、上場企業や自治体のキャプチャを取り始めて5年となります。次の時代のアーカイブに向けて試行錯誤と続けていこうと思います。

本年もありがとうございました。来年もよろしくお願いします。

矢野りん

セッションでお伝えし漏れた部分について言及しますと..

• マルチウィンドウに配慮したサイトは文字数が減り、文字サイズがどんどん大きくなってきている
• 文字より画像によるコミュニケーションに重きがおかれるようになった
• スタティックなサイトは運用よりもインパクト重視。続きはSNSで。

といった傾向が感じられた2013年でした。

ところで近年は、ネットを駆使した宣伝行為はSNSやリスティング広告、独自ドメインにひもづいたサイトをまんべんなく運用することで結果が出る可能性が見えてきます。チャネルの分散が１つのサイトの内容を薄くさせているわけですね。サイトデザインはますます、マーケティングストラテジーなしに成り立たなくなってきていると言えるでしょう。

では、将来のサイトデザインのトレンドは、マーケティング担当者が作るのか？というと、そうもいかないケースが多いと考えます。実装技術の知識があり、かつ、デザインセオリーを知っている「Webデザイナ」が、包括的なトレンドづくりの責任を負うことになると私は予想しています。
ツメツメ系レイアウトを眺めながら、Webデザイナーの責任範囲の広がりを予感した2013年でした。また来年、どんな立ち位置でトレンドを把握することができるのか、今からとても楽しみです。

CSS Nite Shift7［8］デザイントレンド： キャプチャで振り返る2013年 from CSS Nite on Vimeo.

2013年12月14日、ベルサール神田　イベントホール（2F）で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）のフォローアップとして、春日井 良隆さん（日本マイクロソフト）の『OSのフラットデザインを考えてみる 』セッションのスライドなどをシェアします。

この夏のiOS7の発表を機に”フラットデザイン”に注目が集まりました。この動きに呼応するかのようにGoogleがGoogle PlayのUIを刷新、AndroidのUIにも変化が見られ、Yahoo! Japanはトップページのアイコンを平面的なデザインに変更しました。

いまなぜフラットデザインなのか？

UXエバンジェリストとしてWindows 8のモダンUIをお伝えしてきた私は当然、この動きに興味を持ち、各社のガイドラインを始め、国内外のニュースやブログ、スライドをチェック、知り合いと飲んでみたりもしながら得られた自分なりの知見と、立場的に最も精通しているマイクロソフトのデザイン思想をまとめたものが、ご覧頂いたプレゼンテーションです。

ファイルには引用元のリンクや時間の都合上、ご紹介できなかったスライドも含まれています。よろしければ復習代わりにご覧ください。

フラットデザインがこのまま定着するのか、一過性のブームで終わってしまうのか？来年の動きに目が離せません。

春日井 良隆
日本マイクロソフト UXエバンジェリスト

CSS Nite Shift7［7］OSのフラットデザインを考えてみる from CSS Nite on Vimeo.

2013年12月14日、ベルサール神田　イベントホール（2F）で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）のフォローアップとして、森本 恭平さん（NTTレゾナント）の『スマホの検証が10倍はかどる！Remote TestKitの紹介 』セッションのスライドなどをシェアします。

森本さんから

Remote TestKitをご紹介させていただきました。森本です。

いくつかアンケートの中で、質問をいただきましたので、解答させていただきます。

セキュリティが気になるのですが？

Remote TestKitはレンタル終了後、端末は初期化されます。検証中にインストールされましたアプリや閲覧したサイトなどの情報につきましては全て削除されます。
また、弊社の端末は全てデータセンター内に保管されておりますので、弊社の社員が中を閲覧出来るなどもございません。安心してご利用ください。

アプリ開発では使えるのか？

少しアプリ開発の話になってしまいますが、Remote TestKitはUSB接続しているのと同じようにadbコマンドが端末に対して行えますので、実機があるのと同じように開発をすることが出来ます。
Eclipseなどでのビルドの際に対象を弊社の端末に設定していただければ、そのまま実機での検証が出来ます。

月額や定額払いは無いのか？

Remote TestKitでは様々なお支払い方法や料金プランがございます。詳しくはこちらのサイトを御覧ください。Remote TestKit　ご提供価格

Webサイトの制作でもアプリの制作でも、検証のフェーズは時間が無かったりすると思いますので、ネットワークさえあればいつでもご利用いただけます。Remote TestKitでは、無料の端末もご用意しておりますので、ぜひ試していただければと思います。

CSS Nite Shift7［6］ スマホの検証が10倍はかどる！Remote TestKitの紹介 from CSS Nite on Vimeo.

2013年12月14日、ベルサール神田　イベントホール（2F）で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）のフォローアップとして、たにぐち まことさん（エイチツーオー・スペース）、矢野 りんさん、松田 直樹さん（まぼろし）の『スマートデバイス 2013 → 2014 』セッションのスライドなどをシェアします。

ご参加の皆さん、2013年もおつかれさまでした。スマートフォンセッションからは、スマートデバイスと今とこれからについて、調査結果や予測などを交えながら紹介をしていきました。

矢野りん

矢野のミニセッションの補足をします。

スマートフォンのようにスキマ時間に活用されるコンテンツむけのUIデザインは「多くのユーザーを満足させる限りなく完全に近いデザイン」を目指すことは間違いです。
まずはターゲットユーザーのし好をヒントに短期間でつくった「モック」を公開して、ユーザーの反応をヒアリングし、仮説を立ててどんどん改変しながらまたユーザーの反応を調査するという「イテレーションサイクル」をいかにスムーズにまわし続けるか。が、勝負です。あのセッションもそういうプロセスを前提にして初めて価値がでる話です。
とはいえ、受託のプロジェクトではイテレーションより手離れが重要なのは間違いありません。手離れと改良の両立は、改良しやすいコンテンツを納品することで可能です。
改良しやすさに目をむけると、CSSに対するSassやJSに対するAngularJSのような他人が書いたソースに悩まされないフレームワークを知っておく重要性もわかってきます（コードのセッションで触れられていましたね）。デザインのみならず、Shift7で網羅されていたさまざまな技術トレンドは、じつは１つの大きな流れを支えていることがわかります。
育てる余地のある設計。レスポンシブのような実装作法にこだわらず、この設計思想とどう向き合うかが2014年で最も重要になることは間違いありません。

松田直樹

スマホ目線でのRWDの今年、これからの進化について、フロント実装面からお話をいたしました。ただ「技術をもっと磨こう」ということではありません。

スマホを始めとした様々なデバイスに対して、皆さんが思い描かれるベストなWebサイトを表現する手法がどんどん増えているということなんですね。設計がデバイスのスペックに足を引っ張られることがなくなり、より設計の重要性が増す、という未来です。この点お伝えできていればうれしい限りです。皆様ありがとうございました。

アンケートでいただいたご質問への回答

RWDはサイトが重くなるってよく聞くけど、実際の所パフォーマンスはどうなんでしょうね？

RWDだからといってサイトのパフォーマンスがほぼ落ちることはありません。もし重くなるようでしたら、スマホ専用サイトを作ったとしても同じ結果が待っています。初期の設計次第でしょう。具体的には、画像は適切なサイズで使用する、読み込むファイル数を抑えてHTTPリクエストを減らす、過度なJSによる演出を省く、などで大幅に改善できることでしょう。（松田）

たにぐちまこと

2014年以降は、スマホ・タブレットはもちろんですが、ウェラブルデバイスなどの新しいデバイスもますます登場してくると思います。その時、私たちはどんなWebを提供することができるのか。一緒に考えていきましょう！

CSS Nite Shift7［5］スマートデバイス 2013 → 2014／たにぐち まこと from CSS Nite on Vimeo.

2013年12月14日、ベルサール神田　イベントホール（2F）で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）のフォローアップとして、鷹野 雅弘さん（スイッチ）、石嶋 未来さん（ザ・マーズナレッジ）の『ツールと制作環境2013-2014 』セッションのスライドなどをシェアします。

イシジマのコメント

掛け合いの部分で少し聞きづらくしてしまったトコロがあり、すいませんでした。次回はもっと鷹野さんと息を合わせられるように頑張ります。まずは拳法からですかね。Slicyのデモで間違ってしまった命名ルールですが、「hoge.png@2x」と後ろに付けるのが正しいものでした。

各種ツールのURLを教えて！

プラグインを便利に管理できるPackage Control
Package Control - the Sublime Text package manager

保存と同時にブラウザを更新してくれる
BrowserRefresh-Sublime

簡単にローカルサーバーを起動できる
SublimeServer

lorempixel(サンプル画像サービス)を保管してくれる
SublimeLoremPixel

画面を分割してくれるアプリ ※Macのみ
Divvy

書き出しがラクになる
Slicy

良く使うパーツを登録して再利用
Pixel Dropr

PSDのままインタラクションレビューができる
Composite

便利なテンプレートたくさん
DevRocket

PhotoshopからSVG書き出し
Zeick

便利なツールを覚える時間の取り方

プロジェクトの序盤はゆとりがあるので、そのときのワイヤーフレーム作りや融通が聞きそうな小規模案件などで導入してみたりしています。またブログを書くようにしていくと良く。調べて理解したらその解説記事を書く。というのは覚えやすいですね。

新しいソフトを使うと効率良くなりますか？

制作を取り巻く環境が変わってきているので、新しいツールはやはりそれに即しています。今まで手間がかかっていたものが1stepで出来るようになるという点では効率化に繋ります。一長一短なので自分が面倒と感じている作業をツールによってラクできないかとふと思ったときに探してみると良いかもしれません。

鷹野のコメント

今回は、イシジマさんと組んでみましたが、いかがでしたでしょうか？　アンケートや懇親会でいただいたコメントなどに返答しますね。

アドビに対して辛辣すぎませんか？「ウソです！」とか...

たとえば、Illustrator CCからFireworks CS6には、パスのコピー&ペーストができません。従来も、Illustratorのバージョンが同じか下でないとできなかったのですが、Fireworks CS6を使い続ける場合、せめてIllustrator CCからパスのコピー&ペーストができないと仕事になりません。CCが正式リリースされて半年たちますが、こんなことすらケアされていないんです...　少なくてもFireworks CS6がメンテナンスされるという期待は捨てた方がよいでしょう。

で、ポストFireworksは、Photoshopってことなのですか？

あくまで個人的は見解ですが、レイアウトツールはドローベースに限ると考えています。Illustrator、Photoshop、Fireworksそれぞれ、本を書くくらいに使い込んでいますが、WebのレイアウトにはFireworksが最適。でも、これがなくなるなら、Illustratorかな?と試行錯誤しています。でも、かなり悩ましい（これとかこれ）。Photoshopは写真をいじるツールで、レイアウトを行うツールではないと私は考えています。
でも、今回、ご紹介したPhotoshop周辺のソリューションは魅力的です。で、今後、SVGが増えていくと、やっぱりIllustratorかな、と思っていたりします。

こちらもご覧ください

• Shift7（Webデザイン行く年来る年）「ツールと制作環境」2013-2014 - NAVER まとめ

CSS Nite Shift7［4］ ツールと制作環境2013-2014 from CSS Nite on Vimeo.

2013年12月14日、ベルサール神田　イベントホール（2F）で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）のフォローアップとして、植木 真（インフォアクシア）さん、山本 和泉（#fc0）さん、中根 雅文（慶應義塾大学）さんの『AccSellポッドキャスト公開録音「izuizuのアクセシビリティ（生）100本ノック！」』セッションのスライドなどをシェアします。

「アクセシビリティ」のセッションに登壇した三人それぞれから、メッセージをお届けします。

植木 真

100本ノックではコーチ役の植木です。昨年は、アクセシビリティは「あたりまえ」というメッセージが中心でした。そして、今年はカルーセルを題材にやや実装寄りの内容でお届けした公開録音でしたが、いかがでしたか？

そもそも、カルーセルには賛否両論がありますし、ユーザビリティテストの結果の多くはその効果に疑問符を投げかけています。しかし、使わざるをえないケースというのも、現実的にはあるでしょう。アンケートでも「ファッション業界のサイトでは、カルーセルが不可欠です」というようなコメントをいただきました。

カルーセルといっても、さまざまなタイプ/パターンがありますよね。ですから、もしカルーセルを採用する際には、いろいろなユーザーの利用環境を想定して、一つ一つの機能をどのように実装するのがよいかを検討することが重要です。公開録音の中では、そのヒントをいくつか提示させていただきました。

もし今後カルーセルを実装する機会があれば、是非より多くのユーザーが利用できるように工夫してみてください。あ、AccSellにお便りいただければ、皆さんの作ったカルーセルを100本ノックで取り上げさせていただきます。もしカルーセル以外でも、こういう場合にアクセシビリティを確保するにはどうしたらいいんだろう？と思うコンテンツがあれば、ぜひお気軽に！　皆さんからのネタをizuizuが首を長くして待っているはずです。

さて、最後にお話したように、2020年の東京オリンピック＆パラリンピックの開催が決まりました。そして、障害者差別解消法という法律も2016年4月からの施行が決まりました。より多くの人が、より多くの場面で、より多くの利用環境からアクセスできるかどうか、日本のウェブの品質が問われるようになる気がします。アクセシビリティがもっと「あたりまえ」になるように、来年も皆さんと一緒に考えていけたらと思っています。

中根 雅文

今回の企画の過程から、なぜかいきなり監督にされてしまった中根です。アクセシビリティのセッション、お楽しみいただけたでしょうか。

アクセシビリティというと、障碍者のためのものという印象を持っておられる方が多いと思いますし、実際、一番大きな恩恵を受けるのも障碍者だと思います。が、本来は障碍の有無だけでなく、様々な環境で様々なブラウザを使うあらゆる人にとって正しく情報を伝えるための考え方です。

30分という限られた時間のセッションでは、既にこの分野に取り組んでおられる方にとっては物足らない、そしてあまりなじみのない方には理解しづらい内容になってしまったのではないかと思います。このセッションを、アクセシビリティについて改めて考える、あるいは新たに興味を持つきっかけにしていただけたのであれば嬉しいのですが。

興味を持っていただけた方は、ぜひAccSellのサイトを覗いてみてください。

さて、アンケートの中で、動的なページやモーダル・ウィンドウに関する注意点などを知りたいというものがありました。ケース・バイ・ケースなので一概にこうである、ということは言えないのですが、簡単に一般論を記しておきますので参考にしてください。

ご質問：Javascriptで動的にDOMを生成するようなものやGmailのようなWebアプリケーションってどうなんですか？モーダルウィンドウなども。使う際の注意点なども知りたいです。

セッションの中でもお話ししましたが、スクリーンリーダーで読み上げる場合、基本的にHTMLのソースやDOMツリーの中での出現順序に従って読み上げられます。ですから、例えばあるボタンをクリックした後に何らかの動的な変化が発生する場合、その変化が発生する場所とボタンの場所のDOMツリー的な位置関係が重要になってきます。もしこれらが離れすぎていると、変化したことにユーザーが気づかない可能性があります。では近ければ良いかというと、おそらくそれだけでは不十分で、多くの場合はクリックしたボタンの直後でないと気づかれない可能性が高いでしょう。
モーダル・ウィンドウの場合も、同様に気づかれない可能性について考える必要があります。この場合はさらに深刻で、気づかれなければモーダル・ウィンドウ内でアクションを起こすこともできないわけで、他のことが一切できなくなってしまうことになります。
こういった動的なコンテンツをよりアクセシブルにするための仕組みとして、WAI-ARIAという仕様が検討されていて、これを実装するスクリーンリーダーも増えてきています。今後、こういったスクリーンリーダーが増えれば、動的でアクセシブルなコンテンツを今よりも容易に実現できるようになることが期待できます。
こういった話題についても、折に触れて最新動向をAccSellのサイト上やポッドキャストの中でお届けしていきますので、ぜひ活用してください。

山本 和泉

100本ノックを受けたizuizuこと山本和泉です。去年に引き続き、公開録音でしたがいかがでしょうか？

アンケートを拝見して「カルーセルを採用しているサイトをよく見かけるから使ってもOKなのかと思っていた」「疑問に思ってなかったけど、やっぱりそうだったのか」というようなコメントをいくつかいただきました。ありがとうございます。

私もカルーセルに限らず、また、アクセシビリティに限らず「最近よく見かけるから使うほうがいいのかな」と思うことがあります。そう思ったときって、意識が制作側になっていて「ユーザー側になっていない」ときがほとんどで、いい結果をなかなか出せない場合も少なくありません。

なにかと新しい技術やトレンドに目がいってしまいがちですが、そのときに「伝えたい情報を視覚だけに頼っていないか」などを一呼吸おいて考えなおさないとだな思います。今回は私自身も改めて確認させられたテーマでした。

みなさんも中根監督と植木コーチの指導を一緒に受けて見ませんか？　セッション中にもお伝えしましたが「たとえばこれはアクセシビリティどうなの？」というテーマをお待ちしています！

ポッドキャストとイベントのお知らせ

当日の録音とそれを振り返るポッドキャストを公開しました。無料でお楽しみいただけますので、ぜひ聴いてみてください。

• AccSellポッドキャスト第34回「izuizuのアクセシビリティー (生) 100本ノック ばっちこーい!」@ CSS Nite Shift7
• バックナンバー一覧｜AccSellポッドキャスト

そして、公開録音の最後に告知させていただいたイベント「AccSell Meetup #004」のFacebookページを用意しました。正式なお申し込み開始時には、こちらでアナウンスさせていただきますので、ご興味のある方はまず「参加予定」で仮エントリーをお願いします！　iOSのVoiceOverを使ったコンテンツのチェック方法やアクセシブルなコンテンツ制作の基本などを分かりやすくレクチャーします。

• 「AccSell Meetup #004」のFacebookページ

CSS Nite Shift7［3］ AccSellポッドキャスト公開録音 from CSS Nite on Vimeo.

2013年12月14日、ベルサール神田　イベントホール（2F）で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）のフォローアップとして、益子 貴寛さん（サイバーガーデン）、小山田 晃浩さん（ピクセルグリッド）の『新しいマークアップ環境にキャッチアップ！』セッションのスライドなどをシェアします。

益子から

コンビ3年目、ピクセルグリッドの小山田さんと一緒に、マークアップセッションを担当した益子です。

ここ一年の話題を、だいぶムダなく伝えられた感触です。エンジニアではない人も、今回のセッションで聞いた言葉をなんとなくおぼえておいて（「なんとなく」でも言葉や考え方を知っていることが、とても大切ですね）、仕事に生かしていただけたらうれしいです。

東証上場企業のDOCTYPEの調査結果は、今度まとめて、どこかで公開しようかと考えています。時間の関係で含めなかった「考察」も、どこかで発表できればと（disりまくりのマズイ話もありそうなので、一部ツイート禁止とかで）。ネタのオンパレードというか、かなりおもしろい話ができそうです。

お世辞やお愛想、また関係者のひいき目なしに、ひとりの聞き手として、すべてのセッションとも得ることが山盛りでした。マジメななかに笑いもたくさんで、楽しかったです。単純に「知識のデリバリー」だけではなく、長丁場だけど参加してよかったと思ってもらえるような「楽しい時間づくり」に、出演者とスタッフはいつも心を尽くしていて、それがきちんと果たせたイベントになったと思うのです。

来年も、みなさんとお会いできたら幸いです。

小山田から

益子さんとともにマークアップセッションを担当した小山田です。ご紹介した内容、いかがでしたでしょうか。

確実に、方法やツールが変わってきていると感じている方も多いかと思います。特に、Webページはパーツの集まり、という考え方は今後も多くのWebサイトで取り入れられていくでしょう。そのベースとなるBEMの考え方をまずは意識してみるといいでしょう。

また、Sassについては、勉強し始めたというかたはぜひCSS Nite LP, Disk 32: Sassにご参加いただくといいでしょう。また、すでに使われているという方も、今後Sassのバージョンも順調に上がり、Sass 3.3が正式リリースされる予定です。より便利になる環境を手に入れ、周りの人のレベルにいつでも合わせられるようにしておくといいでしょう。

さて、アンケートの中でいくつかご質問いただいた内容をここで回答とともに共有します。

Q：ChromeがBlinkを採用したら、ベンダープリフィックスはどうなりますか？

Chrome上でも、しばらくは-webkit-が利用され続けます。これは、Chrome(Blink)はあくまでもWebKitの枝分かれであり、ベースはWebKitだからです。一方で、少し先を見ると、Blinkでは、ベンダープリフィックスは極力利用せず、設定画面で有効/無効を変更する仕組みになるようです。つまり、今あるWebサイトを、Blink用に作り替える必要はありませんのでご安心ください。

Q：クラス名の文字数が長いと感じたのですが、管理しやすいのでしょうか？

名前は常に衝突するという不安がついてまわります。BEMではそれをルールで解決することができます。残念ながら、そのクラス名は長くなってしまいますが、衝突する心配はなくなります。たとえば、class="title"よりは、 class="contenttitle"とclass="producttitle"のほうが、衝突する危険は少ない、というわけです。

Q：SMACSS、BEMも取り入れつつ、なかなか設計の勘どころがむずかしく、後悔することが多々あります。うまいトレーニング（思考方法）はないでしょうか？

ワイヤーフレームやデザインの段階である程度設計されていることが重要になります。デザイン上の表現のブレがあった場合、それは「デザイナーのミス」なのか、それとも「意味があって違うのか」など、実装者はデザイナーと綿密に問題点を共有するといいでしょう。「意味があって違う」場合には、BEMでいう「Modifier」で調整するとうまく収まるはずです。

あとは、数をこなして経験をしましょう。小さいWebサイトでも、1000ページあると仮定して、パーツを分解し、最初からページをつくるのではなく、まずはスタイルガイドをつくり、そのあと、スタイルガイドからパーツを抜き出して実際のページを作成するという手順をとるといいでしょう。

Q：ベンダープリフィックスの「-webkit-」はもう使えませんか？　いままで使っていたハックはどうなりますか？

一つ目のご質問はすでに上記と同じ内容ですね。CSSハックについては、あくまでもブラウザーの不具合を利用した、あまりよくないバッドノウハウですので、できるだけ使わず、Modernizrによるフィーチャーディテクションを活用するといいでしょう。

CSS Nite Shift7［2］ 新しいマークアップ環境にキャッチアップ！ from CSS Nite on Vimeo.

2013年12月14日、ベルサール神田　イベントホール（2F）で開催したCSS Nite LP, Disk 31: Webデザイン行く年来る年（Shift7）のフォローアップとして、長谷川 恭久の『基調講演：スクリーンの先、私たちの仕事の先 』セッションのスライドなどをシェアします。

ダウンロード

• スライド（PDF、51ページ、5.3MB）
• 音声

昨年と同様、Web が大きく変わった 2013 年。変化の波は年々増すばかりで、大変と思うこともあると思います。アプリ、サービス、イーコマース、キャンペーンなど、Web とひとことで言っても様々な関わりがありますし、仕事の仕方やデザインアプローチも千差万別です。利用者が多様化しただけでなく、わたしたち Web プロフェッショナルも多様化しています。Web デザイナーといっても、もう同じように働く Web デザイナーはいないのではないでしょうか。

こうしたなか、自分の仕事に合う制作のノウハウを学ぶのも一苦労です。数年前であれば、セミナーに参加して、書籍を読んで勉強すればよかったことも、そのまま適応は難しいだけでなく、仕事環境やクライアントとの関係を変えなければ、改善しないことも多々あります。もうひとりの持ち場を守って働くというやり方では、フリーランスですら難しいわけです。

難しくなった大きな理由は、「Webが変わった」からといえますが、言い換えると「Webは人に近づいた」になると思います。近い存在だからこそ、多様化になったのでしょうし、ひとりで作れなくなったのでしょう。ひとりの作り手として、これからどのように設計や、ビジネスの成長に貢献すればいいのでしょうか。それは、作る人間にしか分からない視点やアプローチを積極的に出していくことだと思います。

基調講演では、「スクリーンの外」をテーマに話しました。これは、通常作り手の評価の対象になる「スクリーン上の設計」という枠組みから離れてデザインをみるというメッセージがあると同時に、自分たちの仕事の枠組みの外に出て考えてみようというメッセージが含まれていました。観察は「外」をみるひとつの手法ですし、他にもいくつかあります。今まで気付かなかった意外な側面が、作る仕事の役に立つはずです。

CSS Nite Shift7［1］ 基調講演： スクリーンの先、私たちの仕事の先 from CSS Nite on Vimeo.

2013年、CSS Niteでは76回の関連イベントを通して278セッションが行われました。 のべ参加人数は7,011人。

ちょっと時間がたってしまいましたが、2013年のベスト10セッション＋αを選んでみました。

「全部はチェックしきれないので、これは！と思うものをチョイスして欲しい」という声をよくいただくため、2010年からベストセッションを選定して発表しています。

つまり、ぜひ、内容をチェックいただきたいという意図で選出しているため、非公開のセッションは「選外」としています。

• CSS Niteベスト・セッション2013
• これまでの開催情報（2013年）
• CSS Niteベストセッション2010-2013

選出したもの以外にも、素晴らしいセッションがたくさんありました。登壇された方、ご協力いただいた方々、そしてご参加くださった方、改めてありがとうございました。

再演等のオファー

CSS Niteのセッションの再演、および、講演者へのオファーは自由に行ってください。ご連絡いただければ告知協力など行いますが、許可を取っていただく、等の手順は不要です。

Web担当者Forumの連載コーナー、「海外&国内SEO情報ウォッチ」を更新。今週は、『スマホサイトのコンバージョン率を上げる7つの秘訣（実証済み）』、『SEOのトラブルはこれで解決！ グーグルがトラブルシューティングページを公開』、『ファセットナビゲーション」でやってはいけない5項目』など10記事+4記事。

- スマホサイトのコンバージョン率を上げる7つの秘訣（実証済み）【海外＆国内SEO情報ウォッチ】 -

Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM

子どもが立ち上げたサイト全てにWeb解析を導入しています。

ブラウザでWeb解析レポートを見るのは面倒なので、解析用アプリもいくつかiPhoneにインストールしてあげました。

情報流通ルートがインターネットの登場により拡大しました。メルマガやニュースリリース、ブログなど企業が直接ステークホルダーに届けるネット以前のメディアに加えて、Facebookをはじめとするソーシャルメディア、オンラインの専門メディアやブログなどから編集された情報がさらに拡散するなど流通ルートも広がっています。従来のマスメディアに依存しない情報発信や流通について正しく理解する必要があります。

増加する専門分野に特化したポータルサイトでは、広告で運営費用を稼ぐ広告モデルと、企業ユーザーの利用料によるサービスモデルに分けられます。専門情報のポータルは、最新情報を企業が発信することで、その関連情報を必要とする人が集まりやすく、ユーザーにとっては情報源となります。

代表的なポータルサイトの１つである「Yahoo!ファイナンス」で例えると、年間契約の利用料を支払うことで、「Yahoo!ファイナンス」の企業情報のコーナーを企業側の担当者によって直接更新することが可能となります。他にもITとビジネスを専門に扱うオンラインメディアの「ZDNet」の「ホワイトペーパー」では、企業担当者自らが決めた導入事例や製品情報など情報発信できるコーナーを持つサイトも増えています。また私たちニューズ・ツー・ユーが運営する有料会員制のネットPR支援サービス「News2uリリース」では、ニュースリリース配信することでニュースリリースポータル「News2u.net」だけでなく、さらにその先にあるポータルや専門サイトなどに情報が提供、掲載されます。

こうしたオンラインメディアの多くが、互いのコンテンツを紹介しあう仕組みになっています。ニュースサイトAでは、Aのオリジナルコンテンツ以外に、BやCの専門サイトの見出しや本文の紹介をしたり、コラムや寄稿をはじめコンテンツを買って掲載したりすることもあります。同様にニュースサイトやポータルサイトでは、著名ブログを集めてコンテンツとして提供しているケースも出てきています。どのニュースサイトが、どのポータルサイトに情報を提供しているかなど関係性を意識した情報発信が重要です。

このような現状から誰が自社の情報を閲覧し、編集されているかを常にチェックする必要があります。例えばブログで自社について、自社サービスや製品がどのように話題になっているかを知るなら各検索エンジンのブログを対象とした「ブログ検索」でチェックできます。また、「Googleアラート」に自社関連のキーワードを登録しておけば、タイミングを逃さず常にチェックすることが可能になります。