STAFF BLOG

スタッフブログ

やまたくさん研修（技術研修）

2018.06.07 山本 司勇 広報ブログ

今年の4月より新入社員としてシステム部に配属されました山本と申します。
今回は入社後に参加させていただいた技術研修の「やまたくさん研修」についての記事を残したいと思います。

「やまたくさん研修」とは？

アクセルユニバース内部での研修ではなく、外部講師の方による研修で、
研修を実施していただいたのは、株式会社イノセントグリーンの代表取締役である「山本卓也」さんです。

山本さんには毎年、弊社の新入社員の技術研修を担当していただいております。

http://innocent-green.com/index.html
http://jonetu-ceo.com/2011/02/4812/

研修内容

今回の研修では全５回・計25h程のペースで、HTMLやCSS、JavaScript、MovableTypeについて学びました。
かなりざっくりとですが、各回で学んだことを紹介していきます。

第１回目

座学

  • コーディングとは？
    1. スピードが命！
    2. レイアウトの考え方は積み木構造

  • WEBサイト制作の流れとは？
    1. 「WEBディレクター」お客さんからヒアリング→ワイヤーフレームを作る(マーケティングも考える)
    2. 「デザイナー」デザインを作る
    3. 「コーダー、マークアップエンジニア、フロントエンジニア」デザインを元にコーディングする(仕様の確認、デザインのスライス、HTML/CSS/JavaScript) → チェックして納品

  • ソースコードの品質とは？
    1. インデントを揃える(かなり重要！)
    2. お客様も見る可能性がある為、ソースの見やすさも商品の一部
    3. ソースを配置する際のディレクトリ構造

  • お客様からの資料とは？
    1. ミスや不足があることが前提
    2. 納期を考え、早めに指摘・質問する

  • 「流し込み」とは？(真っ先にやれる仕事)
    1. 技術のあるコーダーが作ったページを元に、似たページを量産する仕事

  • 「下層組み」とは？(次の段階の仕事)
    1. トップページを元に下層にあたるページの作成

実習

  • 流し込みと下層組み

第２回目

座学

  • CSSを記述する際の注意点やコツとは？
    1. 構造上意味のある名前をつける(一般単語は使わない)
    2. スネークケース　member_photo{ }　（アンダーバーで繋げる）
    3. ロウアーキャメルケース menberPhoto{ } （２つ目以上の単語は大文字から始める）
    4. タグに直でCSSを指定しない （h2 { ~~ }など）
    5. 文字の場合line-heightを意識する
    6. Marginはできるだけ下方向に設定する（管理しやすい）
    7. Tableにwidth100%をつけてthにだけwidthをつけるのが通常（tdにはつけない）
    8. リセットCSS（ブラウザごとの表示の違いをリセットする）
    9. 画像の背景化

  • webサイト制作の現在の主流とは？
    1. スマホファースト（PCページのみ作るというのは減っている）

  • トップページ組みの流れとは？
    1. 基本構成の準備→ヘッダー→ボディ→フッター→チェック

実習

  • トップページ組み

第３回目

座学

  • CSSのfloatの使い方とは？
    1. divでそれぞれ囲んで左右に分ける（間のmarginは設定する必要なし）
    2. 左右のdivにwidthを設定しないとレイアウトが壊れやすい
    3. 左のdivだけfloatさせて右のdivにmargin-leftを設定（margin-leftには左のfloatの横幅＋隙間の余白）
    4. floatを使うときは親要素にfloat解除を入れる（overflow:hiddenを親要素に設定する、もしくはclearfixという手法もある）

  • レティーナディスプレイとは？
    1. pxが２倍となっている
    2. デザインのサイズを２倍にしないとボケる

  • レスポンシブサイトとは？
    1. 一つのソースで複数のブラウザ幅に柔軟に対応
    2. デザインの自動最適化

実習

  • トップページ組み

第４回目

座学

  • レスポンシブサイトの作り方
    1. ブレイクポイント(現在は768px,640pxが多い)
    2. PC表示からコーディングした後に、スマホ表示をコーディング
    3. スマホ対応でやる王道（width:auto;、float:none;、position:static;）
  • 納品前のチェック項目
    1. 複数のブラウザで確認
    2. ウィンドウをリサイズする
    3. デバイスを横並びにして、pxを合わせる
    4. 複数の端末サイズで崩れないか（Chromeの検証でシミュレーション）
    5. 実機で確認
    6. JavaScriptでの動きに壊れがないか

実習

  • レスポンシブ対応したトップページ組み

第５回目

座学

  • CMSとは？
    1. 主に「Wordpress」か「Movabletype」（世界的なシェアはWordpressが多い）
    2. Movabletypeの方がセキュリティ的に安心感がある（日本でよく使われている）
  • Movabletypeの組み込み作業とは？
    1. コーディングを終わらせた後に組み込みが始まり、お客さんが更新したいコンテンツとシステムを結びつける作業
    2. テンプレートの作成が仕事（インデックステンプレート、アーカイブテンプレート、テンプレートモジュールなど）
    3. ウェブサイトが親、ブログが子の親子構造
    4. カスタムフィールドの作成

実習

  • 仮想WEBサイトにMovabletypeの組み込み

難しかった点と気づき

  • CSSを設定してもレイアウトが思い通りに再現できなかったこと
  • 架空の案件を想定し、完璧にデザイン通りとなるように、コーディングすること
  • 各ブラウザ、画面幅の違いによるレイアウトの崩れが起きないようにコーディングすること
  • デザインを考えた人の意図を汲み取ること
  • 成果物の品質を常に意識すること


所感

私はHTMLやCSSを少し経験していたことに加えて、事前課題で予習をしていた事から、研修に参加するにあたって多少の自信がありました。
しかし、研修を終えてみて、実際の案件を想定した実習により、納品までの限られた時間の中で、いかに速く、かつ高品質な成果物を納品することの大変さを痛感しました。
そして同時に、技術力を身につけるだけに終始するのではなく、プロとして仕事こなす上で成果物の品質に対して尽力することの大切さを学ぶことができました。
また、１人で勉強するのとは違い、同期の新入社員のソースコードを参考にしたり、相互レビューし合い課題について話をすることで、より自分の理解が深まったと思います。
今回の研修で学んだことを今後の仕事に生かせるよう、現状のスキルに満足せず日々精進していきたい所存です。

一覧にもどる

お問い合わせはこちらから

CONTACT US