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

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

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. ランディングページの基本形その１ナビゲーションバーコンセプトイメージコンバージョンポイント１ポイント２ポイント３ 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

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

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

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

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

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

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

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

Recommended

More Related Content

Viewers also liked

Viewers also liked(19)

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

Similar to かんたんキレイなウェブデザイン(20)

More from Shuhei Iitsuka

More from Shuhei Iitsuka(20)

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