こんにちは、フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。
この記事は『コーダーとして企業と仕事ができる』レベルになるための30DAYSトライアル、その後編です。
実践レベルのトライアルになるため、難易度も大きく上がっています。
デイトラ0〜3まで完了し、コーディングを副業から仕事へと昇華させたいと思った方は、ぜひ挑戦してみてください👍
30DAYSトライアルの概要は↓の記事で解説していますので、興味のある方はこちらからご覧ください。
前回の記事はこちら↓
シックスステップであるこの記事では、実務でよく使うアニメーションの付け方から、これまでの総まとめである最終課題のコーディングまで進めていきます。
- 0.1. はじめに：実務に必須のアニメーションの付け方を学ぼう
- 0.2. DAY17. 『マウスホバー時の動きを付ける』
- 0.3. DAY18. 『Webフォント、デバイスフォントを理解する』
- 0.4. DAY19. 『コーディング後の品質を担保するテスト』
- 0.5. DAY20. 『スライダー（カルーセル）を作る』
- 0.6. DAY21. 『スクロールに応じて要素を「フワッ」と登場させる』
- 0.7. DAY22. 『スマホ時のドロワーメニューを作る』
- 0.8. DAY23. 『スムーススクロールとフローティングアイテムを作る』
- 0.9. DAY24. 『ページ内リンクでクリックした要素に下線を引く（クリックイベントの処理）』
- 0.10. 25. 『Q and Aをアコーディオンでコーディング』
- 0.11. DAY26. 『モーダルを作る』
- 0.12. DAY27〜DAY30. 『最終課題：実践コーディング』
- 0.13. 実務に必須のアニメーションの付け方〜実践！最終課題編まとめ
- 1. デイトラ2nd最終課題 回答例コード
はじめに：実務に必須のアニメーションの付け方を学ぼう
DAY17. 『マウスホバー時の動きを付ける』
DAY18. 『Webフォント、デバイスフォントを理解する』
DAY19. 『コーディング後の品質を担保するテスト』
DAY20. 『スライダー（カルーセル）を作る』
DAY21. 『スクロールに応じて要素を「フワッ」と登場させる』
DAY22. 『スマホ時のドロワーメニューを作る』
DAY23. 『スムーススクロールとフローティングアイテムを作る』
DAY24. 『ページ内リンクでクリックした要素に対して下線を引く（クリックイベントの処理）』
DAY25. 『Q and Aをアコーディオンでコーディング』
DAY26. 『モーダルを作る』
DAY27〜30. 『最終課題：実践コーディング』
前回のステップでは、様々なコーディングパターンを練習しました。デザインカンプからのコーディング・ピクセルパーフェクトでのコーディングにもだいぶ慣れましたよね。
デイトラ2ndの最終ステップとなるこの記事では、cssやjs・jqueryのライブラリを使って、コーディングしたサイトにアニメーションを付けていきます。
実務で頻出の表現パターンばかりですので、ここで出てくる動きはサクッと実装できるようになっておきましょう👍
DAY17. 『マウスホバー時の動きを付ける』
まずは、マウスホバー時のアニメーションです。
よく使われるCSSで作るボタンアニメーション10パターンは以下の記事にまとまっていますので、こちらを参考にどうぞ！
前回ボタン・見出しコーディングノックでたくさんボタンを作りましたよね。そのHTMLファイルのリンク要素に、「:hover」時の動きを指定していってください。
上記の10パターンは全て頻出なので、全パターン実装してくださいね❗️
テキストに付けるアニメーションについては、こちらが参考になります。
Tips1. メニューは『現在のページ＋ホバーしてるメニュー』にスタイルを付けるのが定石
よく見るテキスト系アニメーションの代表例が、ヘッダーのメニューボタンです。
メニューにアニメーションを付ける時の定石は、現在の表示されているページは常時スタイルを追加し、ホバーしたメニューにもスタイルを付ける、という形式です。
ホバー時のアニメーションを駆使しつつ、『今表示しているのはこのページです』『クリックするとこのメニューを表示します』とユーザーに分かりやすく表示しましょう👍
Tips2. ホバー時のアクションに指定がないときは透過する
実案件で、全リンク要素のホバーアクションをいちいち指示されることはまずないです。
その辺はコーダー側で気を利かせるべきところ。
リンク要素のホバーアクションについて指定がないときは、透過（opacity）を指定しておけば間違いないです。
余裕がある人向けの課題
余裕がある人は以下の課題に取り組んでみてください。
- transitionプロパティもついでに覚える
- transformプロパティもついでに覚える
transitionプロパティもついでに覚える
CSSで動きを制御するプロパティ、transitionやanimationの理解は今や必須です。
これらのプロパティの値を変えながら挙動を試してみてください！
transformプロパティもついでに覚える
さらに、transitionとtransformはよくセットで使われます。
要素を傾けたり、遠近効果を付けたりするプロパティですね。
使い方としては間違ってますが（笑）、transitionと組み合わせてホバーするとボタンがぐるっと回る、みたいなこともできます。
余裕がある方は、ぜひtransformも触ってみてください。
DAY18. 『Webフォント、デバイスフォントを理解する』
デザインカンプのフォントをコーディングで表現する時、以下の3パータンのいずれかで対応します。
- デバイスフォント
- Webフォント
- 画像
優先順位としては、デバイスフォント > Webフォント > 画像 の順ですね。
デイトラ1stでも『Bootstrap臭を消すのにもっとも大事なのはテキスト周りだ』とご紹介しましたが、デザインを再現する上でフォントは大きなインパクトを与える部分なので、取り扱いを覚えておきましょう！
課題：英数字に「Lato」、日本語に「Noto Sans JP」フォントを適応
Googleフォントを活用して、ここまでに作成したWebサイトの英数字部分を「Lato」、日本語部分を「Noto Sans JP」に変更してみてください！
英数字を使っているのは以下の部分です↓
- メニュー（regular 400）
- 見出し（bold 700）
- Newsの日付（regular 400）
- Newsの「more」リンク（bold 700）
- Priceのテーブルの見出し（bold 700）
- フッターメニュー（regular 400）
- コピーライト（regular 400）
キャッシュを削除しながら更新して、サイトの重たさの変化も体験してもらえたらと思います。
CSSのフォントの指定を理解する
今回の課題にあたって、以下の記事を参考にCSSのフォント指定の方法とGoogleフォントの使い方も理解しておきましょう。
一例ですが、以下のような質問をされてサッと答えられますか？
- font-familyには、なぜ複数のフォントを書くの？
- 記載する順番にはどういった意味があるの？
- よく最後に登場する「sans-serif」と「serif」は何？
もし自信がなかったら、ぜひこの機会に覚えておきましょう👍
CSSでのフォントの扱い方
サルワカ先生の記事が大変わかりやすいです！
Googleフォントの使い方
デバイスフォントでは表現できない、あるいは、デバイス関係なく同じフォントで表現したい場合にWebフォントが使われます。
WebフォントとしてはGoogleフォントがよく使われるので、自在に使えるようにしておきましょう！
こちらもサルワカ先生の記事。
Tips3. フォント周りの便利ツール紹介
最後に、フォント周りの便利ツールを紹介しておきます。
フォントの適応を確認する「WhatFont」
Chrome拡張機能である「WhatFont」を入れると、今どのフォントが適応されているか一目で確認できます。チェック時などにぜひ使ってみてください👍
雰囲気に合ったフォントを試しながら探せる「TypeSquare」
モリサワフォントが運営してるWebフォント配信サービス『Typesquare』。
トライアウトからサイトのURLを入力すると、いろんなフォントを試しながら、そのサイトの雰囲気にあったフォントを探せます。便利！
DAY19. 『コーディング後の品質を担保するテスト』
コーディングの品質を担保するために、最低限チェックしておいた方がいい（と思う）項目がいくつかあります。
サーバーサイドで大きめの開発現場だと、プログラムを書いた後にテスト項目を箇条書きでまとめた「テスト指示書」を作成し、想定されるリスクを洗い出してチェックするという工程があります。
（しかも単体テスト、機能テスト、結合テストとスケールを大きくしながら何度もやります。）
SIerみたくガッツリしたテストは必要ないですが、コーダーも完成度の高い状態で納品するために最低限のチェックはするべき。
逆に、クラウドソーシングなどにこうした品質管理をしているコーダーはまずいないので、「クロスブラウザ対応・W3C準拠はチェック済みです」などと伝えることで、『品質管理が行き届いているコーダー』として大きな差別化にもなります。
周りに差をつける武器にしましょう👍
課題：コーディングしたものをチェックする
以下にあげた6つのチェック項目は必ず確認しましょう。
特に、W3CのチェックとIEチェック（クロスブラウザ対応）は、Web制作会社と仕事するならチェックをクセ付けた方がいいです。
- W3Cチェック（HTML、CSS）
- 見出し構造が不自然ではないか
- altが正しく設定されているか
- 閉じタグチェック
- 水平スクロールしないか
- Chrome、Firefox、IE、Safari、Edgeで表示崩れが起きていないか → 特にIEとSafariは注意！
チェック項目の一覧とチェック方法
チェック項目の全量は以下の通りです。
上にあげた確認必須の６項目は赤字にしています。
このページをブックマークして、納品前に忘れず確認するようにしましょう👍
| チェック項目 | チェック方法 |
|---|---|
| 誤字脱字がないか | https://difff.jp/ で比較 |
| 改行位置は適切か | タブレットやスマホ時の<br> |
| フォントが適切か | WhatFont（https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja） |
| 色が適切か | ColorPick Eyedropper or デベロッパーツールから設定されているcolor、gackground-color、border-colorをデザインカンプと比較 |
| スムーズにレスポンシブ化されるか | Firefoxのレスポンシブデザインモードで目視確認 |
| スマホ（320px）、タブレット（768px）、PC（カンプ）の3パターンの表示に崩れはないか | Firefoxのレスポンシブデザインモードで目視確認 |
| 水平スクロールしないか | Firefoxのレスポンシブデザインモードで目視確認 |
| リンク要素（ボタン等）のhover時の挙動は設定されているか | 実際に確認（人的作業なので、何をチェックしたかの指示書があるといいかもしれない…） |
| JavaScriptの挙動は正しいか | 実際に確認（何をチェックしたかの指示書が別にあるといいかもしれない…） |
| altが正しく設定されているか | 画像ALTチェッカーで確認（https://trickster.tools/image-alt-checker/） |
| 見出し構造が不自然ではないか | ブックマークレットで確認（ https://www.pixelimage.jp/blog/2015/08/bookmarklet_seo.html ） |
| TDKは正しく設定されているか | 同上 |
| 閉じタグチェック | HTMLエラーチェッカー（ https://chrome.google.com/webstore/detail/html%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%81%E3%82%A7%E3%83%83%E3%82%AB%E3%83%BC/ohdllebchmmponnofchalfkegpjojcaf?hl=ja ）で確認 代替→ブックマークレットで確認（http://tockri.blog78.fc2.com/blog-entry-168.html） |
| W3Cチェック（HTML、CSS） | HTML → https://validator.w3.org/ CSS → http://jigsaw.w3.org/css-validator/ |
| デザインカンプの効果をCSSで表現できているか（box-shadow、opacityなど） | 目視確認 |
| デザインカンプとWebサイトを見比べてズレがないか | デザインカンプを画像で書き出して、PerfectPixel（ http://www.welldonecode.com/perfectpixel/ ）でチェック。 |
| Chrome、FireFox、IE、Safari、Edgeで表示崩れが起きていないか | 実際に各ブラウザから目視で確認 |
| 担保しているブラウザverを把握しているか | sassのAutoprefixerで担保。デフォルトは、browserl.ist（ https://browserl.ist/?q=%3E+1%25%2C+last+2+versions%2C+Firefox+ESR ）から確認可能 |
| リンク切れが起きていないか | Frogを回して確認（ https://www.screamingfrog.co.uk/seo-spider/ ） |
| コンソールエラーが出てないか | デベロッパーツール |
| 画像が圧縮されているか | gulpで吐き出す |
| 画像が同じか | 目視 |
はにわまんさんの記事にもう少し詳しくまとめてありますので、こちらもぜひチェックしてみてください。
やや説明が足りなそうな部分については、以下の記事を参考に補ってください。
W3Cの使い方
→ web制作会社が紹介するW3Cチェック（validator）の使い方
見出し構造については「論理的な記事構成にするコツ」を参照してください。
→ 【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？
もっとも問題なのは、MacでIEを確認するとき＆WindowsでSafariを確認するときです。
実機があれば一番ですけど個人で2台持ちは必要ないし、Desital Oceanなどの仮想サーバーを使うには別な知識が必要になります。
手軽に確認できる方法と、より確実に確認できる方法の２パターンをご紹介しておきます。
手軽な方法だと実機の表示とズレる場合があり、確実な方法だとメモリを食います。
この辺はクライアントの温度感に合わせて、手軽な方法・確実な方法を使い分けましょう❗️
DAY20. 『スライダー（カルーセル）を作る』
ここから先は、JavaScriptのライブラリを使ってサイトのコーディングを進めていきます。
まず、スライダー（カルーセルとも呼ばれたりします）を作っていきましょう。
作ると言っても、
- ライブラリの使い方を覚えて
- そのライブラリをカスタマイズ
ができれば、とりあえずはOKだと思います。
課題：メインビジュアルをスライダーに変更
ここまでに作成したサイトのメインビジュアルをスライダーに変更します。
ちなみに私は、デザインカンプ上にアローボタンやページネーションが用意されていたら「あ、スライダーで実装するんだな」と判断します。
※もちろんデザイナーさんに意図を聞いた方が確実です
※パスワードはLINE@にて配信しています。記事下部からご登録ください。
コーディング時点では、2枚目以降の画像がないことが結構多いです…。コーダー側で適当に同じようなサイズの仮の画像を用意して入れてあげましょう。先方が画像を差し替えたらいいだけの状態にして納品してあげてください。
扱いやすいスライダー系ライブラリを１つ持つ
スライダーは自作してもいいですが、先人の凄い人が作ってくれたJavaScriptのライブラリを使ったほうが、時間もかからずにいい感じに作ることができます。
色々なスライダー系のライブラリがありますが、ご自身が扱いやすいものを決めて、使い倒して見てください！
ちなみにオススメは「Swiper」です。
余裕がある人向けの課題
もう１パターンのスライダーを用意しました。
こちらもよく出会う形式のスライダーなので、余裕があれば作ってみてください！
DAY21. 『スクロールに応じて要素を「フワッ」と登場させる』
画面をスクロールした時、要素を「フワッ」と浮かび上がり表示させるアニメーションもよく使われる動きです。
DAY21では、ライブラリを使ってこの動きを実装してもらいます。
課題：スクロールに応じて要素を「フワッ」と登場させる
フワッとした動きは、上の画像だと真ん中下のカードですね。
こうしたアニメーションを実装するなら「WOW」ライブラリを使うのが一番ラクです。
WOWライブラリを使い、ここまでに作成したサイトの各要素に対して、スクロールでの登場にあわせて「フワッと」表示されるように動きを加えてください。
※「フワッと」ではなく、横からスライドなど好きな動きで作ってもOKです！
むしろ他にもどんな動きができるのか色々試してみてください( ^ω^ )
無料で商用利用できるMIT版があるので、実務にはこちらをご利用ください！
DAY22. 『スマホ時のドロワーメニューを作る』
これも習得必須のコーディングパターンですね。
スマホ表示時のグローバルメニューを、ドロワーメニューで作っていきましょう！
課題：スマホ時のドロワーメニューを作る
通常時はハンバーガーメニューを表示し、クリック時にはグローバルメニューが縦並びで表示されるように作っていきましょう！
※パスワードはLINE@にて配信しています。記事下部からご登録ください。
デザインカンプの見方は、
- 「drawer-open」の方が通常時
- 「drawer-close」の方が開いた時
です。
ドロワーが作れるライブラリ
手軽にドロワーが作れるライブラリを2つ紹介しておきます。
また、ライブラリを使わなくても「ドロワー 自作」などで検索するといろんなパターンの実装方法が出てきます。
そんなに難しくないので実際に作ってみて、イケてると思ったパターンを使っていけばOKです。
例：ドロワーメニューをプラグイン無しで簡単に自作する方法 | マインドステージ
（一度作ったらいつでも使えるようにメモっといてくださいね！）
余裕がある人向けの課題
ドロワーではないですが、こういった画面全体を覆うタイプのメニューも頻出です。
「フルスクリーン ナビ」で検索すると実装方法も出てきますので、こちらも作れるようになっておきましょう👍
DAY23. 『スムーススクロールとフローティングアイテムを作る』
内部リンクをクリックした時に「ぐいーん」と移動した方がページ内を移動していることが理解できて少し親切だと思います。
DAY23は、このスムーススクロールと呼ばれる動きを実装します。
スムーススクロールが鉄板で使われるパーツといえば、「トップへ戻るボタン」です。トップに戻るボタンはファーストビューでは表示せず、少しスクロールするとフワッと表示させる、といった使い方が多いので、DAY21の復習も兼ねて一緒に作っていきましょう😀
課題1：スムーススクロールを作る
jQueryの使い方を復習し、
- グローバルメニューの各リンク
- メインビジュアルの「お問い合わせ」ボタン
- 「トップページに戻る」ボタン
を、それぞれスムーススクロールで移動できるようにしてください。「お問い合わせ」ボタンは、Contactのセクションに移動させればOKです。
課題2：「トップへ戻る」をフローティングアイテムにする
そして、「トップへ戻る」ボタンをスクロールしたら「フワッと表示」されるように変更してください。表示位置は、常にページ右下に固定表示にしてみてください。
以下の記事を参考にどうぞ。
DAY24. 『ページ内リンクでクリックした要素に下線を引く（クリックイベントの処理）』
メニューやタブをクリックしたとき、クリックしたメニューの色が変わったり太字になったりしますよね。
ユーザーにとって、どれが選択されているのかを見分けるための大事な表現です。
DAY24では、ページ内リンクでクリックした要素に対して下線を引くという処理を加えてみます。
課題：ページ内リンクでクリックした要素に対して下線を引いたままにする
jQueryのオンクリックの使い方は覚えていますでしょうか？
実装の流れとしては、
- クリックされた時にメニューの全てのリンクの下線を削除する
- クリックされた要素に対して下線を引く
という処理を行います。
addClass、removeClassを活用すると楽に作れるかもしれません。
余裕がある人向けの課題
タブをクリックしたとき、どのタブの内容が表示されているか分からないと困りますよね。
これもクリックイベントで実装できます。余裕があれば、以下のようなセクションも作ってみてください。
実装の手順としては、
- タブがクリックされたら全タブのactiveを削除する
- 全パネルのactiveを削除する
- クリックされたタブにactiveを付ける
- 対応するパネルにもactiveを付ける
です。
25. 『Q and Aをアコーディオンでコーディング』
DAY25では、アコーディオンを使った実践的なコーディングに挑戦してみましょう。
アコーディオンがよく使われる代表的なパーツは「Q & A」です。
課題：Q and Aをアコーディオンでコーディング
「アコーディオンって何？」という方は、復習してから以下を実装してください。
追加する場所はContactのセクションの上でOKです！（背景色も見やすければ何色でもOK）
※パスワードはLINE@にて配信しています。記事下部からご登録ください。
余裕がある人向けの課題
以下のようなタイプのアコーディオンもよくあるタイプですので、余裕がある方はぜひこちらも作ってみてください。
DAY26. 『モーダルを作る』
上の画像のように、クリックするとウィンドウが浮き上がって表示されるデザイン、見たことありますよね。
これはモーダルウィンドウと呼ばれるものです。初期表示のページをスッキリさせつつ必要な情報は盛り込めるので、これもよく使われるコーディング表現ですね。
DAY26では、デザインカンプを見ながらこのモーダルを作っていきましょう☺️
課題：モーダルを作る
Contactセクションの「プライバシーポリシー」のリンクをクリックした時にモーダルで内容を表示するようにしましょう！（実際にはプライバシーポリシーにモーダルはあまり使いませんが、練習です😅）
デザインは以下のとおりです。
※パスワードはLINE@にて配信しています。記事下部からご登録ください。
DAY27〜DAY30. 『最終課題：実践コーディング』
デイトラ2ndもこの課題でいよいよ最後です…❗️
最終課題は、これまでの総復習を兼ねて、別デザインのLPをゼロからコーディングしてみましょう👍
難易度はステップでやってきたデザインよりも高いと思います。ボリュームもあるので、3日間で完成を目標に取り組んで見てください💪
実際のLPコーディング案件だと3日〜5日ほどの納期では終わらせたいところ。
ということで、工数はかかっても構いませんので、納期が3日の実案件だと思って3日以内に終わらせてください。
（実務では、一度受けたら絶対に納期は守るという覚悟が大事ですので！！）
デイトラ2ndで学んだことを活かしながらコーディングしていきましょう😀
課題：XDのデザインカンプからLPのコーディング
以下のPCとSPのデザインカンプからコーディングしてください！
（このカンプは@SasaYukiyaさんが作ってくださいました。ありがとうございます🙇♂️）
■PC→ https://xd.adobe.com/spec/31afc224-f7fc-4af7-641f-10de0dcd64af-479e/
■SP→ https://xd.adobe.com/spec/f1584684-6f8d-4345-7ff5-f4378b301e73-8769/
※パスワードはLINE@にて配信しています。記事下部からご登録ください。
共有事項
コーディング仕様書も作っていただいたので、こちらを守りつつコーディングしてみてください。
画面キャプチャ
PerfectPixelなどで照らし合わせる場合は、以下の画像をご利用ください。
素材元
デザインカンプ内の画像はこちらから拝借しています。ありがとうございます。
Photo by Aidan Hancock on Unsplash
Photo by Jens Kreuter on Unsplash
実務に必須のアニメーションの付け方〜実践！最終課題編まとめ
おめでとうございます🎉❗️これでデイトラ2ndも完走です😆
本当にお疲れ様でした…！
1期目よりかなりレベルも上がり難しかったと思いますが、ここまでクリアできたなら自信持って大丈夫です☺️
他にもデイトラを実践された方から、ここでは紹介しきれないくらいたくさんの嬉しい感想をいただきました。
「案件に手を出す勇気が出ない」「未経験から転職なんて本当にできるのかな」って方は、ぜひこれ見てみてください。
きっと一歩踏み出す自信と勇気が湧くんじゃないかと思います。
最後に、「最終課題のコード見本が欲しい！」という要望を多数もらったので、回答例コードを作りました。
「現役マークアップエンジニアのソースコードと見比べて勉強したい！」という方は、こちらをご覧ください
ただ、必ず自分で作った後に参考までに見てほしいです。作る前のカンニングはダメ！
またコードは「自分で作るもの」であって、算数のように答えを求めるものではないので、回答例コードと違ったからって落ち込む必要は全くないです。そもそも答えなんてないですからw
まずは見た目が綺麗に作れていれば十分すごい👍これからたくさんサイトを作りながら、コードも少しずつ綺麗にしていきましょう！
それでは、デイトラ1stからカウントして60日以上、本当にお疲れ様でした。
WordPressのカスタマイズ知識をつけるための『デイトラ3rd』もリリースされてますので、こちらもぜひやってみてください！！
デイトラきっかけで少し人生が良くなれば嬉しいです☺️
それでは、また！