参考サイトの模写でテクニックを磨く

参考サイトを模写する

Progateや参考書でウェブ制作の基礎が身についたら実践練習をしていきましょう。
まず、どのようなサイトでもいいので模写をしてみます。ただし、複雑で難易度の高いものを選択してしまうと難しすぎて挫折してしまうかもしれないので、なるべくシンプルで自分でも作れそうだと思えるものを選びましょう。慣れてきたら徐々に複雑なサイトにチャレンジしてみましょう。ブラウザの開発者ツールを使いこなせば実際のCSSやHTMLを見ることができます。最初のうちは実際のコードを見ながら模写していって、徐々に見なくても作れるようになっていきましょう。サイトを模写すると実践的なテクニックを知ることができたり、見やすいコードにするにはどうしたらよいかのヒントがあったりします。模写を繰り返しながら自分だったらどのように構築するかといったことを考えながらコーディングしていくとよいでしょう。最終的にはデザインも変更してみるなど、デザインスキルも高められるようにするとさらによいでしょう。

自分でサイトを作ってみる

模写がスムーズにできるようになったら、今度は自分オリジナルのサイトを作ってみましょう。例えば自分のポートフォリオサイトを作成すれば、ウェブデザイナーとして仕事をしていくための強力なツールになります。そのサイトを先方に送れば自分のだいたいの力量をわかりやすく伝えることができるからです。経歴や実績も記載しておくとよいでしょう。
オリジナルサイトの作成は模写とは異なりデザインから自分で考えなければならないので、最初は難しく感じるかもしれません。しかし、CSSとHTMLを習得するためには多少デザインが崩れていてもいいので自分でゼロから制作することが重要です。自分の力でコンテンツを考えて、デザインを作り、完成をイメージしてゼロからコーディングしていきます。無事に完成させることができればもうウェブ制作に必要なCSSとHTMLの知識は身についたといってもよいでしょう。
デザインはPhotoshopなどのプロ用のツールを使用するのがベストですが、まだ用意できていなければPowerPointを使ってもよいです。コーディングでわからないことがでてきたら参考書や解説サイトなどで確認しながら進めていきましょう。どうしても作るサイトのアイディアがなければ自分のプロフィール紹介のサイトでも大丈夫です。ゼロから自分だけの力でサイト制作を実践することがCSSとHTMLの知識をまんべんなく身につけるベストな方法だと思います。実際のサイト制作を多く経験することが早く実務レベルに到達するためのコツといえるのではないでしょうか。