【WEB制作チームを徹底解説!】~工程・役割の違い~

2021/12/9

2021/12/09


こんにちは、まこです。

最近、起業家支援チームでは

毎朝のMTGで1日につき1人ずつ

オープニングスピーチを回しているのですが、

新しい気付きが沢山あり、

とてもいい機会になっています。

 

突然振られてもすぐに

ユーモアを交えながら分かりやすく

お話しいただく方ばかりなので、

毎朝、SoLaboの融資担当の凄さを

感じています。

 

今回は、わたし自身も興味がありながら

なかなか実態を掴めずにいた

WEB制作に関わるエンジニアやデザイナーについて

SoLaboの業務内容も含めて

お届けしていきます!

WEBサイトの制作工程 ~呼び名の違い~

 

会社よっても違いがあり

境界線がグレーな部分も大きいようですが、

田中調べによると、

下記の工程で動く企業が多いようです。

①設計

 クライアントにヒアリングをしたり、

 調査を行いながら、全体の設計を行う。

 

 

②デザイン 

 背景色や文字のフォント、レイアウト等を工夫して

 ユーザーに分かりやすく情報を伝えるために

 配置を考える部分が、デザイナーのお仕事です。

 

 ここでは主にPhotoshopやIllustrator、最近ではAdobe XD

 といったツールを活用することが多いそうです。

 

 

③コーディング 

 デザイナーが作成したデザインを

 画面上に表現をするために

 HTMLやCSS、Javascript等を活用し、

 コーディングを行う部分がコーダーのお仕事です。

 

 HTML:文字に見出しや本文などの意味を与える。

  CSS:文字色、背景色、簡単なアニメーションなど

    デザインを表現するために使用する。

 

 そこから更にPHPやRubyを使って

 サーバーサイドのプログラミングを

 行っていく部分がバックエンドエンジニア

 お仕事です。

 

 

④テスト・実装 お互いに違う方が確認

 

 構築したサイトがしっかりと動作をするのか

 意図した通りに表示されているのかを

 確認し、実装をします。

 

 

⑤メンテナンス

 WEBサイトは公開したら終了!!

 というわけではなく、端末ごとの動作の正常か等、

 定期的にメンテナンスを行っています。

 

 

この工程の中で、

デザインからコーディングまで行う

エンジニアのことをマークアップエンジニア

 

更に、

Javascriptなどのフレームワークを活用したり、

WordPressなどのCMS構築等まで担当し、

デザイナーやコーダーの支援を行う

エンジニアのことをフロントエンドエンジニア

と呼びます。

 

ちなみに、

Front-endは画面上の見える部分

Back-endは画面上では見えない部分を

指す言葉なんだそうです。

 

SoLaboでは静的な表現までを

担当できるエンジニアをマークアップ、

動的な表現までできるエンジニアを

フロントエンドとして呼んでいます。

 

SoLaboの工程表

SoLaboの場合の工程表も教えて頂いたので、

こちらも公開しちゃいます!!

 

①設計

 【担当】基本情報シート

 納期が短いモノが多く、コストが安いものが多い為、

 何回もヒアリングはできないので基本情報シートを

 パターンに合わあせてお客様に入力して頂いています。

 

 入力項目:HPであれば、サービス情報・料金等

 写真をメインにするかイラストをメインにするか

 などこちらでは勝手に決められない部分を主に

 書いていただき、読んでもわからない部分だけ

 フロントメンバーが追加で質問をしています。

 

②デザイン

 【担当】ほぼ西村さん+たまに和田さん

 デザインから先に始めると枠組みが

 ずれていってしまう為、ワイヤーフレームを

 先に作成をしてデザインを進めることが多いそうです。

 

 ☆ワイヤーフレーム=デザインの入っていない状態の構成案のこと

 

③コーディング

 【担当】寺本さん・神保さんが並行して実施

 

 SoLaboの場合は、基本WordPressを活用するので

 バックエンドエンジニアは入らずに作成をしています。

 

 ちなみに和田さん解説によると、

 Wordpressは特有の言語を使うので

 バックエンドが普段使っているPHPなどどは

 使う言語が違うそうです!!

 

 英語とスペイン語で話している感じですかね。笑

 

 SoLaboの場合は

 フロントのメンバーがここまで対応をして

 特殊な場合のみ、石井さん、増永さんに

 依頼することもあるそうです。

 

④テスト・実装

 【担当】寺本さん・神保さんが交換をして実施

 

 新規の方の場合はサイトがないので

 お客様のサーバーに直接構築をして非表示にしておいて

 確認してもらうのですが、

 

 既にサイトがある方の場合は、

 一旦テスト用のサーバーで開発をして

 動きの確認をした後に、実装をしています。

 

 確認事項の中には、

 リンクやメールが正しく動作をしているかの確認や

 Windows、Mac、Safari、Edge、iPhone、Android等で

 端末を変えても正しく表示をされているかの

 検証・検査を行っています。

 

 SoLaboでは作った人ではない人が

 あえて確認をすることで先入観なく、

 誤字脱字等含めて確認ができているそうです!

 

⑤アフターフォロー

  【担当】西村さん+和田さん 

  ①納品のみのパターン

   エラーが出れば対応程度。

  ②伴走プラン

   保守も契約をされているので、軽微な修正対応まで。

  ③アイキャッチ

   サイト自体のデザインにあうようにブログの

   アイキャッチの作成。

 

  といった大きく分けて3つの形で

  アフターフォローをすることが多いそうです。

 

  ブログのアイキャッチはPixta等から画像を

  引っ張ってくるよりもオリジナルで作成した方が

  点数が上がり、画像検索からの誘引もできるそうです。

  

  サイトも見せて頂きましたが、

  統一性もあり、背景の色とマッチしていてとても

  素敵なアイキャッチでした☆

 

  ☞ こちら の記事で紹介しているサイトです。

 

  案件に対応しているデザイナーがロゴや名刺、封筒、

  PowerPoint、Zoom背景等まで担当することもあるそうです。

  ※別料金

 

自社サイトの制作について

SoLaboの場合、

自社サイトの制作もSoLaboのメンバーが行っていますが

会社やサイトの状況に合わせて頻繁に変更をするため、

和田さんメインで対応をしています。

 

代わりに外部のものは寺本さん、西村さん、神保さんが

じっくりと時間をかけて制作をしています。

 

SoLaboのサイトといえば可愛いキャラクターが沢山出てくるのですが、

このイラストも和田さんが担当をして下さっています。

 

チラシやサイト内にあるサービスの特徴を捉えた

イラストを是非、探してみてくださいね(^^)

 

和田さんはイラストを書いている時間が一番好き!

だそうです!!

 

ただ、、

ものすごく忙しい時にイラストの依頼がくるのは・・・

ともおっしゃっていました。笑

 

可愛い可愛いそらおくんをまたご紹介しておきます。笑

 

 

 

 

今回は内容が濃く、

長めの投稿になってしまいましたが、

この記事を通してこれからご依頼頂く方や

将来デザイナーやエンジニアを目指す方が

WEB制作について理解してもらう

機会になっていると嬉しいです。

 

☞ WEB制作のご依頼はこちらからお問合せ下さい!!

資金調達やその他サポートに関する
お問い合わせ