135
鷹野雅弘 スイッチ

「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

Embed Size (px)

DESCRIPTION

2013年11月8日、JPタワー(東京・丸の内)で開催されたCREATE NOW / PLUS ONE DAYの「画像をなるべく使わずにWebをレイアウトするテクニック」セッションのスライドです。 http://adobe-createnow.jp/event

Citation preview

Page 1: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

鷹野雅弘(スイッチ)

Page 2: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 3: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 4: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 5: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

近いところで、複眼をつかってさまざまな角度から注意深く見る

Page 6: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

高いところから俯瞰(ふかん)する目のこと

Page 7: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

水の流れや潮の満ち干、つまり、世の中の流れを敏感に感じる目水の流れや潮の満ち干、つまり、世の中の流れを敏感に感じる目

Page 8: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 9: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 10: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 11: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 12: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 13: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 14: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 15: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 16: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 17: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 18: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 19: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 20: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 21: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 22: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 23: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 24: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 25: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 26: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 27: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 28: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 29: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 30: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 31: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 32: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 33: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 34: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 35: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 36: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 37: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 38: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 39: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 40: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 41: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 42: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 43: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 44: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 45: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 46: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 47: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 48: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 49: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

Samsung GalaxyS IV

Nexus 7

Samsung GalaxyNote II

Nexus 4

HTC One

Page 50: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 51: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 52: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 53: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 54: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 55: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 56: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 57: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 58: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 59: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 60: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 61: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

#btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;! text-align:center;! line-height:2em;! height:2em;! text-decoration:none;! border:1px solid #225588;! color:#ffffff;! background:#337fcc;! border-radius:5px;! text-shadow:0 -2px 0px #225588, 0 -2px 0px #225588;background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));! background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;}#btn:hover {! background:-moz-linear-gradient(rgba(34,85,136,0.4), rgba(34,85,136,0.9));20 background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.4)), to(rgba(119,170,221,0.9)));}

Page 62: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

#btn {! display:block;! width:300px;! font-size:28px;! font-weight:bold;! text-align:center;! line-height:2em;! height:2em;! text-decoration:none;! border:1px solid #225588;! color:#ffffff;! background:#337fcc;! border-radius:5px;! text-shadow:0 -2px 0px #225588, 0 -2px 0px #225588;background:-moz-linear-gradient(rgba(34,85,136,0.5), rgba(34,85,136,1));! background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.5)), to(rgba(34,85,136,1)));! box-shadow:1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;}#btn:hover {! background:-moz-linear-gradient(rgba(34,85,136,0.4), rgba(34,85,136,0.9));20 background:-webkit-gradient(linear, 100% 0%, 100% 100%, from(rgba(34,85,136,0.4)), to(rgba(119,170,221,0.9)));}

Page 63: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 64: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 65: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 66: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 67: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 68: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

#box { background: rgba(51,153,204,0.5)}

Page 69: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

#box { background: rgba(51,153,204,0.5)}

Page 70: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 71: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 72: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 73: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 74: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 75: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 76: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 77: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 78: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 79: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 80: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 81: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 82: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 83: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 84: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 85: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 86: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 87: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 88: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 89: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 90: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

.角丸長方形_1 { border-radius: 10px; background-color: rgb( 234, 104, 162 ); position: absolute; left: 270px; top: 194px; width: 142px; height: 142px; z-index: 2;}

Page 91: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 92: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 93: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 94: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 95: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 96: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 97: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 98: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 99: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 100: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

画像化

Page 101: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 102: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 103: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 104: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 105: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 106: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 107: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 108: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 109: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 110: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 111: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 112: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 113: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 114: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 115: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 116: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 117: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 118: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 119: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 120: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

Web Desktop

Google Fonts

Typekit

Page 121: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 122: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 123: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 124: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 125: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 126: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 127: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 128: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 129: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 130: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)
Page 131: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

ありがとうございました。

Page 132: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

Vol.2ベルサール九段

14のショートセッション

ネタ祭り20132013.11.23

Page 134: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

swwwitch

swwwitchtakan.masahiro

Page 135: 「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘(スイッチ)

http://bit.ly/plus1day-takanodemo data