Webデザインを始めるために必要な7つのこと

Webデザインを始めるために必要な7つのこと

Webデザインを始めるために必要な7つのこと

初心者の人は、何から勉強すればいいかわからない事が多いです。情報が多すぎて必要なツー

ルもどれを選んだらいいかわからないケースもあります。

以下にあげる7つのことをもとに自分好みのものを探していってください。

1.環境を整える

まずはWebサイト制作をするための環境を整えましょう。

パソコンはMacかWindowsか

パソコンの購入でMacか、Windowsどちらを選択するか。結論から言うと、どちらでもいいです。コスト面でも勉強面でもあまり差はなく好みの問題です。

テキストエディター

テキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです 。Windowsに最初からインストールされている「メモ帳」や、Mac標準の「テキストエディタ ー」でもHTMLファイルを作成できますが、やはりWeb用に開発されているアプリを使う方が 、様々な機能が搭載されていて便利です。

Brackets

BracketsはAdobe製の無料のエディター。シンプルなインターフェイスやライブプレビューなどが魅力です。他にも様々なエディターがありますが、Bracketsは無料ですし、初心者に扱いやすいと思います。

2.Webサービスのアカウントをつくる

Gmail Twitter Facebook ソーシャルブックマークサイト、RSSリーダー、オンライン文書管理サービス、オンラインストレージサービス、写真共有サービスのアカウントをつくりましょう。

Gmail Twitter Facebook以外のWebサービスは、実際に試してみて自分に合うサービスを使います。Delicious (ソーシャルブックマークサイト)、Netvibes(RSSリーダー)、Evernote(オンラインメモ保存)、Dropbox (オンラインストレージサービス)、Flickr(写真共有サービス)などがあります。

Web制作は細かい知識の積み重ねです。すべてを暗記できません。後で必要な時、取り出せると便利です。良いサイトを見つけたら、Deliciousのようなソーシャルブックマークサイトに保存しておきます、ほとんどのソーシャルブックマークサイトでは、タグをつけることができるので、キーワードとコメントをつけます。後で検索できるようにするためです。

勉強していて、気がついたことはEvernoteノートにメモしておきましょう。

Twitterはツイートしなくても情報収集、コミュニケーションツールとして有効です。

3.グラフィックツールを導入して学ぶ

Webページのデザインをする際に必要になるのがグラフィックツール。サイトをどのように見 せるのかを具体的に形にします。

Photoshop

Webデザイナーの必須ツールのひとつと言えるPhotoshop 写真加工のためのツールです。写 真加工だけでなく、Webページのデザイン制作にもよく利用されています。

Illustrator

Illustratorはロゴやイラストの作成に不可欠です。最近ではWebサイト全体のデザインもPhotoshopではなくIllustratorで行うデザイナーも多いです。

4.ワイヤーフレームでサイトの骨格を考える

ワイヤーフレームはWebサイトの骨組みです。Webデザインを始める前に、各パーツをどこに配置するかを決めるための設計図と考えましょう。

Moqups

Moqupsはオンラインで利用できるワイヤーフレーム作成ツール。ドラッグ&ドロップするだけで簡単にワイヤーフレームが作れます。無料でプロジェクト2つまで作成可能。

5.オンライン学習サイトで学ぶ

ドットインストール

ドットインストールは3分動画でマスターする初心者向けプログラミング学習サイト。

HTMLやCSSなどの基本的なWebサイト制作の動画も収録されており、初心者は「ホームペー ジを作れるようになろう」のカテゴリーからはじめられます。

ゼロから簡単なWebサイトを作るところまで教えてくれます。

6.コードを保存する

学習すると、次々新しいコードに出会います。そのコードをその場で使用するだけではなく、保存しておくと復習にもなります。同じコードを使う際に簡単に再現できます。

ひとつひとつをファイルに保存してもいいのですが、手軽に保存するために便利なサービスを使ってみましょう。

CodePen

CodePenはコードを書くとその場でプレビューでき、自由に保存できるサービス。[New Pen]をクリックするとエディターが表示され、HTMLやCSS Javascriptを記述すると

プレビュー画面に表示されます。保存したコードはWebサイトに埋め込みできるので、ブログ の表示サンプル用によく利用されます。

7.小規模なホームページをつくる

ここまできたら実際にホームページを作ってみましょう。

架空のカフェ、ワインバーなどを題材にして、小規模(最大で5ページくらい)のホームペー ジをつくる。

一人で、ディレクター、コピーライター、デザイナー、コーダーの役をマルチにこなすことに なります。

8.終わりに

何事も最初の一歩が難しいですよね。オンラインでの学習もいいと思います。

お近くで開催される勉強会や、初心者向け講座に出向くのもひとつの手ですね。

少しずつ勉強をすすめて、自分のものにしていきましょう。

LEAVE A REPLY

*
* (公開されません)

CAPTCHA


*

COMMENT ON FACEBOOK