エンジニア向け

即効デザイン講座

自己紹介

Flash, HTML5, PhoneGap, Objective-C,Web デザイン ,UI, 川越 , 船橋 , ユベントス ,牛乳

ANDG CO., LTD.エンジニア / デザイナー

川野辺 亮

デザインとは分かりやすく伝える事

女性向けは + アート要素

先に結論、言いたい事

1. 普段意識していること

2. 女性向けで意識したこと

もくじ

デザインする上で…

隙間を空ける 揃える 色は… 盗むっ フォントは 4 種類

1. 普段意識していること

デザインする上で…

隙間を空ける

隙間を空ける

隙間を空ける

?

隙間を空ける

「 ただ空ければいい 」ってわけではない

隙間を空ける

簡単なルールがある

エリア間 > 要素間 > 行間 > 字間

隙間の空け方をだんだん小さくする

隙間を空ける

　　

エリア間要素間行間字間

隙間を空ける

　　

エリア間要素間行間字間

隙間を空ける

　　

エリア間要素間行間字間

隙間を空ける

　　

エリア間要素間行間字間

隙間を空ける

　　

エリア間要素間行間字間

隙間を空ける

隙間を空ける

隙間を空ける

見やすい , 分かりやすいか

ら

隙間を空ける

揃える

揃える

揃える

揃える

揃える

揃える

揃える

揃える

揃える

見やすい , 分かりやすいか

ら

揃える

色は… 盗むっ

盗むまえに…基本的な予備知識

色は… 盗むっ

色相

色は… 盗むっ

彩度

高低

明度

高低

色相 = 色味

色は… 盗むっ

要は…

何色か

彩度 = 鮮やかさ

色は… 盗むっ

高低

彩度が 0

色は… 盗むっ

有彩色無彩色

彩度がある

明度 = 明るさ

色は… 盗むっ

高低

色

色は… 盗むっ

鮮やかさ

高低

明るさ

高低

色は… 盗むっ

彩度

明度

色相

色は… 盗むっ

彩度

明度

カラートーン

70:25:5 の法則

色は… 盗むっ

ベースカラーメインカラー

キーカラー

70:25:5 の法則

色は… 盗むっ

大抵、色が足りなくなる

色は… 盗むっ

トーンを合わせたり色相を合わせたり

…

めんどい。（センスと経験が必要）

色は… 盗むっ

良いデザインから盗もう

dribbblePinterest

色は… 盗むっ

気に入ったもののカラーを調べる

背景とかテキスト色なども重要

色は… 盗むっ

デザインポータルから

選んだ方が早い

色の組み合わせなど

試行錯誤する時間が減る

色は… 盗むっ

色情報が見れる

色は… 盗むっ

色を絞って探せる

dribbble

色は… 盗むっ

色を絞って探せる

dribbble

指定した色が全体の 5% 以上

ならヒット

指定した色からの揺れ具合

色は… 盗むっ

良いデザインから盗む

それをベースにちょこっと調整

だんだん身に付くはず

さっきの色相とかトーンとか

色は… 盗むっ

なぜ、たくさん色を使うと良くない（と言われる）のか？

ユーザーが迷う覚えるルールが多くなり、

フォントは 4 種類

ゴシック体 (Sans-serif)

フォントは 4 種類

明朝体 (serif)

行書体 (script)

手書き体 (Hand-

writing)

フォントは 4 種類

太さを変える

文字間を変える

組み合わせる

フォントは 4 種類ゴシック体 (Sans-ser i f )

フォントは 4 種類明朝体 (serif)

フォントは 4 種類行書体 ( script )

フォントは 4 種類手書き体 (Hand-writing)

隙間を空ける 揃える 色は… 盗むっ フォントは 4 種類

1. 普段意識していること

デザインする上で…

女性向けデザインのために意識したこと

女性向けデザイン

かわいいオシャレ

分かりやすさ>>

理想は…

「可愛くてオシャレで分かりやすい」

女性向けデザイン

英語のままの UI

写真加工アプリはUI が既に定番化

女性向けデザイン

アナログ・ヴィンテージ感

女性向けデザイン

オシャレ感を出すために 海外ユーザー向けに 競合との差別化のために

ピンクは部分的にした

女性向けデザイン

作る

作りまくった

評価

ブラッシュアップ

女性向けデザイン

納得いくまで作り直した

女性向けデザイン

かわいい , オシャレな演出キラキラしてて可愛いコロコロしてて可愛いなど

ボタンを押したときのフィードバック

ボタンを揺らす

女性向けデザイン

フラットデザイン と カワイイむずかしい…

女性向けデザイン

フラットデザインだと差別化が難しい

逆手にとって世界観を押し出そう

女性向けデザイン

セミフラット

フラット感にアナログ感を混ぜる

勝手にそう呼んでる

女性向けデザイン

iOS7 の普及を見て変更

〜 ver 1.6 ver 1.7 〜

女性向けデザイン

新機能搭載

アイコンを刷新

ユーザーにとって

変化が分かりやすい！

大幅アップデート

女性向けデザイン

デザイン参考

dribbble

Pinterest We❤it

デザイン全般 画像全般 女性向け

「 app 」「 ui 」などで検索

女性向けデザイン

デザイン参考

ブランド、ウェディングサイト

ファッション誌、インテリア誌

雑貨屋、花屋、ガーデニング売場

などなど…

女性向けデザイン

デザイン参考 ( おまけ )The inspiration

The inspiration 行き詰まった時に

デザインとは分かりやすく伝える事

女性向けは + アート要素

言いたい事

デザインは相対的

環境・トレンド・差別化

対象の周囲を知り適応させていく

http://andg.net

ha@andg.net

仲間を募集中 !

プログラマ、サーバーエンジニア etc.