業界未経験者がWebデザイナーに就職・転職する方法
「業界未経験でもWebデザイナーとして就職・転職できるのか?」
これは、ブログ著者のさかしも常に抱えていた疑問です。
なぜなら、大学を卒業するまで、パソコンのこともWebのことも何も知らない状態だったからです!
結論から言うと、業界未経験でも全く問題なくWebデザイナーになれるのですが、正しい方向で努力をする必要があります。
この記事では未経験者がWebデザイナーとして就職・転職するために必要な準備や方法、大まかな流れを説明します!
急いでる方はWebデザインスクールに通うのが就職・転職の1番の近道
さっさとスキルを身に着けて就職・転職したい人は、独学だと時間がかかってしまうので、Webデザインスクールに通いましょう!
オンラインだけで人生を変えるTech Academy!無料体験コースあり!
受講者5万人の人気校!Code Camp
Webデザイナーとは?
そもそもWebデザイナーってどんな仕事なの?
就職とか転職を決める前に、給料とか仕事の流れとかも知りたいんだけど!
Webデザイナーに関するそもそも的なところを知りたい人は、当ブログで触れている以下記事を読んでみてね!
Webデザイナーになるのに、その前の経歴は関係ない?
ねえねえ、さかし。
私、キャバ嬢の経験しかない30代女子なんだけど、Webデザイナーになれるの?
なれるよ!
僕は完全未経験で、Web業界に入ったからね。
しかも、30代でも全く問題ないね!Web業界はいつも人手不足だから。
もちろん努力は必要だけどね。
でも私、美的センスゼロだよ?
大丈夫、僕なんてゼロどころかマイナスだから!
中学の美術の成績、5段階中2だったからね。
僕がキャバコをWebデザイナーとして就職、転職できるまでサポートするから、頑張ってみない?
そうね、一生モノのスキル身に付けたいし!
キャバコ、頑張る!
Webデザイナーを目指し始めるのに、最初からインターネットやパソコンのことに精通している必要はありません。
完全未経験の50代からフリーランサーのWebデザイナーになって年収500万円を達成した人もいます!
未経験からWebデザイナーに就職・転職するための必要な準備
Web業界未経験でも就職・転職はできると言ったけど、さすがにスキルが完全に無い状態で雇ってもらうのは厳しいよ。
やっぱりそんなに甘くないんだね!
10代後半~20代前半だったら、若さだけで雇ってくれる可能性はあるけどね。
若い人は、独学よりもインターンとかアルバイトで現場経験を積んでしまう方が、独学でやるよりもスキルアップ速度は確実に爆速だね。
若くない人は、自分で作成したホームページ作品や実績の提示が、最低限求められることが多いよ。
どんな作品を作っておくといいか?
- 練習で作ったWebサイト
- 自分のブログサイト
- 実在するWebサイト
最低限(1)のWebサイト1つぐらいは練習で作っておきたいところです。
(2)の自分のブログサイトまで作れると、自身で情報発信する様子も見えるので、企業側から高評価を受ける可能性が高まります。
(3)の実在するWebサイトまで作れると最高ですが、未経験の人が実務案件の直依頼を獲得するのはかなり難しいです。
知り合いのお店やサークルなどのウェブサイトを作れれば十分でしょう。
えっ、初心者が3つも作るの?
うん、最初は正直ハードルが高いけど、最低でも1つは欲しいね。
だって、これがないとキャバコがどんなものを作れるのか、企業の採用担当者に伝えられないでしょ?
だから、基礎を身に付けたら、さっさと死に物狂いで作品を作ろう!
それに実務未経験で自身の作品があれば、「自分で学んで成長しながら制作できますよ!」ってことが、暗に採用担当者へ伝えることができるんだ。
なるほどね~
というか、これぐらいの努力は最低限求められるからね。
自分で勉強・成長できるレベルになって初めて、採用されるための土俵にたてるんだ。
でも、独学で学ぼうとすると挫折することが多いから、スクールやオンライン講座で学ぶのがおすすめだね!
WEB食いの別ページで参考になる記事
時間がいっぱいある学生なら独学でも良いかもしれないけど、私はもう若いというには微妙な年齢だしね…
どこかのスクールで学ぼうかなぁ~
Webデザイナーになるために必要な準備
そもそもなんだけど、Webサイトを作るにはどうしたらいいの?
まずはデザインの作成からだね。色んなツールがあるよ~
Webデザインをするためのツール・ソフトとは?
- Sketch(MAC専用 2021年時点)
- Adobe XD
- Figma
- Photoshop(フォトショップ)
外部サイトだけど、上記デザインツールの比較記事があるから、参考にしてみるといいよ。
色々あるんだね~
さかしは何使ってるの?
Photoshop(フォトショップ)とAdobe XDを使うことが多いぜ。
細かいところはPhotoshopやIllustratorで微調整したいから、3つとも使えるのが理想だね!
最初はどのソフトを使えるようになっておくといい?
とりあえず、Photoshopを触っておくといいよ!慣れてきたら、IllustratorとかAdobe XDに触れてみるといいね。
了解!デザインソフトって、大体有料なんだね~
そうだよ!
でも、Adobe XDとかPhotoshopがワンパックになったクリエイティブクラウド版なら、毎月5,680円で使えるよ(時期により変動)。
キャンペーンやってる時は月額3,980円で済むこともあるから、飲み会を毎月1回我慢すれば良い程度なんだ。
1年分をまとめて購入するなら、公式サイトではないところで購入した方が安いぜ。
例えば、ヒューマンアカデミー(たのまな)だ。
上記サイトで買うと、割安でAdobe Creative Cloudを購入でき、さらに通信講座を1ヶ月受けられるぜ。
長期的にコストをかけたくなければ、古いバージョンのソフトを利用するのもありだね。
バージョンが違っても、そこまで大きな機能差はないから。
ただ、ヤフオクとかで買おうとすると、怪しい出品者もいるからね。。。
注意は必要!
ヤフオクか。。。私、騙されそう!
うん、そんな人は普通に買った方が無難だぜ。
元ナンバーワンキャバ嬢の財力で、良いやつ買っちゃいなよ!
ホストクラブ通いで、もうお金スッカラカンだよ!
ナイス道楽!
どうしても安価でPhotoshopを手に入れたい方は、以下記事が参考になります。
Webデザインをするのに必要なパソコンとは?
あっ、そうそう、デザインソフトを利用するに当たって、1点注意があるよ。
古いパソコンとか、機能がショボいパソコンだと、デザインソフトが動かなかったりフリーズしちゃったりするから気を付けてね。
えっ!そうなの!
私、めっちゃ安いノートパソコンしか持ってないよ!
Photoshopは高機能がゆえに、重いからね。
買い替えた方が良いかも。
どういうパソコンを選べばいいの?
Adobe公式ページに「Photoshop CC の必要システム構成」ってのがあるね。
うん、見たけどよくわかんない。もっとわかりやすく教えて!
ったく、色目使いやがって~。
じゃあ僕がパソコンを買う時に注目しているとこだけ教えるね。
Webデザイン向けパソコンを買う時に最低限クリアしておきたい条件
OS | 64ビットであること。 |
CPU | Core i5より良いもの。 |
メモリ | 16GB以上 |
できれば付けておきたい | SSDやグラフィックボードを付ければ、読み込み速度が早くなります! |
とりあえず、最低限気にするのはここらへんかなぁ。
CPUって何?名前は何となく聞いたことあるけど…
人間でいうと頭脳みたいなもんだね。
そのCPUってのがね、Core i5より良いものであればOKかな。Core i7だとより良いね。
あとはメモリーね。メモリーは16GB以上欲しいかな。僕は32GBにしてる。
Photoshopの他にもIllustratorとかChromeとか、色んなソフトやアプリを同時に立ち上げたいからね。
パソコンを買う時に元々付いているメモリが少なかったら、メモリ増設を自分でやってしまうのもアリだね。
パソコンの中を開かないといけないから、難しく感じるかもしれないけど、
蓋開ける→メモリを装着する→蓋閉じる
っていう作業だけだから、初心者でもわりとカンタンだよ!
外部サイトだけど、やり方は以下が参考になるよ!
私みたいなパソコン音痴にはちょっと難しそう。。。
通販で買うと、オプションでメモリー増設できるから、業者さんに頼んでしまうのもアリだね!
ツールの基礎、使い方をさらっと学習
パソコンやソフトの準備ができたら、Adobe XDやPhotoshopといった使いたいソフトの基礎をさらっと勉強しましょう。
Photoshopで何ができるかとか、操作方法は以下のページがわかりやすいね。
動画レッスンとかもわかりやすいよ。
【超初心者向け】フォトショップ基本ツールの使い方編 -adobe Photoshop-
まずは、上記で基本操作やレイヤーの使い方、写真の編集方法などを体感してみましょう。
1点注意!
いきなり操作方法やテクニックの全部を覚える必要は全くないからね!
全部やろうとすると学習に時間かかりすぎるし、WEBデザインする時に、学んだテクニックを全て使うことはないから。
PhotoshopでWebデザインを制作するときに使うのは、以下操作だけでも十分なぐらいさ。
動画も載せておくね。
- 移動ツール
- 横書き文字ツール(文字入力)
- 手のひらツール
- 拡大(ズーム)・縮小ツール
- 選択範囲ツール
- 切り抜きツール
- スライスツール
- シェイプツール
- レイヤーマスク
- レイヤースタイル
移動ツールの使い方(動画)
文字ツール
手のひらツール(動画)
ズームツール 拡大・縮小(動画)
選択ツール(動画)
切り抜きツール(動画)
スライスツール(動画)
シェイプツール(動画)
レイヤーマスク(動画)
レイヤースタイル ボーダーをつける方法 (動画)
画像加工や細かいデザイン調整が必要になると、もう少し色んな機能を使う必要があります。
シンプルなWebデザインをするなら上記で十分です。
基本的な操作方法がわかれば、画像の切り抜きや加工が必要になった時に調べながら操作すれば、十分に対応できます。
最初からすべての操作を覚えるのは効率が悪いので、どんどん実務に近い作業をしていきましょう。
Photoshopで写真加工をする時のチュートリアルは、以下外部サイトが参考になります。
バナー画像を作ってみよう!
大事なのはいきなりオリジナル作品を作らないこと!
え?どういうこと?
初心者がオリジナル作品を作ろうとしたって、時間かかっちゃうからね。
しかも、ダサくなっちゃうんだよね。
デザインスキルがあれば別だけど。
だから、まずはパクろう!
バナーデザインが集まっているサイトで題材を見つける
以下のようなバナーデザインを集めたサイトから、作ってみたいものを探し出しましょう!
いっぱいあるね~これなら好きなものがパクれそう!
バナー画像って保存できるの?
もちろん、できるよ!
右クリック→名前を付けて画像を保存 でOK!
まずはシンプルなバナー画像を真似て作ってみる
保存した画像をPhotoshopなどのソフトに読み込もう!
読み込んだら、それをまずは模写するんだ。
模写って?
同じように真似て作るってことね!
題材は決まった?
うん、ロッテアイスの爽のバナーが素敵だなって思ったから、これにするー
マジか。
複雑なデザインだから、最初に取り組むにはハードルが高いなぁ…
えっ、そうなの?
最初はこんなバナーみたいに、シンプル系で十分だよ。
これなら初めてでも、何となくできそうな気がするでしょ?
確かに!洋服のフリーアイコンをダウンロードして、あとは文字を打ち込めば良いだけっぽいもんね。
でも、このバナーって何でこんなシンプルなの?
手抜きっぽい感じがして、「バナー作ってよ」って依頼した側の会社さん、怒っちゃわない?
どういう流れでこのバナーデザインになったかはわからないけど、あえてどシンプルにすることで注目させようとしたんじゃないかな!
バナー広告ってインターネットユーザーの気を惹きたいから、どうしてもガチャガチャなデザインになることが多いんだよね。
でも、ユーザーはみんな広告に慣れてきちゃってるから、ガチャガチャしたバナーを作っても、あんまりユーザーの気を惹くことができなくなってきてるんだ。
だからあえて、どシンプルにして文字を読ませる、バナーに注目してもらう、みたいな感じになったんだと思うよ。
もちろん、どういうデザインにしたらたくさんクリックされるかは、A/Bテストっていって複数のデザインで効果測定をしないとわからないんだけどね。
ふうん、シンプルなバナーが求められることもあるってことね!
そうともさ!
バナーの作り方は動画も参考になります
動画とか見ながらやって、何となくシンプルなバナーは作れるようになったけどさ…
どうしても、細かい部分まで真似ができなくて…
例えば、バナーによっては、人物が綺麗に切り取られてたり、影が付いてたりするじゃない?
そういう細かいテクニックを反映したい時はどうすればいいの?
そんな時はGoogleでやり方を調べればわかるよ。
Photoshop 影の付け方
Photoshop グラデーション
みたいなキーワードで検索してみな。
あ、ほんとだ!答えを教えてくれるサイトが出てくるね!
Web業界で働く人に必須なのが、検索スキルね。
わからないことがでたら、とにかく検索する癖をつけよう。
例えば、キャバコがWebデザイナーとして就職して、業務中にわからないことが出てきたとする。
けど、その都度、先輩にやり方を聞いてたら、解決するのに時間がかかってしまうし、聞かれてる先輩も疲れてしまうよね?
だから、わからないことが出たら検索して自分で解決する、どうしてもダメだったら質問をまとめてから先輩に聞いてみる、みたいな工夫が必要だね。
まぁ、これはWebデザイナーに限らずだけど、大切なコミュニケーションスキルの内のひとつだね。
Webサイトのデザイン制作を始めよう
バナーが作れるようになったら、いよいよウェブデザインを始めましょう。
Webデザインが集まっているサイトで題材を見つける
別記事に『WEBデザイン時に参考となるおしゃれギャラリーサイト49選』っていうのをまとめてるから、そこから題材を見つけよう。
ハンパない数あるね。。。
そうなんだよ、デザインの可能性は無限だぜっ!
Photoshopのテンプレートも配布されてるから、それをアレンジするのもアリだね。
検索してみるといっぱい出てくるよ、以下みたいのが!
http://photoshopvip.net/104545
動画などを参考にWebデザインを作ってみよう
PhotoshopでWebデザインカンプ作成
Adobe XDでのWebデザイン方法を解説している記事もあります
https://www.webcreatorbox.com/inspiration/adobe-xd-steps
WEBデザインする上で忘れてはいけないこと
とりあえず、良い感じのWebデザインを真似したら、それっぽいものができたけど…
これじゃパクリエイターを卒業できないよね?
こんなやり方続けてて、オリジナルの作品を作れるようになるの?
良いものをパクり続けてるとね、良いデザインの理由がだんだんわかってくるんだ。
余白とか整列とか、高品質なWebデザインのルールが見えてくるのね。
あと、完全オリジナルの作品は、あんまり追い求める必要はないよ。
え、なんで?
世の中には良いデザインが溢れてるから、良いものを色んなところからパクれば十分なんだ。
複数箇所からパクれば、それがオリジナルになる。
それ以上のオリジナリティ(独自性)を求めちゃうと、使いづらいWebサイトになっちゃう可能性があるよね。
使いやすさがまず第一。
よくわかんなくて使いづらいデザインになっちゃったら、ユーザーは他のWebサイトに飛んでいってしまうよ。
ふぅ~ん、見た目が良いだけじゃダメなんだねぇ~
そういうこっちゃ!
https://liskul.com/design-skill-2777
Webデザインの勉強で挫折しないためには?
Adobe XDとかPhotoshopだけに限らないけど、Web系の勉強って難しいイメージがあるよね?
うーん、そうね…
Photoshop触ってみたけど、使い方がわからなくていきなり心が折れそう。
Webの勉強は挫折の連続なんだ。
だから、いかに挫折させないかが大事。
大事なのは、基礎ばかりを学びすぎないこと!
簡単な操作方法を覚えたら、すぐに制作を開始すること!
基礎ばかりを学ぶのってつまらないし、頭に入ってこないじゃない?
つまらないことって、記憶効率がすごく悪いんだ。
確かにねー
調べながら+作りながら学んでいくのが成長の近道だからね!
確かにそうかも!
小さい頃にピアノを習ってたんだけど、興味の無い曲を練習するより、多少難しくても好きな曲を練習する方が集中力も高まるし、上達が早かった!
最速でWebデザインスキルを血肉化するには?
1日で身に着くようなスキルではないとはいえ、早く習得して就職・転職に結び付けたいところですよね。
では、どうすればWebデザインスキルが早く身に着くのでしょうか?
最速でスキルを身に着ける方法、それは「いつか必要になるかも、という勉強はやらない」というのがポイントだね。
え?なんで?
やっても忘れちゃうからね。
必要になったときに、また勉強が必要になるんだ。
僕もついついやってしまうんだよね。
2年前ぐらいにAI(人工知能)の実装に必要な数学とかPythonっていうプログラミング言語の勉強をしたんだけど、半年後には綺麗さっぱり忘れてたからね。
幅広く勉強することは大事だけど、使わないと宝の持ち腐れになっちゃうよ。
あとは、「なるべく早く実務に就いて現場の仕事をこなす」ということも大事。
この記事では、「企業担当者へのアピール素材として練習サイトを最低1個は作ろう」って言ってるけど、受け入れてくれるところがあればさっさと入れてもらって、仕事させてもらうのが1番だね。
独学やスクールでやる勉強というのは、現場の仕事に比べると緊張感に欠けるし、勉強している技術が現場に比べて遅れている可能性もある。
実務の仕事はハードルが高くても死に物狂いで解決しようとするから、スキルアップの速度が圧倒的に早いんだ。
デザインしたものをHTMLコーディングしよう
デザインができたら、いよいよHTMLコーディングだね!
うっ。。。英数文字ばっかりを打ち込んでいくやつだよね?
苦手だなぁ~
大丈夫!もちろん、最初はちょっと手こずるけど、作品作っていくうちに慣れてくるよ!
覚えるのは、HTMLのざっくりした構造と基本的なタグだけでオッケー!
HTML/CSSの入門
ドットインストールの動画なら、基礎を無料で学べます。ここで一気に基礎を身に着けてしまいましょう!
プロゲートというWEBサイトでもHTML/CSSを学べるので、オススメです。
ドットインストールもプロゲートも、勉強しやすくて良いね!
でも覚えることがいっぱいでチンプンカンプン!
最初は、書いたコードがどういうことをやっているのか、ざっくりわかればいいよ。
1文1文、どういう目的で何をやってるのかを明らかにしながら勉強すると時間かかりすぎるし、覚えられないから。
何となくで進めてくのが大事!
繰り返しやってるうちに理解できるようになるから!
ブラウザチェックを忘れずに
ブラウザチェックって何?
Microsoft EdgeとかGoogle ChromeとかFirefoxとか、インターネットブラウザって色々あるのね。
各ブラウザでサイトが正しく表示されてるか確認したか?ってこと。
え、私Google Chromeでしかみてなーい。
キャバコがWebデザイナーの求人に応募して面接に行くとき、採用担当者がどのブラウザでキャバコの作品を見るかなんて、わからないじゃん?
だから、主要ブラウザでサイトチェックはしておいた方がいいよ!
実務でも複数ブラウザで確認するからね!
タブレットやスマホへの対応
今やウェブサイトは、タブレットやスマホなどの画面が小さいデバイスから見られることが当たり前になっています。
当サイトWEB食いも全アクセスの半分以上がスマホやタブレットです。
WEBデザイナーがWEBデザインやコーディングをおこなう際、スマホやタブレット対応をおこなうのは必須となってきているということです。
どうやってウェブサイトをタブレットやスマホに対応させるの?
CSSフレームワークというものを使って実装することがほとんどだね。
よく使われるのはBootstrapっていわれるものさ。
HTMLとCSSの基礎を理解していないと習得が難しいけど、基礎を学び終えたらすぐにでもやり方は学んでおきたいところだね。
CSSフレームワークって検索してもらえるとわかると思うけど、種類はたくさんあるから、色々試してみるのもいいぜ!
制作したWEBサイトをアップしてみよう
WEBデザイン、HTML/CSSコーディングが終わると、インターネットブラウザであなたのウェブサイトが見られるようになります。
ただ、インターネット上に公開するには、ドメイン(URL)とサーバー(ファイルの置き場)というのが必要です。
ドメインの取得方法
そもそもドメインって何なの?
webgui.jpみたいなURLのことをドメインっていうんだ。インターネット上の住所だね。
ふ~ん、じゃあドメインを取得する=住所を獲得するみたいなイメージ?
そうともさ!ドメインを取得できるサービスとして、以下のようなものが使われることが多いよ!
どれがおすすめとかあるの?
正直そこまで大差ないね。僕は管理画面が比較的わかりやすいってことでムームードメインを使うことが多いけど、お客さんによって利用しているものが違うからどれがに特定しているってことはないなぁ。
ドメインを取得するのってお金かかるんだねぇ~
ふへへ、実は無料で取得する方法もあるんだぜ!
お客さんのWebサイトで使うドメインで無料のものは使うべきじゃないけど、自分の練習サイトとかテスト用のサイトだったら、無料ドメイン使うのも良いと思うよ!
サーバーの取得方法
ドメインがURLってことはわかったけど、じゃあサーバーって一体何なの?
ファイルの置き場さ!
これまで作ったWEBデザインとかHTMLファイルって、キャバコのパソコンの中にしかないデータでしょ?
このままだとキャバコのパソコンに不正侵入でもしない限り、外部の人は誰も見られないよね。
ってことで、それらファイルを公開するために、WEBサーバーへファイルを置く(アップロードする)のさ!
ふ~ん、まだあんまりイメージわいてないけど、どんなサーバーがおすすめなの?
MixHostは比較的新しいレンタルサーバーなんだ。
一時期「コスパでエックスサーバーを超えるレンタルサーバーがきたぞ!」って話題になったんだけど、エックスサーバーが負けじとサービスを改良してきたから、あんまり差はなくなってきたかなぁ。
でもMixHostはアダルトサイト運営もOKとしているから、業種によってはMixHostさまさまっていう人もいるだろうね。
レンタルサーバー戦争じゃん。私のいたキャバクラにもあったよ、女同士の戦争が。
まぁ、そんな話はどうでも良いんだけどさ、無料ドメインとおんなじように、無料サーバーなんてあったりしないの?
もちろん、あるぜ!ほりゃあ!
エックスドメイン
エックスドメインはドメインを取得できるサービスですが、無料サーバーも提供しています!
XREA
XREAはFREEプランがあるので、そちらを活用することでサーバーを無料で利用できます!
Webサイト制作の実務を知っておこう
上記までをこなせるようになれば、Webデザインからコーディング、サイト公開までができるようになる=Webデザイナーとして就職・転職できる可能性が非常に高くなります。
ただ、実務ではお客様の要望を形にする必要があるので、デザイン・コーディング・サイト公開だけで終わりということではありません。
就職・転職ができてしまえば、事務フローは会社で学んでしまえばいいですが、会社に入る前に実務フローを知っておくと、よりスムーズに仕事へなじむことができます。
この章では、実務におけるWEBサイト制作のフローをカンタンに紹介しておきます。
Webデザイン作って…HTML/CSSコーディングして…Webサイト公開して…もうヘトヘト~
でも、苦労して作ったものがウェブサイトっていう形になると何だか嬉しいね!
そうそう。自分のウェブサイトが世に公開される、そして形として残るっていうのは、結構興奮するもんなんだよね、はぁはぁ。
興奮しすぎだよ。落ち着け!
あぁ、ごめん、取り乱したわ。
んじゃあ最後に、実務を想定したWeb制作の流れを教えておくね!
制作会社によっては、お客さんとやりとりするのはWebディレクターで、デザイナーは制作するだけ、っていう分業体制のところもある。
でも、一人ひとりに求められるスキルが上がってきているこの時代に、デザイナーが担当するのは制作だけ、っていうのは…
時代の変化に置いてかれてしまうと思うんだよね。
Webデザイナーはディレクターとして、お客さんとのやりとりもできないとダメってこと?
そうだね、個人的にはそう思うよ。
結局、お客さんがいるからWeb制作の仕事ができるわけであって、自分が作りたいものを作るんじゃなくて、お客さんが作りたいものを制作する必要がある。
それなら、お客さんの要望は、デザイナーが自分で直接聞いておいた方が仕事の効率が良いでしょ?
お客さんとのデザイナーの間にディレクターを挟むと、コミュニケーションのミスが発生しやすくなってしまうこともあるしね。
特に制作周りの知識がないディレクターを間に挟む時は、本当に大変だぜよ。
実務におけるWebサイト制作の流れ
制作会社にもよりますが、Webサイトを作る時の流れは、以下のような進め方が一般的です。
- お客様の要望をヒアリングし、ページ構成を考えます。
- ワイヤーフレーム※を作ります。
- ワイヤーフレームを元に、Webデザインを作ります。
Adobe XDやPhotoshop、Illustrator、その他ソフトで制作します。 - デザインをHTML/CSSでコーディングします。
Webブラウザで見られる形式にする作業のことを指します。 - Webサーバーにアップロードして、公開します。
※ワイヤーフレームとは、ページ設計図・デザインの下書きのことです。
お客様の要望をヒアリングしよう
お客様に聞くのはどんなこと?
まずはWebサイトを作る目的だね。
よくあるのは、
集客とか問い合わせ増、資料請求増、Web経由での売上アップ
みたいな感じだね。
何で目的を最初に聞くの?
目的によって、Webサイトの構成とか導線が変わってくるからね。
あとは、デザインの希望イメージとか色合い、ロゴはどうするか?(お客さんの方ですでにデータがあるか、なければコンペなどで新しく作るのか?)みたいなことを確認しておくといいよ。
どんなページを作るかっていうのもヒアリングするんだけど、お客さんによっては作るべきページが決まってないこともあるね。
そういう時は、こっちからページ構成を提案してあげちゃうのも手だぜ!
とりあえず今回は、美容院とか整骨院、クリニック、飲食店、お花屋さん、みたいなお店のサイトを作るという想定で考えてみようか。
どんなページを作ればいい?
美容院を例に挙げるなら、以下みたいな構成がベースになることが多いかな!
美容院の作成ページ例
トップページ
┣ お知らせ
┣ 初めての方へ
┣ メニュー・料金
┣ ヘアカタログ
┣ 地図・アクセス
┣ お客様の声
┣ ブログ
┣ よくあるご質問
┣ 採用情報
┣ プライバシーポリシー
┗ お問い合わせ
競合や他地域のお店のウェブサイトを参考にすると作りやすいよ!
ブログ機能を取り入れる時はWordPressっていうソフトを使うことが多いね!
WordPressってよく聞くね!
そう、Webデザイナーになるなら、使えるようになっておきたいソフトではあるね。
ただ、初心者にはハードルが高いから、WordPressの説明はいったん割愛するぜ。
お問い合わせフォームをちゃんと実装するとなると、PHPみたいなプログラミング言語を使う必要が出てくるんだよね。
いきなりやるのは難易度が高いから、最初はGoogleフォーム※を利用する方が安全かも。
※Googleフォームとは、カンタンにフォームが作成できるGoogleのツールです。
あとは会社の方針でお問い合わせフォームをどう実装するかっていうのが変わってくるから、実務の時は上司や先輩に相談するのがいいよ!
ワイヤーフレームを作ろう
ワイヤーフレーム=「ページ設計図・デザインの下書き」ってことだけど、どうやって作成すればいいの?
ぶっちゃけ、何でもいい!
エクセルやパワーポイントで作る人もいるし、手書きで書く人もいるし、CacooみたいなWEBツールを使う人もいるし。
Cacooの他にも、ワイヤーフレーム作成用のWEBツールは、以下みたいにたくさんあるよ!
ワイヤーフレームを作る時、どういう流れで考えるといいの?
1.情報の洗い出し
まずはヒアリングした情報を元に、Webサイトに載せる情報を整理しよう。
整理というよりは、全部出す!みたいなイメージだね。
その後に似たような情報をまとめるんだ。
例えば、「住所や電話番号、営業時間」「サービス内容とサービス写真」みたいな感じでね。
2.レイアウト・配置を決める
置くべき情報が決まったら、それをどこに置くかを考えてレイアウトを決めよう!
ヘッダーメニューはどのような項目を置くか、コンテンツ部分に何を置くか、サイドメニューを設置するか、フッターには何を置くか、みたいな細かいところも考える必要があるね。
いったん手書きをしてしまうのが良いかもね。競合や既存サイトを参考にしながら書くと、スムーズだぜ!
3.清書
綺麗に手書きができるなら、それをお客さんに見せてもいいけど…なかなか綺麗に書くのって難しいよね。
手書きに自信がないって人は、それを清書すればOK!上記で書いたWEBツールなんか使うと楽だよ!
ワイヤーフレームのテンプレートなんかを使うのも良いかもね!
それな!
3.Webデザイン~コーディング~サイト公開
お客様に作成したワイヤーフレームを見せて承認がもらえれば、あとは自分のサイトを作った時の流れと同じでOK!
適宜お客様に現状の進捗報告とイメージにずれがないかは、確認しながら進めてね!
お客さんとのコミュニケーションって震えるね。
最初は誰でもそうさ!コミュニケーションについては、慣れるしかないね!
僕らの仕事は、メールでのやりとりがめちゃくちゃ多いから、メールマナーも学んでおくことをおすすめするよ!
この業界、メールが下手すぎる人多いし、それで仕事を失うこともあるからね。
メールだと、キャバ嬢のテクニックは通用しないね!気を付ける!
就職・転職を急ぐ人はWebデザインスクールに通おう!
という感じで、完全未経験からWebデザイナーになる準備や方法を長々と説明してきたけど、未経験デザイナーが就職・転職するまでの道のりはイメージできたかな?
うん、何となくね。これ時間かかるね~
独学は正直ハードルが高いよ。
僕は自己投資してスクールに通うことをおすすめするぜ。
僕自身もスクールで学んだからね。
今みたいに良いスクールがなかったから、現場で使われてないような知識ばっか身に付けさせられて、意味なかったけど(笑)