未経験・初心者からのWEBデザインの作り方

どうもこんにちは。 WEBデザイナー・ディレクターのやったんです。

今日は、未経験・初心者からのWEBデザインの作り方について書いていきたいと思います。

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!

初心者が、WEBデザインを作る際にやりがちなこと


初心者・未経験の方が、WEBデザインを作る際にやりがちなことから説明します。
絶対ダメですからね、(やってくださいという意味ではなく、本当に。)
それは、いきなりデザインソフト(Photoshop等)を立ち上げることです。
Photoshopを立ち上げると、真っ黒なキャンバスが出てきますね、初心者の方がそこで
大抵固まります。
「えっ、これからどうするんだっけ?」と。
自分の頭の中では、作りたい理想のWEBデザインがあることでしょう。
(とってもよくわかります。私もそうでした)
でも、その理想のデザインを実現するためにまず最初に何をするのかがわからない。フリーズします。
しばらくうんうん唸ったあと、そっとソフトを閉じる。そして自分には、デザインセンスがないから・・・と自己嫌悪に。
(いや違うんですって、順番があるんですって)

まあ、そこまで行かないかもしれないですが、これは悪い例ですからね。
初心者でもきちんとしたステップを踏めば、WEBデザインはちゃんとできますから、そこをまず覚えてもらえればと思います。

WEBデザインステップ1 : 作るサイトの決め方


さて、最初のステップは、作るサイトを決めることです。
どんなサイトを作りたいのか、明確に決めてください。
美容室なのか? ECサイトなのか? 企業サイトなのか? ニュースサイトなのか。
この時、初心者・未経験の方におすすめしたいのは、できるだけ情報が少ないサイトの方がよいですね。
例えば、ECサイトやニュースサイトは非常に情報が多いです。なので、それだけデザインに時間もかかります。
あとは、LP(ランディングページ)も避けた方が良いですね。ページが非常に長いですし、ストーリ性のあるデザインを作らなければならないので初心者にはハードルが高いです。

WEBデザインステップ2 : 作るサイトのイメージを固める


次のステップは、作るサイトを決めたあと、具体的にどんなデザインを作るかを決めましょう。
その際には、自分が作りたいサイトと近いWEBサイトを最低10個みてください。
その中で、今の自分でもなんとなく作れそうなデザイン(これは完全に主観でOK)で、ボリュームがそこまで多くないものにしてください。
最終的には、これが一番近いな! とおもうWEBサイトを2,3個まで絞ってみてください

参考サイト1:WEBデザインの見本帳|WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!!
参考サイト2:縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

WEBデザインステップ3 : デザインソフト(Photoshop)を使う前にやること

さて、ここでPhotoshopを立ち上げて・・・と言いたいところですが、まだですよー。
はい、ここで紙とペンを出してください。
「えっ、WEBデザインでしょ? 紙のデザインではないよ!」と思わないでください。
この段階のことを僕らは、設計と言ってます。
家を立てる時に、いきなり土台から作らないですよね。まずは、設計図(ワイヤーフレームとか言います)をつくりますよね。
ここでは、参考に残したサイトをみて、自分が作りたいサイトを手書きで紙にラフに書いていきます。
ロゴはここにおいて、メニューはここで5つぐらい、メイン画像のイメージはこんな感じで、
ボタンはこんなイメージで、ニュースはここにおいて・・・・等々。
要素を配置していくんですね。積み木みたいなものだとイメージしてください。
こうしていくと、WEBサイトの全体がしっかりと見えてきますので、なんとなく作れそう! とイメージが上がっていきます。モチベーション大事ですよ!

WEBデザインステップ4 : いよいよPhotoshopを使って大枠を作っていく

サイトの設計図ができたら、ここでPhotoshopを立ち上げます。(ようやくですね)
サイトの横幅は、1200pxにしましょうか。縦幅は、なんでもよいのですが、5000pxぐらいにしておきましょう。
キャンバスができたら、次は、手書きの設計図を、四角(長方形)ツールでざっくりパーツを作ります。
グレーの四角を配置していくイメージです。テキスト部分は、テキストテキストと書いておくだけでいいです。
これをロゴから、最後のフッターまで作りましょう。
そのように大枠をまずはつくり全体のバランスをみます。
「ちょっとメイン画像でかいなぁ、ニュースは横幅いっぱいでなくてもよいかなー、ボタンは3つなくても良いかな?」
とか色々気がつきますので、ここで調整をしていきましょう。

WEBデザインステップ5:細部を作っていく

ここから細部を作っていきましょう。ここでのポイントは、なるべく早くファーストビューと言われる部分(WEBサイトを開いた時にスクロールしないで見える範囲)のビジュアルを作ってしまうことです。
特にロゴ・メニュー・メイン画像をきちんと作ると、なんとなくそれっぽいWEBサイトに見えてきます。
いきなり全てを作ろうとしても無理ですし、時間もかかるので途中で投げ出しちゃうこともあります。
なので、一番最初に見える部分を作ることで、モチベーションが上がってきますので、まずはそこまでしっかり作っていくことが重要。
そのあとは、ある程度ゆっくりでも大丈夫です。

おまけ:まずは模写から始めることが上達の近道

初心者・未経験の方がデザインのスキルを上がるためにおすすめしたいのは、気に入ったサイトで比較的作りやすそうなサイトをそっくりそのまま作ることが一番良いです。
オリジナルサイトをいきなり作るのは、実はかなり難しいですし、プロでも時間がかかります。
まずはコピーサイトをつくることで、プロがどんな技術をつかっているか、どんなデザインをしているのかを追体験することができます。そうすることで、自分のデザインの引き出しがどんどん増えていきますので、まずは2、3サイトぐらいは、コピーサイトをつくることを非常におすすめします。
習うより慣れろですね。最低でも2,3サイトぐらいは、そっくりそのまま作っていくと良いと思います。

以上、WEBデザインの作り方をご紹介しました。
ポイントは、すぐソフトを使わないこと、そして大きなところから作り始めて、細部は一番最後に作る。
これを守れば、初心者の方でも比較的スムーズにWEBデザインができるかと思います。

【完全無料】毎週火・木開催。WEB業界未経験OK! 転職個別相談会!


スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク