<h2 id="h8d027c8ed3">はじめに</h2><p>以前投稿した<a href="https://daily-report.wd-flat.com/article/web-quality" target="_blank" rel="noopener noreferrer">「Webサイト制作の制作フェーズにおけるクオリティ向上のための３つのポイント」</a>では、Webサイト制作において品質（クオリティ）を確保することは非常に重要であることをお伝えしました。<br>今回はFLATのチェック体制にフォーカスを当て、どのようにサイトの品質を保っているのかをお伝えしていきたいと思います。<br></p><h2 id="hd3e16ef9d3">チェックフローについて</h2><p>まず、FLATで設けているチェックフローをご紹介します。<br>適切なチェックフローを設けることで、サイトの品質を保ちつつ、効率良く制作を進めることができます。<br><br>FLATでは、Webサイト制作の各段階において、以下のチェックフローを設けています。<br><br><strong>1.</strong> <strong>制作エンジニアによる自己チェック（制作者チェック）</strong><br>制作エンジニアが自身の作業の見直しをし、デザイン仕様の誤りや漏れがないかを確認します。例えば、コードの構文エラーや、各ブラウザでのデザイン表示崩れなどの確認です。<br><br><strong>2. 第三者によるデザイン再現・動作検証チェック（Wチェック）</strong><br>客観的な視点でのチェックを行うため、別のエンジニアがチェックを実施します。特に第一のチェックで見逃されがちなユーザビリティの問題や動作チェックなどを詳細に確認し、「サイトが本番公開できる状態であるか」確認を行います。<br><br><strong>3. 納品前の最終チェック（クオリティチェック）</strong><br>納品前には全体のコンテンツと機能を最終確認します。このチェックでは、クライアントの要求事項（案件仕様）が全て満たされているかの確認や、ユーザー目線での最終的な動作検証を中心に行います。<br><br><strong>4. 本番公開後チェック（公開後チェック）</strong><br>納品されたコードが正しく反映されているか表示確認を行います。<br></p><h2 id="h33acc128da">チェック項目について</h2><p>また、上記のチェックフローではそれぞれチェック項目を設けており、チェック項目は大きく分けて以下のとおりです。</p><ul><li>デザイン再現性チェック</li><li>レスポンシブ動作チェック</li><li>UI操作実行チェック</li><li>動的コンテンツによる表示崩れチェック</li><li>実機動作チェック</li><li>各ブラウザ検証チェック</li><li>テキスト・画像反映チェック</li><li>meta情報チェック</li></ul><p>この項目からさらに細分化していき、プロジェクトごとにも項目の内容は変わります。<br>このように細かくチェック項目を設けて属人化を防ぎ、エンジニア・ディレクター・プロジェクトマネージャーなど、チーム全員が一丸となって品質向上に努めることで、クライアントにとっても、市場にとっても価値あるサイトを提供していきます。<br>そして、クオリティの高いWebサイトを制作するためには、上述したチェックフローの徹底はもちろん、制作に関わる全員が案件に対する理解を深めることが必要となります。<br></p><h2 id="hb3f9858bed">チェックの課題点</h2><p>しかしながら、現在チェック項目が40項目にも及ぶため、チェック作業に多くの時間を要することが課題となっています。<br>チェック項目が多すぎると、本来重要な項目が見逃される可能性もあるため、チェック項目の見直しや自動化ツールの導入を積極的に行っていく必要があります。<br>今後も技術の進化に合わせてチェックフローをアップデートし、効率的で効果的な制作フローを整えていくことが重要です。<br></p><h2 id="h9be0c3393d">おわりに</h2><p>今回はFLATで行っているチェック体制の一部をご紹介しました。<br>今回ご紹介したチェックフローのほかにも、FLATではコードレビューやJavaScriptクオリティチェック、CMS構築チェックなどコード内部のチェックも行っています。<br>引き続き、全ての案件で一貫したクオリティを保つことができるよう、今後もチェック体制を整えていきますので、どうぞよろしくお願いいたします。</p>

Webサイトのチェック体制について、一部をご紹介

<p>技術がどんどん複雑化している中で、より良いアウトプットを生み出すためには、アウトプット以外のストレスを極力なくす必要があります。<br>FLATでは、スタッフのストレスを極力なくしてより柔軟な働き方ができるよう、従来より週3出社と週2リモートのハイブリッドワークを採用しています。<br>今回は、FLATの内部コミュニケーションに焦点を当て、リモート時の働き方やコミュニケーションについてご紹介します。<br></p><h2 id="hec51ffd425">FLATのハイブリッドワークのメリット</h2><p>FLATでは、ハイブリッドワークによって出社とリモートワークのメリットを最大限に活かしています。<br>出社することでチームメンバーとの直接的なコミュニケーションや情報共有が行える一方で、リモートワークでは自宅や好きな場所で集中して作業することができます。これにより、柔軟性のある働き方やストレスの少ない環境を実現しています。<br></p><h2 id="h242db292b5">リモートワーク時の課題とその解決策</h2><p>ですが、通常のリモートワークでは勤務状況の把握やコミュニケーションが難しいという課題があります。<br>そこでFLATでは、バーチャルオフィスというツール（oVice）を導入しています。このツールを活用することで、リモート時におけるスタッフ同士のオンラインコミュニケーションを活性化させることができます。<br></p><h2 id="h264e606a70">バーチャルオフィスの活用方法</h2><p>oViceでは、スタッフ同士が質問や相談、雑談などを自由に行うことができます。<br>また、FLATでは「もくもくデスク」というスペースを用意しており、作業に集中したい時やミーティング中など、話しかけ不可の時のためのスペースが用意されています。<br>このスペースにいるときは外から話しかけることができないため、スタッフが今どのような状況であるかがオンラインでも分かるようになっています。<br>これにより、スタッフの自由を尊重しつつ、出社時と同様のコミュニケーションがリモート時にも可能となっています。<br><img src="https://images.microcms-assets.io/assets/98f41c713ae240acbf11bfbf0993ea22/05cfce37198e4c56b6bad3adacb4a953/ovice%E3%81%AE%E6%A7%98%E5%AD%90.jpeg" alt="">（FLAT oViceの様子）<br></p><h2 id="h5e79b1bd1c">バーチャルオフィスの効果</h2><p>同じ案件を進行している場合でも、oViceを活用することで他のメンバーへの質問や相談がスムーズに行えます。<br>これにより、解決までのスピードが速くなり、業務効率が向上しています。<br>また、リモートワークでのコミュニケーション不足や情報共有の課題も解消され、チーム全体の連携が強化されています。<br><br>このようにFLATでは、ハイブリッドワークとバーチャルオフィスの導入によって、リモート時のコミュニケーションを活性化させ、効率的でストレスの少ない働き方を実現しています。</p>

リモート時のコミュニケーションについて

<p>私は社内ではEMとして、プロジェクトではエンジニアとしてさまざまな人と関わってきましたが、報連相が不足してる人はいても、報連相が過剰な人は見たことがありません。<br>今回は<strong>なぜ報連相が不足するのか、報連相を身につけるためにとにかく報連相を実践してみよう</strong>ということについて話します。<br></p><h2 id="h214c0dd677">なぜ報連相は不足するのか</h2><p>まずは報連相が不足している例をいくつか挙げてみます。<br></p><ul><li>自身の責任領域を拡大解釈しており、必要な報告が不足していた</li><li>実装者同士のコミュニケーション（連絡）が不十分で、作業の重複や手戻りが発生した</li><li>複雑な実装仕様について相談せず一人で悩んだ上解決したが、それが要因で全体のスケジュールに遅延が発生した</li></ul><p><br>このように報連相が不足していると感じるタイミングと理由はさまざまですが、共通して言えるのは、実行者が<strong>責任者が報連相を受けたいタイミングと理由、報連相することによる効果としないことによるリスクを想定できていない</strong>ということです。そしてたいていの場合、実行者本人は報連相が不足していることに気づいておらず、問題が発生する要因が報連相不足にあることを理解していません。<br></p><h2 id="h922e43e391">優秀な人ほど報連相できる</h2><p>報連相というと例えば「新入社員が業務に慣れるまで必要なこと」というイメージがあるかもしれません。しかし実際には、<strong>仕事を円滑に進めるために日常的に必要なものであり、そのタイミングを見極める必要があります。</strong><br><br>優秀な人はおそらく以下のような観点で報連相を行います。<br></p><ul><li>自身の責任領域以上の内容だと判断し、責任者に事前に確認を取ってから仕事を進めた</li><li>他の実装者の開発内容や進捗を把握しており、作業の重複が起こる可能性を考慮してコミュニケーションを取った</li><li>スケジュールに余裕がないので、自身のスキル以上の実装仕様だと判断し、アサインの変更を相談した</li></ul><p><br>これらに共通しているのは、仕事の背景や他メンバーのことなど視座を高く持ち、適切なタイミングで報連相が必要かどうかの判断をしているということです。<br>逆にいうと視座が低くリスクを想定できないと、そもそも報連相が必要かもしれないという思考にすらならないということです。これが報連相が不足することの主な要因です。<br></p><h2 id="h8a35e69c11">リモートワークの影響</h2><p>またリモートワークは報連相の頻度を減少させうると考えています。<br>弊社はオンラインコミュニケーションツールを積極的に導入していますが、それでもリアルコミュニケーションと比較するとコミュニケーションのハードルが上がります。<br>この少しの差が「他のメンバーの進捗を確認しづらい」「これくらいなら自分で進めても良いかな」という状態を生み出し、報連相が滞る要因になります。<br></p><h2 id="h3c16560b74">報連相はとにかく実践してみること</h2><p><br>報連相ができるようになるためには、とにかく報連相を実践することです。<br>「この状況ではこのように考えるんだ」「そういうリスクもあるのか」「そこまで先のことを見据えているのか」というように、今の自分にはない知識や考え方に触れることで報連相に必要な視座の高さが身についていきます。つまり報連相を実践するというのは自己成長する機会を自身で設けているということになり、反対に報連相をさぼると自己成長の機会を損失しているということになります。<br><br>リモートワークには報連相の頻度を減少させうる特性もあるので、最初は少し過剰に報連相してみる意識を持つと良いでしょう。</p>

報連相の身につけ方

<p>弊社ではエンジニア1名につき、複数のプロジェクトを同時進行をしているケースが多いです。<br>複数のプロジェクトが同時進行だと、タスクを見落として他のプロジェクトのスケジュールに影響を及ぼしたり、日々の作業量がキャパオーバーになったりと、自分の首を絞めることがあります。<br>自分も、タスクに追われてパフォーマンスを発揮できなくなったりという悪循環を経験したので、自分が実践しているタスク管理についてまとめたいと思います。</p><h2 id="h182266887e"><br>計画を立てることに時間をかける</h2><p>作業が詰まっていると早くタスクに着手したくなりますが、計画がないと進捗が見えず、遅れているのか進んでいるのか判断できません。<br>時間を割いてでも、タスクの整理とスケジュールを立てることが重要です。<br>自分（弊社）はAsanaで、プロジェクト始まる前に1〜2時間ぐらい時間をとって、細かめにタスクを洗い出し、期限日、予定工数などをまとめて計画をたてています。</p><h3 id="h598587f39e">ポイント</h3><ol><li>作業にかかる見積もり工数を計画に含める</li><li>見積もり工数の精度を高めるために、実際にかかった作業時間も記録する</li><li>1.2の振り返りを行い、改善する。</li></ol><p>これにより、数をこなすごとに見積もり工数の算出が正確になっていくきます。<br>見積もり工数が正確であればより堅実なスケジュールを引くことができます。<br><br><img src="https://images.microcms-assets.io/assets/98f41c713ae240acbf11bfbf0993ea22/a09fd2c4249b4964a85dfdd77576572d/a156e35d3ffafd80f8099cabc43ea3cd.png" alt=""></p><h2 id="h14cec2b452"><br>マイルストーンを積極的に設ける</h2><p>スケジュールが長くなればなるほど、タスクは粒度が大きくなればなるほど、マネジメントの難易度が上がります。<br>目安として、1ヶ月程度区切りのないスケジュールのマネジメントは難しいです。<br>例えば開発フェーズの期間が2ヶ月ある場合は2週間単位でマイルストーンを設けるなど意識的にスケジュール上の区切りを設けることで進捗管理が楽になります。</p><h3 id="h598587f39e">ポイント</h3><ol><li>意識的にスケジュール上の区切りを設ける（区切りのないスケジュールの進捗管理は難しい）</li><li>人間は期限が先のタスクを後回しにしがちなので、短すぎず長すぎない粒度でマイルストーンを設置することが大切</li></ol><h2 id="hf3d3feb9fa"><br>タスク管理ツール</h2><p>自分の場合はUIが好きなのでなるべくAsanaで管理するようにしています。<br><span style="color:#242422">ただ「1つのツールに集約させる」「複数のツールで管理する」など人によって好みがあると思います。</span><br><span style="color:#242422">これがよいとは一概には言えませんが、自分に合ったタスク管理を試行錯誤してみることが、作業効率化の第一歩だと思っています。</span><br><br></p>

エンジニア1年生のタスク・スケジュール管理術

<p>エンジニアという職業は自分自身、プログラミングを学習する以前は<br></p><ul><li>キラキラしていてかっこいい</li><li>どこでも働けて自由度が高い</li></ul><p><br>という風に思って見てましたが、エンジニアになってみて感じたこととしては、エンジニアになる前に思っていたことは間違いではないのだが自分が思ってたよりも「職人」であり「プロ」ということです。<br>周りのエンジニアを見て、プロ意識がものすごく高いし、クオリティに対しての情熱だったりこだわりが強くないとエンジニアとして大成することは難しいと感じています。<br><br>大谷翔平選手はプロ野球選手として世界No.1という称号であるMLBのMVPを複数回獲得しています。<br>それは、大谷選手が誰よりも野球というスポーツに向き合い、こだわり続け自分が「プロ」という意識が誰よりも高いからなのではないかと考えています。(あくまで筆者の推測ですが、、、)<br><br>プライベートを投げ捨ててでも、プログラミングに向き合わないと成功しないというわけではないと思いますが、自分自身をエンジニアとしての「プロ」であるという認識があるならば日頃のキャッチアップやアウトプットが自身を成長させる上で必要不可欠で自己研鑽を積み重ねる。<br>それがエンジニアという職業なのかなと思いました。</p>

カテゴリー

人気記事

Webサイトのチェック体制について、一部をご紹介

リモート時のコミュニケーションについて

報連相の身につけ方

エンジニア1年生のタスク・スケジュール管理術

エンジニアという職業を選択するということ

業務改善

Webサイトのチェック体制について、一部をご紹介

リモート時のコミュニケーションについて

報連相の身につけ方

エンジニア1年生のタスク・スケジュール管理術

エンジニアという職業を選択するということ