WCAN 2013 Summer


今回もWCAN 2013 Summer 参加してきました。
毎度毎度ながらのメモ書きです。

 

■LT
・てしさん
採用前のエントリーシートの提出数を倍 ⇒ 事前に先輩社員の声を入れる
その中に採用までの流れを書いてもらった。

あ、これは自身のマーケティングメモw
本編は↓からですー。

■モバイルコンテンツデザイン
・アジャイル 開発期間短い
やってみないと分からない。とりあえずやって、直す。

・ユーザー中心 デザインの見直し多い
どういうシチュエーションで
どのタイミングで
限られた画面の中で
限られている条件をできるだけ煮詰める

ex)「Simeji」の場合
300万人までのユーザーの場合のサイクル
コア→改良→新機能→改良→新機能→新機能→・・・・・・・
★機能追加、コア機能のブラッシュアップ
開発者主導、実現性を最優先

500万人以上のユーザーが相手になった場合のサイクル
新機能→改良→新機能→改良→改良・・・・・・・・・
★信頼性の向上、安定化、デザイン的な質の向上
ユーザービリティ向上が最優先、デザイナー主導

 

——————————————————

開発者主導のスピードに対応するため、
・デザインパターン
質の維持・向上のために、
・デザインガイドライン

——————————————————

■1.デザインパターン
1 ドリルダウン トップメニューの一覧から詳細情報へ
★単純そうさ、目的の項目が探しやすい。タップするだけ。
★ランドスケープにすると、子コンテンツのボタンを出すことも、設計上可能。
×選択肢が多いと探すのに時間がかかる。コンテンツにたどり着くまでのステップ数が多い。   つまり、情報構造設計が命になる。
男性向け→フォーマル→夏用→・・・など階層が深いなら不向き。

2 エクスパンドリスト タップしたら下にメニューが出る
★目的のコンテンツが探しやすい。分類が明確なブログのコンテンツアーカイブ向け
※jQueryモバイルもこれ
×コンテンツを探すのに、一度開かないといけない

3 アクションバー トップに戻す常駐のバー(Facebookの、スクロールしたら出てくるバー)
★迷ったら戻れる。上に大切なものがまとまっている。慣れた操作。
※PCユーザーは古くから大切なものが上にある、という感覚もある。
×PCユーザーでない人には意味不明。
※若年層の人に、PCサイトを見ずにスマホサイトしか見ない人がかなりいる。
×バーのボタンを入れ替えると、その入れ替え時、ユーザーが気づかない。
※ユーザーは指のまわり(タップ)しか見てない。
※SNSのコメントいれたい場合とか、そのコメントいれたい場所の周辺に
「コメントする」(あるいはそのアイコン)を入れないと、気づかない。

4 ダッシュボード トップページの入り口
★選択肢がすぐ分かり、アイコン型になるのでおしゃれ、わくわくする。
×アイコンメニューになるので、多く並べられない。
◎商品画像のサムネイル、サービスの種類、アイコンなど、大きさを使い分ける。

5 タブ
★画面遷移しないようにつくると、表示がはやい(ような気分)
★製品名(親)⇒概要(タブ)
⇒仕様(タブ)
わかりやすい
×横並べにすることが多いので、3つくらいが限界。

■2.デザインガイドライン
1Andoroidガイドライン
アプリ、Webサイトの細かいピクセルの設定などが載っている。

2 アイコンのガイドラインを自分で作る
ひらがなの「た」を表示させて、「た」の大きさ・スケールにあわせ、
アイコンのバランス、ボリュームを整える。
※「た」にしているのは、まんべんなく広がりがあり、スクエアっぽいから。
「あ」はまるっこいイメージがある。

========おまけ========
■パーツ最適化
1.モバイルでは、タップ領域は7mm四方!
※デバイスに定規あててはかる!
もしもボタンを7mmとれない場合、小さくしてもよいが、余白をとって強調する。
きっちり詰めてしまわないこと。

2.文字
文字は2mmでも読める。
ここで読めるとは、歩いて読める状態。
※ただし、Androidでは読みづらい場合もある。

3.色
ちょっと色が違うだけで、意外なくらい印象が変わる。
モバイルは発色がすごく良い。
バックライト、端末など考慮する。

4.ユーザーの傾向
・SNSや検索結果から個別ページに飛ぶ。ナビゲーションに頼らない。
・言葉で説明しても読まない。
・漢字が読まれない。できるだけひらがなが、まだ読まれる。
・入力は嫌がる!

——————————————————

【ハイパフォーマンス Webフロントエンド】
・ネットワーク(通信)
・コンピュータ(計算)
・レンダリング(描画) ※今回はWebkitベースのお話

■概論
なぜパフォーマンスが必要か
⇒パフォーマンスの悪化=品質の悪化

1.ネットワーク ページロードの速度
HTML、CSS、JS、画像すべて届けられないといけない。

★Amazon 100ms高速化 ⇒ 売り上げ1%増加
★米Yahoo 400ms高速化 ⇒ トラフィック9%増加  など

2 ロード後 (計算と描画)
モバイルで見ると制限された環境下で描画・計算できるかというところに
注力・注目がされている。

■■■1 通信
DNS,TCP,HTTP……

改善方法
GAに「サイトの速度」がある。
その中に「速度の提案」というのがある。リダイレクトを…CSSを…と、いろいろ言われる。
この対策をしらみつぶしにやっていく。

そして、フロントエンドでできるのは・・・HTTPの最適化! リクエスト数を減らす。
画像数を減らす(CSSスプライド)
JS、CSSをまとめる
画像はそもそもサイズを減らす。
テキストのよけいな改行やスペースは取り去る。

■■■2 描画
Google Chrome Canaryというものがある。これを使うと、超開発中Chromeが使える。

合い言葉は「16ms」(1000s=1秒を、60で割った数値)
これは、ディスプレイの60FPSで割った数値のことで、レンダリングも逃れられない。
開発者ツールで計測し、30〜60FPSに押さえるのが望ましい。

ここが阻害されると、スクロールに悪影響が出る。

★大きな画像をWebで見ると見れても、モバイルでは要領が限界!
⇒ある意味サーバーサイドでも調整する。
★解像度…縦横が2倍になる=面積は4倍になる!

★クソ重いCSSも阻害の要因
処理の重いCSSを消してあげると、軽くなる〜。
影は画像にしたほうが軽い場合もある。

■■■GPU
アニメーションとペイント
右から左にアヒルが動く と GPUを消費する。
ちなみにCSSアニメーションはかるい。
※レイヤーを使って動かしているようなもののため。
それに比べてJSは画像を更新しているわけなので重い

■■■ Canalyのお話
JSの実行の検証
JSCPUProfilerという、全てが表示が終わるまでのタイムラインを見れるものがある。

===========================================

■Co-Creative時代の企画・ディレクション

1 私たちの未来
いろんな家電製品までもがネットに繋がる。
何が「Web」なのか、既に分からなくなってきている。

モノやコトも多様化、複雑化。

◎ピンチ? チャンス?

⇒NIKE
スポーツスニーカー売っている会社 から 「アスリートを育てる」会社へ
⇒リストバンド(FUEL)万歩計のようなもの を作っている。
⇒実際に作った会社は「R/GA」というイギリスの会社。
R/GAも9年毎にビジネスモデルを変えていくことを宣言している。

★これからのコミュニケーションのあり方…
認識を変えるのではなく、現実を変えるのが重要。
生活者に有益な体験を提供できるか、ユーザーに対して便益を与えるか。

AD ⇒ Experience Valuable 広告から価値のある体験へ
広告表現や自社メディアではなく、新たなサービスや付加価値の提供へのシフト

◎◎こういった価値を提供するには、どんどんクライアントの業務の中に
入り込まなければならない!!
ex)花王:個人情報を何年か前に捨てて、新しいオウンドメディアを立ち上げた。
次も立ち上げが7月中にある。

こういった「価値、体験」を提供していくとなると、相手の事業の中にどんどん入っていくことが重要!

提案から「共に考える時代へ」:そもそもクライアントから与えられる要件自体が?ということもある。

■ターゲットセグメント
やはりペルソナ。行動軸、時間軸などを考えることが重要。デモグラで切る時代は終わった!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.