元営業、弁護士ドットコムでデザインとコードを書くまでのキャリア3段階

元営業、弁護士ドットコムでデザインとコードを書くまでのキャリア3段階


この記事に登場するロールモデル

社会人の学び直し「リスキリング」が注目されています。

ただ、なかなか継続できないという課題感があります。現在、弁護士ドットコムでUI/UXデザイナーとエンジニアとして活躍する門倉央(34)さんは、法人営業からのキャリアチェンジ組。新たなスキル獲得に、どんな心持ちで自ら工夫を重ねたのでしょうか?

UI/UXデザイナーとして「まだ7合目」と語る門倉さんは、Facebook立ち上げを描いた映画『ソーシャル・ネットワーク』に突き動かされたと振り返ります。

(聞き手:JobPicks編集長 野上英文)


目次

UIUXデザイナー 門倉央さんプロフィール

ユニークな働き方をする次世代の担い手たちに、15分間のインタビューをする動画番組『働くっていいかも!』。いまどんな仕事をしているのか、なぜそのキャリアに至ったのか、これから何をしたいのか......。友人の紹介もしてもらって、“ビジネスの輪”をつないでいきます。


今回注目したジョブ(職)は「UI/UXデザイナー」。営業職から一転し、デザインやコーティングまで行う門倉さんに話を聞きました。まずは、実際にデザインしたサイトのこだわりを教えてもらいました。

チームワークと二刀流で、独自の価値を提供

──現在、どのような仕事をしていますか。

門倉:リーガルテック企業の一つである弁護士ドットコム株式会社が展開するサイト「弁護士ドットコムLIBRARY」のUI/UXデザインとそれに関わるプログラミング設計を担当しています。日頃から法律や最新事例などをチェックする弁護士に向けて、サイトを通じ関連書籍やニュースを配信しています。

弁護士ドットコムLIBRARYのトップビュー
弁護士ドットコムLIBRARYのトップビュー

ユーザーの皆さんが効率的にインプットできるように、特にサイト内のトップビューと導線設計にはこだわっています。トップビューでは書籍一覧がぱっと目に入り、弁護士は素早く専門分野にアクセスすることができます。

また、「離婚」や「交通事故」などカテゴリーを細かく分けて、選択すれば簡単に目的に合った本が見つけ出せる仕様になっています。例にあげたこの2つのカテゴリーは、取り扱われることが多いので、トップビューや検索欄の上位に出るように設計しています。

サイトの回遊性(ユーザーがいろんなページを見ていく状態)が良いかどうか。これは一般的にはクリック率という数値で見ることが多いのですが、弁護士ドットコムでは、直接的なフィードバックを積極的に受け入れるようにしています。カスタマーサポート担当者が、定期的にサイトを使ってくださっている弁護士と連絡を取り合い、フィードバックや利用体験を集め、反映できる体制があるのが特徴ですね。

弁護士ドットコムLIBRARYのランキング画面
弁護士ドットコムLIBRARYのランキング画面

──デザインとプログラミング、両方の知識があることのメリットはどこにあるのでしょうか。

門倉:スピード感をもってアウトプットを出せることです。

デザインを作る際は、基本的にはUI/UXデザイナーが素案を作り、それに基づいたコーディングをエンジニアに依頼します。一方で、弁護士ドットコムには、僕を含めて、プログラミングとデザインの両方できるメンバーが多くて、自分で考えたデザインをそのままコーディングすることができます。また、自分自身がコーディングするからこそ、このデザインは本当に実現可能なのか、という目線で考えることができるのも強みですね。

映画に感化され、仕事・寝食以外は、インプットに没頭

━━UI/UXデザイナーを始めたきっかけを教えてください。

門倉:元々、新卒7年目までアパレル関係会社で法人営業を続けていて、デジタルやデザインとは無縁の世界にいました。ただ、情報系分野を専攻していた友人からプログラミングについて聞いていて、なんとなく面白そうな仕事だなと思っていました。

本格的にデジタルの世界に興味を持ったきっかけは、映画『ソーシャル・ネットワーク』(2011年)です。Facebook(現・Meta)代表のマーク・ザッカーバーグ氏が、ユーザーをあっという間に獲得し、世界最大のSNSにまで成長させたストーリー。思いついたアイデアを、コーディングですぐさま形にするザッカーバーグの姿を見て、僕もスキルを身につけてサービスづくりに携わりたいと思ったんです。

自分のアイデアを形にして、たくさんのユーザーが使うサービスを作ることができたらすごく楽しそうですし、価値があることだと、強く感じました。

ステップ1:寝食以外は独学インプット


──全く経験がない状態から、どのようにUI/UXデザイナーとしての仕事を始めましたか?

門倉:最初は営業の仕事をしながら、スキマ時間でプログラミングの勉強を始めました。画面の構築をしていくうちに「どうすれば見映えも良くできるんだろう」と思い、UI/UXデザインも学び始めました。

途中で、SNSマーケティングを支援するツールを作るスタートアップに転職しました。短い期間でしたが、コーディングだけでなく、画面の設計や色の調整などUI/UXデザイナーとしての経験も積めました。当時は仕事が終わった後、食事・睡眠以外は、ずっとインプットに時間を充てていましたね。

門倉さんが学習した教材
門倉さんが学習した教材

ステップ2:できる仕事を受けながら学びも加速

その後、いったんフリーランスとなり、知人の起業を手伝うなどいろいろな仕事を受けながら、自分が貢献できる領域がないか模索し続けました。その頃も、1冊30〜40時間くらいかかるような教材を、両手では数えきれないくらい購入し、ひたすらやり込んで力をつけました。

転職や就活で、この職業を目指す未経験の方におすすめの書籍は何ですか?理由と合わせて教えてください。

Kadokura Hiroshi
経験者Kadokura Hiroshi
弁護士ドットコム株式会社

『はじめてのUIデザイン』 吉竹 遼, 池田 拓司, 上ノ郷谷 太一, 元山 和之, 宇野 雄, 坪田 朋

『UIデザインって何?』から学ぶことができる本でデザインを学び始めた方にとてもおすすめの一冊です!


書籍では、プロのデザイナーの先輩方が、目に見えるデザインや目に見えない部分のデザインから、具体的なデザイン手順などを丁寧に解説しています。


UIデザインが初めてでも、ペルソナ(ユーザー像)を設計したり、ペルソナが取る行動から、最終的な目に見えるUIに落とし込むまでの必要な要素(コンテンツ)を探す手法が紹介されています。また、具体的にど...

のようなステップでユーザーが操作をするのか、どのような画面遷移のパターンが考えられるか、なども丁寧に解説されているので、Figmaなどのデザインツールを一通り使えるようになったら(完璧でなくても大丈夫です!手を動かしながら自然に身につけられます)、オリジナルのお題を考えて、模倣しながら手を動かしてみると良いと思います。 実際、私自身もUIのデザインフローを身につけるために、身体を使って覚えていくようなイメージで実践しつつ、何度もこの書籍で取り組みを振り返りチェックしました。 UIデザインを始めるための知識と方法が網羅されているので、実際に取り組みながら学ぶのを希望する方には、この本はとてもおすすめです!



──どうしてそこまで頑張り続けることができたんですか。

門倉:この数年、数えきれないほどの挫折も経験しましたし、正直、UI/UXデザインやプログラミングに対して飽きを感じた時もありました。それでも、この仕事を続けているのには、それらを上回るような楽しい瞬間が定期的にあるからです。

作り方が全く思いつかなかったものができると、まるで解けなかった問題が解けた時のようなうれしさを覚えます。また、ユーザーが操作して喜んでいるのを目の当たりにするとやりがいを感じます。1社目で法人営業していた時から、自分たちで作ったものをユーザーが手に取り、コミュニケーションを取る瞬間にやりがいを感じていて、それをこの仕事でもできることに喜びを感じますね。

同業の先輩や同僚にアドバイスされたことで、最も仕事上の教訓になったことは何ですか?

Kadokura Hiroshi
経験者Kadokura Hiroshi
弁護士ドットコム株式会社

px(ピクセル)に囚われず、拡大したり、縮小したり、さまざまな角度で考えよう

これは僕自身がデザインツールのFigmaでアイコンを作成していた時に先輩デザイナーからかけられた言葉です。


初めてのアイコン作成だったのですが、シンプルな形状なのに、なかなかしっくりくる形状が再現できず、先輩デザイナーにヘルプを求めました。その時に「ピクセルに囚われず、拡大したり縮小したり、色々な角度からデザインをしてみて!」とアドバイスをいただきました。


普段、Figmaでデザインをしているときは最低でも1pxの幅で物事を考えてデ...

ザインをしていましたが、何倍にも拡大して細部を調整したり、その後に一気に縮小してバランス見たりと、一つのロゴをさまざまな角度から観察し作成しました。スケールを変えて調整し、最終的に等倍に戻すと、先ほどとはうってかわって、すごくバランスの取れたアイコンができました。 これはアイコンデザインの一つの例ですが、このアドバイスを抽象化するとその他のシーンでも活用できる考え方だと思います。 例えば、トグルボタンの追加といったタスクがあるとします。この時に、目で捉えられるUIコンポーネントのことしか考えないと、いつの間にかユーザーの気持ちや体験などを考慮せず、単に形と色しか意識していないデザインになってしまいます。 タスク自体はトグルボタンの追加だとしても、俯瞰して考えることでユーザーがどのようなシーンでそのボタンを利用しようとするか、どのようなことを期待するか・・・など複数の観点から考えられます。これができると良いデザインができますし、場合によっては「そもそもトグルボタンではなく、別のアプローチの方が良いのでは?」と新しいアイデアが出てきたりもします。 要は、狭い枠組みや先入観に囚われず、広い視野を持ってデザインに取り組みましょう!ということだったのですが、このアドバイスは今でも折に触れて意識し、考え方をデザインに取り入れています!


ステップ3:コミュニティの力で「7合目」へ

──支え合ったり、励ましあったりする仲間はいますか?

門倉:僕が参加しているデザイナーコミュニティ「BONO(ボノ)」の存在が大きいですね
これまでデザイン経験がなかった方から、経験者まで参加するコミュニティです。作ったものをシェアし合ったり、一緒に勉強したり、と日々励まし合いながらデザインできたのも、継続できた一つの理由だと思います。

また、BONOのオーナーであるカイくんという方は、元NewsPicksの立ち上げ初期にUI/UXデザインを担った方なので、そういうプロ目線でのフィードバックをいただけることも嬉しいポイントです。僕をご紹介いただいた林さん(14話出演)もそうですが、全く別の業界からコミュニティに参加して、UI/UXデザイナーとして働かれている方はたくさんいます。

━━UI/UXデザイナーとして、いま何合目くらいにいると考えていますか。

門倉:すごく難しい質問ですが、未経験の状態から正社員として就職し、転職もできたという観点からは、7合目くらいでしょうか。

10合目(頂上)と言えるまでのユーザー体験を設計するには、ユーザーの気持ちに対する洞察力が不可欠であり、その力を養うにはどんどん働いていくしかありません。10合目を目指して、これからも時間をかけて経験を積んでいきたいと思っています。

この職業について未経験の人に説明するとしたら、どんなキャッチコピーをつけますか?

「働くっていいかも」収録を終えて (4)

(文:中井舞乃、映像編集:長田千弘、デザイン:高木菜々子、編集:池田怜央、野上英文)

※ この記事に編成されている経験談は、記事作成時の経験談の内容と情報が異なる場合があります。

この記事に関連する職業

経験談・年収・キャリアパス・将来性などのデータ・ロールモデルをこちらでご覧いただけます