お知らせ
NEWS

初学者に知って欲しい! 「WEB制作とは?」

2021.05.24

ブログ

皆さん初めまして。 Mon Webの楠本です。

以前のサイトから色々ブログを書いてきましたが、これからも少しずつ情報発信をしていければと思います。

もしかしてWEB制作を勘違いしてる?

最近ありがたいことに初学者の方を教える機会をいただきました。 週1回のペースで進めていますが、勉強意欲も強くて教えていただけるこちらとしてはとても嬉しい限りです。

その方を初めてお話しさせていただいた時です。
その時に言っていたのが、「WEBを自分で作れるようになって職業にしたい」と言うものでした。

それを聞いて自分で理由を聞いた所色々分かりました。

コードがかけてもWEBは作れない

その方はオンラインの制作スクールを受講されていて、そのカリキュラムに沿って勉強を重ねてきたそうです。 なので“コードが書けるからWEB制作出来る”と思われていたみたいです。

そう、ここが落とし穴なのです。

オンラインスクールでコードを書くだけでなぜサイトが作れるのか? それは画像素材が予め用意されているからです。 自分はオンラインスクールを受講した事が分かりませんが、多分画像のパスをこれに設定しなさいとか素材をダウンロードして自分で設定しなさいと言うことかなと思っています。

この手法は現場ではほとんどありません。(あるとしてもごく稀ですが…) 

WEBを作るにはデザインツールを触ることは必須

実際に自分が制作する場合に行う手順を簡略化して書いてみます。

1.デザインデータをもらう
2.デザインデータから画像にする部分を書き出し
3.カンプデータに沿ってコーディング


こちらを行って制作を進めていきます。 
なのでWEB制作をゼロから制作をしていくには、デザインツールを使える事が必須条件となります。

それはなぜかと言うとスクールで用意してくれた素材を自分自身で作らなければいけないと言う作業が必ず発生すると言うことです。

これはコーダーの裁量に全て委ねられます。(CSSで実装するのか画像として実装するのかの判断は自分次第) 画像は増えるほどページ読み込みが遅くなるので、自分のレベルに合わせて画像を書き出す必要があります。 極力CSSの記述で実装するのが望ましいですが、初学者の方だと中々難しいとは思います。 それは後の勉強で解決していく事が望ましいです。

ここでネックになってくるのがデザインデータがどのフォーマットで来るかと言う点になります。

WEB制作で多く使われるデザインツールは、Illustrator、XD、Figma、STUDIO辺りでしょうか。
なのでコーダーの方は少なくとも上記のデザインツールから画像を書き出す方法を知っておかなければならないということになります。

最近の傾向としてはXDが多くなってきているイメージですので、課金なしで対応は出来ると思います。 ですが自分がコーダーのみで対応する場合は必ずデザインデータがどのデータで送られてくるかの確認は必要です。

そのフォーマットから自分で画像を書き出してコーディングを進めることになります。

最後に

意外にWEB制作は色々な工程を重なっている事が分かりましたでしょうか?

これはどれもが欠く事が出来ない事なので、今後WEBで頑張りたいという方にお伝え出来ればと思います。 今後「WEB制作一本でいこう!」という方はフリーでデザインカンプを配布したりしている方がTwitterとかでいたりしますので、そちらのデータを使用してゼロからの構築をする事をオススメします。

このブログを読んで参考になったと思う方がいらしたらTwitterのフォローやFacebookをフォローしていただけると嬉しいです。

それでは、また次回に!

BACK