Submit Search
Upload
これくらいはやってほしいWebデザイン
•
Download as KEY, PDF
•
125 likes
•
188,137 views
Yuya Takahashi
Follow
PHPカンファレンス2012@東京 ( http://www.ustream.tv/recorded/25414614 )
Read less
Read more
Design
Report
Share
Report
Share
1 of 27
Download now
Recommended
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
Web design
Web design
kazuko kaneuchi
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
Recommended
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
Web design
Web design
kazuko kaneuchi
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
masaaki komori
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
アジャイルの原則で、アジャイル思考を身につけよう - 名古屋アジャイル勉強会#62 2014/04/25
アジャイルの原則で、アジャイル思考を身につけよう - 名古屋アジャイル勉強会#62 2014/04/25
hiroyuki Yamamoto
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
ABC 第2回スライド
ABC 第2回スライド
Sawada Makoto
cssについて
cssについて
rootage-inc
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
CSSから国民を守る党
CSSから国民を守る党
akatsuki 1910
20120418 アジャイルサムライ読書会 第1回
20120418 アジャイルサムライ読書会 第1回
株式会社コネクトスター(ConnectStar Co., Ltd.)
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
株式会社GreenHack
Webコーディングの基本+α
Webコーディングの基本+α
takapiya
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
サービス開発者の読書会 #1「アジャイルサムライ」2012.4
サービス開発者の読書会 #1「アジャイルサムライ」2012.4
Hiroshi Tsukamoto
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
Grids are Good (right?)
Grids are Good (right?)
huer1278ft
More Related Content
What's hot
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
Eigoro Yamamura
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
アジャイルの原則で、アジャイル思考を身につけよう - 名古屋アジャイル勉強会#62 2014/04/25
アジャイルの原則で、アジャイル思考を身につけよう - 名古屋アジャイル勉強会#62 2014/04/25
hiroyuki Yamamoto
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
WordPressってこんなCMS
WordPressってこんなCMS
Kawakami Hiroko
ABC 第2回スライド
ABC 第2回スライド
Sawada Makoto
cssについて
cssについて
rootage-inc
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
CSSから国民を守る党
CSSから国民を守る党
akatsuki 1910
20120418 アジャイルサムライ読書会 第1回
20120418 アジャイルサムライ読書会 第1回
株式会社コネクトスター(ConnectStar Co., Ltd.)
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
株式会社GreenHack
Webコーディングの基本+α
Webコーディングの基本+α
takapiya
一歩踏み込むWordPress
一歩踏み込むWordPress
正樹 平野
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
サービス開発者の読書会 #1「アジャイルサムライ」2012.4
サービス開発者の読書会 #1「アジャイルサムライ」2012.4
Hiroshi Tsukamoto
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
What's hot
(19)
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
プログラマがWebデザインについて考えてみた
プログラマがWebデザインについて考えてみた
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
アジャイルの原則で、アジャイル思考を身につけよう - 名古屋アジャイル勉強会#62 2014/04/25
アジャイルの原則で、アジャイル思考を身につけよう - 名古屋アジャイル勉強会#62 2014/04/25
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
WordPressってこんなCMS
WordPressってこんなCMS
ABC 第2回スライド
ABC 第2回スライド
cssについて
cssについて
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
CSSから国民を守る党
CSSから国民を守る党
20120418 アジャイルサムライ読書会 第1回
20120418 アジャイルサムライ読書会 第1回
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
Webコーディングの基本+α
Webコーディングの基本+α
一歩踏み込むWordPress
一歩踏み込むWordPress
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
サービス開発者の読書会 #1「アジャイルサムライ」2012.4
サービス開発者の読書会 #1「アジャイルサムライ」2012.4
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Viewers also liked
色彩センスのいらない配色講座
色彩センスのいらない配色講座
Mariko Yamaguchi
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
Grids are Good (right?)
Grids are Good (right?)
huer1278ft
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
とある色の決め方
とある色の決め方
Yumi uniq Ishizaki
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
swwwitch inc.
Taga arthur d little
Taga arthur d little
southmos
McKinsey: Understanding shifts in consumer behavior
McKinsey: Understanding shifts in consumer behavior
McKinsey on Marketing & Sales
Roland berger best_practices_in_new_product_development_20130419
Roland berger best_practices_in_new_product_development_20130419
Alberto Garcia Romera
A.T. Kearney: Positioning for the Telematics Tipping Point
A.T. Kearney: Positioning for the Telematics Tipping Point
bengillTU
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
Shoe-g Ueyama
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
「MakeLeaps」請求書の作成、管理、郵送
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
MOCKS | Yuta Morishige
Viewers also liked
(15)
色彩センスのいらない配色講座
色彩センスのいらない配色講座
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Grids are Good (right?)
Grids are Good (right?)
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
とある色の決め方
とある色の決め方
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
SINAP TALK Vol.04「プレゼンテーションについて」鷹野雅弘
Taga arthur d little
Taga arthur d little
McKinsey: Understanding shifts in consumer behavior
McKinsey: Understanding shifts in consumer behavior
Roland berger best_practices_in_new_product_development_20130419
Roland berger best_practices_in_new_product_development_20130419
A.T. Kearney: Positioning for the Telematics Tipping Point
A.T. Kearney: Positioning for the Telematics Tipping Point
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
素敵なプレゼン資料を作るためのKnow-Howてんこ盛りセッション:プレゼン道場 Ver 2.2
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
これくらいはやってほしいWebデザイン
1.
これくらいはやってほしい Webデザイン
2.
プロフィール • 高橋裕也(@takahashiyuya) • CakePHPが大好きなWebデザイナー •
アシアル
3.
Monaca(もなか)
• HTML + CSS + JavaScript • IOS、Android の同時開発 • ブラウザで動く • 使いやすいデバッガ • 気軽にビルド
4.
はじめに
5.
はじめに • デザインセンス不要
6.
はじめに • デザインセンス不要 • グラフィックソフト不要
7.
はじめに • デザインセンス不要 • グラフィックソフト不要 •
プログラミング言語不要
8.
はじめに • デザインセンス不要 • グラフィックソフト不要 •
プログラミング言語不要 必要なのは あなたのやる気だけ
9.
3つだけ
10.
噂の3つのテクニック • グリッドシステム • ホワイトスペース •
アプローチ
11.
こんな感じ
12.
グリッドシステム
13.
グリッドシステム
• 垂直水平にガイド • 整然とした印象 • 応用が利く
14.
グリッドシステム(基本)
15.
グリッドシステム(応用)
16.
ホワイトスペース
17.
18.
意外とね
19.
意図して配置する
20.
アプローチ
21.
アプローチ
• 見た瞬間伝わる • 費用対効果が高い • 応用が利く
22.
たしかに
23.
グリッドシステム
24.
ホワイトスペース
25.
アプローチ
26.
ぜひ
27.
ご静聴ありがとうございました。
Editor's Notes
動機を話す\n
主にエンジニアとしてフロントエンドやサーバサイドの開発をやってます。\nたまにデザイン、あとはスクールでフレームワーク編の講師を担当。\n最近、Monacaを使ってiOSとAndroidのアプリをプロダクトで開発した\n
デバッガよかった\n
\n
芸術ではなく、設計の話です。\n
フォトショの話でもない。\nユーザを意識したビュー・レイアウト\n\n
PHPの事を聞きにきた方が多いと思いますが・・・\n
会場の雰囲気次第で、求人の話しようかな。\n
ネタは3つだけ\n
この3つを組み合わせると一体どうなるのか・・・\nといえば\n\n\n
こんな感じ\n
\n
「グリッドシステム」とは、画面上に垂直・水平のガイドラインを置いて、\nそのガイドラインよって構成される格子(グリッド)に合わせて、文字や画像などを配置していくことを言います。\n\n\n情報が整理されていて非常に効率がよいレイアウトという事で、\n読みやすく整然とした印象のページデザインに仕上げる事ができます。\n\n\n決まった位置に画像やテキストをはめ込んでいくことで\n見る人の視線を迷わせることなく、見やすい読みやすいレイアウトを実現する事が可能になります。\n\n応用の話に続く\n
\n
\n
ホワイトスペースは、文字や画像などのエレメントが何もない部分のことです。\n\n\n
ホワイトスペースと聞くと、難解プログラミング言語のこちらを思い浮かべた方もいるかもしれませんね。\n\n(リスナーに知り合い多かったら挙手求めようかな\n(んで、手は挙がらないはず。\n(正しいスペースを意識しているというフリでもっと意識することを押し出したい。\n\nあまり普段意識することはないと思うんですが、\nホワイトスペースはページ内で最も面積が大きいエレメントです。\n
ついつい画像や文字の配置に気をとられてしまいますが、\n逆にこのホワイトスペースをうまく扱うことが重要。\n\n
「すべてのスペースを意図して配置する」\nこれを押すだけ。\n\nコンビとなるアプローチに繋げる\n
ラスト\n\nアプローチとは、近接とも呼ばれます。\n関連する結びつきの強い要素は近づけて配置する。\n
特徴・メリットについて3つ\n\nパッと見で理解できる。\n(画像を見れば、それに関するテキストはどれ\n(テキストを読めば、関連する画像はどれ\n\nローリスク・ハイリターン\nUIに力を入れてるショッピングサイトなら常識\n\nまたあらゆるエレメントで有効です。\n例えば見出しに対しての小見出し、またそれに続くコンテンツ\nブログなど見るとその様がわかる\n\n
ここでホワイトスペースとアプローチが組み合わさる好例を紹介する\n\n終わったらおさらい→終了の流れ\n
\n
\n
\n
\n
パンパカパーン\n
Download now