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

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

2013/2/13 1 UT Startup Gym

UT Startup Gym とは？

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

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


スケジュール
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


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 リリース会

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


ボタンのつくりかた

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

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

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


ボタンのつくりかた
#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; /* ずらす */
}


Google の例

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

• メリット
– 読み込む画像数が減るので、サイトの読
み込みが速くなる
– image ディレクトリがすっきりする

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

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


ボタンの作りかた
• フル 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;
}


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


AGENDA

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


AGENDA



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


ランディングページの基本形その１
ナビゲーションバー

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

ポイント１ポイント２ポイント３


まずはつくってみよう
$ mkdir 130113utgym
$ cd 130113utgym
$ vim index.html


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


AGENDA



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

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


インストール

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

$ unzip ~/Downloads/bootstrap.zip

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

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


ナビゲーションバーの追加
...
<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



レスポンシブデザイン

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

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

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


グリッドシステム
http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

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

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

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


グリッドシステムの導入
...
<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ファイルの作成
index.html
<head>
<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;
}


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>


AGENDA



ウェブフォント
• 文字のレンダリングはユーザの端末にインス
トールされたフォントによって行われる。
→端末にインストールされていないフォントは
使うことができない。

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


Google Web Fonts
http://www.google.com/webfonts

• 無料で使用可能
– ただし、ライセンスには注意
• 英字フォントを多数収録


レスポンシブ対応＋
オリジナルの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;
}


AGENDA



Bootstrapってさ・・・

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


イメージ
LESS コンパイル CSS

変数ライブラリ
基本的にここだけを
いじれば良い
ナビゲーションバー
bootstrap.css
参照
ボタン

サムネイル


LESS 版 Bootstrap のダウンロード


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


インストール
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>

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

$ vim bootstrap-master/less/variables.less

ナビゲーションバーの背景色を変更する。
...
@navbarBackgroundHighlight:#804000;
...


AGENDA



これからの学習
• CSS の勉強
– margin と padding
– position: absolute, relative, fixed ...
– display: block, inline, inlune-block ...
• ウェブデザインの勉強
– Information Architecture (IA)
– ユーザーインタフェース (UI)
• レスポンシブデザインの勉強


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


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


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

More Related Content

Viewers also liked

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

More from Shuhei Iitsuka

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