はじめまして、弥生の田中です。

筆者の紹介

私はプロジェクトリーダーという肩書で、弥生のお客さまがアプリケーション・サービスを満足に利用していただくために必要なUI/UXデザインを実践し、各プロダクトチームとコラボレーションするチームを率いています。

このチームは、今期初めて弥生内に創設されました。

私の主な責務はアプリケーションのUI/UX周りのデザイン・評価を中心としフロントエンドの技術トレンドの判断や導入といったエリアも担当します。

こんな私からは、UI/UXやフロントエンドエンジニア周りの情報を中心に発信していきます。

どうか、温かい目でご覧いただければ幸いです！

はじめに

最初の投稿は、先週から始まった弥生の取り組みをご紹介いたします。

次投稿以降は、実際のエンジニアからの発信を交えて投稿していきます。

どうぞ、お楽しみに・ω・

なぜ今更フロントエンジニアを育成することになったのか？？

近年、弥生では、クラウドサービスの新規展開、需要も増えておりフロントエンドエンジニアの不足と、社内でのスキルナレッジの不足が目下の課題です。

事実、弥生への採用においても、Windows、C++、C# といった、Windowsクライアントのエンジニア像が強く、フロントエンドな方々と接点が薄い状況 orz

提供するアプリケーションやサービスが増えてくると、それぞれのシステムで独自拡張が始まり、システム間でデザインや使い勝手のズレが生まれます。

こういった状況を打開するために、UX検討チームは何ができるか。

ただでさえ破綻しやすい、フロントエンドをどのように立て直すことができるか。

そんなミッションを背負っています。

まさに！

この問題こそが、本記事を投稿するきっかけとなった、フロントエンドエンジニア育成というミッションです。

何から始めようか？

この大きなミッションを前に超えなければならないのが、前項でも記載した、フロントエンドエンジニアの不足と、スキルナレッジの不足です。

デスクトップアプリケーションでは、長い歴史を経て積み重ねたスキルがあるものの、 Webのフロントエンドは、まだまだ乏しいのが実情です。

このため、UX検討チームがまず着手したのは、各プロダクトで働くエンジニアのスキルの底上げです。

こういった施策は、社内外の勉強会という形で立ち上がるものの、なかなか継続できないジレンマを抱えていました。

この悪い流れを今年こそ払拭せねばと意気込み、フロントエンジニアの育成プランについて実行の承認を得ました。

筆者の目指したいエンジニア像

ユーザー体験を満足させられるようなプロダクトを考え実装できるエンジニア

想像に容易く、文章では一言、中はとーってもディープ(苦笑)

こんな人物像をブレイクダウンすると

ユーザー目線での品質確保の手法を知っていること
UI/UXデザインの実践
コーディングやサーバーサイドなどのスキルは必須
モノ作りやプロダクトへの情熱を育む（←ここが一番大切）

・・・・

道のりは果てしなくぼんやりとしていたので、スモールスタートとし、チームの若手を中心とした有志で始めました。

集まった有志は、私を除いて5名。

本プロジェクトのメンバー紹介

今後記事を投稿してくれるメンバーになるので、かんたんにご紹介します。

Y.Kさん

デスクトップアプリケーションのベテランエンジニア。私と同じく中途の同期入社！

前期よりフロントエンド開発に従事するものの、
不慣れな開発に不安があり、「スキルアップしたい」との思いから
プロジェクトへの参加を志願！

エンジニアのお手本として、メンバーに刺激を与えてくれることを期待しています。

K.Kさん

本プロジェクトで唯一、弥生内でフロントエンド開発の経歴を積んだ中堅エンジニア。
私と一緒に本プロジェクトを牽引するために、日々施策を検討してくれています。

フロントエンド周りの問題発生時に頼りにしたい！と、

プロジェクトメンバーからの熱い期待が寄せられています。

S.Fさん

新入社員として入社。
デスクトップアプリケーションの自動テストエンジン作成などの経歴を経て、
上記二人と同じく、フロントエンド開発に初めて携わることに。
自宅でのスキルアップの進捗が芳しくなく、どうせなら一緒に！と、めでたく合流することに。

S.Uさん
M.Fさん

弥生に今期入社したばかりの中途で、今期初めてフロントエンドに携わる若手エンジニア。
休日もスキルアップに励んでいるのを知っていたので、
どうせなら！と、本プロジェクトにお声がけ。迷うことなく合流してくれました。

見ておわかりいただけたように、フロントエンド開発の経験が浅いメンバーで構成されています。

このため、まずはフロントエンドの構築に必要なスキルから始めてみよう！

ということで、下記の感じで３週間頑張っていきます。（がんばろー！）

ステップ

フロントエンジニアの基礎の習得（１）←いまここ

<目的>
マークアップスキルの習得(HTML5,CSS3)/グリッドシステム(FlexBox,Bootstrap等)
<内容>
与えられたデザインカンプに沿ってマークアップを実践

フロントエンジニアの基礎の習得（２）

<目的>
習得したマークアップスキルの活用
<内容>
(1)で習得したスキルを活かし、WEBサイトで定番のパンくずやサイドメニューをマークアップする

実際にどんなことやっているのか？

この活動は、以下の制約の元に活動しています

ダラダラやらない

業務の定時後に1時間30分程度
課題の提出期限を設ける

ペアプロ推奨

2人１組で課題をこなすことで生産性をあげる

社外へ発信する

GitHubで公開しています

先週から今週にかけては、①を実施しています。

今週は、下記のように画面解像度によって異なるサイズのコンテンツをグリッドシステムを利用して構築するといったマークアップを実践しています。 f:id:miketanaka0430:20170228165425p:plain

投稿準備が追いついてませんが、このパイロットプロジェクトで得たナレッジをどこかで共有できればと思います。

それでは次回更新をお楽しみにお待ちください！

筆者プロフィール

弥生株式会社　田中良文弥生がクラウドに本腰を入れた2009年の変革期に入社。近年は弥生のアプリケーションのUI/UXデザイン実務・評価を担当。今期のスローガンは弥生のお客さまが利用するフロントをモダンに、エンジニアの環境もモダンに！写真歴6年生。都内や近場の散策、最近は工場夜景に夢中♪写真活動中に得たAdobe製品を使ったDTPスキルを実際の業務でもフル活用。デザイン戦略を確証するために、デザイン関連の本を読み漁るのが最近の日課。 Twitterなどで紹介していきます。（まだ始めたばかりです）