こんにちは、まこです。

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

毎朝の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制作のご依頼はこちらからお問合せ下さい！！