View
1.175
Download
1
Category
Preview:
DESCRIPTION
Web制作勉強会第一回の資料 配布資料（PDF） http://goo.gl/FJPaX
Citation preview
Web Creation Seminar
Web Designing Talk
Web Creation Seminar
今日はぬるく行こうかなーとか思っています。
本日は Yamamoto’s Boot Camp へ ようこそ。
Web Creation Seminar
なんて言うと思ったか！！
3
Web Creation Seminar
Webデザイナーに求められる知識
HTML, CSS, 画像編集, JavaScript, jQuery, XML, 色彩理論, LL, データベース, SEO, SMO, EFO, コピーライティング, テキストライティング, イラストレーション, Flash, ディレクション能力, プロジェクトマネジメント, Logo作成, Typography, サーバ管理, PHP, Perl, Smart Phone, フォトレタッチ, SCSS, セキュリティ, UI, UX, 個人情報保護法……そして
Webに関係する全て。
多すぎ。
優秀な
4
Web Creation Seminar
全体を一気に駆け抜けます。
5
Web Creation Seminar
本稿のおおまかな流れ
• Webデザイナーの分類
• Web制作の流れ
• ズルいデザインの技
• HTMLの基礎のキ
• CSSの基礎のキ
てんこ盛り。
6
Web Creation Seminar
Webデザイナーの分類
Webデザイナー(真)色彩とレイアウトが与える印象を理論そって考え、全体の構成を考える。
多くの場合、クライアントからのヒアリングも担当し、場合によっては絵も描く。
プログラマー作成されたデザインを実際に動くようする。表示速度の高速化や、ウェブサイトに動きを与えたりもする。
サーバの管理も兼任することが多い。
Webマーケッターコピーライティングや、サイトライティングを得意とする。SEOやSMOの情報を追い、各Webマーケティング
に関しての施策を打つ。
ディレクター関係各所の調整と、プロジェクトマネジメントを主に受け持つ。コンセプトメイキングに関わることも多い。
このポジションの人がいる場合、この人がプロジェクトリーダーの場合がほとんど。
Web Creation Seminar
でも、お互いのコミュニケーションのために全部知ろう。……兼任も多いし。
8
Web Creation Seminar
Web制作の流れ
9
Web Creation Seminar
Web制作の流れ
カイゼンを繰り返す。
10
サイトは「作れば終わり」では無い。
Web Creation Seminar
Web制作の流れ
ヒアリ
ング
サイト
マップ
スケ
ジュー
ル作成
デザイ
ン案実装 公開
11
Web Creation Seminar
Web制作の流れ
最初のサイトマップの作成は大切。
規模感を見る。
見積りを誤るとマジ大変。死ぬ。
12
Web Creation Seminar
Web制作の流れ
ザクザクとラフデザインを行い
13
Web Creation Seminar
Web制作の流れ
こんな感じの画像（カンプ）を作って
14
Web Creation Seminar
Web制作の流れ
HTMLを書く。
15
Web Creation Seminar
ズルいデザインの技
私は本職ではないので、
簡単にそれっぽく魅せる技
を、紹介します。
16
Web Creation Seminar
ズルいデザインの技
• 色は3色
• フォントは2種類（最大4種）
• 見出しと本文（英字と日本語で変更は可）
17
鉄則
Web Creation Seminar
ズルいデザインの技
カラーバランスベースカラー 下地に使う色。明るい色が無難
メインカラー コンセプトカラー。若干暗めが良い。
アクセントカラー メインカラーから離れた色だと鮮やか
ベースカラー
70%
メインカラー
25%
アクセント
18
Web Creation Seminar
ズルいデザインの技
3色じゃたりねーよボケが
19
Web Creation Seminar
ズルいデザインの技
メインかアクセントを分割。(ベースでも可)
追加色は色相かトーンだけを変える。
ベースカラーメイン
12.5%
メイン
12.5%
アクセント
20
Web Creation Seminar
ズルいデザインの技
原則を破ると往々にしてバランス崩壊。
ベースカラー メイン1 メイン2
アクセント
21
(色が)うるせー。
Web Creation Seminar
ズルいデザインの技
彩度は意識して抑える。
22
期せずしてパキパキに。
Web Creation Seminar
ズルいデザインの技
HUE / 360http://hue360.herokuapp.com/
23
Web Creation Seminar
制作パートに入るぞ！！
24
Web Creation Seminar
HTML基本のキ
WebページはHTMLのルールに従って書かれ
たテキストファイル。
25
こんなの
Web Creation Seminar
HTML基本のキ
目標
ググったりしながらHTMLが書けるレベル
HTMLタグリファレンスをブクマしよう。
http://www.htmq.com/html/index.shtml
26
Web Creation Seminar
HTML基本のキ
文章を「タグ」でマークする。
タグは半角英数字。
27
<a href=”http://www.yahoo.co.jp/”>ヤフーへのリンク</a>
開始タグ 終了タグ
Web Creation Seminar
HTML基本のキ
HTMLタグは、とりあえず11個でいい。
タグの意味は別紙参照
html spanhead brtitle alink imgbody scriptdiv
28
Web Creation Seminar
HTML基本のキ
簡単なHTMLの例。
29
index.htmlというファイル名で保存
<!DOCTYPE html><html lang=”ja”><head>
<title>Sample Web Site</title></head><body>
<div>ここに好きな文章をとりあえず書く。
</div></body></html>
Web Creation Seminar
HTML基本のキ
飾り気ゼロじゃねーか。
30
Web Creation Seminar
そこでCSSだ！！
31
Web Creation Seminar
CSS基本のキ
HTMLでマークしたところを飾る。
背景色を変えたり、文字色を変えたり。
HTMLで名前をつけてCSSで装飾。
32
Web Creation Seminar
CSS基本のキ
こっちは演出に合わせて色々と
詳しくは別紙参照
33
background font-sizemargin borderpadding font-weightwidth floatheight clearcolor text-align
Web Creation Seminar
CSS基本のキ
名前の付け方は2種類
34
<span id=”most-important” class=”keyword”>ああああ</span>
id指定
class指定
Web Creation Seminar
CSS基本のキ
id指定
1つのhtmlファイルに1つだけの要素の名前
class指定
1つのhtmlファイルに複数個あってもいい要素の名前
35
Web Creation Seminar
CSS基本のキ
どのタグをどんな見せ方をするかを書く。
36
div { width: 300px; }
#most-important { font-weight: bold; }
.keyword { color: #ff0000; }
divタグ全てに適用
指定idに適用
指定classに適用
style.cssというファイル名でhtmlと同じフォルダに保存※白角丸枠部分をセレクタと言う
Web Creation Seminar
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に適用することを意味しています。
Web Creation Seminar
では実践タイム。
38
Web Creation Seminar
ステマ（ではない）タイム
HTML/CSS編集には
「CrescentEve」がオススメ
39
http://www.kashim.com/eve/
Web Creation Seminar
ステマ（ではない）タイム
本日お越しの皆様には特別に
「練習用サーバ」を用意致しました。
なので後で公開手順もやります。
40
Web Creation Seminar
これから何を学ぶか。
Webデザイナー志向の人は・・・
• 色彩理論(色相環が、色空間が云々)
• HTML
• CSS
• JavaScript
41
Web Creation Seminar
これから何を学ぶか。
Webマーケッター志向の人は・・・
• SEO
• EFO(Entry Form Optimization)
• コピーライティング
• テキストライティング
42
Web Creation Seminar
これから何を学ぶか。
プログラマ志向の人は・・・
• HTML
• JavaScript(jQuery)
• PHPとか、なにかプログラミング言語
• SQL (データベース)
43
Web Creation Seminar
これから何を学ぶか。
デザイナーと一緒に仕事したい人は・・・
• ディレクション
• プロジェクトマネジメント
• 広く浅く専門用語
• 寛大な心。（転んでも泣かない）
44
Web Creation Seminar
ボクと契約して
Webデザイナーになってよ！
Recommended