Enviar pesquisa
Carregar
かんたんキレイなウェブデザイン
•
Transferir como PPTX, PDF
•
13 gostaram
•
3,475 visualizações
Shuhei Iitsuka
Seguir
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 52
Baixar agora
Recomendados
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
Shuhei Iitsuka
20121017_アプリ制作勉強会@GMO Yours
20121017_アプリ制作勉強会@GMO Yours
Yozo SATO
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
Shuhei Iitsuka
議会ってなんだ?(報告会イベント20150228)slideshare用
議会ってなんだ?(報告会イベント20150228)slideshare用
小金井市議会議員
T4t - tools for teams - 第1回 発表スライド
T4t - tools for teams - 第1回 発表スライド
Kojiro Yokota
10 w 02-議事録、報告書について
10 w 02-議事録、報告書について
Hieu Mac
Recomendados
かんたん Twitter アプリをつくろう
かんたん Twitter アプリをつくろう
Shuhei Iitsuka
20121017_アプリ制作勉強会@GMO Yours
20121017_アプリ制作勉強会@GMO Yours
Yozo SATO
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
ウェブデザインに応用する4つの基本原則
ウェブデザインに応用する4つの基本原則
Tomoyuki Arasuna
ウェブサービスの企画とデザイン
ウェブサービスの企画とデザイン
Shuhei Iitsuka
議会ってなんだ?(報告会イベント20150228)slideshare用
議会ってなんだ?(報告会イベント20150228)slideshare用
小金井市議会議員
T4t - tools for teams - 第1回 発表スライド
T4t - tools for teams - 第1回 発表スライド
Kojiro Yokota
10 w 02-議事録、報告書について
10 w 02-議事録、報告書について
Hieu Mac
OGPってなんでしょう?
OGPってなんでしょう?
Reina Okabe
【議事録】スキルアップ勉強会(6月度) h23.07.10
【議事録】スキルアップ勉強会(6月度) h23.07.10
Kenichi Takara
ビジネスを加速させる議事録作成
ビジネスを加速させる議事録作成
Kohji Tanaka
デザインチーム向けプロジェクト管理ツール Brushup の紹介
デザインチーム向けプロジェクト管理ツール Brushup の紹介
Brushup Team
株式会社クラッチ ソーシャルメディア活用におけるROIについて
株式会社クラッチ ソーシャルメディア活用におけるROIについて
Clutch inc
LP【シェア機能説明】201403
LP【シェア機能説明】201403
hirok154
LP制作マスターが教える!商品ランディングページ活用法〜基礎知識編
LP制作マスターが教える!商品ランディングページ活用法〜基礎知識編
ec-campus
すばやくネットショップの 売上をあげる5つの改善ポイント
すばやくネットショップの 売上をあげる5つの改善ポイント
Hiroshi Yamanaka
Lpと広告
Lpと広告
Takuya Sanbo
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
Yusuke Kojima
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
Junzo Matunoo
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
VOYAGE GROUP
0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編
Yusuke Kojima
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
Kyoko Ochiai
ABテスト:ユーザーメリットを具体的に伝えよう
ABテスト:ユーザーメリットを具体的に伝えよう
VOYAGE GROUP UIO strategies section
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
Yuki Kuramochi
機械学習とデータ分析プロセス
機械学習とデータ分析プロセス
Naoki Kitora
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
イケてるビジネスパーソンは iPad でスケジュールを管理する
イケてるビジネスパーソンは iPad でスケジュールを管理する
Yasunari Goto (iChain. Inc.)
データベースを使おう
データベースを使おう
Shuhei Iitsuka
Git
Git
Shuhei Iitsuka
ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2
Shuhei Iitsuka
Mais conteúdo relacionado
Destaque
OGPってなんでしょう?
OGPってなんでしょう?
Reina Okabe
【議事録】スキルアップ勉強会(6月度) h23.07.10
【議事録】スキルアップ勉強会(6月度) h23.07.10
Kenichi Takara
ビジネスを加速させる議事録作成
ビジネスを加速させる議事録作成
Kohji Tanaka
デザインチーム向けプロジェクト管理ツール Brushup の紹介
デザインチーム向けプロジェクト管理ツール Brushup の紹介
Brushup Team
株式会社クラッチ ソーシャルメディア活用におけるROIについて
株式会社クラッチ ソーシャルメディア活用におけるROIについて
Clutch inc
LP【シェア機能説明】201403
LP【シェア機能説明】201403
hirok154
LP制作マスターが教える!商品ランディングページ活用法〜基礎知識編
LP制作マスターが教える!商品ランディングページ活用法〜基礎知識編
ec-campus
すばやくネットショップの 売上をあげる5つの改善ポイント
すばやくネットショップの 売上をあげる5つの改善ポイント
Hiroshi Yamanaka
Lpと広告
Lpと広告
Takuya Sanbo
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
Yusuke Kojima
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
Junzo Matunoo
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
VOYAGE GROUP
0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編
Yusuke Kojima
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
Kyoko Ochiai
ABテスト:ユーザーメリットを具体的に伝えよう
ABテスト:ユーザーメリットを具体的に伝えよう
VOYAGE GROUP UIO strategies section
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
Yuki Kuramochi
機械学習とデータ分析プロセス
機械学習とデータ分析プロセス
Naoki Kitora
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
naoki ando
イケてるビジネスパーソンは iPad でスケジュールを管理する
イケてるビジネスパーソンは iPad でスケジュールを管理する
Yasunari Goto (iChain. Inc.)
Destaque
(19)
OGPってなんでしょう?
OGPってなんでしょう?
【議事録】スキルアップ勉強会(6月度) h23.07.10
【議事録】スキルアップ勉強会(6月度) h23.07.10
ビジネスを加速させる議事録作成
ビジネスを加速させる議事録作成
デザインチーム向けプロジェクト管理ツール Brushup の紹介
デザインチーム向けプロジェクト管理ツール Brushup の紹介
株式会社クラッチ ソーシャルメディア活用におけるROIについて
株式会社クラッチ ソーシャルメディア活用におけるROIについて
LP【シェア機能説明】201403
LP【シェア機能説明】201403
LP制作マスターが教える!商品ランディングページ活用法〜基礎知識編
LP制作マスターが教える!商品ランディングページ活用法〜基礎知識編
すばやくネットショップの 売上をあげる5つの改善ポイント
すばやくネットショップの 売上をあげる5つの改善ポイント
Lpと広告
Lpと広告
0からのウェブディレクション講座:制作・開発編 V02.01
0からのウェブディレクション講座:制作・開発編 V02.01
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
ウェブサイト制作要件を「見える化」する!中小企業のためのヒアリング術入門
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
【発表用】ウェブアナリスト養成講座「Lpoとabテスト」
0からのウェブディレクション講座:制作・開発編
0からのウェブディレクション講座:制作・開発編
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
オープンソースカンファレンス2015 Tokyo Fall スポンサーライトニングトーク
ABテスト:ユーザーメリットを具体的に伝えよう
ABテスト:ユーザーメリットを具体的に伝えよう
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
機械学習とデータ分析プロセス
機械学習とデータ分析プロセス
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
パソナテック Find Your Ability 講演資料 「ディレクターにとってのWeb業界って? 」
イケてるビジネスパーソンは iPad でスケジュールを管理する
イケてるビジネスパーソンは iPad でスケジュールを管理する
Semelhante a かんたんキレイなウェブデザイン
データベースを使おう
データベースを使おう
Shuhei Iitsuka
Git
Git
Shuhei Iitsuka
ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2
Shuhei Iitsuka
ウェブから情報をあつめる
ウェブから情報をあつめる
Shuhei Iitsuka
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
Shuhei Iitsuka
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
Roy Kim
Ricoh UCS for iPad でみる エンタープライズ アジャイル開発
Ricoh UCS for iPad でみる エンタープライズ アジャイル開発
Naoki Umehara
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
schoowebcampus
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Shohei Aoyama
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」WebSiteExpert記事
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」WebSiteExpert記事
WebSig24/7
アジャイル開発&TFS導入
アジャイル開発&TFS導入
You&I
知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》
知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》
Sadao Tokuyama
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Hideki Akiba
早く・良いものを作るための、WordPressサイト構築ワークフロー
早く・良いものを作るための、WordPressサイト構築ワークフロー
Takako Horiuchi
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編
regret raym
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Mori Kazue
IT技術者でも1から学べるビジネスモデルキャンバス入門
IT技術者でも1から学べるビジネスモデルキャンバス入門
陽一 滝川
Semelhante a かんたんキレイなウェブデザイン
(20)
データベースを使おう
データベースを使おう
Git
Git
ペルソナシナリオとプロトタイプ2
ペルソナシナリオとプロトタイプ2
ウェブから情報をあつめる
ウェブから情報をあつめる
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
第3期キックオフ説明会+勉強会
第3期キックオフ説明会+勉強会
企業向けUXデザイン導入のポイント
企業向けUXデザイン導入のポイント
Ricoh UCS for iPad でみる エンタープライズ アジャイル開発
Ricoh UCS for iPad でみる エンタープライズ アジャイル開発
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
いま、UXについて世界の最先端で起こっていることを学ぶ 先生:長谷川 敦士/井登 友一
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Prejob wordpress v2_1121
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」WebSiteExpert記事
第24回WebSig会議「100人で考える、理想的なサイトマップの形と標準書式」WebSiteExpert記事
アジャイル開発&TFS導入
アジャイル開発&TFS導入
知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》
知っ徳! 納徳!Magic Leap 《アプリ開発~Web開発の超基礎編》
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
早く・良いものを作るための、WordPressサイト構築ワークフロー
早く・良いものを作るための、WordPressサイト構築ワークフロー
CSS の歩き方
CSS の歩き方
今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
IT技術者でも1から学べるビジネスモデルキャンバス入門
IT技術者でも1から学べるビジネスモデルキャンバス入門
Mais de Shuhei Iitsuka
Online and offline handwritten chinese character recognition a comprehensive...
Online and offline handwritten chinese character recognition a comprehensive...
Shuhei Iitsuka
Inferring win–lose product network from user behavior
Inferring win–lose product network from user behavior
Shuhei Iitsuka
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
Shuhei Iitsuka
Procedural modeling using autoencoder networks
Procedural modeling using autoencoder networks
Shuhei Iitsuka
Generating sentences from a continuous space
Generating sentences from a continuous space
Shuhei Iitsuka
ウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システム
Shuhei Iitsuka
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Shuhei Iitsuka
Machine learning meets web development
Machine learning meets web development
Shuhei Iitsuka
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
Shuhei Iitsuka
リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門
Shuhei Iitsuka
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
Shuhei Iitsuka
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Shuhei Iitsuka
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
Shuhei Iitsuka
UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話
Shuhei Iitsuka
ウェブサイトで収益を得る
ウェブサイトで収益を得る
Shuhei Iitsuka
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
Shuhei Iitsuka
データベースを使おう
データベースを使おう
Shuhei Iitsuka
ペルソナシナリオとプロトタイプ
ペルソナシナリオとプロトタイプ
Shuhei Iitsuka
UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表
Shuhei Iitsuka
Webサーバ、HTML
Webサーバ、HTML
Shuhei Iitsuka
Mais de Shuhei Iitsuka
(20)
Online and offline handwritten chinese character recognition a comprehensive...
Online and offline handwritten chinese character recognition a comprehensive...
Inferring win–lose product network from user behavior
Inferring win–lose product network from user behavior
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
バリエーションの提示がもたらす長期的効果に着目したウェブサイト最適化手法 @第31回人工知能学会全国大会
Procedural modeling using autoencoder networks
Procedural modeling using autoencoder networks
Generating sentences from a continuous space
Generating sentences from a continuous space
ウェブサイト最適化のためのバリエーション自動生成システム
ウェブサイト最適化のためのバリエーション自動生成システム
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Improving the Sensitivity of Online Controlled Experiments by Utilizing Pre-E...
Machine learning meets web development
Machine learning meets web development
Python と Xpath で ウェブからデータをあつめる
Python と Xpath で ウェブからデータをあつめる
リミックスからはじめる DTM 入門
リミックスからはじめる DTM 入門
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
【DBDA 勉強会 2013 夏】Chapter 12: Bayesian Approaches to Testing a Point (‘‘Null’’...
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
Asia Trend Map: Forecasting “Cool Japan” Content Popularity on Web Data
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
【DBDA 勉強会 2013 夏】Doing Bayesian Data Analysis Chapter 4: Bayes’ Rule
UT Startup Gym で人生が変わった話
UT Startup Gym で人生が変わった話
ウェブサイトで収益を得る
ウェブサイトで収益を得る
HTML で自己紹介ページをつくる
HTML で自己紹介ページをつくる
データベースを使おう
データベースを使おう
ペルソナシナリオとプロトタイプ
ペルソナシナリオとプロトタイプ
UT Startup Gym とは @第2期製品発表
UT Startup Gym とは @第2期製品発表
Webサーバ、HTML
Webサーバ、HTML
かんたんキレイなウェブデザイン
1.
かんたんキレイな
ウェブデザイン 2013/2/13 1 UT Startup Gym
2.
UT Startup Gym
とは? アイデアをカタチにするプログラム プロジェクト 企画から実装まで スタートアップ 2013/2/13 2 UT Startup Gym
3.
スケジュール
Keywords: • プログラミング入門 ソーシャルウェブアプリケーション, API, Oct, 12 bot, HTML5 • プラニング リーンスタートアップ, ビジネスプラニン Nov, 12 • プロジェクトスタート グ, HTML, CSS, PHP, javascript • 開発開始 Dec, 12 • 冬季開発合宿 チーム結成, 企画, ディスカッション git, フレームワーク, MySQL, Apache • ウェブデザイン Jan, 13 • 週間報告会 シナリオ, ペルソナ, ワイヤフレーム, サイトマップ, DB スキーム • jQuery, 中間発表 Feb, 13 ゲーミフィケーション, 仮説検証, データマ イニング, アクセシビリティ • 作業会 Mar, 13 レスポンシブデザイン, プレゼンテーショ • リリース会 ン Apr, 13 2013/2/13 3 UT Startup Gym
4.
M
D 講師(敬称略) タイトル 要素 10 13 飯塚 かんたん Facebook アプリをつくる HTML, CSS, js 21 飯塚 かんたん Twitter アプリをつくる UNIX, vim, PHP 27 川上 かんたん アンケートフォームをつくる MySQL, MVC 11 4 AWS 高山様 サーバを立てよう AWS 10 飯塚・石村 スタートアップの心構え ビジネスプラン、リーンスタートアップ 17 飯塚・佐藤 プロダクトデザイン シナリオ、ペルソナ、ワイヤフレーム 24 お休み(飯塚@ジャカルタ) 12 1 ゆーすけべー様 ウェブサービスの企画のコツ 企画プロセス、ウェブサービス運用 8 飯塚 ウェブから情報をあつめる クローラ, XPath, 正規表現 15 プロジェクトキックオフ アンカンファレンス 22 チームで協力して開発するために git 1 13 飯塚 かんたんキレイなウェブデザイン Twitter Bootstrap, Web Fonts, LESS 19 石村 ゲーミフィケーション 26 松尾、川上 中間発表 2 2 未定 9 ぱろすけさん AV顔画像認識とその周辺 画像認識、機械学習 16 飯塚 レスポンシブデザイン Less. Twitter Bootstrap 3 作業会 4 13 プレゼンテーション 20 リリース会 2013/2/13 4 UT Startup Gym
5.
素材を作るのってけっこう面倒・・・ 2013/2/13
5 UT Startup Gym
6.
ボタンのつくりかた
• ポインタをかざすと (=hover) すこ し光って明るくなる Click Me! Click Me! • クリックすると (=action) 奥にへこ んで暗くなる Click Me! button.png • CSS スプライト: それぞれの状態の イメージを一枚の画像にまとめて、 表示位置をずらす。 2013/2/13 6 UT Startup Gym
7.
ボタンのつくりかた
#button{ display:block; float:left; width:58px; height:22px; Click Me! background:url(’button.png'); background-repeat:no-repeat; Click Me! cursor:pointer; } Click Me! #button:hover { background-position:0px -22px; /* ずらす */ } button.png #button:active { background-position:0px -44px; /* ずらす */ } 2013/2/13 7 UT Startup Gym
8.
Google の例
• Google のトップページにアクセスす ると、左の画像が読み込まれる • メリット – 読み込む画像数が減るので、サイトの読 み込みが速くなる – image ディレクトリがすっきりする • デメリット – 更新が面倒くさくなる。 – ずらし幅の計算・戦略が必要。 CSSスプライトについてあれこれ。 - Lopan.jp http://lopan.jp/css-sprites/ 2013/2/13 8 UT Startup Gym
9.
ボタンの作りかた • フル CSS
でつくる #button { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #006dcc; background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(to bottom, #0088cc, #0044cc); background-repeat: repeat-x; border-color: #0044cc #0044cc #002a80; height:40px; width:100px; } #button:hover { background-color: #0044cc; } 各ブラウザでグラデーションの #button.active { 表現方法が微妙に異なる。 background-color: #003399; } 2013/2/13 9 UT Startup Gym
10.
よく使うものは使いまわそう!
→ CSS フレームワークの登場 2013/2/13 10 UT Startup Gym
11.
AGENDA ランディングページを作りながらおぼえる • Twitter Bootstrap:
CSS フレームワーク • グリッドシステムとレスポンシブデザイン • ウェブフォントを使ってみよう • LESS でオリジナルフレームワークをつくる 2013/2/13 11 UT Startup Gym
12.
AGENDA ランディングページを作りながらおぼえる • Twitter Bootstrap:
CSS フレームワーク • グリッドシステムとレスポンシブデザイン • ウェブフォントを使ってみよう • LESS でオリジナルフレームワークをつくる 2013/2/13 12 UT Startup Gym
13.
「ランディングページ」って
なんだ? 2013/2/13 13 UT Startup Gym
14.
2013/2/13
14 UT Startup Gym
15.
2013/2/13
15 UT Startup Gym
16.
2013/2/13
16 UT Startup Gym
17.
ランディングページの基本形その1
ナビゲーションバー コンセプト イメージ コンバージョン ポイント1 ポイント2 ポイント3 2013/2/13 17 UT Startup Gym
18.
まずはつくってみよう $ mkdir 130113utgym $
cd 130113utgym $ vim index.html 2013/2/13 18 UT Startup Gym
19.
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>ハックカフェ</title> </head> <body> <div id="feature-image"> <img src="適当な画像ソース"> </div> <form action="#" method="post" id="conversion"> <div id="form-title">Coming Soon...</div> <div> <p>現在、ハックカフェは開発中です。リリース情報を受け取りたい方は、メールアドレスを登録 してください。</p> <input type="input" name="email"> </div> <div> <input type="submit" value="登録する"> </div> </form> </body> </html> 2013/2/13 19 UT Startup Gym
20.
2013/2/13
20 UT Startup Gym
21.
AGENDA ランディングページを作りながらおぼえる • Twitter Bootstrap:
CSS フレームワーク • グリッドシステムとレスポンシブデザイン • ウェブフォントを使ってみよう • LESS でオリジナルフレームワークをつくる 2013/2/13 21 UT Startup Gym
22.
Twitter Bootstrap
http://twitter.github.com/bootstrap/ • CSS フレームワークといえばこれ • Twitter 純正 • LESS を使うとカスタマイズが容易 2013/2/13 22 UT Startup Gym
23.
2013/2/13
23 UT Startup Gym
24.
インストール 解凍したものを、index.html と同じディレクトリに配置 $ unzip
~/Downloads/bootstrap.zip CSS ファイルへのパスを追加 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ハックカフェ</title> <link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"> </head> ... 2013/2/13 24 UT Startup Gym
25.
ナビゲーションバーの追加 ... <body>
<div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <a class="brand" href="#">ハックカフェ</a> <ul class="nav"> <li class="active"><a href="#">サービス</a></li> <li><a href="#">特徴</a></li> <li><a href="#">ブログ</a></li> </ul> </div> </div> <div class="container"> <div class="feature-image"> ... </form> </div> </body> 2013/2/13 25 UT Startup Gym
26.
AGENDA ランディングページを作りながらおぼえる • Twitter Bootstrap:
CSS フレームワーク • グリッドシステムとレスポンシブデザイン • ウェブフォントを使ってみよう • LESS でオリジナルフレームワークをつくる 2013/2/13 26 UT Startup Gym
27.
レスポンシブデザイン • 背景: デバイスの多様化
– それぞれにアクセシビリティを提供する • (広義)同一のURLで、それぞれのデバイスに 適したコンテンツを提供すること。 • (狭義)デバイスの画面幅にあわせて レイアウトを変化させること。 2013/2/13 27 UT Startup Gym
28.
グリッドシステム
http://twitter.github.com/bootstrap/scaffolding.html#gridSystem • ウェブサイトのレイアウトを構築する手法 • 比率を設定することで、リソースを配置する • 画面幅に併せて幅が変化するため、かんたんに レスポンシブなサイトを構築することができる 2013/2/13 28 UT Startup Gym
29.
グリッドシステムの導入 ... <div class="container">
<div class="row"> <div class="feature-image span6"> <img src="http://img.allabout.co.jp/gm/article/219411/kojimachi_cafe_02.jpg"> </div> <form action="#" method="post" id="conversion" class="span6"> <div> ... </div> </form> </div> ... 2013/2/13 29 UT Startup Gym
30.
レスポンシブ対応+
オリジナルのCSSファイルの作成 index.html <head> <meta charset="utf-8"> <title>ハックカフェ</title> <link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="bootstrap/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet"> <link href="base.css" type="text/css" rel="stylesheet"> </head> base.css .container { margin-top:70px; } 2013/2/13 30 UT Startup Gym
31.
Twitter Bootstrap のパーツ:
サムネイル <div class="row"> .... </div> <div class="row"> <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> <img src="http://www.umezono-kyoto.com/cafe/img/galley06.jpg"> <h3>空き状況までわかる!</h3> <p>カフェの空き状況までわかるので、足を運んでから帰るなんてことにはなりませ ん</p> </div> </li> </ul> </div> 2013/2/13 31 UT Startup Gym
32.
2013/2/13
32 UT Startup Gym
33.
AGENDA ランディングページを作りながらおぼえる • Twitter Bootstrap:
CSS フレームワーク • グリッドシステムとレスポンシブデザイン • ウェブフォントを使ってみよう • LESS でオリジナルフレームワークをつくる 2013/2/13 33 UT Startup Gym
34.
ウェブフォント • 文字のレンダリングはユーザの端末にインス
トールされたフォントによって行われる。 →端末にインストールされていないフォントは 使うことができない。 • ウェブサイトとともにフォントもユーザの端末 にダウンロードしてもらい、思い通りのフォン トをデザインに用いる技術。 2013/2/13 34 UT Startup Gym
35.
Google Web Fonts
http://www.google.com/webfonts • 無料で使用可能 – ただし、ライセンスには注意 • 英字フォントを多数収録 2013/2/13 35 UT Startup Gym
36.
2013/2/13
36 UT Startup Gym
37.
2013/2/13
37 UT Startup Gym
38.
レスポンシブ対応+
オリジナルのCSSファイルの作成 index.html <head> ... <link href="base.css" type="text/css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Just+Me+Again+Down+Here' rel='stylesheet' type='text/css'> </head> base.css #form-title { font-family: 'Just Me Again Down Here', cursive; font-size:42px; margin-bottom:20px; } 2013/2/13 38 UT Startup Gym
39.
2013/2/13
39 UT Startup Gym
40.
AGENDA ランディングページを作りながらおぼえる • Twitter Bootstrap:
CSS フレームワーク • グリッドシステムとレスポンシブデザイン • ウェブフォントを使ってみよう • LESS でオリジナルフレームワークをつくる 2013/2/13 40 UT Startup Gym
41.
Bootstrapってさ・・・ • 残念な「いかにも Bootstrap」デザイン •
bootstrap.css をいじるのは難しい → LESS を使えばカスタマイズ可能! 2013/2/13 41 UT Startup Gym
42.
イメージ
LESS コンパイル CSS 変数ライブラリ 基本的にここだけを いじれば良い ナビゲーションバー bootstrap.css 参照 ボタン サムネイル 2013/2/13 42 UT Startup Gym
43.
LESS 版 Bootstrap
のダウンロード 2013/2/13 43 UT Startup Gym
44.
LESS 版 Bootstrap
のダウンロード 2013/2/13 44 UT Startup Gym
45.
LESS コンパイラのダウンロード 2013/2/13
45 UT Startup Gym
46.
インストール LESS 版 Bootstrap
を解凍したものを、index.html と同じディレクトリに配置 $ unzip ~/Downloads/bootstrap-master.zip less.js を index.html と同じディレクトリに配置 $ mv ~/Downloads/less.js ~/130113utgym/ index.html にパスを追記 ※bootstrap.cssとbootstrap-responsive.css は除去 <head> ... <link rel="stylesheet/less" href="bootstrap-master/less/bootstrap.less"> <link rel="stylesheet/less" href="bootstrap-master/less/responsive.less"> <script type="text/javascript" src=“less.js"></script> </head> 2013/2/13 46 UT Startup Gym
47.
variables.less の編集 変数が集まっているクラスファイル variables.less
を編集 $ vim bootstrap-master/less/variables.less ナビゲーションバーの背景色を変更する。 ... @navbarBackgroundHighlight:#804000; ... 2013/2/13 47 UT Startup Gym
48.
2013/2/13
48 UT Startup Gym
49.
AGENDA ランディングページを作りながらおぼえる • Twitter Bootstrap:
CSS フレームワーク • グリッドシステムとレスポンシブデザイン • ウェブフォントを使ってみよう • LESS でオリジナルフレームワークをつくる 2013/2/13 49 UT Startup Gym
50.
これからの学習 • CSS の勉強
– margin と padding – position: absolute, relative, fixed ... – display: block, inline, inlune-block ... • ウェブデザインの勉強 – Information Architecture (IA) – ユーザーインタフェース (UI) • レスポンシブデザインの勉強 2013/2/13 50 UT Startup Gym
51.
インタフェースデザインの心理学
ウェブやアプリに新たな視点をもたらす100の指針 2013/2/13 51 UT Startup Gym
52.
レスポンシブ・ウェブデザイン
標準ガイド 2013/2/13 52 UT Startup Gym
Baixar agora