デジタルハリウッド(専門スクール)

STUDIO横浜

045-534-6645
横浜駅直結徒歩3分。雨の日も濡れずに通えて平日は22時まで、土日もOK。

【初心者必見】Webデザインの仕事を始める時に必要なものって何?

2017.11.24

  • このエントリーをはてなブックマークに追加
  • pocket

Webデザインに必要なものをまとめてみました。

webデザインを始めてみたいけど、何から準備をしたらいいのか分からないということがありますよね。

必要な機材は何か。制作ソフトは何を使えばいいのか。
そもそも、何を準備したらいいのか分からない・・

 

そんな方のために、webデザインを始めるにあたって、
これだけあれば完璧な準備からスタートが出来る一式をまとめてみました。

webの制作会社に就職したり、自宅でフリーランスで仕事を受注したりする場合も
まずは、これだけ揃えれば十分です。ぜひ、参考にしてみてくださいね。

パソコン

まず、何と言ってもパソコンがなければ前に進めませんね。 現状、デザインはほぼパソコンを使ったデジタルに移行しておりますね。 もちろん、手書きで書いたイラストやロゴを使うこともありますが 最終的にはプリンター等でスキャンしてパソコンに取り込んで作業をしていきます。

 

パソコンを選ぶ上で一番気になるのはどこのメーカーのパソコンを買ったらいいかではないでしょうか。 正直、家電量販店やパソコンショップに行ってもどれを買ったらいいのか分からないというのが 実情かと思います。

 

そんな時にぜひ参考にしてもらいたい基準がありますのでお伝えしますね。

 

まず、大枠でいうと基本的には自分の好きなパソコンを買うのが一番です。 大きさや色、メーカーなど自分が一緒に作業をしていてテンションが上がりそうなパソコンを選んでください!

①メモリー

メモリーとはその名の通り、データを記憶するパーツのことです。
4GBや8GBという表記になっておりますが、簡単にいうとこの数字が大きければ大きいほど
作業スピードが速くなり、パソコンがサクサク動くようになります。

 

どのくらいの基準で動くかというと、快適な動作で作業をしたいなら
2GB;ネットサーフィンやワードやエクセル程度
4GB;webデザイン(IllustratorやPhotoshop)
8GB;ポスター等の大サイズの写真加工や15分程度の簡単な動画編集
16GB:動画編集や音楽編集
32GB以上:プロ仕様(映画の制作や、CG制作などに対応)

②Windows or Mac

作業をする上では、大きな違いはありませんので好みになってきます。
確かに、webやデザイナーというとMacを使っている印象が多いかと思いますが
一般企業や制作会社によっては、Windowsももちろん使っています。

 

Webデザインに使う、IllustratorやPhotoshopの操作画面も
WindowsとMacで大差はありません。

ですので、自分が使い慣れたパソコンで作業することがスピードアップにつながるかと思います。

たまに、Macの操作って難しいですかとお問合せをいただくことがありますが
みなさん2週間程度で操作は慣れてきています。

 

iPhoneを使っている方は、感覚的に使い方を掴んでいきますし
先ほどもお話ししたようにスマホの機種変更と同じで
使っていけばすぐに慣れてきますのでご安心くださいね。

③デスクトップ or ノート

こちらも、特に絶対どちらかじゃないといけない!ということはありませんので
ご自身のライフスタイルに合わせてお選びいただくのが良いかと思います。

自宅作業がメインの方は断然デスクトップがオススメ!
理由は同じスペックのパソコンなら、ノートよりもデスクトップの方が安く買える傾向があります。

また、何と言っても最大の利点は画面が大きいことです!
デザインをするにあたって画面が大きいというのはかなり重宝します。
外出がなかったり、サブでノートパソコンを持っている方は
デスクトップが使いやすくて便利です。

 

それに対して、外出が中心であったりカフェやコワーキングスペースでの作業を予定している方はノートパソコンが必要になりますね。

自宅で作業をする際にやや不便を感じるようであれば
液晶ディスプレイに接続すると大きな画面で作業できるのでオススメですよ。

Adobe ソフト

デザイナーに必須な道具といえば、こちらの制作ソフト一式になります。 業界では必須のツールになっており、どこの制作会社に行ってもこのソフトを使うことになります。 (デスクワークにWordやExcelが必須なのと同じようなイメージです。)

①Illustrator

Illustrator こちらは主にグラフィックデザイン(紙のデザイン)をする時に使います。 雑誌・ポスター・パンフレット・ロゴ・名刺などの制作に使用します。

 

特徴としては、ベジェ曲線というものを使って、実際に手書きで描いた時のようななめらかな曲線を描くことができます。 ペンツールなどを使ってマウスを使って書くとどうしても、線がガタガタになってしまうのですが このベジェ曲線を使えると綺麗な曲線やイラストを制作することができます。

 

また、Illustratorで作ったデータはどんなに拡大しても荒れることがありません。 名刺用に作ったロゴも、巨大ポスター用にすぐに拡大をすることができます。 (写真等のデータは拡大すると荒れてきてしまいますよね。)

②Photoshop

こちらは主に写真の加工や修正、Webデザインをする時に使います。
例えば、写真を合成することができますし、よくWebサイト上でみるような、写真にフォント(文字)を乗せたり
インスタグラムのような色味を出したり、肌のレタッチをするのはこのソフトを使っています。

特徴としては、このPhotoshopが使えれば
Webデザイナーの方はこちらのPhotoshopをメインで使うことが多くなります。
仕事だけではなく、自分で撮影した写真をいじってみたりするだけでもすごく楽しいですよ

③DreamWeaver

こちらは主にコーディングという作業をする時に使うソフトになります。
Photoshopで作成したデザインをWebサイト上に表示するためにコーディングという作業を行います。

コーディングというと、なんだか難しそうな印象を持ちがちですが
Excelの関数の様な感覚で、指示を選択していくようなイメージです。

例えば、文字を中央揃えにしたい場合は
centerというコードを表記をすると、文字が中央揃えにてWebサイト上に表記されます。


他にも、フォントサイズを大きくしたい場合は
font size=“20”というような表記で数字部分を変えることで、文字の大きさを変更することができます。

このいくつかのコードを組み合わせていくことで、Web上に表示された時にきれいに見えるように調整を行っていきます。

コードについては、丸暗記する必要は全くなく、検索すればいくらでも出てきますので
覚えるというよりは、こんな機能があるんだなと初めは理解していけば問題ありません。

我々も全部は覚えていませんので、作業する際に随時検索したり調べたりしながら制作を進めています。

番外編:サーバー

Webサイトをサイト上に公開する時は、このサーバーという場所に制作したデータをアップすることで全世界に公開されます。通常はレンタルサーバーというサービスがありますので、そこにデータを保存していきます。
サーバーに保存すると、Internet ExplorerやGoogleChromで表示させることができます。

 

自分のオリジナルサイトを制作して、公開したい場合はどこかのレンタルサーバーを借りる必要があります。
月額おおよそ500円程度から借りることができます。

番外編:ドメイン

こちらは、web上で表示される「dhw.co.jp」のような文字部分のことを指します。

このドメインを取得することで
http://school.dhw.co.jp/index.html というようなURLを使用できるようになったり
info@dhw.co.jp のようなメールアドレスを使えるようになります。

こちらの○○○.co.jpのようなドメインは、ドメイン取得業者から購入をすることができ
サイト上で購入から契約まで行うことができます。

 

ドメインには「.com」「.net」「.co.jp」など種類があり
業者によって取り揃えている数や値段も様々です。

レンタルサーバーとセットになっているプランなどもあります。

サーバーとドメインについては、オリジナルサイトを公開したい時や
クライアントや友人に制作を頼まれた際に必要になってくるので、今は予備知識として知っておく程度で大丈夫ですよ。

Webデザインを始める際のご相談など承っております。

045-534-6645[受付時間:10:00~20:00]

デジタルハリウッド STUDIO横浜