Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

Webデザイナーになる為の第一歩(初級:基礎1)

01.03.17 22:41 | コメント(0)

Webデザイナーになる為の基礎勉強

ホームページをどうやって作っていけば、Webデザイナーになる為には何から勉強をしてよいのか等、分からない方々は沢山いると思います。
私の場合はすべて独学で学んで来ていますが、学校で基礎を学んでWebデザイナーになった方もいれば私の用に最初から独学でWebデザイナーになった方も少なくありません。
私がこのお仕事につく前は、「ホームページ作れたら楽しそうだな」「ホームページってどうやって出来ているんだろう」からはじまりました。
10年近くWebデザイナーというお仕事をさせて頂いておりますが、今思うことはWebデザイナーのお仕事は根気強くやる事が一番成長します。
もちろんセンスもありますが、何よりも大事なのは努力して勉強すること、沢山の経験を積んだり自分で色んな事を調べていく事が一番大切です。

独学で勉強していこうと考えている方は、最初は何から勉強すればよいか戸惑うと思います。
「用語?」「言語?」「デザイン?」「コーディング?」「CMS?」など覚えていくことは沢山あります。
人によってデザインから覚える方もいればコーディングから覚えていく方もいますが、Webデザイナーを目指していくのであれば、近道を考えればコーディングから考え、全体的なWebの知識を見につけることが早く仕事にたどりつけることだと思います。
デザインもWebでは重要ではありますが、現在のWeb時代は全てではないですが、コーディングでデザインを補うことも出来ます。

これからホームページを作る方々、これからWebデザイナーを目指そうと考えている方々の為に勉強がしやすい手順をご紹介します。

 1. Webサイトの構成
 2. Webサイト制作の工程
 3. Webサイト作成方法と作成ツール
 4. HTMLコーディングの基礎
 5. HTMLからCSSを読み込む
 6. CSSの基礎
 7. Webブラウザ
 8. ドメインとサーバー
 9. サーバークライアントツール
 10. フォルダ・ファイルの配置
 11. 絶対パスと相対パス

Webサイトの構成

最初にWebサイトがどのように作られているかお勉強しましょう。
Webサイトの構成は、基本はHTMLCSSで成り立っています。
HTMLで表示させる文章や画像を設定し、CSSで形を整えたり全体の色や文字を変更している構成になっています。
基本はHTMLCSSの構成ではありますが、PHPやjavascriptといった言語も出てきますが、この辺は後々分かるようになってきます。
まずはHTMLCSSのお勉強をしていきましょう。

Webサイト制作の工程

Webサイトの構成が分かったところで、Webサイトを作り始めてからインターネット上にアップされるまでの流れ(工程)をお勉強していきましょう。
Webサイトを作り上げる工程は家を作るような流れと同じです。最初にどんな家を造りどんな間取りで造る、どんな色や形にするかなどと同じで、ホームページを作る流れも同じです。
最初にデザインや構成を考え、色や形を考え作っていきます。
大まかなWebサイトの流れ(工程)をご説明いたします。

【Webサイトの流れ(工程)】
 SETP1. 企画・案(デザイン)
 どのようなサイトのデザインにするかを決めます。
 全体のデザイン(色や形)を決めていきます。

 SETP2. 構成・コンテンツ(コーディング)
 どのようなコンテンツや内容を入れていくか決めます。
 ユーザーに伝えたいこと読んでもらいたいコンテンツを決めます。

 SETP3. デザイン・構成図を作成
 決定したデザインやコンテンツの構成を作成します。
 デザインはフォトショップやイラストレーター
 または手書きででも良いので全体のデザインの配置図を作ります。
 決定したコンテンツの項目をメニューに追加します。

 SETP4. デザイン作成
 Webサイトのデザインを制作します。
 フォトショップやイラストレーターでデザインを作ります。

 SETP4. コーディング
 作ったデザインをHTMLへコーディングしていきます。
 各ページを完成させます。

 SETP5. ドメイン・サーバーの選定
 表示させるドメイン、Webサイトをアップするサーバーを選定します。

 SETP6. サーバーにアップロード
 出来上がったWebサイトをサーバーにアップロードします。

 SETP6. Webサイト確認
 リンクミス、テキストの誤字脱字、フォームにエラーなどを
 インターネット上で確認します。

 SETP7. 完成
 確認が終わればリリース完了です。

Webサイト作成方法と作成ツール

これで全体の制作の流れが分かったと思います。
では、早速ホームページを作っていきますが、デザインは何のソフトでデザインするのか、HTMLやCSSは何のソフトを使って行きば良いのか等の問題が出てきます。
デザインを作成するツールは主にAdobeが提供しているPhotoshopIllustratorが良いでしょう。
コーディングしていくにはいくつか方法がありますが、一番多いのはAdobeが提供しているDreamweaverというソフトが一般的には一番使用されていると思います。
そのほか、無料のエディタツールなどを使ってコーディングしていくことも出来ます。
コーディングする方法としてこちらの記事でいくつかご紹介をしています。

 ▼コーディングで利用するソフト
 ホームページを作る3つの方法

HTMLコーディングの基礎

ソフトを決めたらHTMLコーディングのお勉強に移りましょう。
デザインのお勉強はここでは一旦後回しにします。デザインからお勉強する方法もありますが、コーディングを理解してからデザインを考えるとデザインが作りやすくなります。
Webサイトは、一枚のHTMLファイルでも成り立ちます。
まずは、新しく「index.html」というファイルを作りましょう。

index.htmlファイル

indexファイル
「index.html」ファイルを開きファイルにhtmlコードを記載していきます。
基礎の最初の段階として覚えておく事は、HTMLの土台となるコーディングを覚えましょう。

【基礎htmlコード】




ホームページのタイトル




記事のタイトル

記事の内容、詳細、文章

記事のサブタイトル

記事の内容、詳細、文章

  • リスト1
  • リスト2
  • リスト3

「index.html」ファイルに記載したら、ファイルをダブルクリックしてブラウザで開いてみましょう。
htmlコードを記載したファイルが下記のように表示されます。

indexファイル

indexファイル
htmlに記載しているタグには意味があり、文章の重要になる順番や位置づけをする意味を持ちます。
【タグの説明】
h1:ページの中の一番大きい見出しを意味します。
h2:ページの中の二番目に大きい見出しを意味します。
p :内容や詳細を意味します。
ul:箇条書きリストを意味します。
li:リストの中のひとつひとつを意味します。

HTMLからCSSを読み込む

HTMLのコーディングが完了したら、次にCSSをHTMLから読み込ませるタグを記載してみましょう。
まずは、新しく「style.css」というCSSファイルを作成します。

styleファイル

styleファイル
「style.css」ファイルを作成したら、先ほど記載したHTML内の「head」内に以下のタグを記載します。

【styleシート読み込みコード】


これで「style.css」ファイルを読み込むようになりました。

CSSの基礎

次に、新しく作成した「style.css」ファイルを開きファイルにCSSコードを記載していきます。
基礎の最初の段階として覚えておく事は、CSSでHTMLが変わる変化をお勉強しましょう。
記載した「h1タグ」や「h2タグ」の変化を理解する為にCSSに下記のように記載します。
@charset "UTF-8";

body {
	font-size:14px;
	color:#333333;
    font-family: 'Roboto Condensed',"メイリオ","Meiryo","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS Pゴシック","Osaka",sans-serif;
}

h1{
	font-size: 20px;
	color: #fff;
	background-color:#F90;
}

h2{
	font-size: 16px;
	border-bottom:2px solid #CCC;
}

ul{
	list-style: none;
	padding-left:10px;
}
li{
	padding-left:15px;
}

Webブラウザについて

コーディングの基礎を理解したら次に「ブラウザ」の知識をお勉強しましょう。
Webデザイナーになる為には、この言葉の用に予備知識が沢山あります。この言葉のような予備知識も同時に勉強していきましょう。
「ブラウザ」とは何かと言いますと、簡単に言えばインターネットを表示させる画面です。

 ▼ブラウザについて
 ブラウザとは何?

ドメインとサーバー

次にWebサイトを公開する時に最も重要な「ドメイン」と「サーバー」についてお勉強しましょう。
ドメイン」の言葉は聞いた事はあると思いますが、「ドメイン」とはホームページのURLやメールアドレスなどで利用するインターネット上の住所のようなものです。
インターネット上にホームページを公開するには「ドメイン」と「サーバー」は必ず必要になります。
ドメイン」は、Webサイトのサイト名やサイトの内容が分かり易いドメインの選定をすると良いです。
ドメイン」を教えたりする時、Webサイトを開いた時にドメインを覚えてもらう時、ドメインでWebサイトの名前や内容が分かり易いようにする事を良いです。

 ▼ドメインは、大きく3つの種類
 ドメインは、大きく3つの種類

サーバー」は、ホームページを作成したファイルを置く場所です。
一般的に企業のサイトやサービスコンテンツサイトを置いているサーバーはレンタルサーバーが多いですが、レンタルサーバーの中にも共有サーバー、専用サーバーといったいくつかのサービスがあります。
サーバー会社はいくつもありますが各サーバー会社でもサーバー内の容量や料金や使用用途が違います。
一度安いサーバーを契約しておくと色々お勉強するのに良いです。

 ▼利用者の多いレンタルサーバーの選定とご紹介
 利用者の多いレンタルサーバーの選定とご紹介

サーバークライアントツール

サーバーの事をなんとなく理解したところで、一度サーバーに作成したファイルをアップロードするお勉強しましょう。 サーバーにアップロードするのは簡単です。ここでサーバーにアップするのはどうやって行えばと思いますが、サーバーにアップロードするツールはいくつかあります。 知っておきたい事はサーバーにアップロードする事と、サーバーにアップロードするいくつかのクライアントツールを知っておくとWebデザイナーの知識になるでしょう。
 ▼利用者の多いレンタルサーバーの選定とご紹介
 利用者の多いレンタルサーバーの選定とご紹介

フォルダ・ファイルの配置

Webサイトを構築するには、それを構成するページや画像ファイルなどをフォルダ分けや設置する階層「デイレクトリ」を決めておく必要があります。
Webサイトを構築するにあたって最低限必要なファイルやフォルダを例にして2つのパターンの構成をご紹介いたします。
ファイルや画像ファイルを配置する配置方法は個々によって異なりますが一般的な配置がトップのディレクトリに全て置くパターンとフォルダ分けして配置するパターンに分かれます。

【必要なファイル】
・index.html(インデックスページ)ファイル
・style.css(スタイルシート)ファイル
・画像ファイル
・jquery.js(ジャバスクリプト)ファイル

【トップディレクトに配置】

ファイルとフォルダの配置

トップディレクト構成ではindex.htmlファイルから直接同じ階層にあるファイルを読み込みます。
ファイル・フォルダ構成と配置
【フォルダ分けして配置】

ファイルとフォルダの配置

フォルダ分け構成ではindex.htmlファイルからフォルダを指定して下階層にあるファイルを読み込みます。
ファイル・フォルダ構成と配置 まずはどちらか分かり易い配置にファイルを配置しましょう。

絶対パスと相対パス

ファイルやフォルダの構成が決まりましたら、次に「index.htmlファイル」に「style.css(スタイルシート)ファイル」や「画像ファイル」を読み込めるように設定しましょう。
「style.css(スタイルシート)ファイル」や「画像ファイル」を読み込ませる方法は階層のフォルダやファイルの位置によって異なります。
ここでフォルダやファイルを読み込ませる「絶対パス」と「相対パス」を覚えましょう。

パス(path)とは英語で「道・通り道」という意味です。
パスは結びつける先のファイルや情報がどこにあるかを指定するコードです。
htmlは、ファイルとファイルを結びつける方法として「絶対パス」と「相対パス」の2種類があります。

【絶対パス】
WebサイトURLでページを指定、及びトップのディレクトリから指定して、目的のファイルや画像がどこにあるのかを伝える方法です。
まず、下記画像を見ていただき、ファイルの配置を以下の用に配置いたします。

トップディレクトに配置

ファイル・フォルダ構成と配置 このようにトップディレクトリにファイルを配置した場合、絶対パスは以下の用になります。
 スタイルシート   : /style.css
 画像ファイル    : /logo.png
 スクリプトファイル : /jquery.js

フォルダ分けして配置

ファイル・フォルダ構成と配置 このようにファイルからフォルダを配置した場合、絶対パスは以下の用になります。
 スタイルシート   : /css/style.css
 画像ファイル    : /img/logo.png
 スクリプトファイル : /js/jquery.js

【相対パス】
現在のファイルの位置や階層を基準にして、目的のファイルや画像がどこにあるのかを伝える方法です。

トップディレクトに配置

ファイル・フォルダ構成と配置 このようにトップディレクトリにファイルを配置した場合、絶対パスは以下の用になります。
 スタイルシート   : ../style.css
 画像ファイル    : ../logo.png
 スクリプトファイル : ../jquery.js

フォルダ分けして配置

ファイル・フォルダ構成と配置 このようにファイルからフォルダを配置した場合、絶対パスは以下の用になります。
 スタイルシート   : ../css/style.css
 画像ファイル    : ../img/logo.png
 スクリプトファイル : ../js/jquery.js

カテゴリ:CSS3, HTML5, HTML5 + CSS3の基礎, WEB屋になる為の心得, WEB屋になる為の知識と技術, ドメインの種類と取得, パソコンの知って損をしない知識, ホームページ(WEB)制作と作成方法, 参考になるホームページ・便利ツール
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP