どうもこんにちは。 WEBデザイナー・ディレクターのやったんです。
今日は、未経験・初心者からのWEBデザインの作り方について書いていきたいと思います。
初心者が、WEBデザインを作る際にやりがちなこと
初心者・未経験の方が、WEBデザインを作る際にやりがちなことから説明します。
絶対ダメですからね、（やってくださいという意味ではなく、本当に。）
それは、いきなりデザインソフト（Photoshop等）を立ち上げることです。
Photoshopを立ち上げると、真っ黒なキャンバスが出てきますね、初心者の方がそこで
大抵固まります。
「えっ、これからどうするんだっけ？」と。
自分の頭の中では、作りたい理想のWEBデザインがあることでしょうか。でも、その理想のデザインを
実現するためにまず何をするのかがわからない。フリーズします。そして、しばらくうんうん唸ったあと、
そっとソフトを閉じる。そして自分には、デザインセンスがないから・・・と自己嫌悪に。
まあ、そこまで行かないかもしれないですが、これは悪い例ですからね。
きちんとしたステップを踏めば、WEBデザインはちゃんとできますから、そこを覚えてもらえれば。
WEBデザインステップ１:作るサイトの決め方
美容室なのか？ ECサイトなのか？ 企業サイトなのか？ ニュースサイトなのか。
この時、初心者・未経験の方におすすめしたいのは、できるだけ情報が少ないサイトの方がよいですね。
例えば、ECサイトやニュースサイトは非常に情報が多いです。なので、それだけデザインに時間もかかります。
あとは、LP（ランディングページ）も避けた方が良いですね。ページが非常に長いですし、ストーリ性のある
デザインを作らなければならないので初心者にはハードルが高いです。
WEBデザインステップ2:まず作るサイトのイメージを固める
その際には、自分が作りたいサイト近いWEBサイトを最低10個みてください。
その中で、今の自分でもなんとなく作れそうなデザイン（これは完全に主観でOK）で、ボリュームが
そこまで多くないものにしてください。
最終的には、これが一番近いな！ とおもうWEBサイトを2,3個まで絞ってみてください。
WEBデザインステップ3:ソフト（Photoshop）を使う前にやること
さて、ここでPhotoshopを立ち上げて・・・と言いたいところですが、まだですよー。
はい、ここで紙とペンを出してください。
「えっ、WEBデザインでしょ？ 紙のデザインではないよ！」と思わないでください。
この段階のことを僕らは、設計と言ってます。
家を立てる時に、いきなり土台から作らないですよね。まずは、設計図（ワイヤーフレーム）をつくりますよね。
ここでは、参考に残したサイトをみて、自分が作りたいサイトを手書きで紙にラフに書いていきます。
ロゴはここにおいて、メニューはここで５つぐらい、メイン画像のイメージはこんな感じで、
ボタンはこんなイメージで、ニュースはここにおいて・・・・等々。
要素を配置していくんですね。
こうしていくと、WEBサイトの全体がしっかりと見えてきますので、なんとなく作れそう！ とイメージが上がっていきます。
WEBデザインステップ4:Photoshopを使って大枠を作っていく
サイトの設計図ができたら、ここでPhotoshopを立ち上げます。（ようやくですね）
サイトの横幅は、1200pxにしましょうか。縦幅は、なんでもよいのですが、5000pxぐらいにしておきましょう。
キャンバスができたら、次は、手書きの設計図を今度は、四角（矩形）ツールでざっくりパーツを作ります。
グレーの四角を配置していくイメージです。テキスト部分は、テキストテキストと書いておくだけでいいです。
これをロゴから、最後のフッターまで作りましょう。
そのように大枠をまずはつくり全体のバランスをみます。
「ちょっとメイン画像でかいなぁ、ニュースは横幅いっぱいでなくてもよいかなー、ボタンは３つ出なくても良いかな？」
とか色々気がつきますので、ここで調整をしていきましょう。
WEBデザインステップ5:細部を作っていく
ここから細部を作っていきましょう。ここでのポイントは、なるべく早くファーストビューと言われる部分（WEBサイトを開いた時にスクロールしないで見える範囲）のビジュアルを作ってしまうことです。
特にロゴ・メニュー・メイン画像をきちんと作ると、なんとなくそれっぽいWEBサイトに見えてきます。
いきなり全てを作ろうとしても無理ですし、時間もかかるので途中で投げ出しちゃうこともあります。
なので、一番最初に見える部分を作ることで、モチベーションが上がってきますので、まずはそこまでしっかり作っていくことが重要。
そのあとは、ある程度ゆっくりでも大丈夫です。
おまけ:まずは模写から始めることが上達の近道
初心者・未経験の方に最初におすすめしたいのは、気に入ったサイトで比較的作りやすそうなサイトをそっくりそのまま作ることが一番良いです。
オリジナルサイトをいきなり作るのは、実はかなり難しいですし、プロでも時間がかかります。
まずはコピーサイトをつくることで、プロがどんな技術をつかっているか、どんなデザインをしているのかを追体験することができます。そうすることで、自分のデザインの引き出しがどんどん増えていきますので、
まずは２、３サイトぐらいは、コピーサイトをつくることを非常におすすめします。
以上、WEBデザインの作り方をご紹介しました。
ポイントは、すぐソフトを使わないこと、そして大きなものから作り始めて、細部は一番最後に作る。
これを守れば、初心者の方でも比較的スムーズにWEBデザインができるかと思います。