WEBデザイン

WEBデザイナーへの道 #3 ~模写サイト公開~

WEBデザイナーへの道 黒本 HTML CSS
岸鍋あや
岸鍋あや
みなさんこんにちは!
岸鍋あや(@kishinabeaya)です。

WEBデザイナーになると宣言してから早半月。

あわせて読みたい
WEBデザイナーへの道 黒本 HTML CSS
未経験からWEBデザイナーになるまで #1 改めて宣言しますが、私はアラサーで独身なんですよね。 さらに資産もなければ東京が実家な訳でもありません。 じわじわと将来が心...
あわせて読みたい
WEBデザイナーへの道 黒本 HTML CSS
#2 Webデザイナーへの道 ~宣言することの重要性~ 先日、未経験からWEBデザイナーになる!と宣言しました。 https://positivlog.com/web-desig...

現在は簡単なLP1ページならHTMLとCSS
レスポンシブ対応含めて4時間ほどで完成させられるくらいになりました。

ここまでの効率的な勉強方法実際の成果物を公開していきます。

これからWEBデザインをはじめる・はじめたいという方の参考になればと思います。

サイト模写で制作したもの

まずは、実際にサイト模写したものを公開します
こちらです

松風屋さんのサイト




うらふくしまさんのサイト




LIFULLさんのサイト




効果的な勉強法

ここまでできるようになるまでに行ったことを紹介します

勉強はインプット3アウトプット7が最高です
Progateでインプットを何周かしたら、後は実際にサイトを制作してみるのがいいです

※私も実際にProgateのHTML&CSSを2週したら早速自分のPCの環境でコード書き始めました。

ちなみに使っているエディタはATOMです

最初はProgateを見ながらコードを書いて、応用したりしていました。

そうしているうちに、Progateを見なくても
ここはこうしたらこう表示されるよな・・?とか
こう並べたいからこうコード書こうとかいうのが勝手に浮かんでくるようになりました。

そこまでいったらあとはサイト模写を繰り返します。

iSaraのサイト模写の難易度

一番はじめにやったサイト模写は
定番のiSaraのサイトでした

模写するのに最初のサイトにiSaraを選ぶのは正直無謀でしたww

Progateではスラスラコードが書けていたのに、実際に自分でコード書くとなると指が全然動かない!何をどうしていいかわからない、となり、頭が沸騰していました。

そんな時にしたこと

・それでも少しずつまずはHTMLだけ全部コード書いてみる
・後でいくらでも直せるので、HTMLは軽い気持ちで書いて大丈夫!
・困ったらあらゆるものを<div>~</div>で囲んでおく

次にCSSです
ここは、手が止まったらすぐにググろう

「CSS 画像 テキスト 横並び」
「CSS 大きい カギカッコ」

とかすぐググってました

でもコード合ってるはずなのに思った通りに表示されない時がかなりあって、その度に頭が沸騰して死にそうでした

そんな時の意外な理由がこちらです

よくよくみてみると、”text”と書いたつもりが”tect”となっていたり、
”}”をつけるのを忘れていたり、と凡ミスが原因であることが多かったです

そして1週間ほどかけて完成したのがこちらです

iSara模写 完成版

iSara模写









ひたすらサイト模写を繰り返す

サイト模写をひたすらやろうと決めました。

このサイトで探しました

イケてるデザイン

まずはシンプルなサイトから模写に取りかかるといいです

コーディング学習で重要なマインド

必ず毎日コード書く!短くてもいいからコードに触れる!を約束事にしています。

筋トレでやダイエットでは1日サボると3日分無駄になる、1週間サボると1か月分が無駄に言われています。

WEBデザインも同じだと考えています
1日でもコードを書くのをサボるとダメな気がして、自分を奮い立たせています

WEBデザイン学習中のみなさん!
一緒にがんばりましょう!

Twitterで気軽に話かけてくださいね!!

次の記事はこちら↓

あわせて読みたい
WEBデザイナーへの道 黒本 HTML CSS
HTMLコーディングのバイブル!黒本は学べる! -WEBデザインへの道#4- https://positivlog.com/web-design-3/ の続きです さて現在の状況はどうなっている...

COMMENT

メールアドレスが公開されることはありません。