Web製作会社でコーダーのアルバイトをして1ヶ月で学んだこと

コーダー

この記事では、Web製作会社でコーダーのアルバイトとして働いて1ヶ月が経ったので、そこで学んだことについて書いています。

 

僕自身、現在大学4回生でWeb系の自社開発企業にエンジニアとして内定をもらっていますが、アルバイトで働いている企業とはまた別の企業になります。

 

→ 関連記事

文系未経験の僕が自社開発系のWebエンジニアになりました！〜就職活動について〜
この記事では僕が実際に行ったエンジニアとしての就職活動について書いています。Web系のエンジニア職としての就活です。文系の僕でもエンジニアとして自社開発系企業から内定をいただくことができたので、Webエンジニアとして就職や転職を考えている方の参考になればと思っています。
aka-shin.com
2019.05.12

 

内定先の会社ではバックエンドを担当することになるとは思いますが、なぜバックエンドではないのかというと、関西の田舎に住んでいるということもあり、近くにバックエンドのアルバイトを募集している企業がなかったからです。

 

その代わりになぜコーダーとしてアルバイトをしようとしたかというと

  • LP製作やコーディングの案件を個人でも獲得できるようにしたかったから

という理由です。

 

未経験だったにも関わらず、コーダーとしてアルバイトをさせていただいている企業の方には本当に感謝しています。

 

  • コーダーのアルバイトをしたい人
  • コーダーのアルバイトってどんなことをしているのか知りたい人
以上の人はぜひ読んでください！

 

スポンサーリンク

コーダーとしてアルバイトをする前のスキルセット

コーダーとしてアルバイトをする前のスキルセットとしては以下のような感じ。

  • HTMLとCSSはプログラミングスクールで習い、サービスを作る際にも書いたことはあるが、がっつりと書いたことはない（Bootstrapを使っていたため）
  • デザインツール（PhotoshopやIllustratorなど）は使ったことがない

 

コーダーとしてアルバイトをして1ヶ月で学んだこと

コーダーとしてアルバイトをして1ヶ月経ったのでその期間に学んだことを週ごとに書いています。ほとんどメモみたいな感じです。

 

業務としては、期限に余裕のあるLPの作成やトップページの作成（PC）を任せてもらっています。

 

1週間目

  • レイヤーを取り除きたい場合はレイヤーのウインドウを表示して上に重なっている要素の目をクリックすることにより取り除くことができる（いらない文字を選択して目玉マークを押すと消える）
  • スライスとはPSDファイルを画像に変換すること
  • スライスした画像を書き出す際に.gifで書き出してしまい、それ以外の拡張子で書き出しできないと思っていたが、「Web上で書き出す」を押した後の画面で全ての画面を選択してあげることによって.pngで保存できるようになった
  • Illustratorで後ろの画像の複製などをする際にはウインドウメニューのアートボードを選択する
  • イラストレーターで画像をリンク付きで配置した場合、ローカルでその画像を削除するとリンク切れを起こしてしまい表示できなくなってしまうので、「ファイル」→「配置」→「リンク」にチェックを入れずに配置する
  • 選択できないオブジェクトはレイヤーから選択してあげる
  • アートボードの並べ替えを行う際には並べたい順にボードを並べ替えて、再度並べ替えのところを押す
  • 画像アセットの生成もいいが、それを考慮していないPSDファイルもあるので、そういう場合はスライスを使う(画像アセットを使うと同じリストなのに高さが違うみたいなことが起きてしまう)
  • テキスト部分はできる限り文字。画像だと文言が変わった場合に大変
  • floatはほぼ使わない。flexboxを使うか、tableを使う。

 

2週間目

  • idは使いすぎない
  • header部分がいくつかに分かれる場合はheader_top,header_mid,header_fotのようにclass名を指定してあげると良い
  • Photoshopでテキストを選択してカーソルを対象に合わせてクリックした際に上の右側に出てくるaのようなところがなしになっている場合はアンチエイリアスがなしの場合でテキスト記入。シャープとなっている場合はアンチエイリアスがありで、画像で指定する

 

3週間目

  • aタグやpタグは全体に対して指定してはいけない。理由としては下層ページにも影響を及ぼしてしまうから。なので、header a { }のような感じで部分ごとに指定する
  • 全体をwrap、wrapper、containerで囲う必要はなく、headerやmain、aside、footerで囲うだけで良い

 

4週間目

  • hタグの使い分けとしては、本の目次だと考えると分かりやすい
  • 無駄なクラスは与えない。HTMLはシンプルに、CSSは多少複雑になってもいい
  • 意味のある画像はimgタグで指定してよいが、そうでない画像はbackgroundに指定する
  • 単位は揃える。pxなら全てpx、emならem

 

終わりに

今回はコーダーとしてアルバイトを始めて1ヶ月が経過したので、それまでに学んだことをメモのような感じで書いてきました。

 

コーダーとしてアルバイトを始める前にやっておけばよかったなあと思うこととしては、

  • Photoshopの使い方（スライス、画像アセットの生成、値の取得など）を一通りできるようにしておく
  • どのようにHTMLやCSSを書くと後々メンテナンスが楽かを考えてかけるようにしておく
以上の2つです。

後者に関しては以下の本が大変参考になりました。

 

今後はコーディングを早く正確にできるように頑張っていきます！

コメント