ボードメンバーにHTML/CSSで商品ページを作らせてみた
はじめに
プロダクトチーム雑用係KTDです。
homieには雑用係の私には考えられないぐらいジーニアスな方々がいる。
いつも彼らとのギャップを感じる日々だ。
そんな私にも一つだけできることがある。それはHTML/CSSを書けることだ。
雑用係と言えど、IT企業に入るにはHTML/CSSを知らなきゃいけないと思っていたので、苦戦しながらもなんとか習得した。
そんなある日ジーニアスな方々と恐れ多くも談笑させていただいた。
システムのことや不動産業界のことなどを話したが、一つ重要なことに気づいてしまった。
「まさかこの人たちジーニアスなのにHTML/CSS書けないんじゃね？」
由々しき事態だと思った私は、このジーニアスの皮を被った道化師どもの本性を炙り出そうと心に誓った。
そして今回の企画「HTML/CSSで商品ページを作らせてみた」に至ったのである。
ルール
今回のゴールは全1時間の中で参加者各々のスキルを駆使して商品ページを作ってもらうこと。具体的には、弊社のサービス「HOTLEAD」の商品ページhttps://homie.co.jp/hotlead/ の一部を改変してもらうこととなる。
前半30分はHTML/CSSの簡単なレクチャーを行い、後半30分で実装をしてもらう。
実装された商品ページは、社員全員が入っているSlackで公開をし、どのデザインが気に入ったのか一人一票を任意で投票してもらう。
最も獲得票数の多かった参加者は「真のジーニアス」、最も獲得票数の少なかった参加者は「ITベンチャーの負け犬」の称号を与えられることとなる。
参加者
今回の企画は、「真のジーニアス」と「ITベンチャーの負け犬」を決定することを目的としているので、日頃からジーニアスを自称している偉そうなメンバーに参加してもらった。
代表取締役CEO：M・タレンテッド・ヤストモ
執行役員VPoG ：S・クレバー・タカシ
執行役員VPoS ：S・ギフテッド・マサ
人事リーダー ：O・ブリリアント・ミオ
プロダクトリーダー：K・スマート・ユウスケ
ご覧の通り、全員が管理職である以上、HTML/CSS程度分からずにどうやって業務を遂行できるのだろうか。
結果が非常に楽しみだ。
早速企画の内容を見ていこう。
企画内容
前半 - レクチャーパート
参加者全員が管理職で偉そうにしているため、前半・後半で30分ずつしか時間が取れず、どれだけ短く効率的に教えていくかが鬼門だった。
レクチャーパートは、0から理論を教えるととてつもない時間がかかってしまうので、HTML/CSSの簡単な書き方とアウトプットのみに絞った。
「テキストカラーとサイズを変更するには、font-sizeプロパティとcolorプロパティを使いますよ！」ぐらいの浅い説明に留めた。
HTMLタグとCSSプロパティも一部紹介したが、こちらも簡単なもののみに留めた。
参加者の中には「ふむふむ」と聞いている人もいれば、よだれを垂れ流しながらポカーンと口を開けて聞いている人もいた。
正直なことを言うと、参加者の反応を見る限り、知ったかぶり野郎と間違えてIT企業に入ってしまった可哀想な管理職が存在することはすでに分かっていた。
しかし、今日決着をつけると心に誓っていたので、ここで手は緩めなかった。
▼どれぐらい浅い説明か知りたい人用
後半 - コーディングパート
コーディングパートでは、レクチャーパートで学んだことを活かし、HTML/CSSを実際に書いてもらった。
弊社ではHOTLEADというサービスの商品ページがあるので、その一部を文言からデザインまで自分たちで考え、改変してもらう形で実装してもらった。
コーディングで分からないところがあればググったり簡単な質問をすることは許すが、弊社のエンジニアに聞いたりソースコードのコピペは当然NGというルールだ。
全員かなり真剣に取り組んでおり、30分の限られた時間の中で己の最大限を捻り出しているように感じた。
完成した商品ページ
唸り声を上げたり歓声を上げながらも、なんとか全員が30分以内に実装を終えた。
ここで完成した商品ページを少しだけ紹介する。
「どこがジーニアスなんだよ！」というツッコミが聞こえてきそうだが、それぞれの努力の結晶なので温かい目で見て欲しい。
O・ブリリアント・ミオ（人事リーダー）の完成品
ブリリアント・ミオは、開幕から意気揚々にimgタグでフリー画像をペタペタと貼り付け始めたが、30分後にもまだ画像を貼り付け続けていた。
imgタグをさぞかし気に入ったのだろうが、どうやらマージンの存在を忘れてしまったのだろう。
空間が独特なデザインに仕上がった。
S・ギフテッド・マサ（執行役員VPoS）の完成品
ギフテッド・マサは、しきりに「フォントを太字にしたい」「フォントの色を変えたい」と多くの質問をしてきた最も積極的な参加者だった。
私は企画サイドの人間だが、HTML/CSSへの熱意と情熱を感じたので、いいものが出来上がる予感がしていた。
結果はご覧の通り、90年代の匂い漂う味のある商品ページとなった。
Windows98の思い出が色濃いのだろう。
S・クレバー・タカシ（執行役員VPoG）の完成品
クレバー・タカシは、ユニークネス（独自性）を追い求めている中年の男性だ。
何かしら他の参加者とは一味違った完成品となる予感がしていたが、やはりその予感は正しかった。
ユニークネスは十分だが、主張が強すぎて目眩がしそうだ。
（著作権の関係上一部カット）
投票結果
投票は全従業員が参加しているSlackチャンネルで行った。
投票総数としては15票となった。
弊社の従業員は100名以上いたはずだが、15票しか集まらない事実にも注目していただきたい。
興味のないものには一切関わりを持たないメンバーが多いようだ。
少ない投票総数の中、結果は下記となった。
👑 優勝（8票）：M・タレンテッド・ヤストモ（代表取締役CEO）
2位（3票）：S・クレバー・タカシ（執行役員VPoG）
3位（2票）：O・ブリリアント・ミオ（人事リーダー）
3位（2票）：K・スマート・ユウスケ（プロダクトリーダー）
💀 最下位（0票）：S・ギフテッド・マサ（執行役員VPoS）
代表取締役であるM・タレンテッド・ヤストモはなんと8票を獲得し、2位と倍の差をつけて「真のジーニアス」に輝いた。
S・ギフテッド・マサは0票で圧倒的大敗を喫し、「ITベンチャーの負け犬」となった。
因みに、レクチャーパートでよだれを垂れ流していたのが、このS・ギフテッド・マサだ。
間違えてIT企業に入ってしまったのだろう。
同情する限りである。
ここまで読んでくれた方々は「流石、ITベンチャーの代表だ！」と思ったことだろう。
しかし、ここで衝撃の事実が発覚した。
なんと、優勝した代表取締役 M・タレンテッド・ヤストモはソースコードのコピペをしていたのだ！
代表取締役という威厳を守るために、卑しくもチート行為をして優勝を奪い取ったという、なんとも人として恥ずかしい結果を残し幕を閉じたのである。
弊社は代表以外の多くの人が誠実なので、誤解のないようお願いしたい。
参加者たちの声
最後に、今回の参加者に感想を聞いてみた。
やはり短い時間の中で自分のやりたいことを実現するのが難しかったのだろう。
ただ私は、チート行為をせず真摯に取り組んでくれた参加者たちこそが優勝だと思う。
名誉や肩書よりも、"真"摯なジーニアスを目指していきたいものだ。
Q1. 企画で難しかった部分はどこですか？
S・クレバー・タカシ：コード構造の記憶とやりたいことをコードへ翻訳するプロセス
O・ブリリアント・ミオ：自分がやりたいデザインはイメージできているものの、それをどうやって実現するのかが分からず、考えすぎて手が進みませんでした。
S・ギフテッド・マサ：全部難しかったです。なんとか文字を書くことだけはできましたが、画像や図を入れることが最後までできなかった。（とはいえ文字をコードで書けたことは嬉しかったです）
Q2. 企画を通して学びになったことはなんですか？
S・クレバー・タカシ：エンジニアの皆様への圧倒的リスペクト
O・ブリリアント・ミオ：とりあえず手を動かしてみることが大事だなと思いました。
S・ギフテッド・マサ：全部学びになりました。。HTMLとCSSの違いとか、それぞれのコードの書き方とか。スキルだけでなくデザイン性の感性も重要だと思いました。
Q3. 代表のチート行為に対して一言お願いします。
S・クレバー・タカシ：こういうところに人の品格って出るよなって思いました。
O・ブリリアント・ミオ：「チート行為はしてはいけない」これは私は常識だと思っていましたが、同時に自分の常識は他人の非常識という言葉を思い出しました。改めて共通認識を擦り合わせておくことの重要性を思い知りました。ちなみに社長は許せません。
S・ギフテッド・マサ：結局成果さえ良ければプロセスは不正しても何でもいい、そういう世の中なんだなぁと思いました。少なくともhomieはまじめに頑張っている人を評価する、そんな会社でありたいと思います。
おわりに
homieでは引き続き新しい仲間を募集しています。興味あるよ！という方はぜひお問い合わせお待ちしております。
プロダクトブログでは、もっと真面目な技術記事やインタビューなども紹介しているので見てみてください！
