WEBデザイン

【WEBデザイナー目指す人必見】サイトデザイン作成過程を大公開しちゃいます!

こんにちは!WEBデザイナーのシズです。

最近WEBデザイナーを目指す人が増えてきましたが、プロのWEBデザイナーがサイトデザインを作る過程って見てみたくありませんか?見たいですよね!

そこで今回は特別に、WEBデザイナー歴半年の私がデザイン作成する過程を大公開しちゃいます!

正直私も経験はまだ少ないですが、実務未経験の人や独学で勉強している方には少なからず伝えられることはあると思います。

経験が少なく初心者に近い分、真似できる部分は多々あると思いますので是非参考にしてみてくださいね!

スポンサーリンク

初めて作ったWEBサイトをリデザインします!

今回はまったく何もないところから作るのではなく、私が初めて作ったWEBサイトをリデザインしていきます。

まずは私がWEBデザインを勉強して1ヶ月の頃に作った架空着物会社のHPをご覧ください。

http://shizu.html.xdomain.jp/

上記のサイトをリデザインしていくので、1ヶ月と半年(現在)でどれだけデザイン力が変わっているのかということも是非参考にしてみてくださいね。

ヘッダーデザイン作成過程

まずはヘッダーデザインを考えていきます。

私がデザインするときに必ず使用するのが、「Pinterest」というサイト。

検索窓に「WEBデザイン」と入力して検索すると、いろいろなデザインが表示されます。

デザインは頭の中で考えるよりとりあえず手を動かすことが大事だと私は思っているので、いいなと思ったデザインがあればそれを参考にして作成していきます。

そして最初に作成したヘッダーデザインがこちら。

う~ん、なんかイマイチ。

ヘッダー部分がダサいし、メインビジュアルもイケてないのでこれはボツ。

実際作成してみてイマイチだった場合は、またPinterestから良さそうなデザインを見つける過程に戻ります。

そして次に作成したヘッダーがこちら。

これもなんか違ーーーーーーーう!!!

ということで、また一からやり直し。

私のやり方、効率がすごい悪いかもしれないんですけど、頭の中に描いているデザインって実際作成してみると全然違う見え方になることもあるんですよ。

だから私はめんどくさくても効率が悪くても、このようにひたすら手を動かし続けます。

そして三度目の正直!思い切ってシンプルにしてみました。ドーーーン!

一番しっくり来たからこれに決定!(背景が同化して分かりにくくてすみません…)

やっぱりシンプルなのが分かりやすくていいですね!

デザインスキルが低いうちは、オシャレにしようとかカッコよくしようとすればするほどカッコ悪くなったりします。(私がそうでした)

そもそもスキルもセンスもまだまだ足りないので、変に凝ろうとするより分かりやすいデザインを目指した方が結果的に見た目も良くなる気がします。

コンテンツデザイン作成過程①

無事にヘッダーデザインが作成出来たので次はコンテンツ部分を作成していきます。

1つ目は「きらくについて」という着物会社の概要を紹介するAboutページ。

この部分に関しては頭の中で既にデザインが浮かんでいたので、それに沿って作成していきました。

そして出来たのがこちら。

画像とテキストを重ねるレイアウト、私はよく使います。

白いボックスはそのままだと背景に同化しちゃうので、ボックスの右側と下にシャドウを入れました。

そして見出し部分は変に装飾せずこちらもシンプルに。

ただこのままだとな~んか物足りない感じがします。

そこでヘッダー部分にも使用した桜のイラストを加えてみました。

結構いい感じになったのでこれで完成!

頭の中で描いたデザインが思い通りになったときは早いですね。

これでヘッダー~1つ目のコンテンツ部分のデザインが完成しました。

コンテンツデザイン作成過程②

では続いて2つ目のコンテンツである「サービス一覧」部分をデザインしていきます。

こちらもPinterestを見て参考にできるデザインを探します。

Pinterestを見ていると背景色が交互になっているデザインが良さそうだったので、まずは背景色を作ってみました。

サービス内容は3つあるので、ピンクと白背景を交互に置いてみました。

では中身の部分も、Pinterestからインスピレーションを得たレイアウトで作成していきます。

ひとまずこんなレイアウトで要素を配置してみました。

これも私がよく使うレイアウトデザインなのですが、画像とテキストを交互に置きます。

01とかの数字部分のフォントを思いっきり大きくすることでコントラストを出します。

でもこれだけだとシンプルすぎてなんか寂しい。

そこで、先に作成したAboutページと同じように、桜のイラストを配置してみました。

桜を入れただけで寂しい感じがなくなりました!

私はこれで満足したので2つ目のコンテンツ部分はこれで完成!!

コンテンツデザイン作成過程③

次は「店舗案内」部分をデザインしていきます。

ここは変にレイアウトは凝らず、ユーザーがぱっと見てすぐに情報が分かるようにシンプルなレイアウトにしました。

左側に店舗の写真、右側に店舗情報を配置。

でもさすがにこれだけだとシンプルすぎて味気ありません。

そこでここにも桜のイラストを使用してみました。

少しマシにはなったものの、まだなんか物足りない感じが残っています。

そこでユーザー目線で考えると何が欲しいか?を考え、予約ボタンを配置することにしました。

この架空着物会社はサービスとして着付けを行っています。

これを見たユーザーが予約したいと思ったときに、電話番号を一から入力して電話をかけるのではなく、電話予約からすぐに電話出来れば便利ですよね。

あと、リデザイン前は「駅から徒歩5分」の部分の情報は入れてなかったのですが、ユーザー目線で考えるとこの情報はあった方がありがたいですよね。

ということで、この部分はこれで完成としました!完成したものがこちら。

※神戸本店の住所は神戸市役所の住所、京都店の住所は京都市役所の住所を入力しています。

デザインカンプ完成例

フッター部分は背景色だけ変えて同じものを使用したので、省略させていただきます。

あと、何人かの方はお気付きかと思いますが、最後のコンテンツ部分「会社概要」は作成するのを忘れておりました。すみません…

なので会社概要を抜いたデザインカンプをご覧くださいませ。

完成版ドーーーーーン!!!

こんな感じになりました。

それではここでもう一度、元のデザインをご覧ください。

http://shizu.html.xdomain.jp/

どうでしょうか?

初めてデザインしたときのサイトと、半年経験を積んだ後のサイト、私は自分でも成長したなと感じています。

ちなみにこれだけ作成するのに5時間かかりました。ここはもっと短縮できるように頑張る!!

まとめ

私はデザインって一から作り上げるものではなく、自分の中にある引き出しをいかに上手く組み合わせるかだと思っています。

だから日々の生活の中でも看板やチラシ・ネット等、身の回りにあるデザインを常に意識し、いいなと思ったものは写真を取っておくことをオススメします。

自分の頭の中のデザインストックが貯まれば貯まるほど、デザインスキルも上がるしデザインの幅も広がりますよ!

…と経験少ないくせにエラそうなことを言っちゃいましたが、私も日々精進するのでみなさんも一緒に頑張りましょーね☆