ホームページ制作会社的観点のコーディングで注意していること
お久しぶりです!随分ご無沙汰してしまいましたが、表題の通りホームページを制作する上で注意していることを制作会社的観点でメモも兼ねて書き記していこうと思います。(諸説あり)
1.ホームページの全体像の把握
どんな作業でもなるべく効率化したいというのは世の常だと思います。
ここで重要なのは「どのページにどんなパーツがあるのか」、「どのパーツは使い回しが効きそうなのか」です。これは「手を抜く」という訳では決してなく、上記のようなことを把握しておけば力の入れるべきページに100%以上の力を使えると言う考え方です。
2.ではどうやって共通化できるパーツを管理するのかを考える
共通化できるパーツとしてすぐに思い浮かぶものが「ヘッダー」と「フッター」かと思います。
これはまあ日本語で言うと頭と足で、頭がへんてこだとぱっと見の印象が最悪ですし、足がへんてこだとページ全体の締まりがめちゃくちゃ悪くなります。
また、ヘッダーに関してはページ全体を行き来するためのメニューなども大体の場合は内包しているので、ここの使い勝手が悪いとページ全体の印象も悪くなります。
そういった観点からここは毎回そこそこ時間を取って作ってます。
ヘッダーとフッターもそうですが、flexboxを使って横並びにするボックスなどは
ホームページでは多々出てくると思います。(諸説あり)
こういったものはモジュール化してしまってパーツごとにCSSを小分けに作成して、
微調整をページ固有のCSSで行うようにしています。
他にも共通化できるものはたくさんあります。
・ページのメインカラーやサブカラー
・コンテンツのインナーの横幅
・テキストサイズ
・ブレイクポイント
この辺の細かい設定はホームページを作り始める一番最初に全体のベースとなるCSSを作成して、
Scssの変数として全て入力してしまいます。
結構めんどくさい作業ですけど、これやっておくと毎回カラーコードの確認したりとか、
ページごとにちょっとずつコンテンツ幅が変わって気持ち悪い感じには絶対ならないので、やって損はないです。まじで。
この辺の内容に関しては過去の記事でも紹介しているので、
興味が湧いた方は是非ご覧ください!
CSS設計ってどんなもの?
3.idやclassなどの命名規則のすり合わせを忘れない
これ忘れると大事故になります!!絶対にやってください。
バイトとかで制作会社に行ってる方とかもディレクターとか上司の人にしっかりどうするか聞いてあげるとにっこりしてくれますよ。多分。
まあそれくらい大事なことだと思ってるんですけど何が大事なんだいという話。
ちゃんとすり合わせしておかないと、管理がめちゃくちゃにめんどくさくなります。
色々なケースがありすぎるので、よくありそうな事例だけあげますが、
・どこに何のスタイルが効いているか全然わからない。
・修正箇所を特定するための検索がすごく不便になる、
ページ数が多くなればなるほど関わる人も増えると思います。
だからここはしっかり擦り合わせて分かりやすくて可読性のあるコーディングをしましょう!
まとめ
今回はTipsというよりかは何を考えてホームページ制作を行うのがいいのかということを書いてみました。自分が何を考えてコーディングしたいのかを再度整理できていい機会になりました。
もちろんこの辺の考え方は制作会社によって様々だと思うので、あくまで一ホームページ制作会社の考え方として
参考にしていただければ幸いです!!