Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

かんたんキレイなウェブデザイン

3,303 views

Published on

かんたんキレイなウェブデザイン

  1. 1. かんたんキレイな ウェブデザイン2013/2/13 1 UT Startup Gym
  2. 2. UT Startup Gym とは? アイデアをカタチにするプログラム プロジェクト 企画から実装まで スタートアップ2013/2/13 2 UT Startup Gym
  3. 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, 132013/2/13 3 UT Startup Gym
  4. 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. 5. 素材を作るのってけっこう面倒・・・2013/2/13 5 UT Startup Gym
  6. 6. ボタンのつくりかた • ポインタをかざすと (=hover) すこ し光って明るくなる Click Me! Click Me! • クリックすると (=action) 奥にへこ んで暗くなる Click Me! button.png • CSS スプライト: それぞれの状態の イメージを一枚の画像にまとめて、 表示位置をずらす。2013/2/13 6 UT Startup Gym
  7. 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. 8. Google の例 • Google のトップページにアクセスす ると、左の画像が読み込まれる • メリット – 読み込む画像数が減るので、サイトの読 み込みが速くなる – image ディレクトリがすっきりする • デメリット – 更新が面倒くさくなる。 – ずらし幅の計算・戦略が必要。 CSSスプライトについてあれこれ。 - Lopan.jp http://lopan.jp/css-sprites/2013/2/13 8 UT Startup Gym
  9. 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. 10. よく使うものは使いまわそう! → CSS フレームワークの登場2013/2/13 10 UT Startup Gym
  11. 11. AGENDAランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる2013/2/13 11 UT Startup Gym
  12. 12. AGENDAランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる2013/2/13 12 UT Startup Gym
  13. 13. 「ランディングページ」って なんだ?2013/2/13 13 UT Startup Gym
  14. 14. 2013/2/13 14 UT Startup Gym
  15. 15. 2013/2/13 15 UT Startup Gym
  16. 16. 2013/2/13 16 UT Startup Gym
  17. 17. ランディングページの基本形その1 ナビゲーションバー コンセプト イメージ コンバージョン ポイント1 ポイント2 ポイント32013/2/13 17 UT Startup Gym
  18. 18. まずはつくってみよう$ mkdir 130113utgym$ cd 130113utgym$ vim index.html 2013/2/13 18 UT Startup Gym
  19. 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. 20. 2013/2/13 20 UT Startup Gym
  21. 21. AGENDAランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる2013/2/13 21 UT Startup Gym
  22. 22. Twitter Bootstrap http://twitter.github.com/bootstrap/• CSS フレームワークといえばこれ• Twitter 純正• LESS を使うとカスタマイズが容易2013/2/13 22 UT Startup Gym
  23. 23. 2013/2/13 23 UT Startup Gym
  24. 24. インストール解凍したものを、index.html と同じディレクトリに配置$ unzip ~/Downloads/bootstrap.zipCSS ファイルへのパスを追加<!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. 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. 26. AGENDAランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる2013/2/13 26 UT Startup Gym
  27. 27. レスポンシブデザイン• 背景: デバイスの多様化 – それぞれにアクセシビリティを提供する• (広義)同一のURLで、それぞれのデバイスに 適したコンテンツを提供すること。• (狭義)デバイスの画面幅にあわせて レイアウトを変化させること。2013/2/13 27 UT Startup Gym
  28. 28. グリッドシステム http://twitter.github.com/bootstrap/scaffolding.html#gridSystem• ウェブサイトのレイアウトを構築する手法• 比率を設定することで、リソースを配置する• 画面幅に併せて幅が変化するため、かんたんに レスポンシブなサイトを構築することができる2013/2/13 28 UT Startup Gym
  29. 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. 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. 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. 32. 2013/2/13 32 UT Startup Gym
  33. 33. AGENDAランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる2013/2/13 33 UT Startup Gym
  34. 34. ウェブフォント• 文字のレンダリングはユーザの端末にインス トールされたフォントによって行われる。 →端末にインストールされていないフォントは 使うことができない。• ウェブサイトとともにフォントもユーザの端末 にダウンロードしてもらい、思い通りのフォン トをデザインに用いる技術。2013/2/13 34 UT Startup Gym
  35. 35. Google Web Fonts http://www.google.com/webfonts• 無料で使用可能 – ただし、ライセンスには注意• 英字フォントを多数収録2013/2/13 35 UT Startup Gym
  36. 36. 2013/2/13 36 UT Startup Gym
  37. 37. 2013/2/13 37 UT Startup Gym
  38. 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+Hererel=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. 39. 2013/2/13 39 UT Startup Gym
  40. 40. AGENDAランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる2013/2/13 40 UT Startup Gym
  41. 41. Bootstrapってさ・・・• 残念な「いかにも Bootstrap」デザイン• bootstrap.css をいじるのは難しい→ LESS を使えばカスタマイズ可能!2013/2/13 41 UT Startup Gym
  42. 42. イメージ LESS コンパイル CSS 変数ライブラリ 基本的にここだけを いじれば良い ナビゲーションバー bootstrap.css参照 ボタン サムネイル2013/2/13 42 UT Startup Gym
  43. 43. LESS 版 Bootstrap のダウンロード2013/2/13 43 UT Startup Gym
  44. 44. LESS 版 Bootstrap のダウンロード2013/2/13 44 UT Startup Gym
  45. 45. LESS コンパイラのダウンロード2013/2/13 45 UT Startup Gym
  46. 46. インストールLESS 版 Bootstrap を解凍したものを、index.html と同じディレクトリに配置$ unzip ~/Downloads/bootstrap-master.zipless.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. 47. variables.less の編集変数が集まっているクラスファイル variables.less を編集$ vim bootstrap-master/less/variables.lessナビゲーションバーの背景色を変更する。...@navbarBackgroundHighlight:#804000;... 2013/2/13 47 UT Startup Gym
  48. 48. 2013/2/13 48 UT Startup Gym
  49. 49. AGENDAランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる2013/2/13 49 UT Startup Gym
  50. 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. 51. インタフェースデザインの心理学 ウェブやアプリに新たな視点をもたらす100の指針2013/2/13 51 UT Startup Gym
  52. 52. レスポンシブ・ウェブデザイン 標準ガイド2013/2/13 52 UT Startup Gym

×