私事ですが、令和7年度第4回ウェブデザイン技能検定2級に合格いたしました！
今回は受検の振り返りも兼ねて、受検のきっかけや学習方法などについて書いていこうと思います。

ウェブデザイン技能検定とは？

ウェブデザイン技能検定とは、Web制作に関する知識や技能を評価する、厚生労働省認定の国家検定です。
ウェブデザインに関する資格の中では、現状唯一の国家検定となっています。

本検定は3段階の等級に分かれており、3級は基礎的な知識、2級は実務レベルの知識、1級は高度な専門知識が求められます。
また、合格率は3級が60〜70％、2級が30〜40％、1級が10〜20％とされており、等級が上がるほど難易度も高くなります。

各等級には受検資格の条件があり、私が受検した2級には「3級の技能検定合格」か「2年以上の実務経験」が必要でした。
幸い私は実務経験があったため、3級を飛ばして2級から受検しています。

受検のきっかけ

昨年、デザイン・DX事業部でウェブデザイン技能検定2級の学習に取り組む機会があり、それがこの検定を知るきっかけでした。
業務時間内に毎日学習時間が設けられ、最終的には模擬テストに挑戦しましたが、合格点に届かず不合格に終わりました。

もともと私は実務経験を重視するタイプで、資格にはあまり関心がありませんでした。
そのため、模擬テストについても「軽く過去問を解けば何とかなるだろう」と慢心していた部分があったと思います。
しかし、不合格という結果を受けて自分の未熟さを痛感し、改めてウェブデザイン技能検定2級を受検しようと決意しました。

また、yepには会社指定の資格を取得すると資格手当が支給される制度があり、その対象にウェブデザイン技能検定が含まれていたことも、受検を決意した理由の一つです。

学習について

決意したはいいものの、忙しさを言い訳にずるずると先延ばしにしてしまい、実際に自主学習に取り組み始めたのは試験の1ヶ月半前くらいからでした。

検定の受検は事業部での取り組みとは別の自主的なものだったため、学習は余暇の時間を使っています。
帰宅後に子どもの寝かしつけなどを済ませて、毎日22時頃から1〜2時間ほど学習時間を確保していました。
休日も日中は家事や育児があったため、子どもがお昼寝している時間や、夜寝た後の時間を学習にあてていました。
とはいえ、日によってはサボってしまうこともあり、トータルの学習時間は50時間ほどだったと思います。

また、公式サイトにて参考書籍として紹介されていた「ウェブデザイン技能検定2級ガイドブック」を勉強教材に使用しました。
こちらのガイドブックには参考書としての役割の他に、オンラインで練習問題や模擬試験にチャレンジできるネットチャレンジというものがあり、気が向いた時に練習問題にチャレンジできるのでかなり重宝しました。

学科の学習

私はテキストを読むだけでは内容が頭に入りにくいタイプのため、ガイドブックの内容を自分の言葉で書き起こし、不明点を調べて補足したものを非公開のNotionにまとめていました。
 

ガイドブックの章ごとにNotionへ整理し、各章を終えるたびに「ネットチャレンジ」で該当範囲の問題を解く、という流れで学習を進め、その中で間違えた問題や自信のない問題は改めて調べ、再度Notionにまとめる、というサイクルを繰り返すことで、内容の定着を図りました。

ガイドブックの学習を終えた後は、公式サイトに掲載されている過去問にも取り組み、同様に間違えた問題や自信のない問題を調べてNotionに整理しました。

効率的とは言い難い、泥臭い勉強方法だったと自分でも思いますが、今回の受検は合格そのものよりもスキルアップを目的としていたため、その点においては一定の成果を得られたのではないかと感じています。
 

実技の学習

実技についてはあまり重点的な対策は行わず、過去問に一度取り組んだほか、ガイドブックの解説を確認する程度にとどめました。
出題内容は大きく変わらない傾向にあったため、GIF形式のアニメーションをPhotoshopで作成する方法とJavaScriptの部分のみ対策し、それ以外はこれまでの知識で対応できたという印象です。

試験本番

試験当日は夫に育児を任せ、緊張でカチコチになりながら会場へ向かいました。
道中はひたすらNotionの内容を読み返していたのですが、ちょうどその部分が出題されたため、最後まで粘ってよかったと感じています。
自己採点ではギリギリ合格点といった正答率だったため、この最後の粘りがなければ、もしかすると合格できていなかったかもしれません。

終わりに

今回の受検を通して、自分の知識やスキルの不足を改めて実感するとともに、基礎から学び直すことの大切さを学びました。
また、結果だけでなく、学習の過程そのものが大きな成長につながったと感じています。
今後も継続して知識のアップデートを行い、実務に還元できるよう取り組んでいきたいと思います。

最後までお読みいただき、ありがとうございました！
 

The post 【資格取得】ウェブデザイン技能検定2級に合格しました first appeared on 株式会社yep.

1. 研修の全体

• 期間：入社後約6か月
   
• 主なプログラム：
  1. 基本情報技術者試験範囲の教本読み込み＋タッチタイピング練習
  2. ProgateおよびPHP教本によるプログラミング基礎学習
  3. フローチャート演習
  4. プログラミング実習（会社・見積・請求管理システム開発）
• サポート体制：週2回、各1時間のヒアリング（理解度チェック・疑問点解消）

2. 教本読み込みとタイピング練習

最初の約2週間は、基本情報技術者試験の教本をひたすら読み込むことに集中しました。毎回のヒアリングでは、教本の要点を自分の言葉で説明し、理解度を確認していただきました。初日は専門用語の多さに圧倒され、「特に、カタカナ用語が多く、本当に覚えられるのか…」と感じましたが、繰り返すうちに自然と知識が定着し、読むことが日課になっていきました。

並行して、TypingClubで毎日30分程度のタッチタイピング練習にも取り組みました。まだ全て星5評価には届いていませんが、指使いがスムーズになり、コード入力時のミスが大幅に減少しました。自分の成長を実感しつつ、研修後も継続してレベルアップしたいと思っています。

3. プログラミング基礎学習とフローチャート演習

教本学習が一段落すると、ProgateでHTML/CSS、JavaScript、PHPの基礎を学習しました。スライドで理論を学び、すぐにブラウザ上でコードを書いて動かす流れは非常に理解しやすく、自分でも驚くほどスムーズに進められました。

また、週に1〜2時間、上長の方と対面で行うフローチャート演習は、手書きでプログラムの流れを図式化する貴重な体験でした。慣れない手書きでは、最初どこから書き始めるべきか迷い、完成後も正解かどうか不安でした。しかし、「トレース」という見直し手法で一行ずつ確認し、誤りを発見できた瞬間の達成感は格別です。この経験を通じて、「どんな作業も丁寧に振り返ること」が重要だと学びました。

4. プログラミング実習：会社・見積・請求管理システム開発

研修のハイライトとして、会社情報・見積・請求を管理するシステムに取り組みました。特に印象に残っているのは、CSSによるレイアウト調整の難しさです。デザインの再現では、marginやpadding、flexboxの調整などを何度も試行錯誤しました。テーブルが崩れたり要素がずれたりするたびに検証ツールで確認し、原因を突き止めて修正する作業を通じて、フロントエンドの基礎力が大きく向上したと感じています。

開発中には数多くのエラーやバグにも直面しましたが、その都度ドキュメントや検索で調べ、仮説を立てて試行錯誤を繰り返すことで、自走力や問題解決力も鍛えられました。最終的には、自分で作ったシステムが正常に動作し、情報が登録・表示・編集・削除できたときの達成感は格別でした。

この実習を通じて、コードを書く技術だけでなく、設計の意図を理解する力や、ユーザー視点で考える大切さを学ぶことができました。今後、実務の中でこの経験を土台に、さらに成長していきたいと思います。

5. 振り返りと今後の抱負

研修を通じて、専門知識だけでなく「自発的に調べる力」「問い直す力」「根気強く取り組む姿勢」を養うことができました。そして将来は、日越両国の架け橋となるBrSEとして活躍したいと考えています。日本で培った技術力とコミュニケーション力を活かし、ベトナム側との円滑な橋渡し役を担うことで、両国のチームを結びつけ、より大きな価値を生み出せるエンジニアを目指します。

最後までお読みいただき、ありがとうございました。これからもどうぞよろしくお願いいたします。

The post 新人研修を振り返っての気づきと抱負 first appeared on 株式会社yep.

主な工程

1. 市場調査・サイトマップ・ワイヤーフレーム
2. デザイン
3. コーディング
4. WordPress設定

1. 市場調査・サイトマップ・ワイヤーフレーム

市場調査では競合となるアウトドアグッズを販売しているECサイトを調べ、どんな特徴があるか、ページ構成やメニューなど参考にできる部分を探します。

サイトマップは市場調査で調べた内容から、今回のサイトのページや構成を考えていきます。

ワイヤーフレームは各ページにどんな要素をどの配置で置くかを決めるものです。
特にトップページはお客様が訪れた時にどんな情報がどこにあると良いのか考える必要があり難しかったです。

2. デザイン

デザインではサイトのコンセプトや使用するカラーを決定し、ワイヤーフレームを元にサイトの見た目を作っていきます。

実際に画像を入れるとワイヤーフレームで見た時よりもごちゃごちゃして見えたり、商品を目立たせようとシンプルにしすぎてコンセプトを見失ったり、たくさん試行錯誤しました。

スライドバナーで使用するバナー画像も作成しました。

デザインが完成したら、クライアントにデザインを説明する デザイン提案書 を作ります。

デザインのコンセプトや、そのデザインにした理由など、デザインについて詳しくないクライアントに伝わるよう意識して書いていきます。

専門学校の授業では説明する相手はデザインに詳しい先生だったので、どう見せれば伝わるのか考えるのは初めてで勉強になりました。

3. コーディング

HTML / css / JavaScript を使って作ったデザインを起こしていきます。

コーディング中は定期的にフィードバックをいただき、今まで意識できていなかったHTMLのルールや、便利なcss、SEO対策についてなど教えていただきました。

一番苦戦したのがJavaScript。
インターンや専門学校で触れる機会はあったのですが、苦手意識が強くありました。
今回だと、スライドバナー / ヘッダーメニューの展開 / 絞り込みの開閉 / 画像の拡大表示 などをJavaScriptを使用して実装しました。
調べたコードをコピペしたり、教えていただいたりしながらなんとか動かすことができました。

コーディング作業を通して感じたことは、仕事としてコーディングをする上でわかりやすいコードを書くことが大事ということです。
命名規則を決めたり、なるべくシンプルに描ける方法を模索したり、わかりやすいコードを書くことで、他の人と一緒にコーディングしやすくなったり保守がしやすくなります。
今まではコードがぐちゃぐちゃでも自分がわかればいいや〜なんて思っている節があったので、改善していきたいです。

4. WordPress設定

コーディングした内容をWordPressのページにするべくテーマを自作します。
テーマ自作するのは初めてでしたが、インターンで既に完成しているオリジナルのテーマを編集する機会があったので完成形のイメージがあったのでなんとか作れました。

主にWordPressの機能を使用した部分は、お知らせ と お問い合わせフォーム です。

お知らせ

お知らせ用のカスタム投稿を作成し、管理画面から追加できるようにしました。
新着順に3件トップページに表示される設定も無事実装できました。

お問い合わせフォーム

Contact Form 7 というプラグインを使用しました。

機能自体はすぐに実装できました。が、デザインに合わせて調整をするのがとても大変でした。

具体的にどんな対応をしたかというと、項目ごとに未入力時のエラーメッセージを変更しました。
Contact Form 7で用意されているエラーメッセージは全項目共通で表示されます。
それをJavaScriptで上書きするというのを行いました。

自分ではどうにもできず、ほとんど教えてもらった形ですがなんとか実装できました。

他にはセキュリティ設定やSEOの設定などを行い完成です。

研修発表

研修発表では最終課題の内容を会社の皆さんに発表しました。
とても緊張しましたが、無事研修が終わる達成感がありました。

研修が終わり、現在はOJT期間に入り実務に励んでおります。
早く一人前のWEBデザイナーになれるように頑張ります！

The post 新卒WEBデザイナー研修記 〜ECサイトデザイン WordPress使用〜 first appeared on 株式会社yep.

以前は、美容系会社のWEBデザイナーとして働いていましたが、
2024年3月から「yepにてフロントエンドエンジニア」としてステップアップすることになりました。

といっても、デザイナーの頃はWordPressの自社サイトを更新したり、LPを作ったりと、
ゴリゴリにエンジニア作業をしてた訳ではないので、
エンジニア業界を知る意味も含めて、新人研修を受けさせていただきました。

そこで、この記事では研修期間における

• 制作物
• 研修期間（２ヶ月）で取り組んだ課題
• デザイン課題
• エンジニア課題
• 研修を通して得た学び

についてお伝えできればいいなと思います。

→フロントエンドエンジニアなので、
デザイン面と実装面の両方を研修内容に含んでいます。

また、もしこれからフロントエンドエンジニアになりたい！って人がいたら、
１つの参考にしてもらえたら嬉しいです。

では早速どうぞ！( ^ω^ ) /

制作するもの

PHPとDB（データベース）を利用した、フォーム入力サイトを作ることになりました。

元々HTML、CSSはある程度仕事で使っていたのですが、
PHPやJavascriptはそこまで精通してなかったので、
この機会にガッツリサイト制作に取り組むことに。

研修期間（２ヶ月）で取り組んだ課題

研修で実施した内容はこちら↓

それぞれの概要は、

【①市場調査】
サービスをリリースする上で競合サイトをリサーチ

【②ワイヤーフレーム（提案書）】
市場調査やヒアリングを元にサイトの要素・機能をまとめる
※この際に完成イメージを明確に持つのが大事

【③デザインカンプ】
ワイヤーフレームで網羅したサイトの必要要素にデザインを充てていく

【④デザイン提案書】
なぜこのデザインにしたのか？の根拠を踏まえ作成

【⑤XDプロトタイプ】
XDで実際のサイトの動きを付け、実装イメージに相違がないか確認

【⑥コーディング（HTML、CC、Javascript）】
静的ページをまずは制作。これを元にPHP・DB（mySQL）に紐付けて動的なページを作ります

【⑦コーディング（PHP）】
静的ページをPHP化していきます

【⑧DB連携（登録のみ）】
今回のサービスでは、入力した項目を新規追加する機能のみ実装します

【⑨PHP、Javascriptによるバリデーション機能】
入力フォームにエラーがあった場合、エラー文言を出してユーザーに知らせる機能です

【⑩テスト項目洗い出し（正常系、異常系）、テスト】
制作したサイトがうまく動作するかテストしていきます

と、本当に１から全てサービスを制作していく研修になりました。

ここからは、

ーーーーーーーーーーーーー

①〜⑤：デザイン課題
⑥〜⑩：エンジニア課題

ーーーーーーーーーーーーー

として、掘り下げていきたいと思います！

デザイン課題

①市場調査

競合サイトを調査して、「どんな機能があるか」「デザインの特徴」をまとめます。

機能面では、入力フォームの実装があるので

・フォームに必要な項目
・フォーカスした時の動き
・エラーの時の動き
・フォームの幅・高さ、余白、フォントサイズ

など、細かく調べていきました。

項目は、クライアントがどんな内容を取得したいかヒアリング時にすり合わせをしましたが、
「競合ではこんな項目がありましたよ〜」と、こちらから提案することもありました。

デザイン面では、「幅・高さ、余白、フォントサイズ」は他のページとの兼ね合いもあるので、
ここはワイヤーフレームを制作する時にまとめることにしました。

②ワイヤーフレーム（提案書）

実装するページは３ページになりました。
それぞれのページの目的は、

【トップページ】

目的：どんなサービスなのかを訴求し、このサービスに興味を持ってもらうためのページ。
→離脱防止のため長くならないように

【入力ページ】

目的：必要な情報を入力するページ。

機能：
・Javascript、PHPのバリデーション
・DBへの登録
・表示ページへ遷移（入力エラーの場合は遷移しない）

【表示ページ】

目的：入力内容が表示されるページ。

機能：
・入力内容の表示
・SNSシェアボタン
・生成完了を伝えるアニメーション
・直接URLにアクセスした場合は、入力ページへリダイレクト

また、ワイヤーフレームはとっても大事で、
ここを曖昧に作ってしまうと、後のデザインやコーディングで苦労します（笑）。

実際に、今回の研修でデザインやコーディングに進んだけれど、
結局ワイヤーフレームを直さないといけないことが発生しました。

この時点で、完成イメージを明確に持って、
デザインやコーディングに入らないと自分もメンバーも苦労してしまうことになるので、
そのことを改めて実感したフェーズでした。

ーーーーーーーーーーーーーーーーーーーーーー

– ポイント –

ワイヤーフレームで完成イメージを明確にして、
デザインやコーディングに入る。

ーーーーーーーーーーーーーーーーーーーーーー

ということで気を取り直して（笑）、
ワイヤーフレームに対してデザインを作っていきます！

③デザインカンプ

このフェーズでデザインを作り込みます。

デザインはあくまでワイヤーフレームに対して肉付けしていくのであり、
ワイヤーフレームからかけ離れたデザイン（配置が異なる・余白が合っていないetc…）、
クライアントにワイヤーフレームを確認してもらった意味がなくなってしまうので。

ーーーーーーーーーーーーーーーーーーーーーー

– ポイント –

デザインはワイヤーフレームで決まった要素の、
配置（大きさ・余白）などに沿って肉付けしていく

ーーーーーーーーーーーーーーーーーーーーーー

④デザイン提案書

このフェーズでは、
サイトのイメージをクライアントとマッチさせることが
改めて大変であることを学びました。

今回は２案作成することになり、
提案内容をまとめて選んでもらうフローで行いました。

⑤XDプロトタイプ

XDのプロトタイプ機能とは、

ブラウザ上で実際のサイトのようにボタンをクリックしたらページ遷移する、などの
動きをつけることができる機能です。

今回の課題では、「入力項目を追加」をクリックすることで
入力欄を動的に増やす動きをXD上で再現します。

ただ、XDでも表現の限界はあるので、

「インタラクション」項目で、
タップ＞トランジション＞移動先に案件が増えたデザインのアートボードを選択

にすることで、イメージの共有を行いました。

テキストだけでは伝えきれない内容を、
プロトタイプで表現することで認識相違がないようにします。

ーーーーーーーーーーーーーーーーーーーーーー

– ポイント –

XDのプロトタイプは、クライアントやメンバーとの
イメージ相違がないように共有する。
ただし、実際のサイトの動きに完全に合わせることはできないので、
表現できないものは補足したり、工夫が若干必要。

ーーーーーーーーーーーーーーーーーーーーーー

エンジニア課題

ここから先は、エンジニア課題です！

デザインやXDの共有イメージを元に、コーディングを進めていきます。

「カタカタカタ…」

⑥コーディング（HTML、CC、Javascript）

まずはPHPやDBとは関係なく、
静的ページとしてコーディングしサイト完成を目指していきます。

PHPでは、foreach文などの繰り返し処理を使って、
入力できる項目を増やしたりします。

ただ、その実装をする前に、
HTML、CSS、Javascriptを使って実装をまずは行います。
（基本的な実装と、アニメーションや項目の増減の作業でした）
 

以下、実装内容です。

【トップページ】

・ボタンサイズ
→Googleガイドラインを参考にして作成
・使い方のダイジェスト動画
→MacのQuickTime Playerを使って動画キャプチャを撮影
・fadeInアニメーション
→スクロールに合わせてふわっと表示させる（jQuery）
・SNSシェア機能
→各SNSツールに記事がシェアできるようボタンを設置
・URLをコピーボタン
→クリックすると、表示された記事のURLがコピーされる

【入力ページ】

・formタグ内で、必要項目をinputなどで制作
→JSでバリデーションを実装するので、HTMLでは必須項目にrequiredはなし
・追加、削除になる項目にアニメーションをつける
→瞬時に切り替わると実行されたかが視認しずらいため（jQuery）
・配色
→入力に集中してもらうため、背景色は白に
・アニメーション
→追加、削除以外にアニメーションは実装なし（入力集中！）
・余白
→input内にしっかり取ることで入力しやすい設計に
・リアルタイムのバリデーション
→入力エラーがある場合、入力項目を移動した時点で枠外にエラー表示を出す

【表示ページ】

・必要最低限のレイアウトに
→ジャムの法則みたいな
・完了したアニメーション
→表示ページへ遷移したら、完了したことがわかる動きを実装

入力ページの増減項目の管理

正直、これが一番大変でした。。。

最終的にDBと連携してデータの登録があるので、
その管理を「何の項目の、何番目に入力されたものか？」を
番号を付与して実装することにしました。

最初はJSで追加項目をカウントする変数を作り、
それを使ってフォームにidやname属性を付与していましたが、

この方法だと削除した項目以外の順番（インデックス番号）がずれてしまいます。

結果的に、追加、削除する項目においては、
対象の全ての要素を取得（querySelectorAll）して、
インデックス番号を１から振り分ける処理を行いました。

そうすることで、削除されたものも含め、
動的にJSで番号管理ができるようになりました。

また、CSSもそうなのですが、
クラスの命名規則や、JSではidはなるべく指定せず記述することを学びました。

その理由は、PHPにする際にidを付与して記述することがあり、
バッティングしてしまうことがあるようです。

なので、なるべくならCSSのクラスを指定して、
それに対して機能を実装していくようにすると、
バックエンドのエンジニアの方にデータを共有する際に
スムーズに受け渡しができます。

エンジニア職ではなかったので、ここまで気にかけなかったのですが、
理由としても納得できたところなので、
私もこれからはCSSを指定して動きをつけていけたらと思います！

ーーーーーーーーーーーーーーーーーーーーーー

– ポイント –

クラスの命名規則を分かりやすく。
JSでは、idで指定せず、CSSのクラスなどで指定する方が
バックエンドへデータを渡す時にもスムーズになる。

ーーーーーーーーーーーーーーーーーーーーーー

⑦コーディング（PHP）

先ほどのデータを、今度はPHP化させます。

・繰り返し処理
・入力がない場合の処理
・入力があった場合の処理（POST情報がある場合）
・バリデーション
・DB登録

が主な実装内容です。

具体的な実装の流れはこちら↓

ーーーーーーーーーーーーーーーーーーーーーー

if(POST情報がある場合){

　バリデーション関数定義
　バリデーション実行
　　エラー情報の表示、POST情報をフォームに再表示

　if(エラーがない場合){
　　①SESSIONに保存
　　②DBへ保存

　　“`
　　トランザクション開始
　　内容がOKなら、コミット
　　“`
　　③表示ページへリダイレクト
　}
}

POSTがない場合：入力フォームの表示（初期表示）

ーーーーーーーーーーーーーーーーーーーーーー

正直、自分一人ではこの考え方に辿り着けなかったため、
先輩のエンジニアの方に助力をいただいて、
ようやく実装できた！って感じでした。

ポイントは、DB登録をする際に、

・１つもエラーがない場合に、登録される
・１つエラーがあったら、何も登録されない

と、２択の実装を行ったことです（トランザクション）。

ーーーーーーーーーーーーーーーーーーーーーー

– ポイント –

今回のサイトでは、DB登録をする際に、

・１つもエラーがない場合に、登録される
・１つエラーがあったら、何も登録されない

と、２択の実装を行った（トランザクション）。

ーーーーーーーーーーーーーーーーーーーーーー

⑧DB連携（登録のみ）

こちらはMySQLを使って、登録されたデータを管理していました。

DB作成までは私自身で行いませんでしたが、
PHPの中で

・insertでデータを挿入
・bindValueを通す
・最後にexecuteで実行

といった感じで、多少MySQLの記述をすることがありましたが、

今の私ではちょっと力不足なので、
「こういった方法で登録するのが安全」という説明までにとどめさせてください（笑）。

⑨PHP、Javascriptによるバリデーション機能

Javascriptでは、リアルタイムで予期しない入力内容があった場合、
フォーム近くにエラー文言を出します。

PHPでは、送信ボタンがクリックされたときにエラーがある場合、
表示ページに遷移せずに、入力ページに留めて、同じくエラー文言を出します。

それぞれのバリデーションには意味があり、

・Javascriptでバリデーションする
→登録ボタンを押さないとエラーが出ないのはユーザーにとって使いにくい
（えー、せっかく入力したのにって気持ちになる( ；∀；)）

・PHPでバリデーションする
→データをDBに登録する際には、必ずかける。
これにより、予期しないデータが入らないようにできる。

両方を両立する実装内容として今回は、

Javascriptでエラーを表示するJavascript専用のクラスを指定し、
動的に付与してエラー文言を出したり、削除したりしました。

PHPでも同様に、エラーを表示するPHP専用のクラスを作り、
表示・非表示を切り替えていました。

他にもやり方はいくつかありそうなので、
ここは私も勉強中です！

⑩テスト項目洗い出し（正常系、異常系）、テスト

実装した内容に対して、

・正常系：予期できる動き
・異常系：エラー文言など

といった感じで、区分けしてテスト項目を洗い出して、１つずつチェックしていきました。

研修を通して得た学び

この記事はサービスが完成してから書いているので、
機能だったり、デザインだったり、最初から記事の内容がバシッと定まっていたわけではありません。

フィードバックや実装をしていく中で、修正が何回も発生しました。

「研修期間（２ヶ月）で取り組んだ課題」でも書きましたが、

ーーーーーーーーーーーーーーーーーーーーーー

ワイヤーフレーム制作の時に、
いかにサービス内容が頭の中で整理できているか

ーーーーーーーーーーーーーーーーーーーーーー

という点が、
工数（どれだけの作業日数が必要か）だったり、
フィードバック、修正対応などに響いてくるということを
ものすごく実感しました (・∀・;)

「デザインを少し修正したい」となれば、
その後のコーディングや実装機能に影響があるし、

「機能を追加、変更したい」となれば、
テストを始めからやり直さないといけなくなったりと、

どのフェーズもその後の作業に響いてくることが、
自分で作っているにも関わらず大変でした。。。

これが他のメンバーに引き継ぐ内容だったら、
ほんと申し訳ない気持ちになります。

なので、もしこれからフロントエンドエンジニアになりたいって人は、
実務では一人では作業しないので、誰が見ても扱いやすいものを作ることが
自身の成長にもつながってくると思います。

ご参考までに。

また、ここまで詰め込んでしっかりと作り込むことは今まで経験がありませんでした。
とても実りの多い研修となりました。

毎回先輩方には、忙しい中、実業務の合間に丁寧に教えていただき、
その分頑張ろうと思いながら、なんとか形にすることができました。

yepの研修では、
その人のレベルに応じて柔軟に取り組んでくれる仕組みが整っているので、
自分が目指したいキャリアやビジョンを持っていれば、
確実に成長できる場所だな〜と改めて感じました！
 

今は研修が終わり、OJTに入って実際の案件に携わっています。
学んだことを活かせるように、これから頑張っていこうと思います。

それでは〜

The post yepのフロントエンドエンジニア研修！デザイン制作〜サービス公開まで first appeared on 株式会社yep.

一年ほどyepでインターンをしていたのですが、大学を卒業して仲間入りということで、
基礎知識を補完したり、叩き直したりするために、新人研修を二か月半ほど受けました！

今回は新人研修を振り返りながら、感想を書いていきます。

研修内容

まず、簡単に研修の流れを紹介します。

1. 基本情報の教本をひたすら読む＋タッチタイピングの練習
2. Progate、PHPの教本でプログラミングの基礎を学ぶ
3. フローチャート演習
4. プログラミング実習

また、研修期間中は週2回、1時間のヒアリングがあり、理解の確認や疑問点の質問などをさせていただきました。

読書とタイピング

最初の約2週間は、基本情報の知識の詰め込みを行います。
とにかく教本を読み続け、ヒアリングの時間に教本の内容を理解しているのか、確認していただきました。
分厚い教本を読み、理解し、覚えるの繰り返しが最初は苦行に感じましたが、
慣れてくると、逆に教本を読んでいない時間に違和感を覚えるようになりました。
慣れって怖いですね。

また、並行して、TypingClubというタイピング練習サイトでタッチタイピングの習得を目指します。
タイピングの速度と正確さで採点されるのですが、レベルが上がるにつれて星5（満点）を取るのが難しくなります。
実はまだ目標のレベルまで星5を取れていないので、こっそり続けているのはここだけの話です！

プログラミングの基礎を学習

基本情報の知識の詰め込みが一通り終わると、プログラミングの学習が始まります。

まず、Progateという学習サイトでプログラミング全般の基礎を学びます。
スライドで解説されたあとに実際にコードを書いて再現するという、
インプットとアウトプットの流れがはっきりしていたので理解しやすかったです。

次に、業務ではPHPを使うことが多いということで、PHPの学習が始まります。
これは、PHPの教本を用いて行いました。LAMP環境を用意し、教本のプログラムを私の環境で再現して学習を進めました。
PHPのバージョンが教本の想定しているバージョンと異なることから出るエラーがいい感じの難所になっていて、苦しいけれども面白かったです。

フローチャート演習

フローチャート演習は週に1時間、先生方と対面で行われます。ペンと紙を使って手書きでプログラムの動きを確認しました。
慣れていないフローチャートでプログラムを書くことはとても難しく、最初は書くことができても違和感を覚えました。
また、手書きだとプログラムを動かしてエラーを確認することができないので、本当に合っているのか、答え合わせの時間はとても不安でした。
その不安を軽減させるためにトレース（見直しの一つ）がありました。
実際、それで間違いを発見できたことがありましたので、トレースは偉大かもしれません。

プログラミング実習

PHPの教本での学習が終わると、プログラミング実習に入ります。実習では会社の見積、請求を管理するシステムを制作しました。
インターンではLaravelというフレームワークを用いていました。しかし、この実習ではフレームワークなし、素のPHPのみでシステムを作るということで、
初挑戦なことが多く苦労しました。
でも、おかげさまで、フレームワークでは簡易化されていた処理を確認することができ、とてもよい経験になりました！
CSSもゼロからガッツリ触ったことがなく、デザインの画像だけで再現する必要があったので大変でした。
要素を綺麗に横に並べたいのにデコボコになったり、エラー文の余白でテーブルが肥大化したり、etc…

システムの画面

上記画像は作成したシステムの画面の一つです。
ここまでこれたのは、ヒアリングの時間に疑問点、不明点を解消していただいたり、アドバイスを大量にいただけたからです。
感謝。

完成後、発表会をしました。発表後の質疑応答では、今後の糧になるフィードバックをたくさんいただき、もっと頑張ろうと思いました。
それと、1つ懺悔なのですが、発表会中、私のpcのスピーカー設定がミュートになっていた可能性があります。
もし、オンラインで視聴していて発言された方がいらっしゃれば、誠に申し訳ございませんでした。
この場をお借りして謝罪いたします。

感想

総じて、楽しく研修させていただきました。
これから実務に入るということで、やっとスタートラインが見えた段階です。
これからもいっぱい失敗すると思いますが、失敗を修正してどんどん前に進んでいけたらなと思います！

おまけ

先輩方と研修内容はほぼ同じだと思うので、ざっくり書きました。
もし研修内容に興味があれば、是非、先輩方の研修ブログを読み漁ってみてください！

The post 研修終わったので感想書きました first appeared on 株式会社yep.

1ヶ月目

「確かな力が身につくPHP「超」入門 第２版」の全項目

基本情報技術者の教本の読み込み
毎日一冊の本を読み込み週2であるヒアリングの時にアウトプットor理解が浅い部分の説明をして頂き
内容としては
・16進数から2進数への変換
・ベン図の作成
・文字コードの種類
・SQLインジェクションとは
・システム開発の流れ
・パーミッション
・Linuxのコマンド
・LAMPの説明
・探索アルゴリズムの種類
などの毎日が勉強の日々でした。
それらを勉強しながらタイピングの練習を行いました。

教本が終わり次にProgateでHTML,CSS,JavaScript,SQL,PHPのなどの基本的な言語の役割を学び
実際に画面での動きを確認しこの言語にはこういうことが出来るみたいな
広く浅く各言語に触れてました。
 

2ヶ月目

「確かな力が身につくPHP「超」入門 第２版」の全項目
教科書の中身は、PHPで実際に関数の使い方を学びながらのショッピングサイトの製作
教科書にサンプルコードがあり、Progateて使ったPHPの関数等を使いながら製作しこの時は
色々な関数がありとりあえず、手を動かしながらひたすら書いていました。

「よくわかるPHPの教科書【PHP7対応版】」の以下項目
1冊目では使っていない関数を使いつつtwitter風アプリを作成しました。
しかし、教科書にサンプルコードがあるので手を動かしたりコピペを行っていて理解が浅く
とりあえず課題を終わすことに躍起になっており
ヒアリング時にコードの説明を求められても、全く説明が出来ずただコードを移すロボットのようになっていました。
なので、コードを書くより理解するを重点に課題を行っておりました。

コードを作成しながらの週一であるフローチャートの研修があったのですが
例題を解説して頂いても、さっぱり理解出来ずトレース表を書いて何とか理解していました。
普通なら3回で終わる研修が自分は倍の6回かけて何とか終わりました…
しかしこの研修を通じてもし○○ならば□□したいみたいな考えをかなり養うことが出来ました。

3ヶ月目

最終課題である会社の管理システムを作成しました。
ここが一番大変でしたが一番力がついたと実感しました。
最初は設計書等などさらっと読んで教科書で使っていたコードをパクッて作成して自分の中ではできていると認識していましたが
設計書の詳細などを見落とし全く違うものを作っており
かなり出戻り作業をしてしまったり
今度は要件通りになるコードを探しきて、コピペするだけでそのコードが何をしているかの説明が出来なかったり
変数名を定義する時も、適当に自分だけが理解していてa,bみたいな曖昧な表現が多く
他の人が見たときに分かりづらいなどがありました。
自分の実力不足だと痛感しました。

それからは要件や詳細を一つ一つ確認しコード一文ずつ理解しながら作成していきました。
機能としては動くが安全の欠如だったり
表示はできているがハイフンが無く分かりづらい
直接変数に代入すればいいのに、二度手間な処理など
ただ作成するのではなく、ユーザー目線、コードの可視性等がテキトーでとりあえず作っていました。
それらを修正しようと、自分は頭で考えて悩んで止まっていたので
ヒアリング時に頭で考えるより手を動かそうとおっしゃって頂いたのですが
悩んで何にもコードが浮かばない状況だったので、手を動かす事も出来なかったので
その時に紙やメモに今自分が何をしたいのか細かく分けて書くことから始めました。

例としてはカレーを作るのであれば

買い出し→下処理→煮込む
みたいにやりたいことを細かく大雑把に書き出し
買い出しなら具材の選定、下処理なら使う道具の選定みたいなイメージで
事細かくやるべきことを小さくしてからコード書くようにしていきました。

この時くらいから機能を付けるときもし○○なら□□したい
みたいな簡単な条件分岐なら頭で考え○○にあの関数が使えるかもみたいな
コードを作成する前にイメージが少しできた状態で作成していました。
 

終わりに

とりあえず発表が終わりホッとしていますがあっという間の3か月間でした。
日々の研修は難しかったですが、やりがいがありとても充実していました。
2週間後から始まるOJTに向けてLaravelのインプットが始まっていますが
今まで学んできたことを活かしながら頑張りたいと思います。

The post 地方の元電気屋が都内で駆け出しエンジニアになる話 first appeared on 株式会社yep.

【What】何を学んだ？

3ヶ月間の学習内容を順番にたどります。週2回行われる1時間のヒアリングで疑問を解決しながらカリキュラムを進めていきます。

1. 基本情報技術者試験テキストブック：基本情報の学習
2. Progate：PHP、JavaScript、Git、CommandLine、HTML/CSSなど
3. PHP教本実習①：PHPの記法、ルール、関数
4. PHP教本実習②：PHPを使用したアプリケーション作成
5. フローチャートとアルゴリズム：フローチャートの概要、書き方
6. プログラム実習：PHPを使用した課題アプリケーション作成

【How】どんなふうに進めた？

どのように上記のカリキュラムを進めていったのか振り返りたいと思います。

• 基本情報技術者試験テキストブック

研修が始まるとまずは基本情報技術者試験のテキストブックを読みます。800ページほどの分厚い本ですが図解が多いので取り組みやすいです。ですが内容が難しくなる／苦手な分野になると同じところを何度も読んでしまい進捗が遅くなってゆく。。。教育係の方にアドバイスいただき、理解度60%程度でも先に進めていき分からないところを書き留めてヒアリングの時間に聞くスタイルに変えました。途中で気分転換＆理解度確認のため基本情報技術者試験の過去問を解きながら読破することができました。正直、苦手な項目はまだ自分の中で落とし込めていないと感じているのですが、エンジニアとして必要な知識が詰まっている本だと思うので今後も繰り返し読みたいです。

• Progate

基本情報が終わるといよいよPCに触れます。Progateで指定の項目のレッスンをこなしていきます。スライドがわかりやすく、各セクションが終わるごとに学んだ内容を使う練習があるのでゲーム感覚で楽しく進められました。目標期間は若干短めなのでダッシュで駆け抜けます。

• PHP教本実習①

Progateの次は1冊目の教本に入ります。その前にまずは環境構築です。先輩に教えて頂きながら権限変更にユーザーの切り替え、コードエディタと仮想環境の設定などを行います。使ったことのあるエディタなのにSSH接続の部分で頭が早くも真っ白に・・・。初めてのことづくしで教本に入る前からいっぱいいっぱいになっていました(汗)

環境構築がなんとか完了すると教本に入ります。初めてPHPに触れましたが初心者向けの優しい教本なので記法や関数を基礎の基礎から学ぶことができました。コードを書く→実行→確認を繰り返します。初めてPHPのエラー画面に遭遇し、ヒアリングの時間にvar_dump()することを教わりました。今ではことあるごとにvar_dump()しています。

• PHP教本実習②

教本2冊目に入ります。ここでは簡単なアプリケーションを作りながらPHPを学びます。教本の見本通りにコードを書いて実際に動くものが作れるので楽しいですが前の教本よりエラーが増えて悩む時間が増えました。テキストのお手本通り進めていくのでここで直面したエラーは大体記述漏れやタイプミスでした。今でもやりがちなので気をつけたいです。CRUDを始め、こういう動きを作るにはこう書けばできるのか〜ということを学びました。

• フローチャート

フローチャートと例題の説明を受けてから実際に自分で書いていきます。流れを理解できていてもいざまっさらな紙に書くとなると難しい。。。「例題→練習→教育係の方のチェック」の流れを繰り返します。書けると思考が整理されるなと感じました。

• プログラミング実習/発表

最後にこれまでの学習の集大成としてプログラミング実習に取り組みました。得意先別に見積書と請求書を管理するシステムを作成します。設計書を読んで要件を満たすプログラムを組んでいくのですが、これまでの内容より難易度もエラー発生率もアップします。この機能を実現するにはどうすれば良いのか考えたり、実装方法を調べたりで脳みそをフル回転しているとあっという間に時間が過ぎました。また、練習のためGitHubでプルリクエストを作成しコードレビューをして頂きました。ブランチの構成や実務で必要になる流れを勉強できて有り難かったです！この実習ではフレームワークを使わずPHPのみで作るのでページネーションやソートの仕組みの理解が深まりました。実習後に待っているのはプログラム発表会です。当日は皆さんにお集まりいただき感謝の気持ちと緊張が入り混じって学生時代のゼミに戻ったような感覚でした。発表後に皆さんのご意見をいただくときは何を指摘されるか内心ビクビクしていましたが、今後に活かせるアドバイスや良いところを探して伝えくださり「研修での学びを糧に実務でも頑張ろう！」と思いました。

【研修を終えての所感】

研修を通して初めてPHPに触れましたが、PHP未経験でも段階的なカリキュラムとフォロー体制が用意されてたため完走できました。チーム開発を経験したことのない自分にとってヒアリングや日々の研修を通して意識すべき点も学ぶ事ができてよかったです。本記事執筆現在、OJTに入っております。課題は山積みですし、一日が一瞬で終わるように感じるほど目まぐるしい毎日ですが研修中に学んだことを意識しながら取り組みたいと思います！

The post 3ヶ月間の研修を振り返る first appeared on 株式会社yep.

これまでプログラミングは趣味レベルで触った程度だったので、未経験の身として色々教えていただきました。

人に教わるメリット

研修内容については他の方も書いているのでざっくり説明しますが、

参考書や演習で基礎を学んでから研修課題のウェブサイトを作るといった流れでした。

研修期間を通して定期的に進捗確認や質問の場を設けていただいたのは非常に助かりました。

分からないことが多い中で都度調べながら手を動かしていると、

うまく動いてもこれがいいやり方なのか、自己流すぎるのでは、と不安になることもあったので

早い段階で確認してもらえたのは良かったです。

コードの書き方の慣習のような、自分ではなかなか気づけないものもあるので人に教わることはやはり大事だなと身にしみます。

研修発表

社内の研修発表の前に、課題のサイトを今度はフレームワークを用いて作ってみることに。

まずは勝手が変わり戸惑うことが多かったです。

一方データ操作やページ処理など、1から作っていたものが簡単にできるようになっていて違いや利点を感じることもできました。

業務でも使用しているものなので、そのイメージにもつながりましたね。

発表の際は、追加で作った機能や気にかけて作った点を主にプレゼンしました。

評価をもらって一安心するとともに、見落としていた例外や思いつかなかったアイデアなど

経験からのアドバイスもいただけて、この先の道のりを垣間見たような気がします。

終わりに

私の場合、言語は違えどプログラミングに多少触れていたことで基礎的な部分は入りやすかった印象がありますが、

今後の業務は未知の領域ですので精進していこうと思います！

The post 新人研修を終えました first appeared on 株式会社yep.

これまで、アパレル、商社、飲料メーカー、通訳・翻訳など様々な業界を経験し、人生最後のキャリアチェンジ！

ということで、デザイナー未経験枠でyepへ入社させていただきました。

この度未経験枠入社恒例の、３ヶ月研修を無事終えましたので、その研修の様子を皆様にお届けできたらと思います！

１ヶ月目

まずは、IT・デザインの基礎知識を身につけるところから始めよう！

ということで、研修１ヶ月目は、座学メインのカリキュラムです。

始めの２週間は、基本情報技術者の書籍をひたすら読み、知らない用語、単語と睨めっこの日々が続きました。

業界自体未経験なこともあり、耳にしたことはあるけど深い意味は理解していなかったITのこと、

これまで全く聞いたことや使ったことのない専門的な用語・単語などがたくさんあり、

インプット量の多い期間となりました。

正直頭がパンクしそうになりましたが、週２回先輩社員へ質問ができる場が設けられていたため、

疑問点を解消しながら進めることができました。これ、非常に助かりました。

基本情報技術者完読後３週目に入ると、次はデザインの基礎を学びます。

「ノンデザイナーでもわかるUX＋理論で作るWebデザイン」

「クリエイターのための権利の本」の２冊を読み進めます。

こちらはデザイナーとして心得ておくべき基本的な内容だったので、

独学で得た内容をベースに復習を兼ねて進めることができたと思います。

４週目に突入！

基礎が身についたら、次はProgateにて実践的なコーディングを学びます。

フロントエンドで使用する言語、HTML、CSS、JavaScript、JQueryを受講しました。

HTML、CSSは入社以前にすでに受講していたこともあり、

一部コースを割愛しながら進めることができたため、前倒しで完了することができました。

２ヶ月目〜３ヶ月目

さて、研修も２ヶ月目に突入。

無事IT全般、デザイン、コーディングの基礎知識も身につき、土台が完成しました。

ここからは実習のスタートです！

本来実習は擬似課題を行うはずが・・・

今回はなんと、先日ブログでも紹介のあった、

ベトナム現地法人、yetのコーポレートサイト制作を担当させていただくことが決まりました！

→リリース済みのサイトはこちら：https://ye-t.net/

研修の実習課題なのに、リアル制作案件で、正直ビビっていたのが本心です。

が、実際に世に出回るサイトになるということで、モチベーションも一気にアップです！

全過程において非常にワクワクしながら制作を進めることができました！

制作スケジュール

スケジュールはざっくりと下記のような流れで進めました。

1. 現地調査（ベトナム市場調査、競合調査など）：3日間　
2. WF制作：5日間
3. デザインカンプ：10日間
4. コーディング：15日間
5. WP化：6日間

せっかくなので、上記制作過程の成果物を一部掲載したいと思います。

WF制作

コンテンツ、大まかなレイアウト、文言についてをざっくり決めていきます。

メインはコンテンツ、コンテンツの並び順の確認・確定になります。

因みに、今回の制作はマルチリンガル対応ということで、ベトナム語、英語、日本語での制作になります。

よって、まずは英語での制作から進めました。

WFの段階からすでに入れられそうな文言は英語で入れていきます。

（Webサイト用の文章を考えるのは初めての経験。結構苦労しました。。。）

デザインカンプ

デザインのフェーズに入り、本来であればカラー選定が重要になってくる段階ですが、

ロゴが確定していないため、色味は仮置きで制作を進めました。

最終成果物は色味が変わり、雰囲気もガラッと変わったものになっています。

是非、本サイトをご覧ください。

yetコーポレートサイト：https://ye-t.net/

全体を通して

サイト制作の目的として、現地法人設立にあたりローカル人材を採用したいという点に焦点を置きました。

この目的を果たすべく、全体的に人物を用いた写真素材をたくさん使うようにしたり、

20〜30代の若手をターゲットと想定し、現地IT人材が就活時に求める要素などを調査した上で、

モダン、革新的なデザインを意識しながら制作をしました。

制作を進めていく中で、大変だった点は大きく2つ。

1つ目は、前述のとおり3言語のマルチリンガルサイトになること。

英語で制作を進め、デザインの段階で全て日本語に翻訳。

ここまでを単独で進め、ベトナム語への翻訳をアウトソーシング。

期限までにきちんと納品されるようスケジュール管理をおこないます。

自分自身の翻訳作業や外部の方の管理も含め、遅延のないよう進めていく点は少し大変でした。

2つ目は、yetのロゴが社内コンペで決まるということで、

テーマカラーなどもロゴとの兼ね合いで最終的には変更する可能性があったこと。

デザイナーは社内コンペへの参加必須で、ロゴ制作を並行して実施する必要があり、

ロゴ制作は未経験だったため、基礎から調べながらの制作になりました。

全体的にスケジュール管理など、大変だなと感じる部分もありつつ、

なんとかリリース予定日までに制作を完了することができました！

研修終了！

無事、コーディング、WP化も終え、研修の最後を飾る発表会の日がやってきました！

ついにこの２ヶ月間で制作してきたものをお披露目する場がやってきました。

当日はとっっても緊張しましたが、発表も無事終え、ポジティブなFBもたくさんいただくことができました。

そして、何より達成感です！改めて、発表の場があって良かったなあと感じました。

最後に

ここまでの３ヶ月間、なんだかんだあっという間に過ぎていきました。

現在はOJTに入り、研修中には経験することのなかったリアルな課題に直面したりしながら日々を送っております。

まだまだ未熟者ではありますが、研修での学びを糧に、

1日でも早く一人前のデザイナーとして活躍できるよう頑張りたいと思います！

The post 未経験デザイナーの研修記録 first appeared on 株式会社yep.

先日のアオキ氏のブログ 新人研修が無事完了しました！の先生を務めさせていただきました。

先生目線からも新人研修について振り返ってみたいと思います。

研修内容は元記事をご参照ください。

タイピング

タイピングが速ければ速いほど偉いです。
TypingClub

こちらをがんばっていただきました。
はじめはタイピングが遅かったですが、数週間後にはかなり速くなっていました。
かなり偉くなりました。

ショートカット

自分がよく使うものからお伝えしました。
今後自分なりに合うものを見つけていって頂けばうれしいです。

ブラウザ

別タブで開く ctrl + t
アドレスバーに移動する ctrl + l
リロード crtl + r

VSCode

検索 ctrl + shift + f 
置換 ctrl + shift + h
クイックオープンウィンドウ crtl + p
コマンドパレットを開く ctrl + shift + p

Windows

フォルダを開く windowsキー + e
デスクトップ表示 windowsキー + d
ロック画面 windowsキー + l

PHP

• var_dumpを見やすくする。
  あまり本にも記載されていないし、意外と知らない人も多い？
  PHP公式のUser Contributed Notesには記載ありましたが、var_dumpを調べる機会もあまりない気がします。

  echo “<pre>”;
  var_dump($value);
  echo “</pre>”;

• 配列
  「イメージのつきやすいお題」を出して実装ということを繰り返しました。
  例：foreachを使って、ラーメンが好きな人の名前を表示してください。

  $arr = [
    “粉川” => [“うどん”, “ラーメン”, “カレー”],
    “斉藤” => [“そば”, “お好み焼き”],
    “宮崎” => [“ラーメン”, “かつ丼”],
  ];

• classとfunction
• 正規表現
  様々なパターンで正規表現のチェックを実装してもらいました。
• クロスサイトスクリプティング対策、SQLインジェクション
  対策をしないと、どういった悪いことをされるかを具体例をもとに説明しました。

まとめ

3か月程の週2回プラスαで先生をやらせていただきましたが、こちらとしても勉強させていただきました。

ゴルフ部

先日、今年初のゴルフ部の活動をしました！

気になるスコアはこちら。目を細めると見えます。

The post 新人研修が無事完了しました！【先生編】とゴルフ部 first appeared on 株式会社yep.