プロが教える！未経験からwebデザイナーになるために必要な6つのこと

1. 自分のサーバーとドメインを持つ

ボクはよくwebの世界を現実世界と捉えて考えます。
もしwebの世界で生きていくとなった場合、まず生活できる場所、家が必要ですよね。どんな人でも結局はどこかで生活しています。それが家なのかネットカフェなのかはわかりませんが・・必ずどこかで寝泊まりしています。webの世界でもまず必要なのは「自分の場所」です。ボクはサーバーを土地、ドメインを住所だと思っています。このふたつをレンタル、取得するのにwebデザインのスキルも勉強も要りません。

ボクはサーバーは「ロリポップ」というレンタルサーバーでレンタルし、「ムームードメイン」というドメイン取得サービスにてburoki-design.comという独自ドメインを取得しました。他にもいいサービスはあるので、自分に合ったサーバーとドメインを選べばいいと思います。

まずは家を建てる準備ですね。自分の場所を持っていると後々便利になってくることもあるのではじめのうちから取得しておくことをおすすめします。おすすめというか必須ですね。

2. htmlでwebページをつくりページ構造を知る

サーバーとドメインをレンタル取得し、FTP（ネットワークでファイルと転送するための道みたいなものです）でサーバーに接続できるようになったら、ここからwebの勉強を開始です！まずはプレハブの部屋をつくっていくようにwebページをつくります。webページは基本的に「html（ハイパー・テキスト・マークアップ・ランゲージの略語です）」という文書構造で出来ています。もちろんこのブログも同じです。htmlとは、webページをつくるためのもっとも簡単なマークアップ言語のことです。

簡単なページで全然かまわないです。「h1」は大見出しタグで「p」は段落タグ、「a」はリンクタグというhtmlのタグの役割を実際にページをつくることで身につけていきます。htmlの本来の役割は文書なので、新聞をつくるようなイメージでタグと記載する情報を整理してページをつくっていくのがミソです。

ツールに頼らず、まずは手打ちでタグを覚える！

ボクははじめてwebページをつくったとき、すごく感動しました。
特にリンクを貼ってそのリンクをクリックして、別のページに移動した瞬間・・自分のつくったページのここがクリックできるようなった！とめちゃくちゃ感動したのを覚えています（笑）。今は自動でhtmlを書いてくれる便利なツールがあったりしますが、文書構造がわかるようになるのでまずはアナログですが自分で手打ちしてhtmlページをつくっていくことが大事だと思います。仕事ではhtmlの一部を編集・修正する作業なんていくらでもありますからね・・

3. cssでwebページを装飾してみる

webページをある程度つくれるようになり、htmlの構造をある程度理解できるようになったら次は「css」という言語を勉強します。

cssとは（カスケーディング・スタイル・シート）の略語で、ページのレイアウトを整えたり文字の色を変えたり、webページを装飾する役割の言語です。

このcssを使って、2の行程で制作したwebページを装飾していきます。ここのpタグの文字サイズはこれくらい、このh2見出しタグには下線を引いて、レイアウトはこうしてなど・・cssで用意されているプロパティは多岐に渡り、いろんな装飾表現ができます。ボクも勉強しはじめたときはかなり難しいなと思いましたが、ページの見栄えが目に見えてわかるので覚えてきたら書くのも楽しくなってきますよ。

4. 自分のサーバーで公開してみる

cssをある程度理解して装飾ができるようになってきたら、FTPでサーバーに接続し、制作したhtmlとcssファイルを1の工程で取得した自分のサーバーにアップロードします。

アップロードしたあとは、そのURLをブラウザに入力し、実際にwebページにアクセスしてみます。例えば、取得したドメインがburoki-design.comで、htmlファイル名がtest.htmlの場合、https://buroki-design.com/test.htmlとブラウザのアドレス欄に入力します。見事ページが表示されたらサーバーに公開されたということです。

これで面接の際にそのページのURLを提示すると作品として見なされ、面接官もアクセスできるようになります。webデザイナーの場合、この「作品としてのURLが有るか無いか」でかなり違ってきます。

5. webサイトをつくる

webページをいくつかつくれるようになってきたら、次はwebサイトをつくってみます。

自分のホームページでもいいし、架空のパン屋さんのサイトでも大丈夫です。例えば自分のホームページの場合どんなページが必要だと思いますか？入り口となるTOPページ以外にプロフィールのページ、趣味のページ、日記ページ、お問い合わせページなど・・いろいろ必要なページが出てきますね。その目的に沿ったwebページをつくっていきます。

ここで注意してもらいたいのは制作ファイルの管理方法。例えばボクの場合、まず「buroki」というフォルダをつくってから、そのフォルダの中にhtmlページやcssファイルをつくって格納していきます。はじめにフォルダ内にまとめておくことでファイルの管理もしやすくなります。

ひとつテーマに沿ったwebサイトをつくれたら、次は違うテーマでwebサイトをつくっていきましょう。カフェのサイトでも企業サイトでもなんでもOKです。違うテーマでつくる度に違う要素が必ず入ってくるのでできるだけ多くつくることをおすすめします。webページには写真もどんどん載せていきましょう。

6. 新しい技術を取り入れつつ、ひたすらつくる

この工程までくると、webサイトのつくり方がだいぶ理解できてきていると思います。プロのようなwebサイトでなくても問題ないです。クオリティは仕事にしたあとからいくらでもついてきます。

「webサイトをつくったことがあるか」、仕事にする前はここが重要なんです。バナーでもなく単一のwebページでもなく、ページの集合体であるwebサイト。世の中に公開されているwebページはすべてどこかのサイトの中に存在しています。サイトをつくることで各ページの役割やデザインまで明確になってくる。その訓練が必要なのです。

そして、webの世界は日進月歩といわれるくらい日々新しい技術が開発されています。その情報に敏感になって、新しい技術をつくったwebページに取り入れていきます。例えばスマホでもちゃんと表示されるwebサイトを制作したり、webページの一部分にアニメーションを入れてみたり、スクロールするとナビゲーションが固定されるようなプログラムを実装してみたり・・そういう技術を学び、ひたすら作品をつくります。

BUROKIも1年間作品をつくりました

かくいうボクは面接に行く前に1年間、サイトをつくりまくっていました。
自分のサイトから平野区のサイト（地元なので）、架空の人材派遣会社のサイト、音楽が好きなのでインディーレーベルのサイト・・ボツにしたサイトもたくさんあったし、デザインを何度もやり直したサイトもあります。でもつくることで間違いなく成長していきました。「手を動かす」に勝るものはないですね。本を読んでわかったつもりになることに意味はありません。実践あるのみ！です。

面接に受かるためのここだけのヒント

ただ、初心者の場合はここまでやっても不採用になるのはよくあります。
ボクも書類選考は通ったものの、面接で不採用になった経験はもちろん何度もしました。ただ、作品を提示した時点で書類選考はかなり通りやすくなります。

そして面接で好印象を与えるヒントをひとつだけお教えします。
それは「つくったサイトを説明できるようになっておこう」ということです。面接ではほぼ間違いなくつくったサイトを一緒に見ることになると思われます。そしてそのサイトについていろんな質問をされると思います。その質問に対して、なぜこのデザインにしたのか、そこには必ず理由があるはずです。その理由を自分なりに答えられるようになっておくことが面接ではとても大切です。準備しておきましょう。

最近面接のコツを教えるブログを書きました

デザイナーとして面接に臨む際に先方の印象に残らせるコツを書きました。よかったらそちらのブログも下記のリンクからご覧になってみてください。

このブログを読んでくれた人が一人でも多くwebデザイナーになれますように・・GOOD LUCK！