こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
個人的には2024年現在は未経験・独学からプログラミングで稼ぐにはフロントエンド開発が1番手っ取り早いと考えています！
興味があればご覧ください。
はじめに
今回は「web制作案件」というテーマに対して、
僕が良く遭遇する「あるある」と「対策記事」をセットでまとめました。
フリーランスになりたての方や、これからフリーランスを目指す方は是非参考しにして下さい。
制作準備
「初めてのクライアントさんからの案件だな」
デキる人に見えるズルい仕事テクニック
初めてのクライアントさんの時はいつも以上に本気を出すために、一旦この記事を読みます。
仕事が円滑に進むようなテクニックが誰でも実践できる形で書いてあるので、最高です。
毎回はじめに意識するだけで、ちゃんとした人に近づいている気がして気分が良いです笑
「見積もり額どうしようかなー」
フリーランスの相場：給料の２倍もらってトントン！
見積もり時に迷ったらこの記事を読みます。
自分の場合、時給や人月での計算がベースですが、そもそもどのぐらいの収入が妥当なんだっけ？を考える時の指標にしています。
特に自分はフリーランスなので、福利厚生や各種手当がない部分や営業などに使っている労力をどこまで勘定に入れるかと言った観点でお世話になっている記事です。
「制作期間をどのぐらいでクライアントに伝えようかなー」
プログラミングで一番難しいのは「見積もり」だと思う
実際に制作期間を感覚で出さない為に、迷ったらこの記事に帰ってきています。
この記事で挙げられている
・予想外のタスクはないか
・やったことない事はないか、あればどのぐらい時間がかかるか
・ハマりポイントはないか、あればどこら辺か
辺りは書き出した上で制作期間は判断した方が良いなーと感じます。
「この案件、準委任での参画になりそうだなー」
「お前らのフリーランスになるメリットは間違っている」というお話
案件というと請負が多そうですが、プロジェクトによっては準委任で参画するケースは多々あります。
常駐やチームのミーティングへの参加など準委任だと迷いどころは多いのでコチラの記事で確認します。
準委任と請負に関しては単価にも大きく影響の出る部分なので、知識として知った上で契約を巻く必要があります。
契約は当事者間で自由に決められる節があるので、後のアフターフォローをどこまでするか、ヒアリングや途中経過をどこまで明文化するか、など自分がやり易いスタイルを見つけておくと良いと思います。
全体像
「LPの流れってどんな感じだったっけ？」
とあるLPの制作現場
この記事は実際のLPの制作案件を基にしているので、とても流れがリアルで分かり易いです。
公開前のチェックもとてもしっかりやってるので、これ見ておけばLPの工程での漏れはないはず。
僕の場合はどこまでやるのか予算に応じてクライアントさんに相談しています。
「webサイト制作の流れってどんな感じだったっけ？」
駆け出しマークアップエンジニアのためのWebサイト制作フロー
web制作案件の具体的なステップが書いある為、制作案件に入る前にこの記事を確認します。
そのステップ毎での注意点が充実していてボリューミーですが、全て網羅できたらwebサイト制作では怖いもの無しになってそうなぐらいです。
デザインツール
「photoshop久々で使い方忘れたわ！」
Photoshopのデザインカンプからコーディングに必要な画像や値を取得する方法
普段はfigmaやzeplinを使う事が多いので、デザインがphotoshopで来た際はこの記事に助けてもらいます。
「Figmaの画像の書き出し方忘れたわ！」
Figmaを使って模写コーディングしよう！
Figmaのデザインカンプから画像をダウンロードする方法忘れた時はこの記事です。
その他にも模写コーディングでの練習に使えるHTML to Figmaの使い方などが書いてあります。
また、macだと「option+shift+カーソル」で細かい値を取得できます。
HTML
「HTMLの構成をどうしよう」
HTML,CSSでのwebサイト制作の手順とポイント
自分の記事で手前味噌ではありますが、デザインカンプがある状態をHTMLに起こす際はこの記事を読み直しています。
HTMLをコーディングする前にデザインを基に入れ子構造と命名までは決めると良いでしょう。
「HTMLタグ細かいの忘れた！！」
【保存版】Webフロントエンド基礎力（初心者向け）
HTMLタグで何が適切かを覚えていられないので、この記事で確認しています。
序盤にHTMLタグの一覧があり、重宝しています。
HTMLタグ以外にCSS、Jsの基礎的なことが網羅されていて、ついでに流し見しておくと忘れていた知識が返ってきます笑
CSS
「classの命名規則でBEM使いたいなー！」
一番詳しいCSS設計規則BEMのマニュアル
命名規則は何パターンがありますが、僕はBEMを好んで使っています。
とはいえ、まだまだ漏れも多いのでclassの命名をする際は傍らにこの記事をおいています。
「このclass名はどの英単語が適切なんだーーー！」
CSSのクラス名を決めるときに使うリストをつくりました
classの命名の時に1番苦しむのが英単語の設定ですが、この記事に出会った事でだいぶマシになりました。
複雑でない案件なら、ほとんどのパターンを網羅できているんじゃないのかな。
辞書のように使わせてもらっている良記事です。
「グリッドレイアウトちょっと不安だなー」
CSS Grid Layout を極める！（基礎編）
cssを使っていると、グリッドレイアウトを使う事は多々あると思いますが、不安になったらこの記事に帰ってきます。
グリッドに関してはこれだけで十分なほど充実していて分かり易いです。
さらに場面別の「CSS Grid Layout を極める！（場面別編）」まで合わせれば、レイアウトに関してはほとんどのパターンを網羅できます。
最終チェック
「ブラウザチェックどうやるんだっけ？」
ブラウザチェックはWebサイト公開前後に行う大事な仕事
表示崩れやリンクなどの挙動に不備がないかを各対応ブラウザで確認していきます。
レスポンシブな部分もチェックしたいので、スマホとパソコンの両面で可能な限りの確認をしましょう。
その他
「在宅で案件進めてるけど、上手くいかないなー」
週末在宅ワークの生産性を上げる5つの視点と32の工夫
在宅で案件を進めていると、上手くいかない時に1人でいる事が多いので、精神にきます！笑
何か改善できないかなーとこの記事を参考に参考にします。
午前中に集中力を要するものを行う
机や場所などの環境を定期的に変える
午前と午後で照明を変える
などの実践しやすいtipがまとめられている為、煮詰まった時に重宝している記事です。
まとめ
自分が後で探しやすいように「web制作」というテーマで記事をまとめてみました。
この記事を片手に自分のweb制作がますます捗ると思うとワクワクしてきます笑
以上。
独学でフロントエンドエンジニアを目指している人へ
フロントエンドの仕事を得るまでにどんな勉強をしたら良いのかをまとめました！！
興味ある方は是非ご覧ください。