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

Post on 31-May-2015

2.520 Views

Category:

Documents

1 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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

04/12/2023 UT Startup Gym1

UT Startup Gym

UT Startup Gym とは?

アイデアをカタチにするプログラム

04/12/2023 2

プロジェクト企画から実装までスタートアップ

UT Startup Gym

スケジュール

04/12/2023 3

Oct, 12

• プログラミング入門

Nov,

12

• プラニング• プロジェクトスタート

Dec,

12

• 開発開始• 冬季開発合宿

Jan, 13

• ウェブデザイン• 週間報告会

Feb, 13

• jQuery, 中間発表

Mar,

13

• 作業会

Apr, 13

• リリース会

ソーシャルウェブアプリケーション , API,bot, HTML5

Keywords:

リーンスタートアップ , ビジネスプラニング , HTML, CSS, PHP, javascript

チーム結成 , 企画 , ディスカッションgit, フレームワーク , MySQL, Apache

シナリオ , ペルソナ , ワイヤフレーム , サイトマップ , DB スキーム

ゲーミフィケーション , 仮説検証 , データマイニング , アクセシビリティ

レスポンシブデザイン , プレゼンテーション

UT Startup Gym04/12/2023 4

M D 講師(敬称略) タイトル 要素

10 13飯塚 かんたん Facebook アプリをつくる HTML, CSS, js

  21飯塚 かんたん Twitter アプリをつくる UNIX, vim, PHP

  27 川上 かんたん アンケートフォームをつくる MySQL, MVC

11 4AWS 高山様 サーバを立てよう 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  リリース会  

UT Startup Gym04/12/2023 5

素材を作るのってけっこう面倒・・・

UT Startup Gym

ボタンのつくりかた

04/12/2023 6

Click Me!

Click Me!

Click Me!

button.png

• ポインタをかざすと (=hover) すこし光って明るくなる

• クリックすると (=action) 奥にへこんで暗くなる

• CSS スプライト : それぞれの状態のイメージを一枚の画像にまとめて、表示位置をずらす。

UT Startup Gym

ボタンのつくりかた

04/12/2023 7

Click Me!

Click Me!

Click Me!

button.png

#button{ display:block; float:left; width:58px; height:22px; background:url(’button.png'); background-repeat:no-repeat; cursor:pointer;}#button:hover { background-position:0px -22px; /* ずらす */}#button:active { background-position:0px -44px; /* ずらす */}

UT Startup Gym

Google の例

• Google のトップページにアクセスすると、左の画像が読み込まれる

• メリット– 読み込む画像数が減るので、サイトの読

み込みが速くなる– image ディレクトリがすっきりする

• デメリット– 更新が面倒くさくなる。– ずらし幅の計算・戦略が必要。

04/12/2023 8

CSS スプライトについてあれこれ。 - Lopan.jp http://lopan.jp/css-sprites/

UT Startup Gym

ボタンの作りかた• フル CSS でつくる

04/12/2023 9

#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;}

各ブラウザでグラデーションの表現方法が微妙に異なる。

04/12/2023 UT Startup Gym10

よく使うものは使いまわそう!→ CSS フレームワークの登場

AGENDA

ランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる

04/12/2023 UT Startup Gym11

AGENDA

ランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる

04/12/2023 UT Startup Gym12

04/12/2023 UT Startup Gym13

「ランディングページ」ってなんだ?

04/12/2023 UT Startup Gym14

04/12/2023 UT Startup Gym15

04/12/2023 UT Startup Gym16

ランディングページの基本形その1

04/12/2023 UT Startup Gym17

ナビゲーションバー

コンセプトイメージ コンバージョン

ポイント1 ポイント2 ポイント3

まずはつくってみよう

04/12/2023 UT Startup Gym18

$ mkdir 130113utgym$ cd 130113utgym$ vim index.html

04/12/2023 UT Startup Gym19

<!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>

04/12/2023 UT Startup Gym20

AGENDA

ランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる

04/12/2023 UT Startup Gym21

Twitter Bootstrap

• CSS フレームワークといえばこれ• Twitter 純正• LESS を使うとカスタマイズが容易

04/12/2023 UT Startup Gym22

http://twitter.github.com/bootstrap/

04/12/2023 UT Startup Gym23

インストール

04/12/2023 UT Startup Gym24

$ unzip ~/Downloads/bootstrap.zip

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> ハックカフェ </title>

<link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"> </head>...

解凍したものを、 index.html と同じディレクトリに配置

CSS ファイルへのパスを追加

ナビゲーションバーの追加

04/12/2023 UT Startup Gym25

...<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>

AGENDA

ランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる

04/12/2023 UT Startup Gym26

レスポンシブデザイン

• 背景 : デバイスの多様化– それぞれにアクセシビリティを提供する

• (広義)同一の URL で、それぞれのデバイスに適したコンテンツを提供すること。

• (狭義)デバイスの画面幅にあわせてレイアウトを変化させること。

04/12/2023 UT Startup Gym27

グリッドシステム

• ウェブサイトのレイアウトを構築する手法

• 比率を設定することで、リソースを配置する

• 画面幅に併せて幅が変化するため、かんたんにレスポンシブなサイトを構築することができる

04/12/2023 UT Startup Gym28

http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

グリッドシステムの導入

04/12/2023 UT Startup Gym29

...<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>...

レスポンシブ対応+オリジナルの CSS ファイルの作成

04/12/2023 UT Startup Gym30

<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>

index.html

base.css

.container { margin-top:70px;}

Twitter Bootstrap のパーツ : サムネイル

04/12/2023 UT Startup Gym31

<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>

04/12/2023 UT Startup Gym32

AGENDA

ランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる

04/12/2023 UT Startup Gym33

ウェブフォント• 文字のレンダリングはユーザの端末にインス

トールされたフォントによって行われる。→端末にインストールされていないフォントは使うことができない。

• ウェブサイトとともにフォントもユーザの端末にダウンロードしてもらい、思い通りのフォントをデザインに用いる技術。

04/12/2023 UT Startup Gym34

Google Web Fonts

• 無料で使用可能– ただし、ライセンスには注意

• 英字フォントを多数収録

04/12/2023 UT Startup Gym35

http://www.google.com/webfonts

04/12/2023 UT Startup Gym36

04/12/2023 UT Startup Gym37

レスポンシブ対応+オリジナルの CSS ファイルの作成

04/12/2023 UT Startup Gym38

<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>

index.html

base.css

#form-title { font-family: 'Just Me Again Down Here', cursive; font-size:42px; margin-bottom:20px;}

04/12/2023 UT Startup Gym39

AGENDA

ランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる

04/12/2023 UT Startup Gym40

Bootstrap ってさ・・・

• 残念な「いかにも Bootstrap」デザイン• bootstrap.css をいじるのは難しい→ LESS を使えばカスタマイズ可能!

04/12/2023 UT Startup Gym41

イメージ

04/12/2023 UT Startup Gym42

変数ライブラリ

ナビゲーションバー

ボタン

サムネイル

参照

LESS コンパイル CSS

bootstrap.css

基本的にここだけをいじれば良い

LESS 版 Bootstrap のダウンロード

04/12/2023 UT Startup Gym43

LESS 版 Bootstrap のダウンロード

04/12/2023 UT Startup Gym44

LESS コンパイラのダウンロード

04/12/2023 UT Startup Gym45

インストール

04/12/2023 UT Startup Gym46

$ unzip ~/Downloads/bootstrap-master.zip

$ mv ~/Downloads/less.js ~/130113utgym/

LESS 版 Bootstrap を解凍したものを、 index.html と同じディレクトリに配置

less.js を index.html と同じディレクトリに配置

<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>

index.html にパスを追記 ※ bootstrap.css と bootstrap-responsive.css は除去

variables.less の編集

04/12/2023 UT Startup Gym47

$ vim bootstrap-master/less/variables.less

...@navbarBackgroundHighlight:#804000;...

変数が集まっているクラスファイル variables.less を編集

ナビゲーションバーの背景色を変更する。

04/12/2023 UT Startup Gym48

AGENDA

ランディングページを作りながらおぼえる• Twitter Bootstrap: CSS フレームワーク• グリッドシステムとレスポンシブデザイン• ウェブフォントを使ってみよう• LESS でオリジナルフレームワークをつくる

04/12/2023 UT Startup Gym49

UT Startup Gym

これからの学習• CSS の勉強

– margin と padding– position: absolute, relative, fixed ...– display: block, inline, inlune-block ...

• ウェブデザインの勉強– Information Architecture (IA)– ユーザーインタフェース (UI)

• レスポンシブデザインの勉強

04/12/2023 50

UT Startup Gym

インタフェースデザインの心理学ウェブやアプリに新たな視点をもたらす 100 の指針

04/12/2023 51

UT Startup Gym

レスポンシブ・ウェブデザイン標準ガイド

04/12/2023 52

top related