【初案件攻略】褒められるWeb制作のチェックポイント5つ

f:id:valuetimes:20210119161652j:plain

初案件を獲得したあなた！

「勉強して初案件を獲得できたけど、不安」、

「初めての実務でどこを押さえればいいのかわからない」

と思っているのではないでしょうか。

実践的な最低限のテクニックを5つ紹介します！

この記事に書いてあるようなテクニックは、初心者向けの教材には載っていないことがほとんどなので、

これらを押さえることで、周りと少し差をつけることができるでしょう。

私はWeb制作を始めて5カ月で、Web制作チームとコーダーとして、パートナー契約を結んでいます。

その際にたくさんのフィードバックや、実践向けのテクニックを教わったので、

かなり確実で信頼性のあるテクニックだと思います！

①クラス名は、詳しく分かりやすく

クラス名は、その部品はどこの部品で、どんな役割があるのか、具体的に書きましょう。

良い例

「firstview_catchcopy_text」
「header_menubar_button_clicked」

悪い例

「header_button_red」
色や形など、役割が詳しくわからないクラス名を付けない

「fv_bt」
firstview → fv button → bt など、略さない

大事なことは、長くなってもいいから、具体的に、役割がわかるようにクラス名をつけることです。

何も知らない友達に向けて書いてあげるようなイメージを持つと良いと思います！

画像の軽量化は、Webサイトの読み込み速度に影響するので、必ずしておきましょう。読み込み速度の低下は、集客にすごく悪影響となります。

画像を簡単に軽量化してくれるサイトがあるので、これを活用しましょう。

ここに画像を入れ込むだけで、5秒ぐらいで簡単に画像を軽量化してくれます。

margin paddingは、上下左右全て指定しましょう。

　margin: 0 0 5px 0;
　padding: 0 0 0 2px;

また、paddingは中が狭くなるため、box-sizing: border-boxを設定しておきましょう。

flexは、direction justify-content wrapまでは、一通り設置しましょう。

background-imageも、repeat position sizeまでは一通り設置しましょう。

納品前の最終チェックとして、以下のサイトにURLを入れてみましょう。

このページにURLを入れるだけで、サイトの読み込みスピード、良くないところ、

改善すべきところなどを、全て評価して教えてくれます。

かなり便利なツールなので、必ず活用しましょう！

初案件は、本当に今まで学習してきたことで十分なのかと不安になりますが、基本的に全く問題ありません。

8割ぐらいの理解で、あとはググりながらやっていくことで、だいたいは形になります。

ただ、今回紹介した項目を押さえれば、初案件でもかなり褒められる、

質の高いWebサイトが完成するはずです。

サイトの軽量化ができていて、カスタマイズが容易になります。

まだまだ世の中には、実践的なテクニックがあふれているので、沢山の案件を通して、

どんどんテクニックを学んでいきましょう。