Soumettre la recherche
Mettre en ligne
レスポンシブサイト制作に効く デザインTipsあれこれ
•
78 j'aime
•
56,961 vues
Akiko Kurono
Suivre
2015年11月11日に開催されたAdobe Live Best of MAX」にて、crema design 黒野明子が発表した資料です。
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 29
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック
Akiko Kurono
いいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
力也 伊原
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
schoowebcampus
Webデザイナー1年生の為のしおり
Webデザイナー1年生の為のしおり
tomoakitomono
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
Satoru MURAKOSHI
Contenu connexe
Tendances
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Toshihiko Yamakami
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Risako Imai
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
yukahatakeyama
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
schoowebcampus
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
Takuya Nishitani
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
デザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
Takuya Nishitani
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
Asami Yamamoto
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
uenoyuuki
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
GREE/Art
Tendances
(20)
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
Sketch VS Photoshop Webデザイン4番勝負 - WCAN 2015 Autumn
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
デザインに自信がつく、タイポグラフィの基本
デザインに自信がつく、タイポグラフィの基本
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
デザインのためのデザイン
デザインのためのデザイン
デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Illustratorのカンプとうまく付き合う方法
Illustratorのカンプとうまく付き合う方法
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Webアクセシビリティが無視されすぎで気にくわない。
Webアクセシビリティが無視されすぎで気にくわない。
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
En vedette
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
Akio Yonekura
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
Sociomedia
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
Yoshinori OHTA
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
Takahiro Ishiyama
インタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめ
akihiro_0228
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
kenji goto
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
YUKI YAMAGUCHI
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
Livesense Inc.
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Naoki Kanazawa
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Ryoji Fujishita
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
Ayaka Sumida
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
swwwitch inc.
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
En vedette
(20)
Webデザイナーのためのタイポグラフィ入門1
Webデザイナーのためのタイポグラフィ入門1
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
UXとデザインまとめ by 上野学 - presentation from UX まとめ 2015
アクセシビリティからはじめる、WebサイトのUXデザイン
アクセシビリティからはじめる、WebサイトのUXデザイン
実践的なUXデザインとインタラクションデザインの考え方
実践的なUXデザインとインタラクションデザインの考え方
インタフェースデザインの心理学 まとめ
インタフェースデザインの心理学 まとめ
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
〜デザイン初心者向け〜 デザイン時に気をつけると幸せになれる事
マテリアルデザインを用いたデザインリニューアル [フリル編]
マテリアルデザインを用いたデザインリニューアル [フリル編]
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
学生時代に知っておきたかったWeb技術の学び方の学び方 | リブセンス
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
事例で学ぶデザインの原則 by Life is Tech !
事例で学ぶデザインの原則 by Life is Tech !
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
確実に良くするUI/UX設計
確実に良くするUI/UX設計
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
Best of MAX「ベテランほど知らずに損してる IllustratorとPhotoshopの新常識(CCライブラリ編)」
UX / UIデザインって何?
UX / UIデザインって何?
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Similaire à レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブデザインってなに?
レスポンシブデザインってなに?
Yoshinori Kamaishi
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
Sixapart day-2012-ideamans
Sixapart day-2012-ideamans
Kunihiko Miyanaga
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
Yuki Nakane
HONEBITOサイトの作り方 ~honebito.net~
HONEBITOサイトの作り方 ~honebito.net~
Shinichi Sato
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」
uenoyuuki
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
モバイル革命到来!世界でもっとも信用されているサービス
モバイル革命到来!世界でもっとも信用されているサービス
株式会社ドーモ
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
xyz corporation
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
H2O Space. Co., Ltd.
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
Kazuhiro Yoshimoto
レスポンシブWebデザインのディレクション方法
レスポンシブWebデザインのディレクション方法
株式会社ロックウェーブ
Graphic VR -World of Creating VR by Designer!-
Graphic VR -World of Creating VR by Designer!-
Tomoyo Hirayama
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
壽子 大倉
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
知己 久保
WEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUX
Hiromitsu Miyanishi
Similaire à レスポンシブサイト制作に効く デザインTipsあれこれ
(20)
レスポンシブデザインってなに?
レスポンシブデザインってなに?
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Sixapart day-2012-ideamans
Sixapart day-2012-ideamans
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
HONEBITOサイトの作り方 ~honebito.net~
HONEBITOサイトの作り方 ~honebito.net~
HTML5時代のWebデザイン
HTML5時代のWebデザイン
レスポンシブWeb「デザイン」
レスポンシブWeb「デザイン」
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
モバイル革命到来!世界でもっとも信用されているサービス
モバイル革命到来!世界でもっとも信用されているサービス
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
JavaScript(AngularJS)で作る iOS・Androidアプリ開発ハンズオン
レスポンシブWebデザインのディレクション方法
レスポンシブWebデザインのディレクション方法
Graphic VR -World of Creating VR by Designer!-
Graphic VR -World of Creating VR by Designer!-
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
WEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUX
レスポンシブサイト制作に効く デザインTipsあれこれ
1.
レスポンシブサイト制作に効く デザインTipsあれこれ 20151111 / Best
of MAX crema design 黒野明子
2.
黒野明子 crema design くれまでざいん くろのあきこ
3.
書籍 連載
4.
本日の流れ ● レスポンシブウェブデザインとは? ● Photoshop
でのレイアウトデモ ● アートボードの利用 ● 12 グリッドベースのレイアウト ● 横に伸び縮みするコンポーネント ● モバイル対応のメニュー設計 ● iPhone で即確認 ● タッチデバイスにやさしいリンク設計
5.
RWDレスポンシブウェブデザイン
6.
ところで、レスポンシブサイトの 制作経験はありますか? YES NO
7.
1ソースで様々な画面サイズの デバイスに対応
8.
https://en.wikipedia.org/wiki/Responsive_web_design#/media/File:Content-is-like-water-1980.jpg Content is like
water
9.
CSS フレキシブルなグリッド フレキシブルな画像 メディアクエリの使用 Ethan
Marcotteさんの定義によると
10.
RWDにおける一般的なメディアクエリ利用 /* デフォルトの記述 */ div.box
{ background-color: #660099 } @media screen and (max-width: 479px) { /* 479px 以下用(スマホ用)の記述 */ div.box { background-color: #ff9900 } } デバイスのウィンドウ幅に応じて読み込ませる CSS の内容をフィルタリング
11.
メディアクエリひとくちメモ ● デバイスの特性に基づいて適用するスタイルを切り替える ● 印刷用のスタイルシートなども(@media
print) ● 現在策定中のメディアクエリレベル 4 では、 端末の置かれている環境光によってスタイルの適用を 変更できるようになるかもしれない(light-level)
12.
RWDのメリットとデメリット 更新の手間が 1 度になる 同一
URLで PC と モバイル両方に対応 SEO への対応がラク CSS の記述ミスによっては レイアウト崩れが生じる モバイル閲覧時にも余分な データを読み込んで遅くなるかも
13.
RWDにおけるデザイン手法
14.
ブレイクポイントに応じた レイアウトバリエーションの作成 480px 768px 992px
1200px
15.
Photoshopのアートボード機能を利用
16.
本日のデモ
17.
12 グリッドベース Photoshop CC
Preview CC メニュー設計 リンクデザイン 登録する
18.
本日の作例 PC 向け モバイル向け(480px
未満)
19.
12 グリッドをベースにしたデザイン 12 6 4 3 3
3 3 4 4 6 102 3 4 5 7 8 9
20.
Bootstrap も12 グリッドが基本
21.
Photoshopでレイアウト
22.
アートボードの作成
23.
新規ガイドレイアウトの作成 1200 1300 1170 30(15+15) 1 2 3
4 5 6 7 8 9 10 11 12 15 50 15 50
24.
コンポーネント=部品
25.
1 カラムでも成立するコンポーネント 12 6+6 4+4+4
26.
レスポンシブ対応のメニュー設計 ● ドロップダウンメニュー ● スライドメニュー/ドロワーメニュー ●
ヘッダメニュー
27.
Preview CC で確認
28.
● タッチデバイスでは hoverを使えない active
と focus のデザインに気を配る タッチデバイス向けリンクデザイン ● ボタンサイズ44px 文字 14px 上下の余白 15px ずつ
29.
Thanks a lot
:-) @crema
Télécharger maintenant