元Web制作会社のフロントエンドが自社開発サービスのソースにダメ出し!

Web転職する
スポンサーリンク
スポンサーリンク
スポンサーリンク
自社開発企業に参画して早1ヶ月が経とうとしていますが、そこで見えてくるのはやはり
  • バックエンド重視の体制
  • html、cssが弱いソースコード

かなと思います。

 

今回はおこがましいですが、Web制作会社に5年間身を置いた経験から自社開発企業のhtml、cssに対して物言いをさせていただこうと思います。

この記事では
  • 自社開発系企業のソースコードがひどい実態
  • 自社開発系企業のソースコードがひどい理由
  • 解決策

 

を書いていきます。

  • 自社開発サービスのhtml、cssを書いてるデザイナー
  • 自社開発サービスのhtml、cssを書いてるバックエンド
  • アクセシブル汎用性のあるコードを書きたいフロントエンド

の方々を対象にしています。

自社開発系企業のソースコードがひどい

 

ほんとに申し訳ないですが、自社開発系企業のソースコードはひどいです。

これは知人の間でもよく話が上がってましたし、覚悟はしていたのですが想像通りのひどさでした。。

 

具体的にどうひどいかを何点か挙げてみたいと思います。

モジュールの概念がない

 

モジュールの概念がないです。

モジュールとはパーツの塊であり、例えば

  • 見出し
  • リスト
  • テーブル
  • ボックス
  • リンク

などがあります。

 

モジュールは、それぞれサイト内で使い回すべきです。

つまり同じサイトでページやカテゴリが違うからと言って違うh2見出しやリストのデザインは必要ありません。

違うデザインを用意することでコーダー、デザイナーの作業は肥大化しますし、ソースコードも統制が取れなくなります。

 

もちろん意味がある使い分けはOKです。

例えば同じサイト内でもコンテンツが違うからという理由でデザインをガラッと変えることはありますが、意味のない使い分けはNGです。

 

自分が自社開発サービスで改修したサイトでは5つほどあるテーブルがそれぞれ違うデザインでした。

もちろんそこに使い分けの意味は感じられませんでした。

 

一番の問題は次回テーブルを使用する際、意味づけがされてないため、どのデザインを使えばいいかわからなくなるという問題です。

その問題から免れるために新しいデザインを発生させるという悪循環に陥ります。

 

Web制作会社では大抵モジュール一覧を作ります。

名称は各企業によっても異なると思いますが、モジュールだけを集めたテストページですね。

 

モジュール一覧を運用することが破たんしないサイトをつくる近道です。

 

  • 使い回せるモジュール一覧をつくろう
  • 同じモジュールでデザインを複数作るときは意味づけをすること

 

そもそも仕様書がない

 

仕様書がないサイトも多いですが、引き継ぐ人は困りものです。

 

例えば、引き継いだ人はわからないため勝手な解釈で命名ルールを作ってしまい、それがまた悪循環となります。

 

  • サイト構築時、セットで仕様書(wiki)を作ること

 

!importantの乱打

 

CSSのツッコミ所はかなり多いのですが、!importantの乱打は人ごみでバット振り回してるが如く危険なので辞めていただきたいです。

 

  • そもそも!importantは不要です。今日からやめましょう。
  • htmlにstyle属性で書くのもやめましょう。

 

labelとinput要素が紐づいてない

 

自社開発サービスはformが多いのでこちらも注意したいところです。

紐づいていればlabelをクリックした時、input要素にフォーカスが合いますが、紐づいてないことが多々あります。

またタブで巡回できないなどアクセシビリティを怠ってるケースが多いです。

 

  • formのアクセシビリティは特に注意しましょう
  • アクセシビリティは下記2冊を読めばOKです。

contentに文字入れがち

 

無意味に疑似要素のcontentに文字を入れがちですが、これもアクセシビリティ的にどうかを考える必要があります。

 

つまり、contentの文字はスクリーンリーダに読み上げされません。

そのためテキストはhtmlに極力書くことが望ましいです。

 

横並び

 

横並びがfloatだったり、flexだったりまちまちです。

flexをかけた子にfloatかけてませんか?

 

  • 今や横並びでfloatは必要ありません。
  • flexを使いこなしましょう。

反論:全てがそうではない

 

たしかに全ての自社開発のサービスが上記の状態ではないですよね。

こうなってしまうのはある条件と理由があると思います。

自社開発系企業のソースコードがひどい理由

自社開発系企業ではhtml、cssは軽んじられている

 

まずこれは事実かなと思います。

ソースコードレビューなどがされていなければ軽んじられています。

見た目さえ崩れていなければいいという感じでソース自体を第三者が見ていません。

 

もしくは見る人のレベルが一定のレベルに達していなくても意味がありませんね。

 

なぜ軽んじられているかというと、サービスはバックエンド命だからです。

なので単価も高いですし、コストもそこにかかります。

人数も1フロントエンド:9バックエンドくらいじゃないでしょうか。

デザイナーやバックエンドが片手間にやっている

 

フロントエンドが少ないためデザイナーやバックエンドが片手間にやっているという例は多いです。

事実面接を受けた大手飲食口コミサービスは、フロントエンドという職種ができたのは最近という話でした。

それまでどうしていたかというとデザイナーやバックエンドがやっていたということです。

 

相応の専門性を持ってやってくれていたらいいのですが、専門は別ですから十中八九、先述のようなひどいソースになることは明白です。

つまりこの2つの理由は、企業がhtml、cssにコストをかけていないということが言えます。

余裕がある

自社開発企業は、納期などがWeb制作会社より比較的緩く、デザイナーが無駄にデザインしちゃうというパターンがあるようです。
これは自分の知人の話を聞いても思うことです。
つまり折角自分の仕事が来たんだから、同じものの使い回しより、新しくいい感じのデザインをしようという発想になるということです。
こういう発想も余裕がないとできないですよね。

古いサービス

 

以上は、古くからのサービスで起こりがちです。

とはいえ、新しいサービスでもこのような状況であれば、かなり負の遺産を抱えることになるので注意した方が良さそうです。

解決策:しっかり設計のできるフロントエンドが…

 

解決策としてはしっかり設計のできるフロントエンドがhtml、cssにおいてリニューアルを担当することです。

 

フロントエンドのリファクタはサイトが大きくなればなるほど難しくなります。

 

そのためリニューアルの方が無難ですし、いいものが出来上がります。

 

それにはしっかりしたフロントエンドが必要です。

ここで言うしっかりしたフロントエンドの条件を3つ挙げて記事を締めたいと思います。

 

  • 大規模サイトの構築経験あり
  • バックエンドよりというよりコーダーよりのフロントエンド
  • Web制作会社経験者

 

1つ目の条件は異論はないかと思います。

 

2つ目は、最近自分が思うところでフロントエンドでも2パターンいると思ってます。

それは

  • アクセシビリティや保守性の高いコードを書けるフロントエンド
  • JSフレームワーク、node.js、typescriptを得意とするフロントエンド

です。

もちろんどちらも必要なのですが、自社開発系企業には前者が欠けているように感じます。

 

3つ目、Web制作会社経験者は基本がしっかりしているため、2つ目の前者のような人材が多いと思います。

 

ということで解決策をまとめるとWeb制作会社経験者のフロントエンドを採用し、サービスをリニューアルもしくは新規立ち上げしましょう。

いいソースにすることで得られるもの

 

良いソースにすることで得られるものが多々あります。

 

  • 保守性が高いため更新の際、崩れや工数がかからない
  • アクセシビリティが高まり、ユーザーの満足度向上
  • 社員のモチベーションも向上
  • サイトパフォーマンス向上(表示スピード)

 

などなどがあります。

 

Web業界全体で是非いいhtml、cssを書いていいサービスを作っていきましょう!

 

 

人気転職エージェント

 

 

人気転職ブログ記事

 

【無料】WebIT系優良就活・転職サイトまとめ
Webist(ウェビスト)

Webist(ウェビスト)は大手企業に強いWeb専門の転職サイト&エージェントです。
特徴・メリットは
・30年の実績
・幅広い働き方を推奨
・大手企業多数
・週3案件が多い
・エージェントの質がいい
などなど。
大手Web企業で転職を決めましょう!

ワークポート

元々IT専門の転職サイトだったためIT業界の求人数が約2000社と圧倒的です。
エージェントも質が高く専門性の高いサポートをしてくれます。
オリジナルツール「eコンシェル」が便利。
【IT業界・ゲーム業界】に強い、転職決定人数 No.1です!

レバテックキャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

スポンサーリンク
Web転職する自社開発
スポンサーリンク
シェアする
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして企業に週5で業務委託で常駐しています。

正社員からフリーランスになり以下のように変わりました。
・月収 34万→929,346円(最高月収)
・残業時間:最高100時間→0~10時間
・日々の積み上げ:なし→ブログ、筋トレ、プログラミング

このブログでは、フリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

技術ブログはこちら→frontendomemo

関係ないですが、オムレツ作るのが好きです。

プロフィール
サイトマップ

宜しければフォロー、feedly登録くださいm(__)m

フォローする
hoshilog

コメント

タイトルとURLをコピーしました