こちらは「エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア Advent Calendar」17日目の記事です。

ただのポエムを書きます。

大したことは書きませんのでお気軽に読み流していただければと思います。

intro#

私は子供の頃から何かを作ることが好きで、それは自然にWebの世界まで波及しました。

初めてwindows98が家にやってきたのが中学1年生の頃で、

それ以来たくさんのWebサイトを作ってはネットの海に放流してきました。

プロになる前にもお金を頂きながら用件定義から保守運用までを行なうまでになり、

プロになってからも、初めての担当案件は一人で自社のWebサイトをデザインから運用までやってきました。

この記事では、自分の経験をもとに思うことをまとめていきたいと思います。

誰?#

  • 30代・東京・正社員エンジニア・主にWebデザインと画面実装担当・妻子あり
  • Twitter

結論#

デザイン・実装含めてフロント側で巻き取れる領域を増していく。

その姿勢が今後の自分のエンジニアライフに生かされていくと信じています。

どんなことを思ってきたか#

まずは少し「巻き取る」って何だ?の前に

私が学び、感じてどんなことを思ったかを書きたいと思います。

私の個人的な話になりますので、興味がない方は「なぜ巻き取りたいのか」まで飛ばしてください。

なんとかする力#

ユーザの要求やプロジェクトの納期、はたまた自分で決めたリリース日など、一定のゴールがある場合、

どんな手を使っても完了させる意識があります。

現時点で自分が考えうる最高と思うデザイン、設計、コーディングをプロジェクトにぶつけます。

1年前、もっと言えば前回のプロジェクトの始まった頃と比較しても視野が広がっています。

ありきたりですが、視野が広がると気をつけること、考えることが増えたり深くなります。

進捗を生むスピードや成果物に直結します。

ただ、自分の体の状態は無視しているので、ゴンさん状態によくなります。。。

アクセル120%全開なので、すごく負担をかけているので、もう少し効率的にやれたらなと思っています。。

好奇心・興味を忘れない#

僕は無意識によく連想ゲームをしています。

バナナ → 黄色 →イエローテンパランス → タロット → 金田一少年の事件簿にタロットモチーフの事件があったな…

など、取り止めもないです。

これを続けていると、何となく前後に浮かんだもので共通項を見つけたり、構造化できたりすることがあります。

これを行うと、人に説明するときの引き出しが増えます。

エンジニアやデザイナーは人に何らかの方法で説明を求められることがあるかと思います。

そんな時に専門的な話になってしまって伝わらないかもしれない場面で、

その人がわかりそうな例えで置き換えて伝えるとうまくいくケースがあります。

そしてこれをもっともーっとグレードアップさせていくと、データモデリングの入口に立てる気がしています。

要素を意味で分解してまとめたり、階層を作ったり、並べたり… データ構造を考える時にほんのちょっと助けてくれるかもしれません。

以前、Webアプリにおけるユーザのアクションからデータが返ってくるまでの一連を、飲食店に例えたことがあります。

  1. ユーザは欲しい料理(データ)を注文する
  2. 店は素材を調理する(データを判断・計算・加工)
  3. 皿に盛り付けて出す(cssなどで見た目を整えてユーザに返す)

さらに、各テーブルに置かれているメニュー表はどれも同じものが書かれています。

これはある種メニュー表インスタンスかもしれません。

そんな感じに自分の言葉で考えることができると、理解が深まったり、取り組むとっかかりになったりしています。

そのネタ集めのためにも興味関心のアンテナをはることは大切だなぁと思います。

この2つをかけあわせて#

何とかする力・興味関心を忘れない

この2つを掛け合わせられて楽しく結果が出せる領域が自分にとって一番だと感じました。

私にとってそれはWeb開発・Web制作のフロントエンド領域でした。

Webサイトは子供の頃から作っていて馴染みがあるし、

平面でできるビジュアル表現には興味関心があり、もっとやりたいと思っているからです。

少し私の学生時代の話をします。

私はもともと絵を描いたり何かを作ることが好きで、ちょっとだけ人より得意でした。

そのままグラフィックデザインの専門学校に通い、様々なことを感じました。

自分なんかより、面白い視点で、高い技術で、人々にあっと言わせるデザインを作り出すひとがたくさんいたからです。

学年中に名前を知られているかと思うくらい活発で、在学中に仕事を受けている人もいました。

通っていた2年間の間に、「個性とは何か?」を、それこそ病んでしまうくらい考え続けました。

ウケがいいものを出してみたりしたこともあります。無駄でした。

そして悟るように開き直りました。

「自分は自分」です。

自分の好きなことを突き詰める方が「楽」なのです。

そして私は何かを真似る・取り入れることが好きなのも発見しました。

真似ることは個性が無くなるのではないかという、ありきたりな、そして浅はかな思考ですが、

そこは凡人なので自分で試して、納得しました。

逆に自分が作り出すクリエイティブが好きだと言ってくれる人が周りにいることを
自分は見逃さなかったのです。

感謝しかないです。

自己肯定感が回復しました。

初めての案件#

お金をもらってWebサイトを作って運用したのは、プロになるより前になります。

独立する同僚の会社のHPを作るにあたり、ヒアリング・ドメインを取得からデザイン・実装、運用保守まで行いました。

値付けに関しては、頂けるならと数万円で作りました。

納品後、喜んでくれました。

私はやはりこの道がいいのかもしれない、…とは当時思ってはなかったですが、

とても楽しかったのを覚えています。

別に自分にとってはドメインとったりサイトを作るということは何の苦でもありません。

でも相手はよく知らないし、めんどくさい。その差分で私はお金を頂きました。

ビジネスの基本ですね。

そして、「巻き取る」の第一歩でした。

なぜ巻き取りたいのか#

端的に市場価値を上げるためです。

現代のフロントエンド開発では、まだまだjQueryは現役ではありますが、

同じくらいVueやReactを書ける方も増えています。

似たようなスキルを持った人材の中で、自分が価値を発揮できるところはどこだろう?

と考えた時のひとつの回答です。

担当できる範囲が広ければ、発注者側からすると人件費が抑えられますし、コミニュケーションコストを低く抑えることができます。

巻き取ることのメリット#

Webデザインから担当することができれば、自分が実装しやすいようにデザインを組み立てることができる。

jsのライブラリなどを使用する場合でも、そのライブラリの表現できるところを考慮しながらデザインすることができる。

協業する場合などでも、コミュニケーションコストが低く抑えられる可能性がある。(もちろん自分でやる場合は限りなくゼロ。)

巻き取ることのデメリット#

自分が進めやすい方法でしかやらないので、他のやり方は意識して勉強しないと効率化や知見が広がらない。

自分のデザインの良し悪しを客観的に評価してほしい時に、わかる人が少ないと辛い。

デザイン力、実装力、どれも中途半端になってしまう可能性がある。

全部自分でやりたいのか?#

そうではありません。

あくまで役に立てる範囲を広げていこう、という意味です。

専門でやられている方はとても尊敬していますし、そういう方と一緒にお仕事をする機会があればぜひお願いしたいです。

まとめ#

jQueryで作られているアプリケーションがどんどんVueやReactに置き換わっていく中、

それらのフレームワークを扱えるエンジニアさんも増えています。

そこでの差別化や自分の強みを考えたときに、「現場でのフロント巻き取り力」として、

Webデザインの領域まで足を踏み入れることができるのであれば、そこに自分の価値を生むことができると信じています。

ただ、全てを自分でやってしまおう。というだけでなく、デザイナーさんや他のエンジニアさんへの尊敬は忘れてはいけません。

あくまで置かれている環境に適応していく中で身につけたスキルなので、正しく協業していく姿勢はとても大切だと考えています。