<p>技術は、本人が必要性を感じ興味を持つことではじめて習得できるものです。私はEMとして日頃からエンジニアの教育を含むマネジメントを行なっていますが、組織としてメンバー全員に習得してほしい技術がある場合、教えるスタイルの教育では身につけてもらえないということを経験してきました。<br>例えば全員参加の勉強会を開催しても、メンバー自身がその技術を習得することの必要性を感じ興味を持たなければ、身につくことはありません。その必要性を感じてもらうためには、自らの意志でその技術に触れてもらうしかないと考えています。<br><br>そこで、弊社では教育のアプローチを変え、エンジニアとして必要なスキルを明確に定義し、それらを習得することの必要性とメリットをメンバーに説明し、それを目指してもらうことにしました。そしてジョブグレードごとに異なるスキル基準を設け、評価制度に組み込みました。<br><br>基準を目指してもらう教育と書きましたが、もちろんスキルを身につけるためのサポートは積極的に行っています。<br>メンバーそれぞれの興味に合わせたプロジェクトをアサイン、アウトプットの場を提供し、技術共有やコードレビューを社内制度やワークフローに組み込むことで、日常的にフィードバックを受けられる体制を構築しています。<br><br>弊社にはプロフェッショナルなフロントエンドエンジニアを目指して成長し続けられる環境があります。技術が好きで、技術共有に前向きな方は、ぜひ弊社にジョインいただけると嬉しいです。</p>

基準を目指してもらうエンジニア教育

<p><span style="color:#393a41">FLATで新たに</span>隔週雑談会<span style="color:#393a41">という試みを始めました。</span><br><span style="color:#393a41">テーマを決め、それに興味のあるメンバーが有志で集まり、お互いの気になることについて意見交換をしたり、不明点を解消する場になっています。</span><br><span style="color:#393a41">業務時間外に行なっているので、オフィスでお酒を飲みながらゆるく開催しています。</span><br>エンジニア同士でゆるーく技術の話するのって楽しいですよね😋<br></p><h3 id="h00fc534bc6">直近で開催したテーマ</h3><ul><li>キャッシュ（アプリケーションキャッシュ、サーバーキャッシュ、Redis）</li><li>Tailwind</li><li>設計図（ユースケース図、アクティビティ図、シーケンス図、ER図、インフラ図）</li><li>フロントエンドディレクトリ構成</li><li>WordPress + PHP Unit</li><li>FEのデザインパターン</li><li>microCMS</li><li>認証</li></ul><p><br></p><h3 id="h71486a4e59">これから開催予定のテーマ</h3><ul><li>プリフライト</li><li>FEでよく使うライブラリ</li><li>AWS</li><li>Svelte</li><li>VRT</li><li>Cloudflare</li><li>フルスタックTypeScriptアプリケーションを案件でやる上でインフラ含めた現実的な構成を考えてみる</li><li>見積もりの作り方</li></ul><p><br><br>雑談していると自分の知らない知識や考え方に出会うことができたり、人に与えることができるので、今後も継続していきたいです。<br>実践レベルの話や、実際に使ってみた結果の共有のような話をすると、大体話の内容（レベル）に合ったツッコミを入れてもらえるのも楽しいポイントですね。<br><br><span style="color:#393a41">FLATはフロントエンドの会社ですが、メンバーの興味領域は様々です。</span><br><span style="color:#393a41">エンジニアを積極採用中なので、技術共有に前のめりな方のご応募をお待ちしております。</span><br></p>

隔週で雑談勉強会はじめました

<h2 id="h8d027c8ed3">はじめに</h2><p>私自身が出来ているのかわかりませんが、個人的に気をつけている議事録のポイントを共有します。<br>議事録とはそもそも「何のために」とる必要があるのでしょうか。自分のメモを共有するのではだめなのでしょうか。<br></p><h2 id="ha53ecb0c17">議事録とメモの違い</h2><p>まず、議事録と会議のメモは異なります。<br>「メモ」は自分自身の忘備録として活用するものだと思います。<br>そのため、例えば走り書きでも単語の羅列でも「自分がそのメモを見て思い出せれば」メモをとる目的を果たせます。<br>ですが、議事録はそうではありません。<br>議事録をとる目的として多くを占めるものが「会議での決定事項を明確にし、関係者に共有すること」ではないしょうか（目的は他にもあります）。<br>そしてその「関係者」全員が、会議に参加しているとは限りません。<br>つまり、「自分だけのためにとればいい」メモとは異なり、「会議に参加していない人でも、その会議での決定事項が分かるように議事録を書く」必要があります。<br>このため、議事録がメモ書きになってしまっていては、議事録の目的を果たせないのです。<br></p><h2 id="h6775ed16a1">３つのポイント</h2><p>……と尤もらしいことを書いてしまったのですが、具体的にどうすれば「会議に参加していない人でも、その会議での決定事項が分かるように議事録を書く」ことができるのか分からないですよね。<br>個人的に気をつけている大きなポイントとしては以下のとおりです。<br></p><h3 id="h5c2e2a1036">①決定事項とその趣旨を簡潔に記載する</h3><p>決定事項だけでなく、その趣旨（なぜそうするのか）を記載することで、会議内容がより具体化されます。<br>ただ、決定事項までの流れをつらつらと書いてしまうと、議事録を読んでいる途中で「結局どうなったのか」が伝わりづらくなってしまいます。そのため、決定した事項と「なぜそれが必要なのか」を簡潔に書きます。<br></p><h3 id="hcf032c9c47">②体言止めにせず、動詞まで記載する</h3><p>体言止めで記載してしまうと、具体的に何を行うのか（何が起こっているのか）が不明瞭になってしまいます。そのため、動詞を用いてより具体的に記述します。<br>例）「〜でコストの低下」→「コストが下がった」のか「コストが下がっている」のか「コストを下げる」なのかが分からない</p><h3 id="h2971335a80"><br>③今後のアクションとして、「誰が」と「何を」をセットで記載する（必要あれば「いつまでに」）</h3><p>「誰が行うのか」という「そのアクションの責任が誰にあるのか」を明確にします。責任を明確にすることで、後々問題が発生したときにも役立ちます。<br>ひとまずこの３つを抑えておくといいんじゃないかなと思います。<br></p><h2 id="h9be0c3393d">おわりに</h2><p>「議事録」っていうと難しい気もしちゃいますが、要は「誰が見ても会議内容が分かる記録」なんですよね。<br>議事録を取ることで会議の理解度を深められたり、「相手に伝わりやすい文章」と「要約する力」を身につけられると思うので、私も引き続きがんばります。</p>

議事録をとる上で心がけているポイント

<p>コンテナや画像サイズの小数点には気をつけなくちゃいけない……というお話です。<br></p><h2 id="h9e5f467c67">問題点</h2><p>あるカードパーツの実装をしていたところ、自宅用モニターでブラウザ幅を広げて閲覧した際、カード画像とカード枠の間に1px程度の隙間ができてしまっていました。<br><br><img src="https://images.microcms-assets.io/assets/98f41c713ae240acbf11bfbf0993ea22/1c4557f1b62247528b27242eb3e9f0fa/subpixel_rendering.png" alt=""><br><br>しかし、社内用の別モニターではどれだけブラウザを広げても隙間が確認できなかったため、なぜこういった現象が起きてしまうのか途方に暮れていました。<br></p><h2 id="h9c1f22bd6d">原因</h2><p>この現象ですが、サブピクセルのレンダリングが原因のようです。<br>1px以下の処理方法がディスプレイごとに異なるため、使用しているディスプレイによって見え方が異なってしまうのです。<br>もしやと思い該当するコンテナーサイズを確認したところ、見事に小数点が生まれていました。<br><br>この1px以下の数値（すわなち小数点）が生まれることによって、ディスプレイごとに見え方が異なっていたのですね。<br>ちなみに、該当スタイルの指定方法は</p><pre><code>grid-template-columns: repeat(3,1fr);</code></pre><p>のように、コンテンツは可変になるよう指定していました。<br><br>レスポンシブが主流の場合、どうしてもコンテナーサイズを可変させたい場合が多いと思いますが、可変にしてしまうと予期せぬところで小数点が生まれて、予期せぬ隙間が発生してしまう可能性があります。<br></p><h2 id="h141087ae17">解決法</h2><p>今回は固定値で指定しても支障のない箇所だったため、余白が現れないことを優先し、小数点のない固定値を指定することで解消しました。<br>ただ、固定値指定が相応しくない箇所もあるかと思います。<br>Webサイトはコンテンツがどうしても流動的なものになってしまうので、多少のレンダリングによる差異は許容しつつも、要所要所で注意する必要があります。</p>

サブピクセルのレンダリングの注意点

<p>FLATに実務未経験で入社してから、丸4年が経ちました。<br>今回は、FLATで働く5年目のエンジニアが普段考えていることや、業務内容について書いてみようと思います。</p><h2 id="h8968ed5810"><br>4年目までを振り返る</h2><p>フロントエンドが得意な受託開発会社で4年間働いてきたため、WebサイトからWebサービスまで幅広い業種のフロントエンド開発を経験しました。<br>以下は有名なフロントエンドエンジニアのロードマップですが、PWAを除くすべてを経験できたと思います。<br><br><a href="https://roadmap.sh/frontend" target="_blank" rel="noopener noreferrer">https://roadmap.sh/frontend</a><br><br>現在はReact系フレームワークを活用したWebサービス開発支援を行っており、フロントエンドリードとしてプロジェクトにアサインされています。実装要件定義や開発リードに加え、マネジメントや顧客対応全般も担当しています。<br>フロントエンドの専門家として提案型の動きが求められるFLATは、フロントエンドとソフトスキルを習得しやすい環境であるといえるでしょう。</p><h2 id="h5a3c34cbb7"><br>カスタマーセールス</h2><p>FLATの強みは<strong>「フロントエンドの開発力」と「プロジェクトマネジメント力」の二つが組み合わさることで生まれる顧客体験（CX）</strong>だと考えています。<br>フロントエンドの開発力とは、多様で複雑なフロントエンド技術のナレッジを持ち、ユーザー体験（UX）や開発者体験（DX）を向上させるアウトプットを実現する力です。この開発力をプロジェクトマネジメントに活かすことで、ビジネスサイドと密に連携を取り、プロジェクトを効率的に進めることができます。<br><br>技術者におけるカスタマーセールスとは、シンプルに良い仕事をすることです。<strong>FLATの強みはまさにお客様の信頼を勝ち取り、高い評価をいただけるカスタマーセールスになり得えます。</strong>お客様とプロジェクトに寄り添う姿勢を大切にし、それを後輩のエンジニアに浸透させる教育とマネジメントを行なっています。</p><h2 id="h7237cf66f5"><br>業務領域の拡大</h2><p>今年に入ってからは、さらなる業務領域の拡大を目指し、バックエンドやインフラの学習を進めています。幸いにも、サービス開発においてはバックエンドタスクを少しずつアサインしてもらいやすいため、フロントエンドリードとしての役割を果たしつつ、今年中にはバックエンドメンバーとしても十分に活躍できるレベルまで成長したいと思います。<br><br>今後は、提案型の動きができるフロントエンドエンジニアやフロントエンドリードの育成に努め、フロントエンド以外の領域にも興味があるメンバーを巻き込んで、<strong>総合的なサービス開発支援ができる事業へと変えていきたいです。</strong><br>開発事業の拡大や技術全般に興味がある方は、ぜひ弊社にジョインしていただけると嬉しいです！</p><h2 id="h1afe451c43"><br>さいごに</h2><p>今回は、5年目のエンジニアが考えていることを一部ですが書かせていただきました。<br><br>FLATの仕事に対する姿勢や今後のビジョンについても少しご紹介できましたので、共感いただけた方はぜひ採用選考に応募していただけると嬉しいです。最近はアプリケーションエンジニアのカジュアル面談にも出席しているので、まずは気軽にお話ししましょう。</p>

5年目エンジニアが今考えていること

マネジメント

業務改善

仕事の気づき

テクノロジー

更新情報

西條

<p>Webディレクターの西條です。<br><br>ここ数年CMS（コンテンツ管理システム）の選択肢が本当に増えてきたなと感じます。<br>以前は「WordPressがあれば大丈夫」という時代と感じていましたが、今では様々な選択肢が顔を出しています。<br><br>例えば、長い歴史を持つ「Movable Type」や、<br>近年注目されているヘッドレスCMSの「microCMS」や「Newt」<br>さらには、WordPressを静的に配信する「Shifter」といったサービスも登場しています。<br><br>当然、それぞれのCMSには独自の特徴や利点があります。<br>例として、Movable Typeは安定性とセキュリティに優れていて、大規模サイトに向いている一方で、WordPressはその柔軟性と豊富なプラグインで多くのユーザーに支持されています。<br><br>ヘッドレスCMSの「microCMS」や「Newt」は、コンテンツを柔軟に管理し、多様なプラットフォームへ自由に配信できる大きな利点があります。最新のJamstackアーキテクチャを採用することで、セキュリティとパフォーマンスが大幅に向上し、同時に保守コストの削減も実現しています。<br><br>Shifterは使い慣れたWordPress管理画面での操作感を維持しつつ、Jamstackアーキテクチャの採用によりセキュリティとパフォーマンスを向上させています。<br></p><h2 id="ha214098e44">まとめ</h2><p>FLATでは、クライアント様のニーズに最適なCMSをご提案するため、日々さまざまなCMSについて学んでいます。各CMSのメリットやデメリットはもちろん、設置サーバーやセキュリティ要件などの技術的な側面についても知見を深めています。<br><br>単にCMSを導入するだけでなく、クライアント様のウェブ戦略全体を成功に導くことが目的なので、CMSの知識を活かしながら、クライアント様のビジネスゴールに沿ったアドバイスや提案を心がけています。<br><br>これからも、クライアント様により良いサービスを提供できるよう、CMSに関する知識と経験を積み重ねていきたいと考えています。</p>

最適なCMS選定 - 多様化する選択肢の中で

<p>ChatGPT、Gemini、PerplexityなどさまざまなAIが登場していますが、私は直近<a href="https://www.perplexity.ai/" target="_blank" rel="noopener noreferrer">Perplexity</a>を使用することが多くなってきました。<br></p><h2 id="h430a34b045">AI検索エンジン「Perplexity」とは</h2><p>ざっくり説明すると、Google検索のような従来型のブラウザ検索ではなく、チャットボットのような対話形式での回答が得られる対話型検索エンジンになります。<br></p><h3 id="hfa6d8c229a">GPT Plusで検索させた結果</h3><p>Perplexityは、AIを活用した検索エンジンで、ユーザーの質問に対して自然言語処理（NLP）を用いて回答を提供します。<br>従来の検索エンジンと異なり、Perplexityは会話形式でユーザーの質問を理解し、関連する情報をまとめて提供します。<br><br>とのことで、大枠あってそうです。<br><br>Perplexityの利点として、<br>情報元のサイトもリンク形式で表示されるため信頼性も高いです。<br><br>ChatGPTと比べると日本での知名度はあまりないかもしれないですが、記事を執筆している2024年6月現在、ソフトバンクとのコラボが始まるなど、徐々に普及している感じはあります。<br>参考：<a href="https://www.softbank.jp/mobile/service/perplexity-ai/" target="_blank" rel="noopener noreferrer">https://www.softbank.jp/mobile/service/perplexity-ai/</a><br></p><h2 id="hec4f003291">ユーザーの検索行動への影響に関して</h2><p>ここからが本題ですが、Perplexityのような対話型検索AIの開発が進み、一般に広く普及されるようになると、ユーザーの検索行動もかなり変化するのではないかと考えています。<br><br>現在はブラウザを立ち上げ、Google検索の流れが自然ですが、今後Perplexityのような対話型検索エンジンの普及が進んだ場合、ブラウザを経由せずAIに直接質問をし、サイトを経由せずに回答だけ確認して完了。<br><br>このようなユーザーの行動もあり得るのではないかと思っています。<br></p><h2 id="h6ce25feb06">Apple Intelligenceが発表された</h2><p>先日のWWDC24でAppleのAI「Apple Intelligence」が発表されました。<br><br>機能の中に「ChatGPTとSiriの連携」というものがありました。<br>参考：<a href="https://www.apple.com/apple-intelligence/" target="_blank" rel="noopener noreferrer">https://www.apple.com/apple-intelligence/</a><br><br>今後、Siriに質問し、ユーザーの代わりにChatGPTが情報を収集しユーザーに返却する。<br>というような、こともできてしまうのでは？と個人的に考えています。<br></p><h2 id="ha214098e44">まとめ</h2><p>「AI時代にディレクターが考えていること」というタイトルで記事を執筆してみました。<br>今後のAIのWebへの影響は積極的にキャッチアップしつつ、AI時代にも対応できるようになっていきたいと思います。</p>

AI時代にディレクターが考えていること

<p>FLATのディレクターの西條です。<br>FLATにディレクターとして入社して２ヶ月が経過しました。<br><br>これまでもディレクションや実装経験の経験はあったのですが、<br>以前は職域が曖昧だったため、これを機に改めてWebディレクターの仕事内容や役割について考えてみようと思いました。</p><h2 id="h63e66fc1de">Webディレクターの仕事内容</h2><p>前提としてWebディレクターの定義から。<br>「Webディレクターとは」で検索すると大体は、</p><blockquote>Webサイトの企画立案や制作、運用における責任者の立場です。 Webエンジニア、Webデザイナー、ライター、SEO担当者といったWeb 制作に関わる人たちをまとめ、進行や品質に問題ないかチェックし、プロジェクトが円滑に進むように調整して、チームで目標の達成を目指します。<br>引用元：<a href="https://type.career-agent.jp/knowhow/it_web/web_director.html#:~:text=Web%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%82%BF%E3%83%BC%E3%81%AF%E3%80%81Web%E3%82%B5%E3%82%A4%E3%83%88,%E3%81%AE%E9%81%94%E6%88%90%E3%82%92%E7%9B%AE%E6%8C%87%E3%81%97%E3%81%BE%E3%81%99%E3%80%82" target="_blank" rel="noopener noreferrer">転職ならtype転職エージェント</a></blockquote><p><br></p><blockquote>Webディレクターとは、Webサイト制作における指揮、進行管理を担う職種です。 クライアントの目的にかなったWebサイトを制作するため、デザインやコーディングなど直接コンテンツ制作に関わるクリエイターやプロジェクトメンバーをまとめ上げ、プロジェクトを円滑に進める舵取り役といった立場であると言えます。<br>引用元：<a href="https://mynavi-creator.jp/blog/article/value-of-web-director#:~:text=Web%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%82%BF%E3%83%BC%E3%81%A8%E3%81%AF%E3%80%81Web,%E3%81%A7%E3%81%82%E3%82%8B%E3%81%A8%E8%A8%80%E3%81%88%E3%81%BE%E3%81%99%E3%80%82" target="_blank" rel="noopener noreferrer">マイナビクリエイター</a></blockquote><p>上記のような内容がヒットしますね。<br>会社さんにもよると思いますが、私も一般的なWebディレクターの定義としては「プロジェクトを円滑に進めるための舵取り役」になってくるのかなと思ってます。</p><h3 id="h7c8aec2b34">具体的なWebディレクターの仕事内容は？</h3><p>その上で、仕事内容を掘り下げていきますが、<br>今までの経験や周りのディレクターの仕事内容を踏まえると、代表的な仕事内容は以下になるのかなと思ってます。</p><ul><li>ヒアリング</li><li>企画・提案</li><li>予算管理</li><li>スケジュール/進行管理</li><li>サイト設計/ワイヤーフレーム作成</li><li>デザインディレクション（デザイン要望のヒアリング + デザイナーへの落とし込み）</li><li>実装ディレクション（エンジニアとのコミュニケーションや、サイトの品質チェックなど）</li><li>アフターフォロー（納品後のサポート）</li></ul><p>サイトの性質によっては、マーケターやライター、動画クリエイター、カメラマンなどをアサインする場合やシステムが絡んでくる場合もあるため、ディレクターが手を動かすケースはあまりないと思いますが、知識は必要になってくると思ってます。</p><h2 id="hfe6a713503">Webディレクターの役割とは？</h2><p>色々仕事内容を書いてはきましたが、<br>結局はそのどれもが「プロジェクトを成功に導く」ためにあるものと私は捉えるようにしています。<br><br>ワイヤーや提案書を作成するのが最終目的でなく、<br>プロジェクトを良い形で完了させること、プロジェクトを成功に導くのがWebディレクターの本質的な役割だと思っています。<br><br>成功に導くと書くとキラキラして見えてしまいますが、<br>進行中に問題が起こりそうになる場合もよくあり、そういった際に泥臭く奔走する必要もWebディレクターには求められると思います。</p><h2 id="ha214098e44">まとめ</h2><p>Webディレクターの仕事内容について改めて考えてみました。<br><br>ただ会社さんによって差はあると思うので、</p><ul><li>クリエイティブの比率高め</li><li>マーケティングの比率高め</li><li>セールスの比率高め</li><li>システムの比率高め</li></ul><p>などのケースもあると思います。<br><br>ちなみにFLATでは実装のディレクションはエンジニア自らが行うという文化があります。<br><br>また、エンジニア全員「フロントエンド」という共通項目こそあるものの、得意な領域はそれぞれ伸ばしていっている感じがあるため、難易度の高めの案件でも対応できるケースが多く、ディレクターとしては非常に助かってます。<br><br>入社して2ヶ月、ディレクターとして総合力をつけていくのは当然のこと、私もどこかに専門性をつけるのが今後の目標となりました。</p>

カテゴリー

人気記事

基準を目指してもらうエンジニア教育

隔週で雑談勉強会はじめました

議事録をとる上で心がけているポイント

サブピクセルのレンダリングの注意点

5年目エンジニアが今考えていること

西條の日報一覧

西條

最適なCMS選定 - 多様化する選択肢の中で

AI時代にディレクターが考えていること

Webディレクターの仕事内容について改めて考えてみた

基準を目指してもらうエンジニア教育

隔週で雑談勉強会はじめました

議事録をとる上で心がけているポイント

サブピクセルのレンダリングの注意点

5年目エンジニアが今考えていること