CSS Nite LP, Disk 11　矢野 りんさんセッション

withoutsugar（みどり） @withoutsugar

次は、矢野 りん：UI向けビジュアルデザインの基礎 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「子どもの手がかからなくなってきたので本格的に制作に復帰してきました」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

アンドロイドの会、女子部部長。「（今日の参加者で）アンドロイド端末をもってる人は？」1割程度。 #cssnitelp11

withoutsugar（みどり） @withoutsugar

挙手アンケート、7割方がアンドロイドの勉強会に興味あり。 #cssnitelp11

crema𝕏（黒野明子） @crema

#cssnitelp11 会場のAndroid所有率は1割程度。矢野さんは、Androidアプリのデザイン周りを担当することが多いとのこと。Android向け物販アプリ「DropCart」発売中。3000円でアプリを買うとTシャツがついてくるそうです。

withoutsugar（みどり） @withoutsugar

「アジェンダ。ビジュアルデザインの役割を知る―視覚情報がほとんどのWebデザインの役目。次、２Dデザインの基本的なセオリーを知る―セオリーはまとまっているのでおさらい。セオリーの使いどころを知る―どうやって使ったら？を解説。」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「Webサイトは何次元デザインなの？2D→点、線、面で平面を形成。3D→面、奥行き、高さで空間を、4D→面、空間、時間でモーション（動きの要素）を形成。Webデザインの（各要素）にそれぞれ配置される。ディスプレイの中にあるという前提では２D。」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「Webサイトのナビゲーション、（情報の）階層を持つ＝３D（的志向）。Flashのアニメーションがあれば時間軸を持つ、４Dである。」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「今回は２Dに絞って話します」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「Webの種類もいろいろですね。キャンペーン、企業情報、Eコマース、Webサービス。外見的特徴、求められる技術も異なる。ビジュアルで人の心に如何に刺さるかという目標もあれば（キャンペーン）、文字説明多く階層的に情報が整理されることが求められたり（企業）」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「それぞれ必要な外見の違いがあるが共通の要件は、「情報を伝わりやすく整えること」←これどんな種類でも外さないでね！」 #cssnitelp11

crema𝕏（黒野明子） @crema

#cssnitelp11 「Webページである以上は、共通の要件は『人間に情報を伝わりやすくする』こと。」

withoutsugar（みどり） @withoutsugar

「ビジュアルデザインの役割。人間に情報を伝わりやすくする。格好いいかどうかはおいといて（第一義ではなくて）。」 #cssnitelp11

crema𝕏（黒野明子） @crema

#cssnitelp11 「2Dデザインの基本的セオリーの確認＞優位性／ヒエラルキーの法則、コントラストの法則、リズムの法則、構造の法則」

crema𝕏（黒野明子） @crema

#cssnitelp11 「コントラストの法則。大小／明暗／遠近に関係する。鑑賞者に『近い』という感覚が、優位性の高さにつながる」

withoutsugar（みどり） @withoutsugar

「コントラストの法則。大小／明暗／遠近に関係する（ゾウはでかいが恐竜の隣に置いたら？）。鑑賞者に「近い」という感覚が優位性の高さにつながる（際だたせたい情報を近くに）。」 #cssnitelp11

ヤスヒサ 🗑 @yhassy

整理整理の基本アプローチとして LATCH というのがありますね。L (場所), A (アルファベット), T (時間), C (カテゴリ), H (階層) #cssnitelp11

withoutsugar（みどり） @withoutsugar

「大事なものだからちゃんとよく見えるようにしよう→コントラストの法則　優位性／ヒエラルキーの法則に加え色合いの話が絡んでくる。」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「リズムの法則。目安となる数値を決める（ガイドを活用）、目安を繰り返し使う。」 #cssnitelp11

versionfive @versionfive

#cssnitelp11 ガイドがつくだけで、一見ランダムにおかれた円にリズム・法則性が生まれる

crema𝕏（黒野明子） @crema

#cssnitelp11 「リズムの法則。オブジェクトを目安となる値に乗っ取って配置していく。目安を繰り返し使う」

withoutsugar（みどり） @withoutsugar

「構造の法則。リズムの法則をもう一段つっこんだもの。モジュールを決める。モジュールをユニットとして使う（グリッドシステムの採用）。」 #cssnitelp11

withoutsugar（みどり） @withoutsugar

「こうした基本テクニックを知っておくと、目的に沿った表現を考えるのが楽です」 #cssnitelp11

ヤスヒサ 🗑 @yhassy

グリッド系ツール２ 「Em Calculator」Airアプリでページ下からダウンロード #cssnitelp11 http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/

ヤスヒサ 🗑 @yhassy

グリッド系ツール３「Grid Designer」 #cssnitelp11 http://grid.mindplay.dk/