前回の記事【結論】未経験の初心者がIT業界に転職する方法は3つ【最短】でご紹介したうちの一つ、Webデザイナーになるために勉強すべきことをまとめました。
HTMLコーダーとして技術は一通り把握しているものとします、まだの方は未経験からHTMLコーダーになる方法【勉強方法～転職までのSTEP】を参考にしてください。
クライアントの要望把握
まずはクライアントの要望をヒアリングしましょう。
- なぜサイトを作りたいのか？
- 何のためにサイトを作りたいのか？
ここをしっかりと把握してサイトが完成した際にユーザーがどんなアクションを起こすことが目的なのかを明確にしていきます。
とはいえ練習段階ではクライアントなんていないですよね。
そこでおすすめなのでクラウドワークスやランサーズといったサイトでWebデザイン案件の募集詳細を見ることです。
依頼者が詳しく書いている場合が多いのでそこからイメージをして練習すると良いでしょう。
ゴールを決める
クライアントの要望を聞いてみたら
こんな要望であることは多いです。しかしただサイトを作っても何の効果も得られません。
サイトを作ったら何がユーザーに行われたらゴールなのかを決めなければ意味がないのです。
- 例）歯医者→治療予約の電話
- 例）コーポレートサイト→事業内容の紹介・求人募集への応募
こちらも実際の依頼を受けるまではエアーで練習するしかないですが、既存のサイトを参考に、このサイトは何をゴールとして作られているか、そしてその為にどのような構成になっているかを考えてみると良いでしょう。
コンセプトを決める
何をゴールにするかを決めたのであれば、次はサイトのコンセプトを決めていきます。
コンセプトというと難しいですが、誰の為のサイトなのかを具体的にしていくという作業です。
ゴールは治療予約の電話と決めた歯医者の場合。
- 例）幼児・小学生・中学生をメインターゲットに怖くない歯医者として認識してほしい
- 例）平日の日中は忙しい社会人をメインターゲットに休日・夜間診療をアピールしたい
同じ歯医者のサイトであってもこの二つでは出来上がるサイトのイメージは大幅に違う物になるでしょう。
既存サイトの調査
サイトのゴールも決まり、コンセプトも決まった、では早速制作に取りかかりましょう！
といきたいところですが、ここでいったん既存で似たようなサイトがあれば調査を行うと良いです。
リストアップしたサイトをクライアントに確認してもらい、イメージに近いものがないかなど聞いておくと漠然としていたクライアントのイメージも具体的になってきてます。
作ってからのやり直しを防ぐのに良い手段です。クライアントによっては既に参考サイトを決めている場合もありますので参考にしましょう。
制作ポリシーを決める
対応ブラウザ、対応デバイスをあらかじめクライアントと詰めておきます。
レスポンシブデザインはスマホ・タブレット両方で別物にするのか同様で問題ないかなど。
後でトラブルにならないように対応範囲は事前に決めておくのが安全です。
ブレークポイントは何pxで！と細かい指定のあるクライアントもいれば、レスポンシブは良い感じでよろしくといった具合に適当なクライアントもいますのでハッキリさせておきましょう。
要素の整理
実際に制作に取りかかります。まずはサイトにどのようなコンテンツを載せるのか、パーツの部分を全て洗い出して整理します。
- 例）歯医者→治療予約の電話
- 例）幼児・小学生・中学生をメインターゲットに怖くない歯医者として認識してほしい
であれば
- 目立つところに電話番号
- キッズルームの紹介
- 従来の注射よりも痛みの少ない麻酔方法
- 治療中に診療台に設置されたモニターでアニメが見られる特徴をアピール
などサイトに載せるべきコンテンツをまとめていきます。
- アクセス
- 会社概要
- プライバシーポリシー
などの汎用的な項目も必要です。
こちらも既存のサイトを参考に切り分けてみると練習になります。
どのサイトにもあるような項目はテンプレート化しておくと、2件目以降のお仕事では時短になります。
サイトマップを作る
載せるコンテンツが決まったのであれば、次はそれらを載せてどのようなページを作るかを決めます。
必要なページを洗い出し数を決める。その上でそれらのページをどのような構成にするかを決める、文字で言うと難しいですね。
付箋にページを書いて階層ごとに整理するアナログな方法がわかりやすいかなと思いました。
レイアウトを決めワイヤーフレーム・ラフデザインを作成
決まった構成にそってワイヤーフレームや手書きのラフデザインなどでプロトタイプを作成します。
レイアウトは
- 優先度の高いものを上の方に持ってくる＋強調すること
- 関連情報はまとめて整列させること
を意識してざっくり配置を決めていきます。画像は本物ではなく四角く塗りつぶしたものでOKです。
これが完成した段階で一度クライアントに確認しておくと良いです。
ラフデザインの場合は手書き、ワイヤーフレームは何でもいいといえば何でもいいんですが、無料で利用できるプランもありプロトタイプの作成も可能なAdobe XDで作成するのが良さそうです。
デザインカンプ作成
構成にOKが出れば実際に細かなデザインの作業に入ります。
- 配色
- フォント
- 写真
配色
コンセプトに沿って配色を決めていきます。
例えば食品を扱うようなページでは青を使うのは避けた方がいいでしょう。
青いラーメン、青いカレーなどを想像してもらえればわかりやすいですが、青は食欲を減退させると言われていますよね。
例としてはマクドナルドのロゴって赤と黄色ですよね。業界に合わせて配色を決めていくと良いです。
フォントの設定
webフォントが利用可能になり、webサイトで利用できるフォントの幅も広がりました。
しかしwebフォントの中にはサイズが大きく、読み込みが遅くなる可能性があることも把握しておきましょう。
ゴシック体なら「ヒラギノ角ゴ」を利用するパターンが一番思います。
明朝体においても「ヒラギノ明朝」が使われるパターンが多く、特に指定がなければひとまずこれで作成してみると良いでしょう。
ロゴ・バナー作成、素材撮影
企業であればロゴは既にあるので画像を頂くだけのことがほとんどだと思います。
必要に応じてアイコンやバナーなどは作成する必要がでてくるかもしれません。
またクライアントの施設内の写真など、足りない物があればクライアントに素材の写真撮影をお願いするか自、ら赴いて写真撮影を行うことも必要になるでしょう。
デザインが完成したらクライアント確認
概ね完成したら確認を依頼しましょう。まずこの時点でそのまま通るなんてことはありませんので、概ね完成したらでOKです。
そうすると細かい修正要望が発生しますので、それらに対応していきます。
ここで修正依頼→修正の無限ループになると疲弊してしまうため、修正回数を制限したり修正要望は都度ではなくある程度まとめてから受ける等します。
コーディング
デザインにOKが出たら実際にHTMLとCSSでコーディングしていきます。
場合によってはこの分を外部のコーダーに外注する場合もあります。
ブラウザチェック
完成したらブラウザでチェックしてきます、レスポンシブの確認も忘れずに。
Google Chromeのデベロッパーツールを利用すればPC上のブラウザからスマホやタブレットでの表示を確認可能です。
ただあまり過信は禁物なので、実機を持っているのであれば実機での確認もしておくのが良いと思います。
サーバーの用意・CMSの設置・basic認証もあり得る
場合のよってはここまでの作業を行う必要もあるでしょう。
特にwordpressのデザインに落とし込んだ場合は設置までが一連の作業になりそうです。
basic認証は外部からURLで確認してもらう際に、そのままだ誰からでも見えてしまうのでuserとpasswaord認証をかける機能です。
求人を探す
と、ここまでの流れを一通りこなせるようになればWebデザイナーとしてお仕事をこなせるようになっているとは思います。
とはいえ正直実務を通さなければ学べないことが多いのも事実です。もしクラウドソーシングでこなせそうな案件があれば応募してみるのも良いでしょう。
ただそれだと一人での作業に限界を感じることも多いはずです。
なのでHTMLコーダー兼デザイナー見習い等の求人に応募し、実際の案件でwebデザインのフローを一通り経験するのが一番効率が良いです。
webデザイナーとしての仕事の探し方はまた別の記事で紹介させていただきますね。
まとめ
デザインとはいいつつも、クライアント要望のヒアリングや情報設計などロジカルに考える必要がある作業も多いです。
学ばなければならないことが非常に多く、広い知識を把握・実践できるスキルが求められます。
一人で勉強するには限界がありそうだな…と感じる場合には、webデザイナーとしての基本を学び、一つのサイトを作り上げる工程を体系的に学べるスクールを検討するのも良いでしょう。