30DAYSトライアルがWebアプリになりました!1日1題30日でプロのWebエンジニアを目指そう!

30DAYSトライアル2nd【実務に必須のアニメーションの付け方〜実践!最終課題】

30DAYSトライアル2nd【実務に必須のアニメーションの付け方〜実践!最終課題】

こんにちは、フリーランスエンジニア兼ディレクターのショーヘー(@showheyohtaki)です。

この記事は『コーダーとして企業と仕事ができる』レベルになるための30DAYSトライアル、その後編です。

実践レベルのトライアルになるため、難易度も大きく上がっています。

デイトラ0〜3まで完了し、コーディングを副業から仕事へと昇華させたいと思った方は、ぜひ挑戦してみてください👍

30DAYSトライアルの概要は↓の記事で解説していますので、興味のある方はこちらからご覧ください。

前回の記事はこちら↓

シックスステップであるこの記事では、実務でよく使うアニメーションの付け方から、これまでの総まとめである最終課題のコーディングまで進めていきます。

トライアル課題協力

はにわまん
WordPressが好きなフリーのWeb屋。気づけば約300件のWordPress案件を対応してきました。SE → 農家 → アフィリエイター → Web屋。生まれは三重県。

『コーダーとして企業と仕事ができる』レベルになるためのトライアルでは、課題作成をはにわまんさんと共同で行なっています。

フロントエンドの勉強をされてる方は、はにわまんさんの技術ブログ『HPcode』も必見です。

 

目次

はじめに:実務に必須のアニメーションの付け方を学ぼう

実務でよく使うアニメーションの付け方編

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. メニューは『現在のページ+ホバーしてるメニュー』にスタイルを付けるのが定石

30DAYSトライアル2ndDay9 ホバー

よく見るテキスト系アニメーションの代表例が、ヘッダーのメニューボタンです。

メニューにアニメーションを付ける時の定石は、現在の表示されているページは常時スタイルを追加し、ホバーしたメニューにもスタイルを付ける、という形式です。

ホバー時のアニメーションを駆使しつつ、『今表示しているのはこのページです』『クリックするとこのメニューを表示します』とユーザーに分かりやすく表示しましょう👍

 

Tips2. ホバー時のアクションに指定がないときは透過する

30DAYSトライアル2ndDay9 ホバー2

実案件で、全リンク要素のホバーアクションをいちいち指示されることはまずないです。

その辺はコーダー側で気を利かせるべきところ。

リンク要素のホバーアクションについて指定がないときは、透過(opacity)を指定しておけば間違いないです。

 

余裕がある人向けの課題

余裕がある人は以下の課題に取り組んでみてください。

  • transitionプロパティもついでに覚える
  • transformプロパティもついでに覚える

transitionプロパティもついでに覚える

CSSで動きを制御するプロパティ、transitionやanimationの理解は今や必須です

これらのプロパティの値を変えながら挙動を試してみてください!

transformプロパティもついでに覚える

さらに、transitionとtransformはよくセットで使われます。

要素を傾けたり、遠近効果を付けたりするプロパティですね。

使い方としては間違ってますが(笑)、transitionと組み合わせてホバーするとボタンがぐるっと回る、みたいなこともできます。

余裕がある方は、ぜひtransformも触ってみてください。

 

DAY18. 『Webフォント、デバイスフォントを理解する』

デザインカンプのフォントをコーディングで表現する時、以下の3パータンのいずれかで対応します。

  1. デバイスフォント
  2. Webフォント
  3. 画像

優先順位としては、デバイスフォント > 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」を入れると、今どのフォントが適応されているか一目で確認できます。チェック時などにぜひ使ってみてください👍

公式URL

WhatFont

雰囲気に合ったフォントを試しながら探せる「TypeSquare」

モリサワフォントが運営してるWebフォント配信サービス『Typesquare』。

トライアウトからサイトのURLを入力すると、いろんなフォントを試しながら、そのサイトの雰囲気にあったフォントを探せます。便利!

公式URL

TypeSquare

 

DAY19. 『コーディング後の品質を担保するテスト』

コーディングの品質を担保するために、最低限チェックしておいた方がいい(と思う)項目がいくつかあります。

サーバーサイドで大きめの開発現場だと、プログラムを書いた後にテスト項目を箇条書きでまとめた「テスト指示書」を作成し、想定されるリスクを洗い出してチェックするという工程があります。
(しかも単体テスト、機能テスト、結合テストとスケールを大きくしながら何度もやります。)

SIerみたくガッツリしたテストは必要ないですが、コーダーも完成度の高い状態で納品するために最低限のチェックはするべき。

逆に、クラウドソーシングなどにこうした品質管理をしているコーダーはまずいないので、「クロスブラウザ対応・W3C準拠はチェック済みです」などと伝えることで、『品質管理が行き届いているコーダー』として大きな差別化にもなります

周りに差をつける武器にしましょう👍

 

課題:コーディングしたものをチェックする

以下にあげた6つのチェック項目は必ず確認しましょう。

特に、W3CのチェックとIEチェック(クロスブラウザ対応)は、Web制作会社と仕事するならチェックをクセ付けた方がいいです。

  • W3Cチェック(HTML、CSS)
  • 見出し構造が不自然ではないか
  • altが正しく設定されているか
  • 閉じタグチェック
  • 水平スクロールしないか
  • Chrome、Firefox、IE、Safari、Edgeで表示崩れが起きていないか → 特にIEとSafariは注意!

 

チェック項目の一覧とチェック方法

チェック項目の全量は以下の通りです。

上にあげた確認必須の6項目は赤字にしています。

このページをブックマークして、納品前に忘れず確認するようにしましょう👍

チェック項目チェック方法
誤字脱字がないか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などの仮想サーバーを使うには別な知識が必要になります。

手軽に確認できる方法と、より確実に確認できる方法の2パターンをご紹介しておきます。

手軽な方法だと実機の表示とズレる場合があり、確実な方法だとメモリを食います。

この辺はクライアントの温度感に合わせて、手軽な方法・確実な方法を使い分けましょう❗️

 

DAY20. 『スライダー(カルーセル)を作る』

ここから先は、JavaScriptのライブラリを使ってサイトのコーディングを進めていきます。

 

まず、スライダー(カルーセルとも呼ばれたりします)を作っていきましょう。

作ると言っても、

  • ライブラリの使い方を覚えて
  • そのライブラリをカスタマイズ

ができれば、とりあえずはOKだと思います。

 

課題:メインビジュアルをスライダーに変更

30DAYSトライアル2nd スライダー

ここまでに作成したサイトのメインビジュアルをスライダーに変更します。

ちなみに私は、デザインカンプ上にアローボタンやページネーションが用意されていたら「あ、スライダーで実装するんだな」と判断します。

※もちろんデザイナーさんに意図を聞いた方が確実です

※パスワードはLINE@にて配信しています。記事下部からご登録ください。

コーディング時点では、2枚目以降の画像がないことが結構多いです…。コーダー側で適当に同じようなサイズの仮の画像を用意して入れてあげましょう。先方が画像を差し替えたらいいだけの状態にして納品してあげてください。

 

扱いやすいスライダー系ライブラリを1つ持つ

スライダーは自作してもいいですが、先人の凄い人が作ってくれたJavaScriptのライブラリを使ったほうが、時間もかからずにいい感じに作ることができます。

色々なスライダー系のライブラリがありますが、ご自身が扱いやすいものを決めて、使い倒して見てください!

ちなみにオススメは「Swiper」です。

 

余裕がある人向けの課題

30DAYSトライアル2nd スライダー別パターン

もう1パターンのスライダーを用意しました。

こちらもよく出会う形式のスライダーなので、余裕があれば作ってみてください!

 

DAY21. 『スクロールに応じて要素を「フワッ」と登場させる』

画面をスクロールした時、要素を「フワッ」と浮かび上がり表示させるアニメーションもよく使われる動きです。

DAY21では、ライブラリを使ってこの動きを実装してもらいます。

 

課題:スクロールに応じて要素を「フワッ」と登場させる

 

フワッとした動きは、上の画像だと真ん中下のカードですね。

こうしたアニメーションを実装するなら「WOW」ライブラリを使うのが一番ラクです。

 

WOWライブラリを使い、ここまでに作成したサイトの各要素に対して、スクロールでの登場にあわせて「フワッと」表示されるように動きを加えてください

※「フワッと」ではなく、横からスライドなど好きな動きで作ってもOKです!

むしろ他にもどんな動きができるのか色々試してみてください( ^ω^ )

WOW.js本家の商用利用には有料の公式ライセンスが必要です。

無料で商用利用できるMIT版があるので、実務にはこちらをご利用ください!

MIT版:https://github.com/graingert/wow

 

DAY22. 『スマホ時のドロワーメニューを作る』

30DAYSトライアル2nd ドロワーメニュー

これも習得必須のコーディングパターンですね。

スマホ表示時のグローバルメニューを、ドロワーメニューで作っていきましょう!

課題:スマホ時のドロワーメニューを作る

通常時はハンバーガーメニューを表示し、クリック時にはグローバルメニューが縦並びで表示されるように作っていきましょう!

※パスワードはLINE@にて配信しています。記事下部からご登録ください。

デザインカンプの見方は、

  • 「drawer-open」の方が通常時
  • 「drawer-close」の方が開いた時

です。

 

ドロワーが作れるライブラリ

手軽にドロワーが作れるライブラリを2つ紹介しておきます。

また、ライブラリを使わなくても「ドロワー 自作」などで検索するといろんなパターンの実装方法が出てきます。

そんなに難しくないので実際に作ってみて、イケてると思ったパターンを使っていけばOKです。

例:ドロワーメニューをプラグイン無しで簡単に自作する方法 | マインドステージ

(一度作ったらいつでも使えるようにメモっといてくださいね!)

 

余裕がある人向けの課題

30DAYSトライアル2nd メニュー

ドロワーではないですが、こういった画面全体を覆うタイプのメニューも頻出です。

「フルスクリーン ナビ」で検索すると実装方法も出てきますので、こちらも作れるようになっておきましょう👍

 

DAY23. 『スムーススクロールとフローティングアイテムを作る』

内部リンクをクリックした時に「ぐいーん」と移動した方がページ内を移動していることが理解できて少し親切だと思います。

DAY23は、このスムーススクロールと呼ばれる動きを実装します。

スムーススクロールが鉄板で使われるパーツといえば、「トップへ戻るボタン」です。トップに戻るボタンはファーストビューでは表示せず、少しスクロールするとフワッと表示させる、といった使い方が多いので、DAY21の復習も兼ねて一緒に作っていきましょう😀

 

課題1:スムーススクロールを作る

jQueryの使い方を復習し、

  1. グローバルメニューの各リンク
  2. メインビジュアルの「お問い合わせ」ボタン
  3. 「トップページに戻る」ボタン

を、それぞれスムーススクロールで移動できるようにしてください。「お問い合わせ」ボタンは、Contactのセクションに移動させればOKです。

 

課題2:「トップへ戻る」をフローティングアイテムにする

そして、「トップへ戻る」ボタンをスクロールしたら「フワッと表示」されるように変更してください。表示位置は、常にページ右下に固定表示にしてみてください。

以下の記事を参考にどうぞ。

 

DAY24. 『ページ内リンクでクリックした要素に下線を引く(クリックイベントの処理)』

 

メニューやタブをクリックしたとき、クリックしたメニューの色が変わったり太字になったりしますよね。

ユーザーにとって、どれが選択されているのかを見分けるための大事な表現です。

DAY24では、ページ内リンクでクリックした要素に対して下線を引くという処理を加えてみます。

 

課題:ページ内リンクでクリックした要素に対して下線を引いたままにする

jQueryのオンクリックの使い方は覚えていますでしょうか?

実装の流れとしては、

  1. クリックされた時にメニューの全てのリンクの下線を削除する
  2. クリックされた要素に対して下線を引く

という処理を行います。

addClass、removeClassを活用すると楽に作れるかもしれません。

 

余裕がある人向けの課題

30DAYSトライアル2nd クリックイベント処理

タブをクリックしたとき、どのタブの内容が表示されているか分からないと困りますよね。

これもクリックイベントで実装できます。余裕があれば、以下のようなセクションも作ってみてください。

実装の手順としては、

  1. タブがクリックされたら全タブのactiveを削除する
  2. 全パネルのactiveを削除する
  3. クリックされたタブにactiveを付ける
  4. 対応するパネルにもactiveを付ける

です。

 

25. 『Q and Aをアコーディオンでコーディング』

30DAYSトライアル2nd Q&A

DAY25では、アコーディオンを使った実践的なコーディングに挑戦してみましょう。

アコーディオンがよく使われる代表的なパーツは「Q & A」です。

 

課題:Q and Aをアコーディオンでコーディング

「アコーディオンって何?」という方は、復習してから以下を実装してください。

追加する場所はContactのセクションの上でOKです!(背景色も見やすければ何色でもOK)

※パスワードはLINE@にて配信しています。記事下部からご登録ください。

 

余裕がある人向けの課題

30DAYSトライアル2nd アコーディオン

以下のようなタイプのアコーディオンもよくあるタイプですので、余裕がある方はぜひこちらも作ってみてください。

DAY26. 『モーダルを作る』

30DAYSトライアル2nd モーダル

上の画像のように、クリックするとウィンドウが浮き上がって表示されるデザイン、見たことありますよね。

これはモーダルウィンドウと呼ばれるものです。初期表示のページをスッキリさせつつ必要な情報は盛り込めるので、これもよく使われるコーディング表現ですね。

DAY26では、デザインカンプを見ながらこのモーダルを作っていきましょう☺️

 

課題:モーダルを作る

Contactセクションの「プライバシーポリシー」のリンクをクリックした時にモーダルで内容を表示するようにしましょう!(実際にはプライバシーポリシーにモーダルはあまり使いませんが、練習です😅)

デザインは以下のとおりです。

※パスワードはLINE@にて配信しています。記事下部からご登録ください。

DAY27〜DAY30. 『最終課題:実践コーディング』

Photo by Aidan Hancock on Unsplash

デイトラ2ndもこの課題でいよいよ最後です…❗️

最終課題は、これまでの総復習を兼ねて、別デザインのLPをゼロからコーディングしてみましょう👍

難易度はステップでやってきたデザインよりも高いと思います。ボリュームもあるので、3日間で完成を目標に取り組んで見てください💪

実際のLPコーディング案件だと3日〜5日ほどの納期では終わらせたいところ。

ということで、工数はかかっても構いませんので、納期が3日の実案件だと思って3日以内に終わらせてください。

(実務では、一度受けたら絶対に納期は守るという覚悟が大事ですので!!)

デイトラ2ndで学んだことを活かしながらコーディングしていきましょう😀

 

課題:XDのデザインカンプからLPのコーディング

以下のPCとSPのデザインカンプからコーディングしてください!
(このカンプは@SasaYukiyaさんが作ってくださいました。ありがとうございます🙇‍♂️)

※パスワードはLINE@にて配信しています。記事下部からご登録ください。

 

共有事項

コーディング仕様書も作っていただいたので、こちらを守りつつコーディングしてみてください。

コーディング仕様書

 

画面キャプチャ

PerfectPixelなどで照らし合わせる場合は、以下の画像をご利用ください。

 

素材元

デザインカンプ内の画像はこちらから拝借しています。ありがとうございます。

 


Photo by Sunyu Kim on Unsplash
Photo by Sunyu Kim on Unsplash



 

実務に必須のアニメーションの付け方〜実践!最終課題編まとめ

おめでとうございます🎉❗️これでデイトラ2ndも完走です😆

本当にお疲れ様でした…!

1期目よりかなりレベルも上がり難しかったと思いますが、ここまでクリアできたなら自信持って大丈夫です☺️

他にもデイトラを実践された方から、ここでは紹介しきれないくらいたくさんの嬉しい感想をいただきました。

「案件に手を出す勇気が出ない」「未経験から転職なんて本当にできるのかな」って方は、ぜひこれ見てみてください。

デイトラ参加された方々からの感想まとめ

きっと一歩踏み出す自信と勇気が湧くんじゃないかと思います。

 

最後に、「最終課題のコード見本が欲しい!」という要望を多数もらったので、回答例コードを作りました。

「現役マークアップエンジニアのソースコードと見比べて勉強したい!」という方は、こちらをご覧ください

公式note

デイトラ2nd最終課題 回答例コード

制作担当:すーさん(@belltreeWeb

ただ、必ず自分で作った後に参考までに見てほしいです。作る前のカンニングはダメ!

またコードは「自分で作るもの」であって、算数のように答えを求めるものではないので、回答例コードと違ったからって落ち込む必要は全くないです。そもそも答えなんてないですからw

まずは見た目が綺麗に作れていれば十分すごい👍これからたくさんサイトを作りながら、コードも少しずつ綺麗にしていきましょう!

 

それでは、デイトラ1stからカウントして60日以上、本当にお疲れ様でした。

WordPressのカスタマイズ知識をつけるための『デイトラ3rd』もリリースされてますので、こちらもぜひやってみてください!!

現役エンジニアが徹底解説!WordPressで自作テーマを作るための手順【30DAYSトライアル3rd】

デイトラきっかけで少し人生が良くなれば嬉しいです☺️

それでは、また!

LINE@にて限定情報公開中!

CTA-IMAGE 『転職したい!』 『理想的なライフスタイルを実現したい!』 『フリーランスになりたい!』 そういう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。 登録すれば、LINE@限定「最短でプログラマーになるための転職ロードマップ」も確認できます!

コーディングカテゴリの最新記事