就職・転職

【新人WEBデザイナー】初めてのページデザイン、何からやればいいの!?

こんにちは。アラフォー未経験でWEBデザイナーへ転職したシズです。

WEB制作会社に入社して10日目、初めてページデザインを任されました…!!

実は私、デザインセンスが全然なくて…

先輩社員さんに「デザインやってくれる?」って言われたときはめちゃくちゃ焦りました。

だって、こんないきなりデザインやらせてもらえるなんて思わなかったし、まず何からやったらいいのか分からない…!

今回は、デザインセンスのない私がどうやってクライアントさんにOKもらえるデザインを作成したのか、一部始終をご紹介したいと思います。

スポンサーリンク

デザインは一から作らずパクる

デザインを任された私はすぐ、正直に先輩社員さんに打ち明けました。

「すみません…私、デザインセンスが全然なくて…。どうやって作成したらいいのかも分からないので、○○さんがいつもどのようにデザインしているか教えていただけませんか?」

そうすると先輩社員さんが教えてくれました。

「ネットでイメージや雰囲気が似ているデザインを探してそれを参考にすればいいよ。」

例えばネットで「WEBデザイン ○○(ジャンルや商品)」とか、「WEBデザイン LP」と検索するといろんな参考デザインがヒットします。

その中から良さそうだなと思ったものを選び、それを元にデザインをしていくのだそうです。

早速私もこの方法でデザインを作成していきました。

①選んだデザインをスクショしてフォトショで開く

今回は、作成するデザインがスイーツショップの商品紹介ページだと仮定してお話します。

まずはネットで選んだデザインのスクショを撮り、フォトショで開きます。

ちなみに全画面のページスクショを撮るにはChromeプラグインの「Full Page Screen Capture」が便利です。

この上から今回作成するデザインをはめ込んでいくので、不透明度を40~50にしておきます。

②ページに配置する要素をはめ込んでいく

参考デザインをセットできたら、その上から今回作成するページに配置する要素をはめ込んでいきます。

既存サイトの新ページデザインの場合、ヘッダーとフッター部分にはそれぞれのスクショをセットしておきます。

この状態で下にセットしておいた参考デザインを非表示にすると、こんな感じになります。

③部分的に変えてオリジナルデザインにする

参考デザインの上に要素を配置しただけだと全く同じデザインになってしまうので、部分的に変えてオリジナルにしていきます。

図形の形や文字のレイアウトを変更し、背景色をつけてみました。

参考デザインと見比べてみると…

レイアウトは同じですが、全く別のオリジナルデザインとなりました。

私が仕事でデザインをしたときはクライアントさんから画像もテキストもまだ来てなかったので、画像やテキストは既存ページから引っ張ってきて作成しました。

最初はざっくりとしたレイアウト(画像やテキストの配置)を決め、その後に画像やテキストを流し込んで見た目を調整しました。

最初は真似てとにかくデザインの引き出しを増やす!

初めてデザインをやってみて感じたのは、デザインの引き出しをとにかく増やさないといけないなということでした。

ベテランの方でもこう言っている方を結構見ますが、最初はとにかく真似る!

そしていいなと思ったデザインがあれば、保存しておく。

いろんなデザインを真似ているうちに引き出しが増えていって、慣れればその引き出しからいろいろ組み合わせていろんなデザインが出来るようになると思うんです。

最初からめちゃくちゃデザインセンスがある人なんて、そうそういないと思うんですよね。

デザインセンスゼロの私でも先輩にOKがもらえるデザインを作成できたので、みんな自信持ってくださいね!