『チームで作るWeb制作実例』に参加してわかった制作現場の裏側

今回のKROWLセミナーでは株式会社nehan様(https://nehan.io/)のWebサイトを制作したWebディレクター、Webデザイナー、Webエンジニアに、チームでのWeb制作のポイントについて現場の裏側を交えて語ってもらいました。

実際にどんなツールを使い、どのように制作を進行していたのか、Web制作初心者の方にも分かりやすい内容となっていました。
その他にも、「こんな時はどうする?トラブルを防ぐためのチェックポイント」「デザインとコーディングがもっと早くなる、効率化のポイント」など、Web制作をする上で役立つノウハウが盛り沢山!

本記事では、6/7(金)チームで作るWeb制作実例/株式会社nehan様Webサイト制作事例の内容をぎゅっとまとめてレポートしていきます。

制作フローと使用アプリケーション/言語の紹介

参加された方々はWeb業界未経験の方や初心者の方も多く、まずは、一般的なWeb制作フローの紹介からスタートしました。

「企画・設計」「デザイン」「実装」に項目に分け、Webディレクター、Webデザイナー、Webエンジニアがそれぞれのフェーズでどのように関わり、どんなことを考えて取り組んでいたのかを実際のエピソードを交えて紹介してもらいました。

▼企画・設計フェーズ

  • ヒアリング
  • 企画/提案
  • スケジュール
  • 構成書(ワイヤーフレーム)

▼デザインフェーズ

  • デザインコンセプト
  • トーン&マナー
  • イラスト
  • アニメーション

▼実装フェーズ

  • 環境構築
  • 設計(CSS等の実装時の設計)
  • コーディング
  • 納品

ちなみに使用アプリケーション/言語はこちら

  • 企画書:PowerPoint
  • スケジュール/見積書・請求書:Excel
  • 構成書(ワイヤーフレーム):Cacoo
  • コミュニケーション:Slack、Chatwork
  • デザイン:Photoshop、Illustrator
  • 開発:HTML5、Sass、JavaScript、EaselJS、TweenJS、GitLab、Gulp、webpack、WordPress、AWS

制作フェーズ別のエピソード

ディレクタートーク(企画・設計フェーズ)

まずはディレクタートーク(企画・設計フェーズ)です。
クライアントにヒアリングした際に課題にあがっていたことは、

  • 理念や想いをしっかりと伝えたい
  • サービスローンチ(公開)時期が決まっているので、その際に受け皿となるページを用意したい

という大きく分けてこの2点だったそうです。

そもそもWebサイトを制作するということは手段の1つであるらしく、
クライアントの課題を解決できれば他の方法でも良いというディレクターの話には「なるほど!」と頷いてしまいました。
そして、今回はコーポレートサイトとサービスサイトの2つを制作することになったそうです。

クライアントからヒアリングをしたら、次は提案書の作成です。

クライアントの情報が多く含まれているのでここでは一部しかお見せすることができませんが、上記の画像のように情報を整理して課題を洗い出すところから始まり、
グラフや表を使ってターゲットやコンセプト、デザインの方向性からシステム面の要件、それからスケジュールと見積もりなど、必要な情報をわかりやすくまとめることが大切なようです。

提案書のポイントは「説得力のある道筋を立てる」こと。
お客様の課題を解決するために、「なぜこの提案なのか」「なぜこのイメージなのか」「なぜ工数がかかるのか」といったように、「なぜ」を追求し、それを相手に分かりやすく伝えることで、納得してもらえる提案になるのだと思いました。

スケジュール表は何度も引き直されていて、5バージョンくらいあったのが印象的でした!
情報を常にアップデートし、最適化しながら進めていくことはチームで制作していく上では欠かせない、大切なことですね。

構成書(ワイヤーフレーム)については、デザインに入る前にクライアントと何度も修正を繰り返し固めていったそうです。
その甲斐もあって、デザインフェーズに入って構成(要素)が変わることはほとんどなかったとのことでした!すばらしい!

デザイナートーク(デザインフェーズ)

次はデザイナートーク(デザインフェーズ)です。
マンボウのかわいいイラストが特徴的なデザインですね。

デザイン全体を見たい方はサイトをチェック!

今回コーポレートサイトとサービスサイトで2パターンのデザインを制作されたとのことで、それぞれのデザイン制作秘話について説明してもらいました。
ポイントをまとめると下記になります。

【コーポレートサイト】

  • 「誰でも簡単に」「身近」「楽しく」と言ったキーワードを意識
  • イラストを描くとき、レイアウトする時、フォントを選ぶ時、「キーワード、イメージに合っているか?」ということを常に判断基準にしてデザイン
  • 文字は大きく見やすくすることで全体的に分かりやすい印象を与えるよう心がけた
  • 丸みのあるパーツを使用し堅苦しくない印象に
  • イラストと簡潔な文章の構成で、内容を極力シンプルにし「何が出来るのか」を明確に伝えた
  • ロゴマークのマンボウを使用してnehanならではの遊び心を追加(フッター)

【サービスサイト】

  • コーポレートサイトのデザインを基本的には踏襲して制作
  • コーポレートサイトとの差別化を目的に、ガラッと配色を変更。
    具体的には、ターゲットであるエンジニアの作業画面(いわゆる「黒い画面」)をイメージし、ダークカラーを背景色として採用
  • メインビジュアル部分で端的に「どんなことが出来るのか」を伝えるため、ぱっと見でイメージできるイラストを作成




※動きのイメージを伝えるために手描きのイラストやGIFアニメーションを制作

デザイン制作時のポイント

  • 「イメージに近い参考サイト」と、逆に「これは違うという参考サイト」の両方を提示してクライアントとすり合わせをおこなったことで、認識が合わせやすかった
  • 一言で「シンプル」と言っても「写真が大きく余白が多い」「文字が少なくスッキリしている」など色々な方向性があるので、見た目ですり合わせておくと、より的確なデザインを提案できる
  • デザインの段階から、ディレクター、エンジニアと後工程(動き等)を相談しながら進めることで、制作スケジュールが調整しやすくなる

イラスト/アニメーション制作のポイント

ページの先頭に戻るマンボウのボタン、フッターのマンボウ

  • デザイン時に動きの想定箇所をあらかじめ相談(クライアント、エンジニア、デザイナーで擦り合わせ)
  • 文章で伝わりづらいものは簡単なGIFアニメーションで手描きのイラストでラフを作成し共有
  • 事前共有を丁寧に行なったおかげでコーディングの工数等も含め実装の可否を早めに判断できた
  • アニメーションをつけたい箇所の優先度をエンジニアと事前に相談しておくとスムーズ◎

エンジニアトーク(実装フェーズ)

最後にエンジニアトーク(実装フェーズ)です。

実装上の共通部分を洗い出し、設計することで、より効率的にコードが書けるという話から始まりました。

ボタンを作成する際でも

このように同一のコードが存在します。

同一部分はまとめて記述し共通化することで、コードがスッキリするだけではなく、運用も効率化されるようです。
確かに共通パーツで作っておけば、サイズをまとめて変更したいときは便利ですね!
このようにエンジニアはまず共通部分を整理し、どのように実装を進めていくのか、設計(計画)するところからはじめるとのことでした。

またアニメーションでは、EaselJS、TweenJSを用いて実装されたようです。

▼実際のアニメーションはこちら

コーポレートサイトのマンボウアニメーションでは、マンボウが増えるというかわいいバグが発生してしまったそうです。そのバグをどのように直していったか、エンジニアのリアルな話が聞けてとても面白かったです。

今、世の中にはたくさんの技術が溢れていますが、案件にあわせて最適な技術を見極めることが大切とのことでした。
これからコーディングスキルを高めたい方は、最適な技術は何かを考えながら勉強すると良さそうですね。

ちなみに、KROWL MAGAZINEではWebエンジニアを目指す方向けの学習サービスについてまとめています。これらのサービスに触れながら自分にあった学習を進めていくと良いのではないでしょうか!

エンジニアトークについてはもう少し詳しく聞いてみたいという声も多くあり、『チームで作るWeb制作実例/株式会社nehan様Webサイト制作事例』の第2弾を計画中です。8月に実施予定ですのでお楽しみに!

エンジニアの内容についてたくさんのご要望をいただき、第2弾は『エンジニアが語るWeb制作実例』を開催しました!
気になる人は下記のレポートをご覧ください!

今回のポイントをおさらい

最後にWebディレクター、Webデザイナー、Webエンジニアの話からあったポイントをまとめると、

  • 解決したい問題は何かをきく
  • 説得力のある道筋を立てる
  • 入り口は訪問者の知りたい事 出口は企業の伝えたい事
  • デザインの段階から、ディレクター、エンジニアと後工程(動き等)を相談しながら進める
  • 最適な技術を見極める
  • 状況によって臨機応変に「クライアントの希望を叶える」対応が必要

でした。今回の記事では全てに触れられないくらい充実した内容でした。

交流会

飲み物を片手に、登壇した3名やご参加いただいた方同士でざっくばらんにお話いただける場になりました。
質問も絶え間なく、もっと時間があればいろいろ聞きたかったと言っていただけるほどの大盛況!

今回も、Web業界への転職を目指されている方や、現在Webのプロとして活躍している方など、様々な方にお集まりいただきましたので、業界や職種関係なく気軽に情報交換ができたとご好評の声をいただきました。

関連記事