CSS Nite LP46「ビジュアル・ドリブンのデザイン」『クリエイティブ・ディレクション　〜リアルダメ出しから発掘するデザインのヒント〜』

CSS Nite @cssnite

李 優未さんで「クリエイティブ・ディレクション 〜リアルダメ出しから発掘するデザインのヒント〜」スタート！ #cssnite

crema（黒野明子） @crema

#cssnite 札幌のホームページ制作・デザイン Regraphy（リーグラフィ） regraphy.com

いまいりさこ @i_mairy

死んだデザインと生きたデザイン #cssnite

CSS Nite @cssnite

李「スーパーの店頭で商品を選ぶ時にどのくらい時間をかけているか。おそらく2、3秒くらいしか時間をかけていないはず。ほとんど、ディスプレイとパッケージで決めている。」 #cssnite

CSS Nite @cssnite

李「死んだデザインといいたデザインの差 ・活発な感じがするか ・メインの情報が30秒以内で探せるか ・リピーターになりやすいか ・インパクトがあるか ・明確なコンテンツになっているか」 #cssnite

CSS Nite @cssnite

李「結果につながるWebデザインの法則 １．ビジュアルデザインは30秒以内に判断 ２．目的（ゴール）が明確になっているか ３．しつこいツメで完成度UP」 #cssnite

sho otani @ozu_syo

"しつこくしないといいデザインはできないんですよ。男はしつこいともてないですけどね"。けだし名言 #cssnite

CSS Nite @cssnite

李「リアルダメ出しのポイント １．パッと見の印象を直感で判断する ２．ファーストビューからレイアウトのバランス、写真、配色、タイポグラフィなどのプロポーションをチェック ３．完成度に向けて１ピクセルまでチェック」 #cssnite

ヤスヒサ 🗑 @yhassy

サイトの中にある情報をすぐに見つけられるように整理するのは重要ですが、その前に読み込みが遅いと意味がなくなるという。2 秒以上かかるサイトは Google のクロールも遅くなる #cssnite bit.ly/24X8giY

ヤスヒサ 🗑 @yhassy

利用者体験は URL を叩いた瞬間から始まっているから、そこからの速さを考えなくてはいけないよね。「Loading ...」とか出てきたら、見る前に諦めるとかよくある #cssnite

Mari Takahashi @M_Rdesign

なんとなくの違和感も信じたほうが良いのかも。 その違和感を分析すれば、違和感の理由がわかる。 論理的な思考も大事だけど、感覚も大事。でも、感覚だけじゃ足りなくて、説明するための分析が必要だよね。 #cssnite

crema（黒野明子） @crema

#cssnite （こうやって、デザイン作成の変遷を実例で拝見できるのは、良いですね）

CSS Nite @cssnite

李「メインビジュアル（ページ一番上に設置するキャッチイメージ）は、クリック率は少ないが、イメージ作りのためには重要。」 #cssnite

こた @coquemicot_0928

画面内の優先順位大事。「すべてを目立たせろ」という偉い人には分からんのですよ事案が発生した時には特に大事。 #cssnite

ふっちー @Fuchie

デザイナーMさんの「できました」スライドが、妙な味を出してるｗ #cssnite

sho otani @ozu_syo

ロジックで批評する派と、感覚で批評する派、それぞれProConsあるよね。アウトカムとしては一緒だけど、育ち方が違うイメージ。相手に合わせて使い分けられるとなお良しなんだろうな #cssnite

こた @coquemicot_0928

「これダサいよ」「ちゃんとデザインしよう」で伝わったのだろうか。伝わってるとしたらキャッチしたデザイナの方がかなり優秀だな。 #cssnite

矢野りん @yanorin

リニュアルのばあい、もともとCTRの高い導線を「表示サイズ大きくする」という正攻法で整える。んで、デカイわりにCTR低い傾向あるメインビジュアルは「雰囲気重視」でおおきいままという判断 #cssnite

iichikoh＠ECのアナリスト的ななにか @iichikoh

直感だけど、クリック率とかヒートマップで裏付けしててすごい #cssnite

りん @getsukikyu

ヒートマップを確認して、狙ったところがちゃんとクリックされたり見られてるかを検証する。左上がやっぱり注目されるんだなぁ。 #cssnite

CSS Nite @cssnite

李「ブラッシュアップしたデザインについて、ユーザーが意図通りに操作しているか、ヒートマップツールやクリック解析ツールなどで分析する。」 #cssnite

北村たあ @tah_timing

ヒートマップ解析ツールたのしそう。 ＞luckyorange.com #cssnite

CSS Nite @cssnite

李「モバイルデザインでは、 １．スマホの操作はすべて親指、人差し指で行う 　画面の上には観るコンテンツ。右にはクリックするコンテンツを置く ２．縦の動きを意識して、コンテンツを優先的に作成 ３．２スクロールまでがメインコンテンツ」 #cssnite

矢野りん @yanorin

CTRとページ（UI）要素の表示サイズの比例とかはロジカルで説得力あるけどそれだけに将来は人工知能とかで診断から最適化までやられちゃいそうね。でも度々出てくる李さんの「なんかヤダ」とか「もうちょっとどうにかなんないの」って目の付けかたがコア価値なんだろうな #cssnite

CSS Nite @cssnite

李「スマホサイトをヒートマップツールで確認すると、右側のほうがタップされる率が高く、スクロールされるのも２回までという結果が出ている。」 #cssnite