Webデザイン行く年来る年（Shift6）

基調講演：未来をプロトタイプしよう

「なぜ作るか？なぜ使うか？」

これに解答できないのであれば作る価値なし（とまでは言ってなかったけど）。
（感想：激しく共感）

全体のプロセスから見直す

ガントチャートなどスケジュール・タスク管理をしているかもしれない。
でも、マークアップデザインに関しては「デザイン/ビジュアル」と一括りになってはいないか？

それは成果物だけが評価の対象であるため。
たとえば食事でたとえれば、できあがった料理が評価の対象となるため。
その料理がどんな材料で、どこの産地で、誰の手で、を知ることで、料理のクオリティーを高めることができる。

（感想：確かに。ただ、安く・早い・（そこそこ）うまいが求められてしまうと水の泡。デザイナーとしてはクオリティをあげたいのだが、クライアントは安さを重視しがち。この辺をどう説得できるかが必要になっていきそう）

成果物の評価を求める=結果を求めてしまう。
「モック見せて」のワケであり、「デザイン/ビジュアル」と一括りしたクライアント手動のワナである。
ここをひっくり返すトリガーが必要。
それがプロトタイピング。

プロトタイピング

様々な環境（利用環境が大幅に異なる、新しい分野、スクリーンが小さい、指を使ったインタラクションなど）があるが、「プロトタイピング」を実施し、プロトタイプした内容を見て・触れることができるようにし、デザイン/ビジュアルプロセス全体をみることができるようにする。

プロセスの理解

カンプなしだとクライアントはほんとに理解してくれないのか？
共創と改善で「正しい」を共有して繰り返すことでプロセスを理解できないものか？
（感想：共有したはずなのに「正しい」が知らぬ間に変化してしまうこともしばしば・・・）

未来は不透明であり失敗は大前提。これは前提条件。

マークアップ：2013年に向けて押さえておきたいマークアップ・トレンド20

講演内容の大半はすでに導入済みだったので、まだ対応していないところや新たに得た情報を備忘録としてピックアップ。

技術

Web Socket

プリプロセッサー

CSS

sass.（サイトの女性のイラスト、彼女の名はサッシーガール）、less、stylus

javascript

coffeescript、typescript、livescript

ビルド

GUI

codekit、livereload、compass.app、scout

CUI(character/command user interface)

grunt、yeonan、brunch

GUIより進化が早い

スペシャル：CodeGrid総集編2012「2012年の必読記事＆2013年の注目記事」

フロントエンドに関わる人々のガイドを月額840円（4回配信）で購読可能、とのこと。
CodeGrid

先取り、Shadow DOM

• まだ実験として部分的にChromeに実装
• 雑誌の特集などではまずやらない
• 今、主流の技術も始めはこんな感じ

Shadow DOMとは？

DOMをカプセル化する。

カプセル化とは？

内部へのアクセスはさせない。内部の構造も隠されている。だけどある。ブラウザ上で表示される。

見た目や動きはつけられないの？

コンポーネント制作者が用意したインターフェイスで制御。

何が良いの？

CSS,、JS同士の衝突を防ぐ

なぜ中身を隠すの？

複雑なHTML構造をすべて把握するのではなく必要のあるDOMをピックアップする。
コンポーネントが担う機能、責任範囲の明確化。
想定外の操作を防ぐテストだって書きやすくなるはず。

Web Components と　Polyfill で体験できる。
ECMAScript6（Harmony）/ WebGL /CSS Custom Filters

ピクセルグリッドの仕事術

javascriptの「金額」「工数」見積もり方

見積もりは作る人も必要なもの。

見積もりの問題

• 成果物ベースの見積もり（ページいくら、トップページいくら）は無理（javascriptと言っても小さなスクリプトからWebアプリケーションまで多岐であり、仕様変更や予想外のバグが発生するため）。
• 原価ベースの見積もり（人日）はできるが問題あり（生産性が低い方が儲かる。）。

そこで仮想的な単位で見積もる（アジャイル開発の見積もり手法）。

単位はなんでもOK。まずは基準となる単位を決める。
たとえば、単位をポイントとし、モーダルダイアログの実装を1ポイントとしたら、カレンダーは3ポイントというように、相対的に見積もる（人間は相対的に見積もるのが得意らしい）。
この手法のメリットは、実装スキルの差による価格差はなく、効率よく仕事すると稼げる。そして原価ベースの問題を解決できる。

というわけで、ポイントから「金額」「工数」を算出できる。
金額 = ポイント x 単価
工数 = ポイント x 制作時間

（感想：これは個人ベース（対チーム）、チームベース（対プロジェクト）、プロジェクトベース（対クライアント）、と見積もりを細分化したらいいかも！と思った。）
（感想：確かにjavascriptに限らず、他にもほかでも応用できそうです。）

jQuery Conference2012レポート

• エンジニアの視点からレポート
• jQueryコミュニティの関心ごとがわかる

-具体的な内容は購読する必要があるので、割愛-

アクセシビリティ

数年前に植木さんの講演を聞いて依頼、アクセシビリティ=植木さんとなっている。アクセシビリティという響きでちょっと構えてしまいそうなのを、ものすごく優しく砕いてくれて、ものすごく分かりやすい。そして興味を持続できるように講演内容を工夫してくれていて、デザイントレンドと並んでずっと続いてほしい講演。

今回はPodcastの公開録音という形式。さらには全盲の視覚障碍者の方の生の声が聞けて有意義でした。

今回のセミナーでの響きワードは2つ。

• アクセシビリティは「あたりまえ」のことになってほしい。
• 伝えたい意思は正しい手段で伝える。

アクセシビリティ体操がYouTubeにアップされるのを楽しみにしています。

ツールと制作環境、電子書籍2012-2013

Adobe CS6のチップス。cloud使ってるのに全然活用できてないことを痛感・・・。
もっと積極的に使い倒すくらいの勢いをつけないとやばい、と危機感さえ感じた。

電子書籍の拡張子は「.mobi（amazon/kindle）」「.epub（iBooks）」があるが、.epubを展開すると「html + css」で制作されているのが分かる。

ウェブサイトも電子雑誌も、多種多様な利用者（読者）のニーズにどうやってこたていくのか、真剣に考えてく時代。
（感想：激しく同感！！もはやサービス全般に言える、と同時にその逆も然り。）

ソーシャルメディア：2012年のトピック振り返りと、2013年に向けた活用の押さえどこ

2012年振り返り： ソーシャル疲れ

自社メディアのソーシャル化やその他のソーシャルメディア対応で、キャッチアップの増加によるソーシャル疲れ。

• mixiやfacebook プロモートポストのように頻繁な仕様追加・変更・・・
• interest 女性をターゲットにしたが・・・
• LINE 急成長 台湾では二人に一人 / 首相官邸も導入

2013年予測： Facdbookの波はマジョリティー、自治体へも

2013年予測大企業のほとんどは、既にFacebookページをもち、何かしら取り組んでいる。
これから取り組みは、Facdbookの波はレイトマジョリティー（中小企業や地方など）に広がり続け、ついには自治体へも

活用ポイント

数字作りはほんとにいいものか？本当の目的は？話題作りだけでなく、それがマーケティング全体にどう貢献しているか？をしっかり考える必要が出てきている。

企業より個人 社員・個人が牽引して成功しているケースが多い。

注目サービスは、LINEのline@、twitterのcards、pinterestと楽天、google+を使ったSERPs（Search Engine Results Page：検索エンジン検索結果）

スマートフォン：スマホ・タブレット・ミニタブ時代の Webサイト制作術

2012年を一言で →「脱ビットマップ」「device-pixel-ratio」「速」。

2012年特徴

• ジェスチャーを前提としたデザイン
• ナビやバナーが大きい
• 文字以外のエリア全体をクリッカブル

モバイルファーストならぬタッチデバイスファースト

スペシャル：WebのスキルをWindows 8で活かそう

• 常時接続
• ファイルからソーシャルへ
• クラウドストレージ
• デスクトップからノートへ
• マウスキーボードからタッチへ

画面はタッチするものが当たり前。タッチできないと故障扱いになるのも時間の問題。

windowsストア（感想：気になる。作品公開の敷居がさらに下がったとのこと）。

デザイントレンド：Webデザイントレンド年末スペシャル!!今年のWebサイトの表現を多角的に振り返る60min.

トレンドとは最先端ではない。時代に最適化されつつある現象である。

メッセージ性から実用性へ

メッセージのあるイメージよりユーザーの利便性を優先

同じイメージでも情報のあるイメージ

無駄なテクスチャを省く

レイアウトの試行錯誤

演出まわりの表現

8

ベベルとフラット

進化したイアイ → ざく切り → 指向性の切り込み → フキだしとの融合

円と円窓

ブランドカラー、ツートンで統一

お店のイメージを活かしたデザイン（ファミリーマート、松屋）

ロゴの色とナビをあわせる

リボンのバリエーションまとめ、視点調整

高さを意識したデザイン（雑誌のような）

機能まわりの表現

タイムライン

twitter以降のサイドナビ

スライド

微調整

「アクセシビリティなインフォグラフィック」（感想：このフレーズ、深い！）

2013年予測

• ユースケースによっては、メッセージ性から実用性ではなく、逆に字離れ！重視
• 意味のない表現はもう無理
• プライオリティとかがっちりデザインに反映
• 視線の誘導が矢印だけでなく、もっと多彩デザイン
• 単色

レスポンシブWebデザイン

2012年のWeb業界バズワード「レスポンシブWebデザイン」略してRWD（Responsive Web Design）。業種業界問わず流行った。その背景には大きく2つの理由があると推測。

1. googleの検索結果に影響することを公式に発表（2012.6.12）。
2. media queryが勧告になった。

デバイスごとのHTML vs. RWD

二者択一ではなく、合わせ技も可能

Windows 8 と RWD

最大公約数的なデザインの必要性と、そのためのRWDという位置づけになりそう