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

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

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

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


よく使うものは使いまわそう！→ 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

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


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

インストール


$ 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 ファイルへのパスを追加

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


...<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 ファイルの作成


<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 のパーツ : サムネイル


<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 ファイルの作成


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

AGENDA



Bootstrap ってさ・・・

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


イメージ


変数ライブラリ

ナビゲーションバー

ボタン

サムネイル

参照

LESS コンパイル CSS

bootstrap.css

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

LESS 版 Bootstrap のダウンロード


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


インストール


$ 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 の編集


$ vim bootstrap-master/less/variables.less

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

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

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

AGENDA



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

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

Documents