主な工程

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へ入社させていただきました。

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

１ヶ月目

まずは、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.

去年、アルバイトとしてyepとご縁のあった私ですが、
今年の4月、専門学校を卒業して正式にyepの仲間入りを果たしました。

そして、入社から約2ヶ月の間、
デザインチームの新人研修を受けさせていただき、
5月29日(金)に研修発表会を行いました。

ということで今回は、
デザインチームの研修(以下デザイン研修)の内容や、
制作したもの、発表会の様子などをお届けできればと思います！
 

デザイン研修について

デザイン研修は、4月2日～5月22日の期間で行われました。

下の画像のようにスプレッドシートで
スケジュールやカリキュラムごとの工数を管理し、
このスケジュールを元に研修を進めていきます。
 

また、上のスケジュール表にもありますが、
デザイン研修は「座学」と「実習」の2つのカテゴリーに分かれています。

まず、座学から順番に学んだことについて紹介していきますね。
 

座学

デザイン研修が始まって最初の2週間は、「座学」の学習を行いました。

座学では、デザインチームの先輩方から講義をしていただいたり、
教本を読んだりして、IT全般やデザインの基礎知識を学びます。

「レイアウトの4原則」などのデザインの知識はもちろんのこと、
「Webの仕組み」や「著作権について」「セキュリティについて」など
実際の案件に入る際に知っておくべき知識も学ぶことができます。

基本的に、1つの科目につき1時間～1日の工数で学んでいきます。
1日の最後には、科目を担当した先輩方とのヒアリングが行えるので、
学習内容でわからないことがあれば、そちらで質問することもできます。
 

実習

座学のカリキュラムが終わると、次は実習の科目に入っていきます。

実習では、yepのデザインチームが実際に案件で行なっている
制作フローを元に、課題物を作成していきます。
(あくまで制作フローを元にしているだけなので、実際のフローと異なる場合がございます)
 

制作するもの

今回の実習では「株式会社United Journey」という
架空の不動産企業のリクルートサイトを作成することになりました。

制作の際はデザインチームの先輩にお客様役をしてもらい、
お客様とご相談しながら作業を進めました。
 

作業工程

実習の作業工程は
「市場調査分析」「サイトマップ作成」「ワイヤーフレーム作成」
「デザインカンプ作成」「HTMLコーディング」の5つになります。

また、工程ごとにレビュー日(スケジュール表の赤い星マーク)が
設けられており、レビュー日ではデザインチームの先輩方から、
制作したものへのレビューをいただくことができます。

レビューの中には目から鱗なご意見もあり、
プロの視点から見た制作物の改善点などを知ることができるので、
とても勉強になりました。
 

市場調査分析(作業時間：3日)

まずはじめに、他社のリクルートサイトの調査を行います。
「株式会社United Journey」は不動産業をメインに経営している企業なので、
同業あるいは近しい企業のリクルートサイトを調査していきます。

コンテンツやターゲットなどをスプレッドシートにまとめ、
調査してわかったことなどもまとめました。

このまとめは、後の工程を進めていく中で参考にしています。
 

サイトマップ作成(作業時間：3日)

市場調査分析の内容を元に、リクルートサイトのサイトマップを作成します。
どんなページが、どれだけの数あるかを一覧できるようになっています。
 

ワイヤーフレーム作成(作業時間：6日)

デザインを制作する前に、ワイヤーフレームを用いてコンテンツの
掲載方法などをお客様に提案します。

今回の研修では、デザイン・コーディングを作成するのは
トップページとエントリーページの2ページのみなので、
ワイヤーフレームも2ページのみ作成しています。
 

「Adobe XD」というソフトを用いて、
上の画像のようにコンテンツの流れや細部などをまとめています。
 

デザインカンプ作成(作業時間：5日)

ワイヤーフレームを元にデザインを制作していきます。
お客様の「若い世代をターゲットに、真面目な印象のサイトにしたい」
というご要望というご要望からデザインを詰めていきます。
 

配色は、ロゴに使われているブランドカラーの青色よりも
少し明るめの青色を基調にしつつ、差し色に明るいイエローを用いることで
若々しさと真面目な雰囲気を両立させたデザインにしています。

また、リクルートサイトはその会社で働きたいと思わせることや、
その会社の雰囲気を知るためのサイトなので、働いている様子や、
雰囲気がイメージできるような、人物を用いた画像を多く取り入れています。
 

グローバルナビゲーションには、サイト内の主なコンテンツである
「News」「メッセージ」「United Journeyについて」
「制度・環境」「社員インタビュー」「採用お悩みQ&A」「エントリー」の
7つのリンクを載せています。

エントリーボタンは、リクルートサイトにおいて
一番重要な部分となるページへのリンクになるので、
他のリンクよりも目立つようデザインに差をつけています。

また、トップページのメインビジュアルには
United Journeyの企業理念である「新しい景色を一緒に見ませんか？」という
コピーとともに、United Journeyの代表からの
メッセージページへリンクするようになっています。

メインビジュアルより下には、グローバルナビゲーションにある
メッセージ以外のページへの導線となるコンテンツを順番に掲載しています。
 

また、「United Journeyについて」「制度・環境」「社員インタビュー」の
3つについては、ホバーするとドロップダウンメニューで下層ページへの
リンクが表示されるようになる想定です。

スマートフォン版の場合、
ハンバーガーメニューになり、タップすることでメニューが表示されます。
 

「United Journeyについて」「制度・環境」「社員インタビュー」は
アコーディオンメニューによって、PC版同様に下層ページへの
リンクが表示される仕様になっています。

フッターは、サイトマップの役割も兼ねているので、
下層ページへのリンクを表示していますが、
スマートフォン版はヘッダーのハンバーガーメニューで下層ページの
リンクが見える仕組みになっているため、不要と判断し表示させていません。

また、フッターの下部にはUnited Journeyのコーポレートサイトなどへの
外部リンクも掲載しています。
 

また、画面右下には、常にトップへ戻るボタンを表示させる想定です。
クリックないしはタップすると、ページの一番上まで戻る仕様になっています。
 

エントリーページはまず前提条件として、デザインチームの皆さんから
「募集要項と、応募フォームはエントリーページの1ページ内にまとめること」
というご指示がありましたので、
募集要項と応募フォームは同じページにまとまっています。
 

募集要項は、
タブ分けをして新卒と中卒の募集要項が見られるようになっています。
 

採用フローは私からお客様に提案して、エントリーページに掲載しています。

他社のリクルートサイトを見てみると
エントリーページなどに採用フローを掲載しているサイトが多く、
どういった流れで選考を進めているかがわかった方が、
ユーザーが安心して選考に臨むことができるのではないかと考えたためです。
 

最後に応募フォーム。
今回は機能面よりもデザインとして形を完成させることを目標としているため
コーディングの際には送信などの機能は実装しない想定です。
 

HTMLコーディング(作業時間：5日)

上記で作成したデザインを元にコーディングをしていきます。

HTMLだけでなく、あまり使ったことのないjQueryなども用いたため、
何度か心を折れかけましたが、なんとか形にすることができました。
 

研修発表会

研修発表会では、一部の方にはグループボイスチャットなどを用いて
参加していただきつつ、実際にコーディングしたサイトを皆さんに
ご覧いただきながら発表を行いました。

発表会はとても緊張しましたが、
yepの皆さんに感想やお褒めの言葉をいただき、
私としては、非常に有意義な研修発表会になったと思います。
 

最後に

新社会人として入社して2ヶ月間。
まだまだ慣れないことばかりで、大変だった時もありましたが、
非常に実りの多い新人研修となりました。

また、緊急事態宣言の影響で一部リモートワークでの学習となりましたが、
先輩方には、何かとこちらの様子を気にかけていただいたり、
質問などにもボイスチャットツールや画面共有を駆使して
わかりやすくお答えいただいたりと、大変お世話になりました。
先輩方、お忙しい中指導いただき本当にありがとうございました！

2ヶ月間の研修も終わり、
これからはOJT期間として実際の案件に入っていくことになります。
研修で学んだことを活かして、少しでも早く一人前のデザイナーとなれるよう、
精一杯努力してまいります！

ではまた！

The post 【新人研修】新人デザイナーの研修録【デザインチーム】 first appeared on 株式会社yep.