Webデザイナーに必要な言語とは？最低知っておきたいこと

Webデザインを独学で学ぶ場合、何の言語を学べばよいのか？おそらく初心者の人はよくわからないと思うので、Webデザインに使う言語について、ここで紹介してみます。

Webサイト制作に必要な言語

ウェブサイトを作るのに必要な言語をピックアップすると以下のようなものがある。

• HTML
• CSS
• javaScript
• PHP
• SQL
• Ruby
• Perl
• CGI
• Python
• ASP

いろいろあるけど重要度は違っていて、基本的にWebデザインのレベルで言うとHTMLとCSSとjavaScriptとPHPをちょっとわかっていれば仕事は見つかる。

もっと絞り込んで最低限覚えておかなければならないものはHTMLとCSSで、これがわかっていればコーダーとして雇ってもらえる場所は多いだろう。JS（javaScript）とPHPは最悪コピペでなんとかなる。

ここからはもっと踏み込んでそれぞれの言語について紹介してみよう。

HTML5

HTML5はHTML（ハイパーテキストマークアップランゲージ）のバージョン５という意味である。現在の主流はHTML5だが少し前のサイトのソースを見るとXHTMLやHTML4のサイトも見られる。

HTML５はタグというのようなもので囲むことでコンピュータにこれはこういう意味ですよということを伝える役割をしている。例えばhtmlというタグならこのソースはhtmlの言語で書かれてますよという意味であり、他にもpというタグはパラグラフで文章ですよという意味になったりする。他にはasideタグやstrong,footer,header,bodyなどのタグがあり、それぞれ意味がある。

その意味に則ったコーディングを行うのがコーダーの仕事になる。

CSS3

CSS３はカスケーディングスタイルシートの略でそのバージョン３という意味だ。何をしている言語かと言うとデザインをまとめて設定するための言語。昔はHTMLファイルに直接フォントサイズを設定したり、色の設定を書き込んだりしていたがそれを今は一括管理していて、デザイン変更を簡単にできるようになっている。

例えばリストをただのリストにするか、それともおしゃれなリストにするかなどをこの言語で設定することが出来る。

例）普通のリスト

• リスト
• リスト
• リスト

おしゃれなリスト

こういうのはCSSで設定することで変更することが可能だ。

基本的にこれもウェブデザイナーやコーダーがやる作業で、デザイナーからデザインデータを渡されてそのデザイン通りにHTMLとCSSでサイトを作成することになる。

最近はCSSで簡単なアニメーションを付けることが出来るようになったため、ちょっとした動きもコーダーが担当したりする。マウスオーバーでふわっとした動きをさせたり、影を動かしたりはCSSで行うようになっている。

javaScript（JS）

JSはブラウザで動くプログラミング言語で、クリックしたらポップアップが出てくるとか、マウスオーバーすると文字が表示されるなど動きのあるサイトを作ることが出来る。

最近ではCSS3でアニメーションを使えるようになったので、ちょっとしたアクションはCSSで行う場合も増えているものの、まだまだJSはどのサイトでも必ず使われている言語なのでWebデザイナーやコーダーは必ず使用する言語と言ってもいいだろう。

ただ、JSは数年前からjQueryという高性能なライブラリが使われるようになり、一からゴリゴリ書かなくてもやりたいことはそういうライブラリのサンプルソースからコピペして使えればよくなっている。

WebデザイナーはjQueryの仕様をしっかり勉強してサンプルサイトで動きについて学べば、実装時にこの動きはあそこのサイトにサンプルソースがあったなと探しに行けばいい。ちょっとしたものならjQueryのリファレンスサイトを見て自分で書くことも出来るようになるだろう。

動きの多いリッチなサイトが求められている現在、JSがある程度使えると就職や転職で引く手あまたとなる。

PHP

PHPはサーバーサイドのプログラミング言語であり、基本的にはWebデザイナーの仕事の範疇からは外れる言語である。

ただ、最近のウェブサイトはデータベースから情報を拾ってきて表示したりしていることが多く、最近はワードプレスというCMSを使ったブログ型のホームページが増えている。このCMSを動かしている言語がPHPであり、様々な案件でワードプレスを使った作業をする必要が出てくるためPHPを知っておいて損はないと言える。

昔はワードプレスのテンプレート作成は基本的にプログラマーの領域だったのだが、最近ではもうWebデザイナーが当たり前に行うようになってきている。ワードプレスのテンプレート作成ぐらいならそれほど難しいことはなく、リファレンスサイトを見ながらパーツをコピペしていけば完成するレベルである。

私も何十というワードプレスのテンプレートを作ってきたが基本的にコピペでなんとかした。function.phpにゴリゴリPHPでコードを書いていくような仕事は特になく、やりたいことはどこかのサイトで見つかるのでそれをコピペしとけば簡単に機能が追加されるだろう。

昔はアパッチを自分でインストールしてパソコンで動かして勉強したりする必要があったが、最近ではxamppをインストールすればあっという間にphpの動く環境をインストールできるので勉強も楽になっている。ぜひともphpでサーバーサイドの言語の勉強をしてみて欲しい。（RubyやPythonなどを使いたい時はMAMP）

一度一通り流れがつかめるようになれば他のRubyやらASPでも応用がきいてプログラミングは大体出来ると言えるレベルになるだろう。

Webサイトを作るのに必要なソフト

Webサイトを作るための言語を紹介してみたが、Webデザイナーがかならず使う必須ソフトもついでに紹介しておこう。

Photoshop（フォトショップ）

AdobeのPhotoshopは写真の加工を行うのに使うソフトで、普通の企業なら100％使うソフトである。バナーを作ったり、アイキャッチ画像を作ったりする他、サイトのデザインもこのソフトで行うことが多い。

コーダーの場合もデザイナーからデータがPhotoshopで送られてくることが普通なのでPhotoshopが使いこなせないと仕事に支障をきたすだろう。普通に使い方を覚えておけば問題ないが仕事を早くするためにはショートカットも覚えておかなければならない。仕事をしているうちにだんだんと覚えていけばいい。

Illustrator（イラストレーター）

これもAdobeのソフトだが、デザイナーがWebに疎いDTPの人だったりするとWebのデザインなのにイラレでデザインデータを作って送ってくることもある。時々、データがピクセルになってなくていらつくこともある…。

これは必須というほど重要なソフトではなく、ウェブデザインで使うデザインぐらいならPhotoshopで作れないものはない。必須ではないが使いこなせていると便利ぐらいのレベル。

最近は様々なデヴァイスでWebサイトを閲覧する機会が増えたため、画像をpngやjpgなどのデータではなくSVGというイラストレーターで使うベクターのデータにしてサイトで使うことがある。そんな時、AIデータをSVGデータに変換するためにイラレを使うことが増えてきた。

テキストエディタ

コーダーが一番使うソフトはテキストエディタと言ってもいいだろう。とにかく一日中コーディングしている時もあり、テキストエディタにはこだわっている人が多い。コーダーよりのウェブデザイナーもテキストエディタはよく使うので自分にあった使いやすいソフトを使うことをおすすめしたい。

SublimeText（サブライムテキスト）

拡張機能が多く、基本的に非常に軽いソフトなので多くの愛用者がいる。デザインなども拡張機能で変更できるため自分好みのテキストエディタを作成することが出来る。無料で使えるがシェアウェアではある。時々お金を払えというポップアップが出るが無視して使っても特に問題はない。
公式サイトはこちら

Atom（アトム）

GitHubの作ったテキストエディタでSublimeTextによく似ている。こちらのほうがプロジェクトの扱いなどかなり高性能な気がするので私は2年前ぐらいからこちらを使うようになっている。高性能な分ちょっと重いのが玉にキズ。それでも使いやすいし、拡張機能も豊富なので手放せないソフトである。
公式サイトはこちら

まとめ

まとめるとWebデザイナーに必要な言語は基本HTMLとCSSだけどJSやPHPもコピって使えるぐらいになれると仕事の幅は広がるよって話でした。

正直、最近のサイトはサーバーサイドとセットになっていることがほとんどなので、フロントエンドエンジニアと呼ばれるようなウェブサイトの表側を一通り実装できるような人が必要とされがちなのがウェブ業界の流れだ。

今後Web業界はもっと分業が進むとは思うが、基本的には映像を作るスタッフ、ページデザインをするスタッフ、コーディング全般という分かれ方になるだろう。ということでコーダーはすごい負担が増えるのでとりあえず勉強し続ける事ができるというスキルが重要になってくると感じる。