marc tech

株式会社MAISON MARCが運営するブログです。Tech Blogとは名ばかりの、採用・福利厚生の情報や、日々の活動記録(?)からエンジニアのくだらない小話までMAISON MARCに関する情報をお伝えするブログとなっています!興味のある方は是非ご覧になってください。

btn??button??ボタンだよ!!

f:id:marctech:20171124185242j:plain

f:id:marctech:20170929185512p:plain

セイ

皆さん、こんにちは、椀子そばで77杯で限界が来たフロントエンドエンジニアのセイです。



前回のデザイナーの「チキチキ、デザイナーチーム似顔絵大会、まっつんもいるよ」に触発されてエンジニア陣もちょっとやってみようということで、今回はWebサイトで普段から目にする、



をみんなで作ってみました。

普段ウェブサイト制作でよく作るボタンをエンジニアに完全にお任せしたら何ができるか……。

お昼ご飯をかけた熱い戦いが始まったり始まらなかったりします!!



※訂正

上記の回、正しくは「第1回デザイナーチーム似顔絵対決!【人事:まっつんさん編】」 です。 デザイナー陣の個性が絵に現れてて面白いです。同じ会社でもここまで作風が変わるのかと、面白いです。


是非ご覧ください。

http://blog.hatena.ne.jp/marctech/marctech.hatenadiary.com/edit?entry=8599973812309366491 marctech.hatenadiary.com


ではいってみましょう!!

※携帯の方はResultを押すとボタンが見れます

エントリィィNo.1 『にこる』

See the Pen button01 by MMbutton (@MMbutton) on CodePen.


モノトーンを基調とした立体的なボタンを出していただきました!!
マウスを重ねると、『コロッ、コロッ』っと転がるような動き可愛らしいですねー。うちに秘めたる可愛さが出たのでしょうか。

※エンジニアは全て男性です。


エントリィィNo.2 『undefined』

See the Pen button02 by MMbutton (@MMbutton) on CodePen.


まさにシンプル イズ ベスト!!

無駄なものを削ぎ落とし、洗練された流れるような色の描写。センスが光ります。
undefindさんの不要なものは極力一切入れないストイックさ、仕事への姿勢がボタンに現れてますねーー。


エントリィィNo.3 『豪昇鬼 卍丸

See the Pen button03 by MMbutton (@MMbutton) on CodePen.


えっと。。ボタンの話する前にまず名前ですね。どうしてこうなった。\(^o^)/

名前のインパクトもすごいが、このボタンの押した時のやられた感。悔しい!!


エントリィィNo.4 『チャレンジ』

See the Pen button04 by MMbutton (@MMbutton) on CodePen.


『あ・・・ありのまま今起こった事を話すぜ! ... おれも何が起こったのかわからなかった・・・。ボタンが・・・ボタンが・・・浮いた!?』

影の作り方にこだわりを持つことでボタンの浮く感じを表現してますねー。チャレンジのこだわりが見えた!


エントリィィNo.5 『ウェイ(セイ)』

See the Pen button05 by MMbutton (@MMbutton) on CodePen.


トリは私、セイです。普段ウェイウェイ言ってましたら、あだ名がウェイさんになりました。気に入ってます。

※ハケの付近をタップしたりマウスを乗せると動きます




以上!忙しい中エンジニアに作って頂いたボタン集です!

やはりエンジニアも作るものが人によって全然違うので面白いですねーー。

皆様はどのボタンが面白かったでしょうか???

内心もっと作り込む時間が欲しかったですが、それも含めてエンジニアの腕だと思うのでこれからも頑張ります。

また見てね!

f:id:marctech:20170929185512p:plain

セイ

p.s 1位のお弁当は僕がいただきました