ホームページを自作します。エディタを使って自分でつくるオリジナルなホームページの作り方を説明します。SEO対策webサイトを作ります。

トップ ＞ ホームページ作成 ＞ WEBデザイン

WEBデザインとは何？

■ Webデザインとは

Webデザインとは、訪問した人が惚れ惚れするようなWEBサイトを構築し、関心や興味を惹きつけ、訪問者の知りたいことに的確に答え、問題の解決を図ってあげられる様なサイトをデザインすることです。

Webデザインの善し悪しは見た目の美しさだけでなく、サイトを訪れた人にとってストレスを感じさせず、抱えている課題に対して解決の道を示せたかどうかということがとても大事なのです。

例えば、「Webデザインとは何？」という問題解決のためにトップページからやって来たり、またはgoogleやYahooなどの検索エンジンで検索してせっかくやってきたのに、もし、「Webデザイン」の表す意味とは全く異なる内容のことばかり書いていたら、訪問者はがっかりして他のサイトに移動することでしょう。

　【まとめ】

　《Webデザインの核心》 
　○ 見た目の美しさ、わかりやすさ、簡潔さ、感動性があるか。 
　○ 訪問者の問題解決のお手伝いができているか、またはその力をもった構成であるか。

　
　あなたが作っているサイトにはライバルサイトが多少なりとも存在しているでしょう。

自分のサイトに来てもらうためのキーワードで検索をかけてみた時、実にたくさんの似た様なサイトが検索結果に出てくるでしょう。これらのライバルサイトを抜いて自分のサイトをじっくり読んでもらいたいとあなたは思っているはずです。

Webデザインの目的には「Webサイトを訪れた人の第一印象を決める」という大きな目的があります。

それを果たすためには、少しのセンスと美しくみせるための表現テクニックが必要になってきます。

ライバルに勝つには、まず、見た目の美しさで目を引いてもらうことが重要なポイントとなるとともに、訪問者の期待を裏切らない中身・内容の質、濃さ、発展性、可能性へと導く力を持ったサイトを構成し、デザインすることが最重要課題となるでしょう。

■ WEBデザインの基礎知識

　
WEBデザイナーの仕事のひとつであるWebデザインの基礎スキルは、
HTMLとCSSによるコーディング力です。

　HTMLとは、作成したWebサイトをWebブラウザに理解させ、表示するためのプログラム言語です。CSSはHTMLで作られたWebサイトをどう表示させるのかという見た目や装飾を指定するためのテキスト文書です。

Webページは、まずHTMLでWebサイトの基本構造を構築した後、CSSで細かいデザインを作っていきます。

これらHTMLやCSSの基本を把握すると、設計したサイトの構成や内容を適切にHTMLでマークアップ（意味付け）できるようになります。

これにより、検索エンジンにヒットしやすくなるのはもちろん、ユーザビリティやアクセシビリティの向上が図れるというわけです。

従って、そのためにやることは、以下の３点です。

（１）HTMLの基本構造とその役割を学ぶ

（２）CSSの基本構造とその役割を学ぶ

（３）HTMLとCSSを実際記述しながらその基本を習得する

これらを、本サイトのメニューにある「プログラム」の中の

　１．HTMLの勉強
　２．CSSの勉強

で学んでいくことになります。
どうぞご覧ください。

■ Webデザイナーは最低限どんなことを学習しているのか

◆　知識編

○　HTML,XHTML
○　CSS
○　JavaScript　・・・jQueryなどの有名ライブラリも学びます。
○　SEO（検索エンジン最適化）の知識
○　デザイン・レイアウト力
○　基礎的なマーケティングの知識　・・・ビジネスを成功させるためにWebサイトを作るので、最低限のマーケティングの知識を学びます。
○　配色・色彩の知識

◆　ソフト編

○　Dreamweaver　・・・Webデザイナー必須ソフトです。一通りの操作は覚えます。書籍を一冊程度は購入します。Dreamweaverは業界標準のHTMLエディタだから使うのであって、“ホームページ制作ソフト”的な使い方はしません。Dreamweaverのデザインビューでデザインするようなことはほとんどしません。初心者向けのDreamweaverの本はデザインビュー主体の解説になっているものがありますが、役に立ちません。購入する際にはご注意!!

○　Illustrator　・・・こみ入ったイラストを書く時には必須のソフトです。自分のレベルにあった書籍を数冊程度購入します。実際に作りまくることが大事!!

○　Photoshop　・・・基本的にはIllustratorと同じです。こちらも書籍を購入して覚えます。特に写真などのレタッチは何度も練習して覚えます。

○　Fireworks　・・・PhotoshopとIllustratorの機能を削って足して2で割ったようなソフトです。IllustratorとPhotoshopは難しい！という人は、Fireworksの方を使用するのも良いでしょう。