Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウラカタ勉強会 2017年1月度 最近のWebから学ぶデザイン術
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Urakata
January 27, 2017
Design
0
210
ウラカタ勉強会 2017年1月度 最近のWebから学ぶデザイン術
Urakata
January 27, 2017
Tweet
Share
More Decks by Urakata
See All by Urakata
ウラカタ勉強会 2017年2月度 Vagrantによるローカル仮想環境の構築
urakata
2
300
ウラカタ勉強会 2016年11月度 AdminLTEの有料テンプレートが良かった
urakata
0
310
ウラカタ勉強会 2016年11月度 PostCSS
urakata
0
220
ウラカタ勉強会 2016年10月度 カタラウ勉強会
urakata
0
190
ウラカタ勉強会 2016年9月度 静的サイトジェネレータを 利用してみよう!
urakata
0
150
ウラカタ勉強会 2016年7月度 事例から学ぶ!Sass大解剖
urakata
0
350
Other Decks in Design
See All in Design
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
870
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
150
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
200
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
1.9k
kintone_aroma
kintone
0
1.4k
Storyboard Assignment: Storyboard from Comic Strip
lynteo
3
190
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
0
490
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
2.8k
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
300
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
shikichee
2
3.3k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
200
2026年、デザイナーはなにに賭ける?
0b1tk
0
480
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Are puppies a ranking factor?
jonoalderson
1
2.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
1
130
WENDY [Excerpt]
tessaabrams
9
36k
Optimizing for Happiness
mojombo
379
71k
Bash Introduction
62gerente
615
210k
Balancing Empowerment & Direction
lara
5
900
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
70
Abbi's Birthday
coloredviolet
1
4.8k
The Pragmatic Product Professional
lauravandoore
37
7.1k
Transcript
最近のWebから学ぶ デザイン術 2017年1月 ウラカタ勉強会
自己紹介 デザイナーの中嶋です。 制作会社・フリーランスを経て 2008年に名案企画に入社。 ただひたすらデザインと マークアップをしてます。
1. デザインで重要な事とは 2. 最近のWebデザイン Agenda
中嶋が考える デザインで重要な事とは Section 1
デザインをテーマ 何を話そうか...
デザイン 問題を解決する術 =
デザイン 問題を解決する術 = ( 設計面 + ビジュアル面 )
最も重要なのは 設 計
設計に必要な能力 • 情報を収集・理解する能力 • 整理する能力 • 整頓する能力
設計がしっかりできないことには 良いデザインなんて作れない
最近のWebデザイン Section 2
デバイスの多様化 ( スマホ・タブレット・大型モニター ) 回線の高速化 ( 無料Wi-Fiスポットの拡大・LTE ) 背景
• スマホ対応はレスポンシブデザイン • スクロールを恐れない縦長レイアウト • ブロックを積み重ねるだけのシングルカラム • 大型モニターにも対応するリキッドレイアウト • ファーストビュー独占の巨大なキービジュアル
• ダイナミックなタイポグラフィ Webデザインの傾向
では、見ていきましょう
回帰系
レイヤーの移動スピードに差を付けることで 視差効果をもたらし、デザインに立体感をもたらす パララックス
GIF画像を複数重ね、コマ送りすることで アニメーションを再現する アニメーションGIF
2015~2016年頃から 増えだしたデザイン
ページのコンテンツをストーリー仕立てで組立て、スクロー ルするだけで内容への理解を深める。 ◎ ユーザーの滞在時間を伸ばす効果がある。 ストーリーテリング
クロム=枠をなくしたデザイン。余計な装飾をせず、ビジュ アルを引き立て、メッセージが強調される。 ◎ 雑誌の1ページのようなデザインが再現できる。 クロムなし
イメージをフルスクリーンで表示したレイアウト。 様々なサイズのデバイスでも同じ印象の表現ができるた め、近年では重宝されやすい。 ◎ 魅力的に見せやすく、ユーザーを引き込みやすい。 ヒーローヘッダー
構成要素が左右非対称であったり、秩序なく不規則に配 置されたデザイン。 ◎ デザインに強い個性が生まれる アシンメトリー
余計なナビゲーションを隠すことができるため、よりミニマ ムなデザインを再現できる。 デスクトップ版デザインでの利用が増えてきた。 ハンバーガーメニュー
パーティクル(粒子)がアニメーションする背景を配置して いるデザイン。 ◎ 背景に立体感が生まれる パーティクル背景
番外編
いろんな事をやっていて、ホンマに凄いけど、ストレスを感 じずにはいられないデザイン。 凄い、ホンマに凄い。けど...系
2017年注目編
画面を真っ二つに区切って、左右で異なる動作をさせるレ イアウト。 ◎ 余白を無くし、画面を有効に活用できる スプリットスクリーンレイアウト
コンテンツの区切りとなるラインが斜めやラウンデッド(曲 線)になっているデザイン。 斜めライン・ラウンデッド
まとめ
• モバイルファーストなデザイン傾向 • アニメーションは個性を生む重要な要素 • 短命なサイトは試しやすい
ありがとうございました