Upload
Download free for 30 days
Login
Submit Search
マルチデバイス時代におけるWebサイトのUIについて
15 likes
4,144 views
rie nabesaka
2013年9月19日(木)、Apple Store Ginzaにて開催されたCSS Nite in Ginza, Vol.71「次世代のWebデザインへの2つのヒント」で解説したスライドです。
Read more
1 of 87
Download now
Downloaded 22 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Most read
17
18
19
Most read
20
Most read
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
More Related Content
PPTX
20分でできる!Xamarin.Forms入門
Shinichi Hirauchi
PPTX
第1回 Japan Xamarin User Group Conference - Xamarin 概要
Yoshito Tabuchi
PDF
Xamarin を使用したC# によるモバイルアプリ作成
Yoshito Tabuchi
PDF
Xamarin概要
Yoshito Tabuchi
PDF
Xamarin.Forms アプリケーション 設計パターン
一希 大田
PDF
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
Yo Otagawa
PPTX
Xamarin開発環境の選択
Miho Kurosawa
PPTX
Xamarin 実戦投入時に気をつけたいことあれこれ
Tomohiro Suzuki
20分でできる!Xamarin.Forms入門
Shinichi Hirauchi
第1回 Japan Xamarin User Group Conference - Xamarin 概要
Yoshito Tabuchi
Xamarin を使用したC# によるモバイルアプリ作成
Yoshito Tabuchi
Xamarin概要
Yoshito Tabuchi
Xamarin.Forms アプリケーション 設計パターン
一希 大田
Sakenomyの開発経緯と内容をできるだけ公開しちゃいます
Yo Otagawa
Xamarin開発環境の選択
Miho Kurosawa
Xamarin 実戦投入時に気をつけたいことあれこれ
Tomohiro Suzuki
What's hot
(20)
PDF
Xamarin.Forms概要
Hironov OKUYAMA
PPTX
Developers.io.札幌 xamarinってどうよ
Shinichi Hirauchi
PDF
Xamarin を使うとどんなことができるの?
Yoshito Tabuchi
PPTX
Xamarin.forms実践投入してみて
Masahiko Miyasaka
PPTX
Onsen UIが目指すもの
アシアル株式会社
PDF
Xamarin の特徴と開発手法概要
Yoshito Tabuchi
PDF
すまべん20091114
だいすけ ふるかわ
PDF
5分で(は終わらなかった)分かるXamarin(開発者向け)
Yoshito Tabuchi
PPTX
Enterpriseから見たXamarinの可能性
Atsushi Nakamura
PDF
BoxViewの美味しい食べ方
Shinichi Hirauchi
PPTX
Xamarin Native vs Xamarin Forms
Tomohiro Suzuki
PDF
JXUGC 13 東京 はじめに
Yoshito Tabuchi
PPTX
JXUGC #9 Xamarin.Forms Mvvm Teachathon
Yoshito Tabuchi
PDF
Xamarin概要と活用方法
Yoshito Tabuchi
PDF
C# と Xamarin
Yoshito Tabuchi
PDF
20171202 Xamarinの歩き方
Yoshito Tabuchi
PDF
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
Yoshito Tabuchi
PDF
Xamarin の概要と活用事例
Yoshito Tabuchi
PDF
WPF開発者がXamarin.Macを触るその前に
Kazuhiko Shimada
PPTX
Xamarinでもクラウドで監視したい!
ayasehiro
Xamarin.Forms概要
Hironov OKUYAMA
Developers.io.札幌 xamarinってどうよ
Shinichi Hirauchi
Xamarin を使うとどんなことができるの?
Yoshito Tabuchi
Xamarin.forms実践投入してみて
Masahiko Miyasaka
Onsen UIが目指すもの
アシアル株式会社
Xamarin の特徴と開発手法概要
Yoshito Tabuchi
すまべん20091114
だいすけ ふるかわ
5分で(は終わらなかった)分かるXamarin(開発者向け)
Yoshito Tabuchi
Enterpriseから見たXamarinの可能性
Atsushi Nakamura
BoxViewの美味しい食べ方
Shinichi Hirauchi
Xamarin Native vs Xamarin Forms
Tomohiro Suzuki
JXUGC 13 東京 はじめに
Yoshito Tabuchi
JXUGC #9 Xamarin.Forms Mvvm Teachathon
Yoshito Tabuchi
Xamarin概要と活用方法
Yoshito Tabuchi
C# と Xamarin
Yoshito Tabuchi
20171202 Xamarinの歩き方
Yoshito Tabuchi
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
Yoshito Tabuchi
Xamarin の概要と活用事例
Yoshito Tabuchi
WPF開発者がXamarin.Macを触るその前に
Kazuhiko Shimada
Xamarinでもクラウドで監視したい!
ayasehiro
Ad
Viewers also liked
(20)
PDF
Wordbench fukuoka
Junji Manno
PDF
FICC VISION 2016
FICC inc.
PDF
One page memo v3
FICC inc.
PDF
マークアップとUX
uenoyuuki
PDF
WordPress基礎講座1 CMSの概要
Akinori Kawamitsu
PDF
jQuery Mobile 最新情報 & Tips
yoshikawa_t
PDF
レスポンシブWeb「デザイン」
uenoyuuki
PPTX
AWS基礎
Keisuke Higo
PDF
UI設計におけるスマートフォン対応のまとめ
Tomoki Imatomi
PDF
CSSコーディングを効率よくするおすすめプラグイン
Shogo Tamura
PDF
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
西畑 一馬
PDF
スマートフォン対応、気をつけたいトラブル JavaScript編
Hiroaki Wakamatsu
PPTX
Awsをちゃんと使ってみた
Yoichi Toyota
PDF
Pythonを取り巻く開発環境 #pyconjp
Yoshifumi Yamaguchi
PDF
Webデザイナーが使うバージョン管理ツール(20150205 Web業界なんでも勉強会)
Tsukasa Nagata
PDF
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
PDF
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
PDF
Javascriptを書きたくないヒ トのためのPythonScript
Kazufumi Ohkawa
PDF
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
DOCX
マーケティングブリーフ項目 テンプレート
FICC inc.
Wordbench fukuoka
Junji Manno
FICC VISION 2016
FICC inc.
One page memo v3
FICC inc.
マークアップとUX
uenoyuuki
WordPress基礎講座1 CMSの概要
Akinori Kawamitsu
jQuery Mobile 最新情報 & Tips
yoshikawa_t
レスポンシブWeb「デザイン」
uenoyuuki
AWS基礎
Keisuke Higo
UI設計におけるスマートフォン対応のまとめ
Tomoki Imatomi
CSSコーディングを効率よくするおすすめプラグイン
Shogo Tamura
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
西畑 一馬
スマートフォン対応、気をつけたいトラブル JavaScript編
Hiroaki Wakamatsu
Awsをちゃんと使ってみた
Yoichi Toyota
Pythonを取り巻く開発環境 #pyconjp
Yoshifumi Yamaguchi
Webデザイナーが使うバージョン管理ツール(20150205 Web業界なんでも勉強会)
Tsukasa Nagata
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
Javascriptを書きたくないヒ トのためのPythonScript
Kazufumi Ohkawa
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
マーケティングブリーフ項目 テンプレート
FICC inc.
Ad
Similar to マルチデバイス時代におけるWebサイトのUIについて
(20)
PDF
スマートフォンサイト構成書作成 超入門編
Satomi ENOMOTO
PDF
ABC2014 Spring: UI/UX Design Trends 2014
Nobuya Sato
PPTX
UXを損ねる静的コンテンツ配信アンチパターン7選
Yuki Okada
PDF
マルチデバイスに対応するためのAuto layout
asakahara
PDF
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
PDF
スタイルガイドを活用した運用に強いCMSサイト制作
Keisuke Imura
PDF
スマートフォン・タブレットに対応したサイト構築の考え方
Youhei Iwasaki
PPTX
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
PDF
デザインにもこだわったUIの事始め (Episode1)
Fumiya Sakai
PDF
CCC Design Session
Mako Mizuno
PDF
福井で「しあわせデザイナー」になるために
Miho Yamamori
PDF
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
PPTX
Challenge PWA!! Technical Edition @JAG201809
Ryu Shindo
PDF
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
PDF
20190517_モバイルアーキテクチャを決定する際の観点
Takahito Miyamoto
PDF
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
Megumi Otani(Czenhe)
PDF
[UX]は投げ捨てろ!
c-mitsuba
PDF
イマドキWebメディアの制作手法
Keisuke Imura
PDF
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
de:code 2017
PDF
UIPageViewControllerとContainerViewでこんな見た目を実現するTips
Fumiya Sakai
スマートフォンサイト構成書作成 超入門編
Satomi ENOMOTO
ABC2014 Spring: UI/UX Design Trends 2014
Nobuya Sato
UXを損ねる静的コンテンツ配信アンチパターン7選
Yuki Okada
マルチデバイスに対応するためのAuto layout
asakahara
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
スタイルガイドを活用した運用に強いCMSサイト制作
Keisuke Imura
スマートフォン・タブレットに対応したサイト構築の考え方
Youhei Iwasaki
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
デザインにもこだわったUIの事始め (Episode1)
Fumiya Sakai
CCC Design Session
Mako Mizuno
福井で「しあわせデザイナー」になるために
Miho Yamamori
Androidでもサクサク動くHTML5ハイブリッドアプリの作り⽅
アシアル株式会社
Challenge PWA!! Technical Edition @JAG201809
Ryu Shindo
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
20190517_モバイルアーキテクチャを決定する際の観点
Takahito Miyamoto
iOSアプリ開発のためのSwiftビギナーズ勉強会 第6回 @Co-Edo
Megumi Otani(Czenhe)
[UX]は投げ捨てろ!
c-mitsuba
イマドキWebメディアの制作手法
Keisuke Imura
[MW10] Xamarin / OSS プロジェクトを活用したエンタープライズモバイルアプリケーションの実装 - Project Blue Monkey -
de:code 2017
UIPageViewControllerとContainerViewでこんな見た目を実現するTips
Fumiya Sakai
マルチデバイス時代におけるWebサイトのUIについて
1.
マルチデバイス時代における WebサイトのUIについて 株式会社サン・サン 鍋坂 理恵
2.
鍋坂理恵 Rie Nabesaka 香川県生まれのWebデザイナー 制作会社で各種制作を経て独立 カメラマンの夫・6歳の息子 育児・家事・仕事に奮闘中
3.
Webデザインのトレンド
4.
フラットなUIの増加
9.
大胆な色使い
10.
http://flatuicolors.com/
11.
シンプルで難しいが、 操作エリアは明確に
12.
https://layervault.com/
14.
アイコンを効果的に活用する
15.
http://www.justinaguilar.com/
17.
日本での事例は?
21.
デザインのポイントとUIの理解
22.
スマートフォン用Webサイトの UIパターン
23.
http://www.lukew.com/ff/entry.asp?1649
24.
http://www.lukew.com/ff/entry.asp?1649
25.
・44px ・レイアウトにゆとりを ・指の大きさ ・重要機能は下側 http://www.lukew.com/ff/entry.asp?1649
26.
・ボタンを最小限に (コンテンツの整理) ・配色や ボタンデザインの統一 http://www.lukew.com/ff/entry.asp?1649
27.
ナビゲーション
28.
ボタン、タブ型 ・スマートフォンの標準UIのボタンに 似た形を採用 ・項目が少ない場合に適している
29.
ボタン、タブ型
30.
アコーディオン型 項目が多い場合や 階層が深い場合に 適している
31.
リスト型
32.
ダッシュボード型 画面全体に アイコンやボタンを 並べる
33.
メニューをまとめる
34.
スマートフォンでのレイアウト例
35.
コーポレイトサイト
36.
ECサイト ・ヘッダーのナビゲーションは最小限 ・カテゴリーをまとめる ・商品を見やすく ・商品詳細ページにも十分な情報を
37.
ECサイト
38.
ECサイト
39.
ECサイト
40.
ECサイト
41.
情報の多いサイト ・ユーザーのニーズを優先させる構成 優先度の高いものは上部、低いものは下部へ
42.
情報の多いサイト
43.
情報の多いサイト
44.
タブレットを意識した Webデザイン
45.
http://www.lukew.com/ff/entry.asp?1649
46.
http://www.lukew.com/ff/entry.asp?1649
47.
横スライドや左メニュー固定
50.
ワンカラムのレイアウト
52.
トレンドを取り入れるテクニック
53.
罫線を使わない
54.
グリッドと余白で、 区画を明確にする
55.
http://www.coletownsend.com/#sl2
56.
http://www.coletownsend.com/#sl2
57.
http://www.coletownsend.com/#sl2
59.
タイポグラフィ
60.
文字のジャンプ率を大きく
64.
たくさんのフォントを知っておく しっかり吟味する
65.
レスポンシブWebデザインの レイアウトパターン
66.
ナビゲーションを縮める メニューをアイコンを使う
67.
http://skinnyties.com/
68.
レイアウトを大胆に変更する
69.
http://www.kavaruzova.cz/
70.
http://www.colazionedamichy.it/
71.
階層が深いサイトの場合
76.
Webデザイナーに求められるもの
77.
可能なこと、困難なことの理解
78.
・デザインはコンテンツを伝える入れ物 ・操作感を優先する
79.
プロトタイプで進めるなら、 デザインはいらない?
83.
・デザインの方向性 ・サイトのコンセプトや実装内容の共有
84.
・デザインの方向性 ・サイトのコンセプトや実装内容の共有 新しいアイディアや原動力に
85.
・グリッドや余白のバランス ・デザインのルールを決める 見た目の整然さの確保 操作しやすいインターフェイス
86.
http://www.amazon.co.jp/gp/product/4883378942
87.
ありがとうございます! info@sonsun33.com Twitter : @sonsun Facebook
: sonsun
Download