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

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

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

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

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

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

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

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

最近はコーディング時にキーボード操作を考慮できるよう、普段からキーボードでWebサイトの操作を行うようにしている。 先日遭遇したサイトでは、ハンバーガーメニュー展開時、展開メニューの最後の項目まで到達したあとにTabキーを押すと、ハンバーガーメニューが自動で閉じられるメニューが設置されていた。 個人的に、このハンバーガーメニューはシンプルに「使いやすい」と感じた。 というのも、通常、必要のないハンバーガーメニューを「閉じる」ためには、「閉じる」ボタンまで戻るなど、何かしらの動作を行わなければいけない。 しかし、遭遇したサイトは閲覧を続ける流れでハンバーガーメニューが自然と閉じられる。 だが、JISアクセシビリティ達成基準を確認したところ、下記のような基準が設けられていた。<blockquote>フォーカスを受け取ったときにイベントを起動することのできるすべてのコンポーネントは、コンテキストを変化させてはならない。</blockquote>フォーカス時：達成基準 3.2.1 を理解する（<a href="https://waic.jp/translations/UNDERSTANDING-WCAG20/consistent-behavior-receive-focus.html%EF%BC%89" target="_blank" rel="noopener noreferrer">https://waic.jp/translations/UNDERSTANDING-WCAG20/consistent-behavior-receive-focus.html）</a> 確かに、展開メニューの最後の項目まで到達したあとにTabキーを押すとメニューが閉じられる仕様は、フォーカス時にコンテキストを変化させることになり、ユーザーの予測できない動きとなってしまう。 そのため、ある状況に置いては使用しづらさを感じる可能性があるかもしれない。 この時思うことが、「自動的に」変化を起こすものは「便利」だと捉えてしまいがちだが、「誰もが」「どの環境でも」使いやすいものを考えたときは「己の意思で操作できるかどうか」「意図した操作ができるかどうか」を念頭に置いて考える必要がある。 「Escキーで閉じる」に加え、展開メニュー時はフォーカスをメニュー内に閉じ込め、展開メニューの最後の項目まで到達後は「閉じる」ボタンにフォーカスさせるのが一番良さそう。

ハンバーガーメニューのキーボード操作について

マネジメント

業務改善

仕事の気づき

テクノロジー

更新情報

小濱

何を聞いているのか、何を解決したいからこの問いを聞いているのかを明確にして正確に捉えることが必要である。問い①に対しては、答え1でなく、答え①を返す必要がある。 ①をそもそも正確に抑えれていない場合、正確な答え①を返すことはできない。まずは課題の本質を捉える練習を行いたい。仕事は朝〜晩まで課題解決の連続だと思う。進捗会一つにしても、常に何を解決するための話なのか、何のための行動なのかを意識しながら話を聞く読むを行なっていきたい。正しく理解する。

問い(課題)を正しく聞き、正しく読み

俯瞰的に見る、第三者目線を持つ。これを常に行いたい。 批判的思考＝クリティカルシンキング判断を出した後に、そのまま突っ切るのでなく 主観から切り離して、他の誰かだったら、例えばクライアントの立場から見たらどうか。 例えばエンジニアの立場からみたらどうか。といったように、立場をシフトしてその判断を見るとどうかという思考フェーズを設けたい。そうすると判断の内容が変わる可能性がある！またクリティカルシンキングを使うことで、見えなかった、もしくは考えつかなかった、 考えの余白に気づいて新たな提案が生まれる可能性も秘めている。 自分の考えもそうであるし、誰か他者からの考えのシェアがあった時にも 自分の主観＋色んな立場の目線で物事やアイデアを見る目を養えば、 日々がクリエイティングになりそうだと思う。最近は論理的思考や批判的思考などを研究していますが、 いままでの自分に足りなかった部分なので、 ロジカルに本質的に、物事を捉えていきたい。

第三者目線

最近よく、俯瞰思考メタ認知能力という話題をするのですが、分かりやすい記事があったので紹介します。 <blockquote>初めて買い物に行く場所なら、フロア案内みますよね？ デパートの構造(全体像)をある程度つかんでから、目的の商品が置いてある「コーナー」まで向かうはずです。</blockquote>最初にあたりを付ける：マクロ視点目的地にたどり着く ミクロ視点案内を見ずにミクロ視点だけで、ゴールまで辿りつくのは途方もない作業。。 なのでまずは全体像把握する事が重要。マクロ→ミクロ。 マクロで見ることも重要ですが、ミクロも重要だと思います。 例えば品質チェック、クオリティチェック、WチェックなどFLATではさまざまなチェックがありますが、細部を詳細にみていくには大きく全体を捉える能力というよりかは、細かく見るミクロ視点が求めらると思います。 ですが、このチェックが何に繋がってるかを把握する事がマクロ視点なので、ミクロ視点とマクロ視点を行き来するのが重要そうです。ディレクターとしては、チェックも全体把握も両方行うので両方の視点を鍛えていきたい。

マクロ視点とミクロ視点

プロジェクトは常に何が起きるのか、先が見えている状況を作る！ 自分が見えているのは勿論だが、関係者全員に次のアクションとそれが起きる日程時間を5W1Hで伝える必要がある。←ディレクターは日程管理をするだけでなく、5W1Hで進行がどうなる予定なのか、現状どうなっているのか、過去どうなったかを把握しており、周知しておく必要がある。 ↑ これを日々管理しておき、周知している状況を作っておく。 周知しながら必要あれば日程や進行の調整をしていく。 プロジェクトに関わっている人が、安心して任せられるディレクターでありたい。 社内もクライアントも含め関係者全員が信頼を置けるディレクターは、コミュニケーションを丁寧にとる事が重要。

カテゴリー

人気記事

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

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

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

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

ハンバーガーメニューのキーボード操作について

小濱の日報一覧

小濱

問い(課題)を正しく聞き、正しく読み

第三者目線

マクロ視点とミクロ視点

ステータス共有

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

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

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

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

ハンバーガーメニューのキーボード操作について