見出し画像

Web制作会社 勤務まとめ

びゅーん、むささび(@musasabi_byun)です。

3月半ばから末にかけて、10日間ほどWeb制作会社さんに勤務するという超絶有り難い経験をさせて頂きました。

大学1年生かつ未経験の自分にとっては、非常に貴重な時間となりました。

技術的な面・精神的な面を含めて、勤務の中から盗んできたことを皆さんにばら撒こうと思った次第です。なんちゃら五右衛門です


非常に為になるので最後まで読んでください

と言いたいところですが、ちょっとでも為になることがあれば幸せです。


営業から勤務へ

参考程度に、僕の経歴を。

勤務までの流れ
8月にデイトラ学習開始 → 3rdを5日で完走 → 2月に営業開始 → 勤務


今回勤務させて頂いた所は、営業メールを初めて送った企業さんでもありました。

今年の運勢ぜんぶ消費したようです。昨日も鳥のフンに合ったたし


社長「数日間ウチで働いてみて、結果次第で案件ふりますよ」

むささび「大好き」


案件頂きに面談しに向かった先で、こう言われたわけです。

仕事を獲得できなかったのは残念でしたが、信頼と実績を得る絶好の機会だと判断し、9日間お世話になることに。

それでは実際の勤務で感じたこと・学んだことを、出し惜しみなく伝えさせて頂きます。


会社の雰囲気

服装自由のコーヒーをいつ飲んでもOKな、Web系企業にありがち(偏見)な会社さんでした。

先輩方はデュアルモニター使いながら、どや顔してましたね。

画像1

※イメージ画像

優しい方ばかりで、僕の質問にも親身になって答えて頂きました。


勤務時間と主な作業内容

働いた時間は、10:00 〜 18:00で昼休憩1時間の7時間。

主な仕事はホームページのコーディング。少しだけデザインカンプも作成しました。

担当したのは、ホテルとキャンプカーレンタル会社の2つです。


そうそう、

ぶっ続けのコーディングで瀕死になりながら飲んだコーヒーは格別でしたね


その日その日の仕事内容のツイートを、モーメントにまとめました。

興味と時間があったら御覧ください。


実務で使用したスキル

✔使用したスキルは5つだけ


他にもBootstrap、php、WordPressあたりを勉強していましたが、今回使うことはありませんでした。

プログラミング駆け出しさんは、Web制作会社さんと仕事をする際の目安と考えて頂ければと思います。


✔デザインツールについて補足

デザインツールはAdobe XDしか触ったことないという方もいらっしゃるのではないかと。特にデイトラ生の方

僕が面談させて頂いた企業さんの大半が、PhotoshopかIllustratorでした。

今回の勤務先でもPhotoshopがほとんどのようです。XDも稀に使うようですが。

制作会社さんに営業する前に、画像の書き出しくらいは出来る状態にするのがベストですね。

僕は はにわまんさん(@haniwa008)のブログで勉強しました。お世話になりっぱなしです


▼Photoshop


▼Illustrator


実務を通して学んだこと、成長したこと

ここからは技術的な話が多めです。

プロのコーダーさんから盗み取ってきた部分もあるので 案件取りまくりイケイケ駆け出しさんの役にも、多少立つかと思います。


✔CSSの見やすい書き方

大きなサイトを作成する際、数人で仕事を分担することも少なくないようです。

そこで大切になるのが「誰が見ても見やすいコードを書く」こと。

後からCSSを合体させたりする訳ですが、これがまあメンドイことこの上なし(先輩情報)

そこで、コードに目印をつけると良いとのこと。


今からでも使えるテクニックなので是非真似して下さい。

書くだけでプロっぽく見えますし😌

VSCodeなら、ユーザースニペットに登録しましょう!光の速さで出現させられます

スクリーンショット 2020-04-03 14.39.10


✔カード系のコーディング

カードの横並びですね。めっちゃあるあるです

数日間の勤務でも4〜5箇所ほどありました。


ただコーディングだけをする場合はそれほど難しくはありませんが、問題はWordPress化する際です。

動的に表示させたとしても、レイアウトが崩れないコードを書く必要があります。


これは、いちくんさん(@ichikun0000)の記事を参考にさせて頂きました。

▼参考にした記事


ポイントは、FlexBoxwidthをうまく使うことです。

気になる方は上のリンクを確認してくださいね。


✔em、remの使い方

むささび「em、remって何? おいしいの?」

存在と性質はなんとなく理解していたものの、イマイチ使い所が分からなかったem、rem。

どうやらレスポンシブ化の際に非常に強力な武器になるそうで。


pxとうまく併用して使えば、フォントサイズの管理が格段と楽になります。

em、remに関しては有用な使い道がまだあると思うので、ぶっちゃけ勉強中です。あくまで一例に

(他の活躍場所をご存じの方がいらっしゃれば、是非教えていただきたい)


✔画像形式 jpg と png

これはPhotoshopで画像を書き出す際に起こった事件。

むささび「すんません、jpgとpngって何が違うんですか...」


Photpshopで画像を書き出すときは、画像形式を選ぶ必要があります。

特に迷うのが jpgpng だと思います。


jpg...少ない容量で写真をキレイに保存することが可能
png...色の透過 が出来る。ロゴによく使われる


のちのち自分でも調べてまとめました。ツイートのボケは60点ですね


✔デザイン参考サイト

今となっては欠かせない技術であるレスポンシブデザインですが、実際の案件ではコーダーに託されるケースも多い様です。

デザインを勉強してこなかった僕にとっては、やや過酷。

そんなとき、先輩から頂いたアドバイスが「オシャレなデザインを参考にする」こと。

muuuuu.orgっていうサイトにいい感じのサイトが集結しているのでオススメです。名前は謎


✔デイトラで学んだこと使いまくった

成長したことというよりは、伝えたいことですかね。

実務の中で、デイトラで勉強した技術をこれでもかというくらい使いました。

スライダーにモーダル、jQueryのスクロールやアコーディオン...

心の中は進研ゼミのアイツでしたね

画像3


これからプログラミング学びたいという方にも、デイトラを強くオススメします(ステマではない)


ショーヘーさんに東フリの皆さん、本当にありがとうございます。


勤務でいちばん意識したこと

わずか数日でしたが、目に見えて成長することが出来たと思います。


勤務中に最も大切にしたのは「積極性」です。

貴重な時間を最大限に有効活用するために、自ら仕事を取りに行きました。


むささび「ここ、こんなデザインの方が良くないですか?」

むささび「この部分なんですけど、こんな動き付けてみました」

むささび「デザイン途中なんですか?自分考えてもいいですか!!」


うるさかったかもなぁ...苦笑

でもこの行動が、自分が大きく成長させた要因のひとつになっていることは間違いないかと。

僕が尊敬して止まないゆうきさん(@unomado_life)は、企業さんとの面談では「進行を担い、その場をリードしていくこと」が大切だとおっしゃっていました。


▼僕も参考にしまくったゆうきさんの営業神note


この重要性は、面談が終わった後もある程度つづくと思います。

仕事に対して受け身姿勢の方は、評価や信頼を得ることが難しいのではないかと、僭越ながら思うのです。

勤務であっても外注としての案件であっても、胸を借りるつもりでぶつかって参ります。


駆け出しさんに向けて

これからプログラミングを頑張りたいという方に向けて、僕なりのメッセージです。


プログラミング学習 → 営業 → 案件獲得 という流れが主流ですが、案件獲得の前に「勤務」経験を挟むのもアリだと思います。

僕は自ら「勤務」を希望したわけではありませんが、こちらからお願いすれば了承してくださる企業さんもいらっしゃるはずです。

「勤務」をクッションとして挟むことで簡単に実績を得ることが出来ますし、何より企業さんからの信頼も高まります。もちろん努力次第ですが

ですので案件獲得のみに拘らず、広い視野で行動して頂きたいなと思います。

頑張ってくださいね。僕も負けじと頑張ります


おわりに

ここまで読んでくださったあなた。大好きです

本当にありがとうございます。

最後にこれから頑張る駆け出しさんに向けてメッセージと、僕の目標を記させて頂きます。


✔制作会社から案件獲得

次の目標は、Web制作会社さんから案件をGetすることです。

一緒に仕事をしたかったけれど、自分の技術不足のせいで断られた企業さんもありました。

成長してリベンジするつもりです。


また、この目標が達成できたら「案件獲得までの道のりまとめnote」を書くつもりでございます。駆け出しさんにして欲しくない失敗も多くしてきたので。

これからのむささびの活躍に、どうかご期待を


「主役は僕じゃなくて、あなた」


社長に言われたありがたいお言葉を添えて、最後とさせていただきます。

ありがとうございました

この記事が気に入ったらサポートをしてみませんか?