Chapter.1】2019.05.07ウェブ制作こんにちは。エンジニアの山岡です。LOADING"って出したくないですか?ローディング画面の例。※待っていても何も出ません!!ゲームだと読み込み中には必ず出てきますよね。LOADING"の文字が表示されたりと見た目は様々です。共通しているのは、コンテンツの雰囲気に合わせた見た目をしていること。なんでもアリな気がしますが、そんなことはない。コンテンツだけでなくローディング画面もデザイナーと協力して作り込むのがベストプラクティスです!この連載では、WEBサイトでのローディング画面の実装方法について解説していきます。次回チャプターリスト本連載の記事一覧です。プリローダーいろいろ(執筆中)ローディング画面を表示するメリットぶっちゃけユーザー体験を考えれば実装したいですよね。会社や商品のイメージも伝わりやすいでしょうし、特別な感じも演出できます。他にも、ロード時間の間を繋ぐことで離脱率を改善!WEBサイトとコンテンツへの没入感がUP!ロード時間が楽しくなることでユーザーの好感がUP!といったメリットがあります。ローディング画面は魅力的ですが、全てのWEBサイトに必要なわけではありません。WEB制作の現場では、工数が増えるとクライアントに費用として跳ね返ってしまいますよね。ページの読み込み中に表示される画面ですから、凝ったキャンペーンサイトや動画を使ったサイトなど、通常より読み込み時間が長いWEBサイトにピッタリです。コストとメリットを天秤にかけて、本当に必要な場面か見極めてくださいね!時代の流れは脱jQueryJavaScriptライブラリとして2000年代に一斉を風靡したjQueryですが、今では勢いが少し弱まっています。脱jQueryのために書かれた記事もよく目にしますし、WEBの進化に対してちょっと古い気もします。SPAが流行し、AngularやReact、Vue.js等のJavaScriptフレームワークが活躍する時代になって、開発者の興味はダンゼンそっちに釘付けです。コードを書き慣れていたり日本語でのサンプルや関連記事の多さから、なんだかんだで使いやすいという側面もあります。そんなわけで、jQueryを使って実装する方法と、JavaScript/CSSのみで実装する方法(脱jQuery!)の順を追って両方ご紹介します。どちらが良いか悩んでいる方は、ライブラリに依存しないJavaScript/CSSのみで実装する方を選ぶと良いのではないでしょうか。次回それでは、次回はいきなり世間の流れに逆らって、jQueryを使ったローディング画面の実装方法を見ていきましょう。Yamaoka庶民の私にもできる高級感のあるサイトの作り方。プランCREATIOOON・・・エコクリが運営するWEBメディアCONTACT・・・お問い合わせCONCEPTSERVICECONSULTINGABOUTMEMBERSWORKSREVIEWPLANSCREATIOOONCONTACT。