web制作勉強会 #1

Web Creation Seminar

Web Designing Talk


今日はぬるく行こうかなーとか思っています。

本日は Yamamoto’s Boot Camp へようこそ。


なんて言うと思ったか！！

3


Webデザイナーに求められる知識

HTML, CSS, 画像編集, JavaScript, jQuery, XML, 色彩理論, LL, データベース, SEO, SMO, EFO, コピーライティング, テキストライティング, イラストレーション, Flash, ディレクション能力, プロジェクトマネジメント, Logo作成, Typography, サーバ管理, PHP, Perl, Smart Phone, フォトレタッチ, SCSS, セキュリティ, UI, UX, 個人情報保護法……そして

Webに関係する全て。

多すぎ。

優秀な

4


全体を一気に駆け抜けます。

5


本稿のおおまかな流れ

• Webデザイナーの分類

• Web制作の流れ

• ズルいデザインの技

• HTMLの基礎のキ

• CSSの基礎のキ

てんこ盛り。

6


Webデザイナーの分類

Webデザイナー(真)色彩とレイアウトが与える印象を理論そって考え、全体の構成を考える。

多くの場合、クライアントからのヒアリングも担当し、場合によっては絵も描く。

プログラマー作成されたデザインを実際に動くようする。表示速度の高速化や、ウェブサイトに動きを与えたりもする。

サーバの管理も兼任することが多い。

Webマーケッターコピーライティングや、サイトライティングを得意とする。SEOやSMOの情報を追い、各Webマーケティング

に関しての施策を打つ。

ディレクター関係各所の調整と、プロジェクトマネジメントを主に受け持つ。コンセプトメイキングに関わることも多い。

このポジションの人がいる場合、この人がプロジェクトリーダーの場合がほとんど。


でも、お互いのコミュニケーションのために全部知ろう。……兼任も多いし。

8


Web制作の流れ

9


Web制作の流れ

カイゼンを繰り返す。

10

サイトは「作れば終わり」では無い。


Web制作の流れ

ヒアリ

ング

サイト

マップ

スケ

ジュー

ル作成

デザイ

ン案実装公開

11


Web制作の流れ

最初のサイトマップの作成は大切。

規模感を見る。

見積りを誤るとマジ大変。死ぬ。

12


Web制作の流れ

ザクザクとラフデザインを行い

13


Web制作の流れ

こんな感じの画像（カンプ）を作って

14


Web制作の流れ

HTMLを書く。

15


ズルいデザインの技

私は本職ではないので、

簡単にそれっぽく魅せる技

を、紹介します。

16



• 色は3色

• フォントは2種類（最大4種）

• 見出しと本文（英字と日本語で変更は可）

17

鉄則



カラーバランスベースカラー　　　下地に使う色。明るい色が無難

メインカラー　　　コンセプトカラー。若干暗めが良い。

アクセントカラー　メインカラーから離れた色だと鮮やか

ベースカラー

70%

メインカラー

25%

アクセント

18



3色じゃたりねーよボケが

19



メインかアクセントを分割。(ベースでも可)

追加色は色相かトーンだけを変える。

ベースカラーメイン

12.5%

メイン

12.5%

アクセント

20



原則を破ると往々にしてバランス崩壊。

ベースカラーメイン1 メイン2

アクセント

21

(色が)うるせー。



彩度は意識して抑える。

22

期せずしてパキパキに。



HUE / 360http://hue360.herokuapp.com/

23

http://hue360.herokuapp.com/

http://hue360.herokuapp.com/


制作パートに入るぞ！！

24


HTML基本のキ

WebページはHTMLのルールに従って書かれ

たテキストファイル。

25

こんなの


HTML基本のキ

目標

ググったりしながらHTMLが書けるレベル

HTMLタグリファレンスをブクマしよう。

http://www.htmq.com/html/index.shtml

26


HTML基本のキ

文章を「タグ」でマークする。

タグは半角英数字。

27

<a href=”http://www.yahoo.co.jp/”>ヤフーへのリンク</a>

開始タグ終了タグ


HTML基本のキ

HTMLタグは、とりあえず11個でいい。

タグの意味は別紙参照

html spanhead brtitle alink imgbody scriptdiv

28


HTML基本のキ

簡単なHTMLの例。

29

index.htmlというファイル名で保存

<!DOCTYPE html><html lang=”ja”><head>

<title>Sample Web Site</title></head><body>

<div>ここに好きな文章をとりあえず書く。

</div></body></html>


HTML基本のキ

飾り気ゼロじゃねーか。

30


そこでCSSだ！！

31


CSS基本のキ

HTMLでマークしたところを飾る。

背景色を変えたり、文字色を変えたり。

HTMLで名前をつけてCSSで装飾。

32


CSS基本のキ

こっちは演出に合わせて色々と

詳しくは別紙参照

33

background font-sizemargin borderpadding font-weightwidth floatheight clearcolor text-align


CSS基本のキ

名前の付け方は2種類

34

<span id=”most-important” class=”keyword”>ああああ</span>

id指定

class指定


CSS基本のキ

id指定

1つのhtmlファイルに1つだけの要素の名前

class指定

1つのhtmlファイルに複数個あってもいい要素の名前

35


CSS基本のキ

どのタグをどんな見せ方をするかを書く。

36

div { width: 300px; }

#most-important { font-weight: bold; }

.keyword { color: #ff0000; }

divタグ全てに適用

指定idに適用

指定classに適用

style.cssというファイル名でhtmlと同じフォルダに保存※白角丸枠部分をセレクタと言う


CSS基本のキ

CSSの指定を書き足す。

37

<!DOCTYPE html><html lang=”ja”><head>

<title>Sample Web Site</title><link href=”./style.css” rel=”stylesheet” type=”text/css”>

</head><body>

<div>デザインの<span class=”keyword”>大原則</span>は<span class=”keyword” id=”most-important”>機能性</span>だと思う。

</div></body></html>

↑この行が、style.cssをこのhtmlに適用することを意味しています。


では実践タイム。

38


ステマ（ではない）タイム

HTML/CSS編集には

「CrescentEve」がオススメ

39

http://www.kashim.com/eve/




ステマ（ではない）タイム

本日お越しの皆様には特別に

「練習用サーバ」を用意致しました。

なので後で公開手順もやります。

40


これから何を学ぶか。

Webデザイナー志向の人は・・・

• 色彩理論(色相環が、色空間が云々)

• HTML

• CSS

• JavaScript

41



Webマーケッター志向の人は・・・

• SEO

• EFO(Entry Form Optimization)

• コピーライティング

• テキストライティング

42



プログラマ志向の人は・・・

• HTML

• JavaScript(jQuery)

• PHPとか、なにかプログラミング言語

• SQL (データベース)

43



デザイナーと一緒に仕事したい人は・・・

• ディレクション

• プロジェクトマネジメント

• 広く浅く専門用語

• 寛大な心。（転んでも泣かない）

44


ボクと契約して

Webデザイナーになってよ！