配管工事会社様のコーディング

今日の作業は新規案件のコーディングです。
振り返ってみると、コーディングをしている的なブログを書いたことがなかったので、簡単に作業日誌を書いてみたいと思います。

新規案件のコーディングはWordpressの初期設定から始まる

今回は福井県の配管工事会社様のサイトです。
職種を問わず、コーディングの始まりはWordpressの初期設定から始まります。

WordPressを簡単インストールし、設定をいじくり倒し、function.php、header.php、footer.phpにjsやWEB fontなどの読み込み記述を記述します。
細かい作業内容はお伝えできませんが、Wordpressの初期設定でだいたい1日かかります。
作業としてコーディングできるようになるのは、2日目から始まるパターンが多いです。

コーディングはどこから書き始める？

人やホームページ制作会社によってどこからコーディングするのかけっこう違うと思います。
僕の場合はfooter → header → TOPページ → 各下層ページのメインビジュアル → 下層ページの順でコーディングします。

この書き順には色々こだわりがありますが、footerから書き始めたほうがheaderやメインビジュアルを書くときに楽というのが一番の理由です。

さらに言うならfooterのコーディング前に、sectionやCTAボタン、section titleなどの共通項目を一気に書いてしまいます。
共通項目の記述を先に終わらせると変に表示崩れしないので、気持ち良くコーディングできるわけです。あと単純に楽です。

レスポンシブ記述はclampでクリーンになる

去年の今頃はレスポンシブ記述のためにremやらemなどを使っていた時期が僕にもありました。
今はclampを使っているので、ほぼ一つの記述で375px～1920pxまで行けます。

例えば、font-sizeはデバイスごとに異なるサイズになることが多い要素です。
スマホは13pxでPCは16pxなんて場合はあるあるパターンです。
それをclampを使うとこういう書き方になります。

font-size: clamp(0.813rem, 0.727rem + 0.36vw, 1rem)

この記述をスマホ（モバイルファーストで記述している場合）サイズのCSSに書けば、流動的にfont-sizeが変わっていきます。
記述が減るということは、CSS全体の容量を減らせるので微力ながらサイト表示スピードも早くなります。

ホームページ制作 コーディング2日目

コーディング2日目はfooterとheaderとメインビジュアルのコーディング。
一日目に初期設定を終わらせているので、スムーズに作業できます。

今回はよくあるレイアウトと特別凝ったデザインではないので、コーディングは非常に楽です。
WEBデザイナーでコーディング知識がない場合、大抵の場合でコーディングが整頓されず大変な状態になります。

僕の奥さんは今でこそデザインすることが多くなりましたが、コーディングスキルは僕よりも上です。
そんな奥さんがデザインしているからこそ、コーディングがスムーズに行えるのです。

Aster Workでスライドショーを使う場合は、昔からslickを使っています。
特別すごいスライドショーではありませんが、シンプルかつ汎用性が高いところが気に入っています。
メインビジュアルにスライドショーを使用するケースが多いので、今回の案件でも使用しています。

今回の案件は非常にスムーズに進み、2日目でheader footer メインビジュアルを完了できました。
今日が3日目なので、TOPページと下層ページのメインビジュアルの完了が目標です。
ただ、今日は夕方から和歌山のお客様と打ち合わせが一件入っているので、完了できるか微妙なところです。

コーディングにかかる時間の目安

サイトによって全然違うので、一概には言えません。
デザイン性やアニメーションをどれだけつけるかによって変わりますし、ECサイトの場合などもあるので一括りでは言えません。
今回の案件のようにコーディングしやすいサイトの場合、1週間あれば完了するかいいところまでいきます。

作業日誌「コーディング編」のまとめ

今回の案件はまだ完了していないのでお見せできませんが、また時期を見て制作実績を更新していきます。
この案件が終わる頃にはまた新規案件のコーディングがスタートしている予定なので、またブログでご報告したいと思います。