サイタWeb・デザインスクールHTML/CSS入門講座 兵庫 初心者でもできるHTML・CSS入門講座 レッスンノート HTMLとCSSの役割、サイト制作の流れなど

HTMLとCSSの役割、サイト制作の流れなど

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

レッスンお疲れさまでした!

本日は現在勉強されておられる
HTMLとCSSについて、
また今後お仕事としてどうすればいいのか、
簡単にご説明させていただきました。

まずは少しでも
ご自身で出来る箇所から
1つずつ学んでいきましょう。



【HTMLとCSSの役割について】

最初にHTMLとCSSの役割を
しっかりと頭の中に
把握しておきましょう。

基本的にHTMLは
文章を定義している言語であり、
それぞれの要素には意味と役割があります。

article は記事で、中に見出しと文章など。
h1 は見出しで、特にh1は重要度が高いもの。
p は文章で、1つの文章段落を示している。
などなど

ですので、
「意味と役割がない div/span を利用し、CSSでデザインする」
「そのほかの要素を使って意味・意義のあるページを作る」
というのが基本的なHTMLのスタンスです。


CSSは完全にデザインを制御するもので、
幅・高さ・スペース・ポジション・色・背景など
様々なデザインを可能にします。

そのほかにもCSSは
メディアクエリを使って、
レスポンシブウェブデザインを作ることもできます。



【四角いレイアウトが基本】

これから少し意識をしていただきたいのですが、
すべてのデザインは四角いレイアウトが
基本単位となってます。

WEBサイトを見るときでも…
ポスターやチラシを見るときでも…
またTVを何気なく見るときでも…
どのように四角いレイアウトなのかを
意識してみるようにしてください。

この意識を習慣づけると
町で溢れているデザインが
ものすごい勉強材料になります。

そしてWEBサイトのデザインをするときも、
デザインからコーディングするときも、
どんどん楽にできるようになっていきます。



【WEBサイト制作の流れ】

基本的なWEBサイト制作の流れは下記になります。

「ヒアリング・ご提案」
 ↓
「デザイン」
 ↓
「コーディング」
 ↓
「システム化・プログラム」

一つずつみていきましょう。


お客様からWEBサイト制作の
ご要望が来ましたら、
まずは「ヒアリング・ご提案」を行います。

僕自身がこの時に意識していることは、
「お客様のためになる」だけではなく、
「サイトを見て下さるお客様のためになる」ことを
一番重視しています。

この視点が欠けてしまうと、
独りよがりの自己満足のサイトになってしまい、
お客様も、サイトを見て下さるお客様にも
不利益となってしまいます。

ですので、
このヒアリングとご提案の際には、
しっかりと漏れがないように行います。

基本的に、
次の段階に進む際には
決して前の段階に戻ることはしません。(不可逆の法則)


次の段階は、
「デザイン」です。

PhotoshopやIllustratorなどを使って、
見て下さるお客様に響くような(行動を促すような)
サイトデザインを作っていきます。(1枚の絵)

そしてお客様に提出していただき、
OKをいただきましたら、
次の段階に進みます。

この際も、
コーディングが始まったら
基本的にデザインに戻りません。


デザインが確定(FIX)しましたら、
「コーディング」です。

1枚の絵から実際に
WEBページを作っていきます。


そして最後に一通り
コーディングが終わったら、
案件にもよりますが、
「システム化・プログラム」です。

最近はCMS化するのが流行りで、
サイト制作で一般的に使われるのが
Wordpressになっています。

Wordpressを作るにしても、
一旦コーディングを
完了させる必要があります。

CMSは
コンテンツ・マネージメント・システムの略で、
更新が楽になるシステムのことです。

実はWixもCMSの1つであり、
ブログやTumblrなど、
普段何気なく触ってたりします。
このレッスンノートを書いたコーチ

制作会社で自力で得た実践的ノウハウ伝授。WEBデザイナーも夢じゃない!

新着レッスンノート

体験レッスンお疲れさまでした。 本日はWordPressで作るサイトについて システムにおいてできることなどを お話しさせていただきました。 その他にも、 Webコピーライティングについてですとか、 Webの仕事を営業などについてお話いたしました。 最近の本屋を見てみ...

レッスンお疲れさまでした! 本日は前回作成しました レスポンシブウェブデザインのデザインから、 マークアップした分を チェックさせていただきました。 基本的には ほぼほぼ完成してましたね! あとは デザインに照らし合わせて 細かいところを微修正していきましょう。 ...

レッスンお疲れさまでした! 本日は、 前回にお出ししたデザイン課題について、 特にスマートフォンに関しまして 修正を行いました。 また、 デザインから書き出しをおこなって マークアップする準備をしました。 まずはスマートフォンから作りこみ、 出来上がりましたらデス...

レッスンお疲れさまでした! 本日は、 前回にお出しした課題について 改善したいポイントを中心に お教えいたしました。 レスポンシブウェブデザイン化する際に、 下記の2つの方法があります。 ・デスクトップから先に作る ・スマートフォンから先に作る 実は難易度として高...

レッスンお疲れさまでした! 本日は、 ローカルでWordPressを使って作成したWebサイトを 本番サーバに上げる方法や、 お客様とのディレクションについて お話しさせていただきました。 【Webサイトを本番サーバに上げる方法】 基本的に、 データを上げる...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta