HTML
CSS
jQuery
初心者
ネタ

へっぽこコーダーが女子Webデザイナーにモテる為には。

本記事での「モテる」とは、
「仕事で重宝される」から「彼女ができる的な下心」まで広い意義で使用します。笑

中小の制作会社で数年間、どうにか生きた実体験を元にしています。。

目次
1. PSDファイルは女子デザイナーからのラブレター。
2. 「清潔感」が大事。見た目もコーディングも綺麗に。
3. へっぽこコーダー → フロントエンド・エンジニア入門へ
4. まとめ。

1、PSDファイルは女子デザイナーからのラブレター。

psdファイルはラブレターだと思って接してください。笑
楽しんで作業しましょう、少しだけドキドキしましょう。
小さなコメントや心遣いを発見したら感謝を伝えましょう笑

彼女たちは1px単位でこだわってデザインしています。。
(私の友人Webデザイナーは、目でディスプレイを見て、px数が違うのがわかると言っていました。怖い。。)
彼女達からよく聞くのは、
「マージンやパディングをPSD通りに守ってくれない!px違いすぎ!!」という声です!本当によく聞きます、、、。

僕も昔、めんどくさくなって、目分量のpxでコーディングしたら、赤ペンぎっしりでかなり不機嫌で返されたことがあります。。

最初にざっくりマージンやパディングのルールの説明受けると楽です。
「気にしてくれてるんだな」と感謝されます。
「レスポンシブで、どうしても、、、見た目が変わる。」という場合などは最初にわかりやすく説明しましょう。

また、クリックやホバーしたらどうなる?など挙動がわからない場合も、
しっかりコミュニケーションをとって確認しときましょう!
目次3も満たしてる方は、この時に髪型や、服装なども褒めてみましょう!笑

1pxデザインを守ると、心の距離(モテ度)も1縮まります。笑
ラブレターのお返事のつもりで、綺麗にコーディングしましょう。

見た目もコードも「清潔感」がやっぱり大事?

20171025175531.jpg

確認などのコミュニケーションのとき、重要なのが「清潔感」「言葉使い」です。
仕事はできるのに、「挨拶しない」、「シカトする」、「振り方が雑」など問題ありな先輩、、。
みなさん周りにいると思います。笑

そういう愚痴もよく聞きました。。
ラフでもいいので、身だしなみ、言葉選び、などにある程度気を使いましょう。
納期が迫っててイライラしてる時も深呼吸して、落ち着いて。
海のような心で。
職場や仕事仲間に味方が多い方が精神衛生的にも◎ですよね!!
(なんかビジネス本みたい 笑)

何度かコミュニケーションして仕事で信頼を得ると、
仕事の愚痴を聞いてあげる飲みデート?くらいには
行ける関係になると思います。笑

3、へっぽこコーダー → フロントエンド・エンジニア入門へ

ラストです。
とにかく「HTMLとCSSしかできないコーダー」だとモテません。
最初、現場の入った時、HTMLとCSSしかできなくて、全然仕事なかったんです。。
環境にもよると思いますが。。

なぜならWebデザイナー女子たちも、
だいたい自分で、マークアップできるからです。
彼女たちができないスキルを強化し、「へーすごい!頼りになる。」と印象付けましょう!。

彼女たち、みんな仕事や学校で覚えてるんですよね。ある程度のコーディング。。
これでは食事に誘えません。。
(教えてください!っ という姿勢ならアリかもですが、忙しい時はウザがられます。)

そして彼女たちは1pxのズレを許さない綺麗なコーディングをします。
CSSもこだわります。(CSSがなんども上書きされてたりもしますが)

あと簡単なjQueryもできる人、結構います。

そこで、
JavaScriptとWordPress(と少しのPHP)を得意になって、
フロントエンドエンジニアを目指しましょう!!

あなたは「フロントエンドエンジニア」という言葉を知っていますか?

僕はそう聞かれたら、「はい、なんとなく、、、jsもゴリゴリ書けてフレームワークとか詳しいモダンな感じですか?」と答えてググってしまいます。
僕はjsフレームワークの知識ないので「フロントエンドエンジニア」なれていないと思います。
おっけー グーグル。よし、調べましょう!

フロントエンドエンジニアは、
Webデザイナーのデザインをもとに、
HTML、CSS、JavaScript(jQuery)、
PHPの設計や実装、
WordPressなどのCMS(コンテンツマネジメントシステム)構築や
カスタマイズを担当します。

と、インターネット・アカデミーのサイトには載ってました。
PHPもかぁ。笑

こちらも参考に

2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな?
https://qiita.com/rana_kualu/items/cad8dbbe5f5a1f1b3ba1

個人的には
CSS3、jQueryでわりと自由自在にアニメーション実装可能。
Sass、Compass、gulpを使って時短コーディング。(案件によるが)
WordPressいじれる程度のPHPも使えると活躍できると思います。

と思っているのですが足りないかなぁ。。。

モダンな技術使ってる企業とかは
jsのフレームワークとかも使えなきゃだと思います。
その辺もバリバリな方はエネルギッシュなので、
清潔感があれば、菅田将暉クラスでモテると思います。(勝手な意見です。)

5分で理解する React.js
https://qiita.com/tomzoh/items/7fabe7cb57dd96425867

そしたら自分に自信がついて、
「あれ、髪切りました?」とか
「今日の服の柄、可愛いですね!」 とか
女子Webデザイナーに言えるようになると思います!最初言えなかった。。。

セクハラにならないように注意してください。(自己責任)

4、まとめ

結局のところ、、モテる(重宝される)には

自分磨き
コミュニケーション能力
情報取集する意欲
海のような心
菅田将暉さんのようなイケメンさと愛嬌?

が大事ですね。
みなさん画像のような温泉デート目指して、
明日からも頑張りましょう!笑

完。