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

3,193 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

×