Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

初心者WEBデザイナーは何から勉強を始めるべきかを教えます。

スポンサー

初心者WEBデザイナーの勉強

この記事は、HTMLやCSSを覚えたばかりのWEBデザイナーに向けた勉強方法の内容になっています。

 

HTMLやCSSは理解したが、何から始めたらスキルアップにつながるのかを書いています。

 

主に、以下の内容を勉強しておけば大丈夫です。

  • WEBサイトのレイアウトを研究しておくこと。
  • バナーの引き出しを増やしておくこと。
  • HTML・CSSの解析や編集になれること。
  • javascriptの編集になれること。

 

HTMLなどを覚えたばかりの方、WEBデザイナーとして就職した方など、スキルアップの参考になればと思います。

WEBサイトの研究

参考になるWEBサイトを集めたホームページで、どのようなレイアウトがあるのか研究をします。

 

この研究で注意をしてほしい点は、PC(パソコン)寄りのデザインになっていないかということです。

 

PC寄りのデザインに関しては、参考にならないと思っていただいて問題ありません。

 

  • スマホでは邪魔になったり、重くなるので派手な動きはいらない。
  • Googleの検索評価は、スマホページを基準に評価される。
  • PC作業(プレビューなど)で制作するからPC寄りになりがち。

 

チェックしてほしいポイントは、サービスや情報を公開するという目的において、開発者の満足だけで制作されていないかという点です。

 

PCにある動きのある表現が、スマホでは消えている場合、その動きはいらないってことです。

 

まあ、参考サイトであれば、そういったサイトは少ないとは思いますが、注意しておきたい点ですね。

バナーの引き出し

バナーは、作り慣れておかないと、WEBサイトよりも大変です。

 

良いやり方としては、自分がいいと思ったバナーは常にストックしておくことです。

 

  • 特典のPRの仕方や配色
  • 文字と写真のバランス
  • バナー画像のサイズ感
  • フォントの種類
  • 写真の加工方法や技術

などなど。。。

 

そうすれば、制作依頼があっても、ストックしているバナーを参考に制作を進めることができます。

 

自分なりのデザインは、そういったことの積み重ねで、少しずつ表れてきます。

 

最初から、白紙の状態から悩む必要はありません。

解析や編集に慣れること

解析

Ctrl+U

サイトのソース表示のショートカット。サイトのソースを調べることができます。

こういったことに活用できます。

  • HTMLの記述の仕方
  • Javascriptのソース元(誰が作って、どこにデータが公開されているのか)
  • JavascriptやCSSの構成を知ることができる。

この動きは便利だな~と思ったとき、フリーで配布されているのか、自社で作ったものなのかなどを確認できます。

Ctrl+Shift+I

サイトの検証のショートカット。各コンテンツのソースに対して、どのようにCSSが記述されているのか確認できます。

 

自分が知らなかった記述の仕方など、参考になる多くの情報を得れることができます。

 

また、編集の練習にもなります。詳しくは、次の見出しで説明したいと思います。

※Windowsのショートカットです。

編集

先ほどの解析を利用して、世に公開されているサイトで練習しましょう。

 

まずは、練習するにあたって、ローカル(自分のパソコン)で練習するための準備をします。

 

手順は、以下のとおりです。

  1. 参考サイトから、触ってみたいサイトを選びます。
  2. 先ほどのショートカットでソースの公開しましょう。
  3. javascriptやCSSファイルをローカルにダウンロードします。
  4. ソース公開のページでHTMLソースをすべて選択(Ctrl+A)してコピー(Ctrl+C)。
  5. Dreamweaverを開いて、貼り付ける(Cttrl+V)。
  6. HTML内にて、CSSのURLを変更します。(独自ドメインを消す)

<例>「https://sample.com/css/styke.css」→「/css/styke.css」
要するに、ローカル上でHTMLとCSSが紐づくようにするってことです。

 

上記の流れで、公開しているデータをローカルに落として練習します。

 

元ネタのサイトを調査(Ctrl+Shift+I)しながら、背景色を変えるなどCSSの練習をしましょう。

 

それと同時に、初めて見るタグがあれば、調べてみるのもいいと思います。

 

最初のうちは、自分で作るのもいいですが、自分のできる範囲の構築になってしまうと思います。

 

スキルアップするためにも、難易度が高いサイトでの練習をオススメします。

javascriptの編集に慣れる

javascriptは、1から作れなくてもWEBデザイナーはやっていけます。

 

しかし、javascriptのオプションぐらいは、変更できるようになったほうがいいと思います。

スライドショーのjavascriptの場合
オプションでスライドのスピード、スライドのアニメーション、スライドのレイアウトなどの変更です。

 

このオプションは、分かりやすく編集しやすいように、予め設けているjavascriptもあれば、用意されていない場合もあります。

 

そのため、どのjavascriptをサイトに採用するかが重要になってきます。

 

日頃から、人気で使いやすいjavascriptを調べておくことがポイントになります。

 

基本は、ネット上に溢れている既存のjavascript(完成済み)を、自分が制作するサイトに導入することが多いと思います。

 

そのため、オプション(機能)の変更さえできればOKです。

 

ただし、大手のWEB制作会社など、就職した先でjavascriptを1から書くこともあると思います。

 

個人的には、スマホでサクっと見せる目的であれば、javascriptは邪魔なので、無駄な開発だな~って印象です。

応援・シェアよろしくお願いします!
スポンサー