【webデザイナー勉強記録】トレースしたサイトとそっくりのサイト作り①

トレースLP作り

こんにちは。

私は職業訓練校のwebデザイナー養成科で初めてwebデザインを学びました。
同じような人とかprogate終わって次何しよ~って人のためにこの記事を書いています。

今現在の私はECサイト運営をしている会社でパート勤務しています。
バナー作りがメインでHTML&CSSはちょこっとイジってるくらいです。
ぶっちゃけweb制作やってないのでいいのですが…1ケ月くらい何もしないとマジで忘れていたのでやばいなーと思い模写を始めました。

前の記事を読んでもらったらわかるんですけど、模写はちょっと頭使うし、手が止まるとモチベーション下がるという理由でトレースをしてます。

で、このトレースしたサイトと同じ構造のサイトをオリジナルで作っていこうという感じです。

とりあえずのパーツづくり

トレースしたサイトがバスソルトのメーカーでした。
何のサイトにしよっかな~と思い考えたのがジャムのサイトで、仮の社名は「Perori」。

フォントはちょっと違いますけど、似た感じのタイトルも作成。
とりあえず今日はヘッダー部分の作成を終わらせています。

モジョモジョの部分

これですよ…

私が作ったのは

なんか荒々しい感じになりましたが、まぁいっか!

イラレのブラシをライブラリから呼び出して、ぺっぺっぺーと書きまして、アウトラインを作成したのち、長い四角を描いてオブジェクトの合体で結合!

同じ感じでこちらも…

メインカラーはこの色と上のモジョモジョに使ってるオレンジみたいな色です。

赤い方はざくろカラー(#d7003a)
オレンジはレモンカラー(#ffe460)
ジャムだから赤でもよかったのですが、職業訓練校の卒業制作でいちごのサイトを作ってて赤をガッツリ使っていたので同じような赤は使いたくなくて避けました。

次やること

次のセクションのパーツは囲みの部分

これ↑を作らないといけないので頑張って作っていきたいと思います。
ここが終わるとイラストも必要なのでそれも描く予定です。
それにしても一つのサイトにこんなにパーツが必要って大変だな…

まとめ

割とこの方法楽しいです。
クラウドソーシングでどうせ案件取れないし()だからって何もしないわけにもいかないのでこの方法は私には結構合っている気がします。

LPをまとめてくださっているサイトを全部やりきったら結構力になってるような気がしますね…

完全模写が苦手な人の勉強方法として成り立つのか頑張ってやってみます。

あやみ@パラレルワーカー1年生
この記事を書いた人
あやみ@個人事業主1年生

ヲタクをしたくて結婚と同時に会社を辞めました!
webデザイナー・イラストレーター・Youtuber/ロゴ作ったりヘッダー作ったり。 30over、子なしシュフでございます。 職業訓練校卒。現在EC運営会社にパート勤務してます。K-POPオタク。受注も受けますのでお気軽にDMどうぞ。 #モモンガオンラインサロン 所属 なりたい生活のために勉強邁進中!

あやみ@個人事業主1年生をフォローする
トレースLP作り
あやみ@個人事業主1年生をフォローする
クリエイターへの道

コメント

タイトルとURLをコピーしました