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
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
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
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
mkasumi
0
1.1k
Storyboard Assignment: Storyboard from Comic Strip
lynteo
3
190
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
870
AIエージェントが対話的なUIを返す!MCP−UIで変わるユーザ体験
daitasu
1
150
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
mixi_design
PRO
1
200
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
1
370
hicard_credential_202601
hicard
0
160
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
koyaman
1
1.4k
デザインするために「多様性」について考える
iflection
0
190
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
securecat
0
200
Spacemarket Brand Guide
spacemarket
2
170
Correspondence:共に生成していく過程
akiramotomura
0
190
Featured
See All Featured
Design in an AI World
tapps
0
150
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
280
Designing for Performance
lara
610
70k
HDC tutorial
michielstock
1
400
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
57
Believing is Seeing
oripsolob
1
59
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
57
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
Testing 201, or: Great Expectations
jmmastey
46
8.1k
The Cost Of JavaScript in 2023
addyosmani
55
9.5k
Chasing Engaging Ingredients in Design
codingconduct
0
120
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Transcript
最近のWebから学ぶ デザイン術 2017年1月 ウラカタ勉強会
自己紹介 デザイナーの中嶋です。 制作会社・フリーランスを経て 2008年に名案企画に入社。 ただひたすらデザインと マークアップをしてます。
1. デザインで重要な事とは 2. 最近のWebデザイン Agenda
中嶋が考える デザインで重要な事とは Section 1
デザインをテーマ 何を話そうか...
デザイン 問題を解決する術 =
デザイン 問題を解決する術 = ( 設計面 + ビジュアル面 )
最も重要なのは 設 計
設計に必要な能力 • 情報を収集・理解する能力 • 整理する能力 • 整頓する能力
設計がしっかりできないことには 良いデザインなんて作れない
最近のWebデザイン Section 2
デバイスの多様化 ( スマホ・タブレット・大型モニター ) 回線の高速化 ( 無料Wi-Fiスポットの拡大・LTE ) 背景
• スマホ対応はレスポンシブデザイン • スクロールを恐れない縦長レイアウト • ブロックを積み重ねるだけのシングルカラム • 大型モニターにも対応するリキッドレイアウト • ファーストビュー独占の巨大なキービジュアル
• ダイナミックなタイポグラフィ Webデザインの傾向
では、見ていきましょう
回帰系
レイヤーの移動スピードに差を付けることで 視差効果をもたらし、デザインに立体感をもたらす パララックス
GIF画像を複数重ね、コマ送りすることで アニメーションを再現する アニメーションGIF
2015~2016年頃から 増えだしたデザイン
ページのコンテンツをストーリー仕立てで組立て、スクロー ルするだけで内容への理解を深める。 ◎ ユーザーの滞在時間を伸ばす効果がある。 ストーリーテリング
クロム=枠をなくしたデザイン。余計な装飾をせず、ビジュ アルを引き立て、メッセージが強調される。 ◎ 雑誌の1ページのようなデザインが再現できる。 クロムなし
イメージをフルスクリーンで表示したレイアウト。 様々なサイズのデバイスでも同じ印象の表現ができるた め、近年では重宝されやすい。 ◎ 魅力的に見せやすく、ユーザーを引き込みやすい。 ヒーローヘッダー
構成要素が左右非対称であったり、秩序なく不規則に配 置されたデザイン。 ◎ デザインに強い個性が生まれる アシンメトリー
余計なナビゲーションを隠すことができるため、よりミニマ ムなデザインを再現できる。 デスクトップ版デザインでの利用が増えてきた。 ハンバーガーメニュー
パーティクル(粒子)がアニメーションする背景を配置して いるデザイン。 ◎ 背景に立体感が生まれる パーティクル背景
番外編
いろんな事をやっていて、ホンマに凄いけど、ストレスを感 じずにはいられないデザイン。 凄い、ホンマに凄い。けど...系
2017年注目編
画面を真っ二つに区切って、左右で異なる動作をさせるレ イアウト。 ◎ 余白を無くし、画面を有効に活用できる スプリットスクリーンレイアウト
コンテンツの区切りとなるラインが斜めやラウンデッド(曲 線)になっているデザイン。 斜めライン・ラウンデッド
まとめ
• モバイルファーストなデザイン傾向 • アニメーションは個性を生む重要な要素 • 短命なサイトは試しやすい
ありがとうございました