こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、コーディングスキルを身につける1番の近道を解説します。
コーディングスキルを身につけて、Webデザイナーを目指そう！
コーディングとは？
コーディングとは、主にhtmlとcssを使って、Webサイト（ホームページ）を制作する業務のことで、必ず必要なものになります。
デザインした1枚のデータをスライスして、1つずつ画像に書き出して、コーディングをします。
コーディングをしないと、ただの1枚のデザインデータになってしまいます。
htmlとcssは、最初見たら何が何だか分からないと思いますが、コツを掴んでしまえば、他の言語に比べて短い期間で習得することが出来ます。
スキルを身につける1番の近道
スキルを身につける1番の近道は、「デザインデータをブロック化する」ことです。
Webサイトのデザインは、大抵以下のようにブロックになっています。
- ヘッダー
- コンテンツ（サイドメニュー）
- フッター
これらを頭の中でブロック化します。
最初は難しいので、紙に印刷したり、手書きで書いてみましょう。
そうすると、コーディングがしやすくなり、さらに綺麗に書くことができるようになります。
参考例
このブログを参考にしてみます。
以下のようにブロックに分けることができます。
ブロック化できたら、次はhtmlをざっくり書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○○○</title>
<meta name="keywords" content="○○○,○○○,○○○">
<meta name="description" content="○○○">
</head>
<body>
<!-- ヘッダー -->
<header>
</header>
<div>
<!-- コンテンツ -->
<main>
</main>
<!-- サイド -->
<div>
</div>
</div>
<!-- フッター -->
<footer>
</footer>
</body>
</html>どうでしょうか。
どこに何を書けば良いか分かりやすいと思います。
コーディングに慣れてくると、上からスラスラ書けるようになりますが、最初はこのようにブロック化にすることで、頭の中でデザインデータがイメージできるようになり、コーディングがやりやすくなります。
最後に
以上、コーディングスキルを身につける1番の近道を解説しました。
僕も最初はコーディングが苦手で、何回も表示確認して、かなり時間がかかっていました。
今は、スラスラ書けるようになり、簡単なものなら表示を確認しないで、頭の中で作りあげることができます。
完成して表示を確認して、デザイン通りにコーディングできたときの達成感はすごいです。
やみつきになります。
コーディングが苦手という方もいるかと思いますが、最初はみんな苦手です。
最初からできる人なんていません。
みんな勉強をして経験を積んできたから出来るのです。
頑張ってスキルを身につけてWebデザイナーを目指しましょう。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント