最終更新日:2019-11-20ツイート今回のKROWLセミナーでは株式会社nehan様(https://nehan.io/)のWebサイトを制作したWebディレクター、Webデザイナー、Webエンジニアに、チームでのWeb制作のポイントについて現場の裏側を交えて語ってもらいました。実際にどんなツールを使い、どのように制作を進行していたのか、Web制作初心者の方にも分かりやすい内容となっていました。その他にも、「こんな時はどうする?トラブルを防ぐためのチェックポイント」「デザインとコーディングがもっと早くなる、効率化のポイント」など、Web制作をする上で役立つノウハウが盛り沢山!本記事では、6/7(金)チームで作るWeb制作実例/株式会社nehan様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バージョンくらいあったのが印象的でした!情報を常にアップデートし、最適化しながら進めていくことはチームで制作していく上では欠かせない、大切なことですね。構成書(ワイヤーフレーム)については、デザインに入る前にクライアントと何度も修正を繰り返し固めていったそうです。その甲斐もあって、デザインフェーズに入って構成(要素)が変わることはほとんどなかったとのことでした!すばらしい!デザイナートーク(デザインフェーズ)次はデザイナートーク(デザインフェーズ)です。マンボウのかわいいイラストが特徴的なデザインですね。デザイン全体を見たい方はサイトをチェック!コーポレートサイト(https://nehan.io/)サービスサイト(https://nehan.io/product/)今回コーポレートサイトとサービスサイトで2パターンのデザインを制作されたとのことで、それぞれのデザイン制作秘話について説明してもらいました。ポイントをまとめると下記になります。「誰でも簡単に」「身近」「楽しく」と言ったキーワードを意識イラストを描くとき、レイアウトする時、フォントを選ぶ時、「キーワード、イメージに合っているか?」ということを常に判断基準にしてデザイン文字は大きく見やすくすることで全体的に分かりやすい印象を与えるよう心がけた丸みのあるパーツを使用し堅苦しくない印象にイラストと簡潔な文章の構成で、内容を極力シンプルにし「何が出来るのか」を明確に伝えたロゴマークのマンボウを使用してnehanならではの遊び心を追加(フッター)【サービスサイト】コーポレートサイトのデザインを基本的には踏襲して制作コーポレートサイトとの差別化を目的に、ガラッと配色を変更。事前共有を丁寧に行なったおかげでコーディングの工数等も含め実装の可否を早めに判断できたアニメーションをつけたい箇所の優先度をエンジニアと事前に相談しておくとスムーズ◎エンジニアトーク(実装フェーズ)最後にエンジニアトーク(実装フェーズ)です。実装上の共通部分を洗い出し、設計することで、より効率的にコードが書けるという話から始まりました。ボタンを作成する際でもこのように同一のコードが存在します。同一部分はまとめて記述し共通化することで、コードがスッキリするだけではなく、運用も効率化されるようです。確かに共通パーツで作っておけば、サイズをまとめて変更したいときは便利ですね!このようにエンジニアはまず共通部分を整理し、どのように実装を進めていくのか、設計(計画)するところからはじめるとのことでした。アニメーションでは、EaselJS、TweenJSを用いて実装されたようです。▼実際のアニメーションはこちらマンボウアニメーション:https://nehan.io/泡アニメーション:https://nehan.io/product/コーポレートサイトのマンボウアニメーションでは、マンボウが増えるというかわいいバグが発生してしまったそうです。そのバグをどのように直していったか、エンジニアのリアルな話が聞けてとても面白かったです。今、世の中にはたくさんの技術が溢れていますが、案件にあわせて最適な技術を見極めることが大切とのことでした。これからコーディングスキルを高めたい方は、最適な技術は何かを考えながら勉強すると良さそうですね。MAGAZINEではWebエンジニアを目指す方向けの学習サービスについてまとめています。これらのサービスに触れながら自分にあった学習を進めていくと良いのではないでしょうか!Web業界未経験者必見!現役エンジニアが紹介する「書いて学ぶ」Web学習サービス3選Web業界未経験者必見!現役エンジニアが紹介する「見て学ぶ」Web学習サービス3選Web業界未経験者必見!現役エンジニアが紹介する「読んで学ぶ」メディア5選エンジニアトークについてはもう少し詳しく聞いてみたいという声も多くあり、『チームで作るWeb制作実例/株式会社nehan様Webサイト制作事例』の第2弾を計画中です。出口は企業の伝えたい事デザインの段階から、ディレクター、エンジニアと後工程(動き等)を相談しながら進める最適な技術を見極める状況によって臨機応変に「クライアントの希望を叶える」対応が必要でした。今回の記事では全てに触れられないくらい充実した内容でした。飲み物を片手に、登壇した3名やご参加いただいた方同士でざっくばらんにお話いただける場になりました。質問も絶え間なく、もっと時間があればいろいろ聞きたかったと言っていただけるほどの大盛況!今回も、Web業界への転職を目指されている方や、現在Webのプロとして活躍している方など、様々な方にお集まりいただきましたので、業界や職種関係なく気軽に情報交換ができたとご好評の声をいただきました。KROWLではイベントや交流会、勉強会などを定期的に開催しているので気になった方はチェックしてみてください!KROWLとは未経験からWeb業界デビューするために必要なスキルや知識、経験が得られるサービスです。専門スタッフによる転職支援も行っています。この記事を書いた人KROWL運営事務局KROWLは、これからWeb業界でチャレンジしたい方を応援しています!セミナー・インターンシップ・ワークショップなど、毎月開催中です。Inc.HOMEおすすめランキングシェア。