こんにちは、ヒカルです
現在プログラミングスクールのデイトラWeb制作コースで月に５万円稼ぐためにプログラミング勉強中です。
現在はウェブ制作コースの前半まで完了して後半の講座に取り掛かります。
これから実装するデザインカンプはこんな感じです。
今日からデザインカンプの実装をするうえで注意する点や目標を上げていきます。
こんにちは、プログラミングスクールのカモのヒカルです。
現在デイトラWeb制作コースで月に５万円稼ぐためにプログラミングを勉強中です。
- IT業界未経験でプログラミング初めてみた
- プログラミングスクールに入って稼げるか試してみた
- ブラック企業の社畜奴隷
デイトラ中級編では最後の課題としてデザインカンプから１つのウェブサイトを完成させます。
今までは解説動画がありましたがこのデザインカンプには解説動画がありません。ですので、自分一人完成させる必要があります。一応模範解答のサイトは用意されていますが、この模範解答は見ることなく完成までもっていきたいです。実際の仕事では模範解答が用意されていませんし、自分一人で完成させる必要があります。
プログラミングスクールに入って勉強したいという人は「趣味で学習したい」というよりは「スキルを身につけて仕事にしたい」と思っている方が大半だと思います。
品質を確保することは非常に重要です。時間をかけても構いませんので、過去に学んだ「PerfectPixelを使ったチェック＆修正」や「コーディング後の品質を担保するチェック」を復習し、コーディング後の品質チェックに充分な時間を作っていきたいと思います。
残酷な現実ですが、初めてのプロジェクトで品質が低かった場合、次の依頼を得ることは難しいかもしれません。この業界は厳しい競争がありますので、最初に悪い評価がついたら取り戻すのはとても大変です。
逆に言えば、品質の高いコーディングを提供できると、クライアントから再度の依頼を受ける可能性が高まります。次のプロジェクトでも選ばれるコーダーであり続けるために、品質を追求しましょう。
仕事だと思って取り組む
1.デザインの正確な再現: デザインカンプのデザインをできるだけ正確に再現することが重要です。個人的に注意すること・フォント、色、レイアウト、および要素の配置などです。
CSSやHTMLのテクニックを駆使して、できるだけ原型に近い見た目を実現しましょう。
2.レスポンシブデザイン:デザインは様々なデバイスや画面サイズに適応できるようにする必要があります。メディアクエリを使用して、異なる解像度や画面サイズに適切に対応することが必要です。
３．保守性と拡張性:コーディングの際には、将来の変更や追加を容易にするために、コードの保守性と拡張性も考慮する必要があります。適切なコメントを追加し、モジュール化されたコードを使用することで、これらの目標を達成できます
コーディングに入る前にカンプをよく観察しましょう。観察が不十分なままコーディングを始めると、HTML/CSSを書いたり消したりして、結局うまくいかず「なんか変なコードになっている気がする」で行き詰まってしまうことがあります。
これは1つ目のデザインカンプをコーディングする際に結構書き直ししたのでホントに大事です。
HTML/CSSのコーディングを始めようと思ったときに、「文法は”覚えている”のに何から書けば良いのか分からない！」というのは多くの人が通る道です。まずはカンプを確認して、どういう”構造”になっているか(したいか)をイメージすることが重要です。
まずはコーディングに入らずによく観察
構造の確認とは、HTMLの要素の親子関係や、表示上の上下左右の位置関係がきれいに整理できている状態とします。整理できていないと、一度完成したと思っても異なる画面幅で見るとレイアウトが崩れてしまったり、その後の微調整が極端に難しくなったりします。
具体的には親と子の関係、兄弟の関係、innerの関係、などです。配色はフォント、サイズなどは後で変更できるので最初はあまり気にする必要がないと思います。
HTMLの構造を理解するための記事を載せておきますのでこの記事を参考にしてください。
デザイナーさんがガイドに沿ってコンテンツを配置している(という意図が感じられる)部分を把握しておきます。特にページの上から下まで揃っているところは、画面幅を変えても揃うようにコーディングできるのが望ましいです。(といったことをコーディング前からイメージしておきます。)あちこち距離を測ってみます。「左右の余白が等しい」「等間隔に並んでいる」などを把握しておきます。
webデザイナーさんは見やすいサイトを作るためにデザインをしています。なにもコーダーを困らせてやろうと思っているわけではありません。必ず統一された基準や幅などがあるはずです。デザイナーの意識を感じるとるだけでもコーディングがはかどると思います。
デザイナーの意図を感じ取ろう
デイトラでは特に期限を設けていませんが今回のコーディングの目標期間は１週間としたいと思います。
見た感じそんなに複雑なサイトでもないですが、実務なら３日くらいの案件かなと思いすが、あまり目標は高くしすぎずに毎日コツコツ作業することが目標なので１週間とします。
もしかしたらもっとかかるかもしれませんが、とりあえず１週間での完成を目指します。
完成目標は１週間以内
