• TOP
  • 採用ブランディング

採用ブランディング

レスポンシブデザインが重要7つの理由の紹介
2024.9.14

レスポンシブデザインが重要7つの理由の紹介

近年、インターネットの利用が急増し、さまざまなデバイスからウェブサイトにアクセスすることが一般的になっています。そのため、レスポンシブデザインはますます重要な要素となっています。この記事では、レスポンシブデザインの重要性について説明します。 ユーザーエクスペリエンスの向上 レスポンシブデザインは、異なるデバイスや画面サイズに応じてウェブサイトのレイアウトが自動的に調整される設計手法です。これにより、ユーザーはどのデバイスからでも快適にサイトを閲覧でき、必要な情報を簡単に見つけることができます。良好なユーザーエクスペリエンスは、ユーザーの満足度を高め、再訪問を促進します。 SEOの改善 Googleは、モバイルフレンドリーなウェブサイトを優先的に評価します。レスポンシブデザインは、検索エンジン最適化(SEO)においても役に立ちます。モバイル用とデスクトップ用の異なるURLを持つのではなく、一つのURLでコンテンツを管理することで、SEO効果が向上し、検索結果での表示順位が上がります。 時間とコストの節約 異なるデバイス用に別々のサイトを開発することは、時間とコストがかかります。しかし、レスポンシブデザインを使用すれば、一つのサイトを維持するだけで済みます。これにより、開発者やデザイナーはリソースをより効果的に活用でき、運用コストも削減できます。 共有しやすさの向上 レスポンシブデザインのウェブサイトは、どのデバイスでも一貫した体験を提供します。そのため、ユーザーがウェブサイトをソーシャルメディアで共有する際、他の人がアクセスしやすくなります。簡単にアクセスできるサイトは、より多くの訪問者を引き付けることができます。 モバイルデバイス利用のトレンドに適応 スマートフォンの普及により、インターネット利用の多くがモバイルデバイスから行われています。レスポンシブデザインは、こうしたトレンドに対応し、すべてのユーザーに等しくアクセス可能な体験を提供します。これにより、より多いユーザーにリーチすることが可能です。 未来への適応力 レスポンシブデザインは、将来的に新しいデバイスや画面サイズが登場しても、柔軟に対応できる利点があります。これにより、サイトが時代遅れになるリスクを軽減し、常に最新の技術に適応することができます。 ページ離脱率の低下 モバイルデバイスに最適化されたウェブサイトは、ユーザーがページをすぐに離れる「バウンス率」を低下させる効果があります。良好なユーザーエクスペリエンスを提供することで、滞在時間が延び、結果的にコンバージョン率が向上します。これは、企業にとって非常に重要なことです。 結論 レスポンシブデザインは、単なるトレンドではなく、現代のウェブ開発において不可欠な要素です。ユーザーの期待に応え、ビジネスの成長を促進するために、レスポンシブデザインを取り入れることは重要なステップとなります。これからの時代において、すべての企業がこのデザイン戦略を検討する必要があります。
#LP #MARUTTO #WEBデザイン #企業ブランディング #採用ブランディング
学生は採用サイトのここを見ている!
2024.7.1

学生は採用サイトのここを見ている!

学生による求職活動の手段はここ数年で大きく変動しています。 自分が希望する会社を探す方法として挙げられるのが、大学からの紹介、リクナビやマイナビ、オファーボックスといった求人媒体、SNS、そして企業の採用サイト(採用情報)です。 各企業で力を入れている手段のひとつとして「採用サイト」がありますが、学生は採用サイトのどのページ・内容を閲覧しているのでしょうか。 学生によく見られている採用サイトのページは? ジェイ・ラインはこれまで様々な業界の採用サイトを手掛けていますが、ここ最近制作させていただいた採用サイトのコンテンツ(ページ)の閲覧状況の一部をご紹介させていただきます。 採用サイトのコンテンツ(ページ)として、必ずと言っていいほどあるのが次のコンテンツになります。 〇分でわかる(または、データでみるや早わかりといった表現も) 社員インタビュー 福利厚生 仕事紹介(職種紹介や事業内容など) 募集要項 採用Q&A 座談会・クロストークなど などは、どの採用サイトにもほぼ掲載されている内容になります。 学生が興味を持っているコンテンツは? 採用サイトの定番と言ってもいいコンテンツですが、学生はどれだけ興味を持っているのでしょうか。 そこで、GoogleAnalyticsの解析レポートより、採用サイトの各コンテンツの閲覧割合を出してみました。 ※弊社実績の平均値で割り出した数値となります。採用サイトの構成などにより実際の数字と異なる場合もあり、数値を確約するものではありません。 〇分でわかる・・・8.8% 社員インタビュー・・・8.9% 福利厚生・・・6.4% 仕事紹介・・・2.9% 募集要項・・・6.7% 採用Q&A・・・1.3% 座談会・・・1.7% いかがでしょう。 「〇分でわかる」といった、企業のことを時短で理解できる早分かりコンテンツや「社員インタビュー」のように先輩社員による業務内容や職場の雰囲気・環境などといったの生の声は、学生にとっても共感しやすいコンテンツであり、比較的閲覧されやすい傾向となっているのがわかります。次に働きやすい環境かを表すひとつの指標として閲覧されているのが「福利厚生」となります。「募集要項」は給与面や条件面などが記載されているため、閲覧数も多い傾向にあります。 閲覧されている割合が低い=興味がないではありません。 それらに比べると、「仕事紹介」「採用Q&A」「座談会」といったコンテンツはやや数値が低い傾向にありますが、決して学生たちが興味がないというわけではなく、企業理解を深めるための手段として優先度が低いためです。これらのコンテンツの閲覧数が伸びる時期は、面接期間に多い傾向があります。 つまり、面接の対策としてより企業の情報を知るために閲覧しているということになります。 このように、Z世代と呼ばれる学生は、タイムパフォーマンス(タイパ)を優先していため、限られた時間の中でどれだけ今の自分にとって有益な情報を得られるか、に注力していることがわかります。 閲覧数が低いコンテンツだから必要ない、、ではなく、学生たちの就職活動のタイミングに合わせてコンテンツを公開していく、、というのが学生目線にたったアプローチ方法のひとつなのかもしれません。 効率よく自社の魅力を学生に伝えるためには? 採用サイトの総ページ数が20を超えるものも目にしますが、自社のことをたくさん知ってほしいという思いから、たくさんページ数を作成したからと言って、学生が閲覧してくれるとは限りません。ページが増える=情報が分散されることにもつながりますので、効率よく情報を提供するという観点では、自社の魅力を返って伝えられないことにもつながります。 では、どのようにすればいいでしょうか。 その答えは次回の記事でご紹介したいと思います! せっかく作成しても閲覧してもらえない、、というのがもっとも制作コストのロスにつがなりますので、費用対効果をしっかり出していきたいですよね。 さいごに ジェイ・ラインでは、様々な採用サイトのリニューアルを手掛けてきました。 「閲覧数を上げるためにはどうすればいい?」「サイトの離脱を減らしたい」「面接に来る学生が採用サイトの情報をあまり閲覧してくれていない」など、様々な採用のご担当者様のお悩みに応えています。 最も採用効果を発揮するための採用サイトづくりはどうすればいいのか? 採用支援からスタートして30年を超えるジェイ・ラインだからお応えできることもたくさんありますので、お気軽にご相談ください。 次回は、「さらなる採用サイトづくり」にて、採用サイトづくりのポイントをご紹介していきます。
#採用ブランディング #新卒採用
採用サイトで何を伝えるべき?情報設計の基本を知ろう!
2024.9.14

採用サイトで何を伝えるべき?情報設計の基本を知ろう!

採用サイトは、企業が求職者向けに情報を発信し、企業の魅力をアピールするための重要なツールです。また、採用に特化したサイトは、求職者にとって求人に応募するか判断するツールになります。 働き方が多様化した現代において、求職者が知りたい情報も多種多様。情報に不足があれば、企業と求職者ですれ違いが起きてしまいますし、情報が整理されていない、あるいは多すぎると、今度は必要な情報が伝わらないまま、求職者はサイトを閉じてしまうでしょう。 つまり、採用サイトは企業の「伝えたい」と求職者の「知りたい」を解決する、採用に特化したツールなのです。 はじめに 採用サイトは、いきなり見た目(デザイン)をつくることはしません。まずは、両者の意図や想いをリサーチ・分析して、情報設計を行います。 この「情報設計」という言葉は非常に多くの内容を含むため、その入口として、この記事ではいくつかのポイントをご紹介していきます! 採用サイトの「情報設計」5つポイント 情報の整合性を保つ。 当たり前と思うかもしれませんが、当たり前だからこそ重要なのです。 採用情報を毎年更新する企業は非常に多いです。データは毎年変化しますし、応募手続きや面接方法にも変化があるかもしれません。 情報を設計する上で大事なことは、正しい情報を準備することです。 複数の採用媒体を利用していれば、異なる場所で情報に違いがあると、求職者に不安を与えてしまうため、当然のことですが気をつけておきたいポイントです。 明確に、簡潔に、シンプルに。 シンプルとは、単に情報が少なければ良いということではありません。 誤解を恐れずに申しますと、必要な情報であれば、伝える内容が多くなってしまっても問題はありません。しかし、それが「わかりやすい」場合です。 例えば、この資料読みにくいと感じたことがあると思います。なぜ、読みにくいのでしょう?私は、そういう資料に目を通すときに、読み手のことを考えて書かれていない資料だと思ってしまいます(笑)。 実は、日常の様々なところで情報設計はされています。小学生の夏休みの宿題で描いた絵日記も、情報設計の視点で見ると、文章の内容を図でわかりやすくする情報設計なのです・・・。 話が逸れてしまうため戻しますが、何を伝えたいのか明確ではない・内容が瞬時にイメージできない情報は、たとえ情報量が少なくても理解できず、煩雑です。 一方、伝えたいことがはっきりしている・内容が追いやすい情報は、情報量が多くてもシンプルでわかりやすい情報設計がされているということになります。 また、そういう情報は、箇条書きでまとめるといったテクニックも光っていたりしますよね。 視覚的要素の活用。 先ほどの小学生の絵日記の話ですね。文字だけではイメージしにくい場合は、アイコンや図、写真を用いて視覚的に情報を捕捉してあげることでわかりやすくなります。 また、こうした視覚的要素を取り入れることで、情報にまとまりやリズムをつくることができ、わかりやすい設計にすることが可能になります。 スマートフォンでの閲覧を意識。 多くの求職者がスマートフォンを利用して求人情報を確認します。採用サイトであれば、どのデバイスでもわかりやすく、閲覧しやすい情報設計を心がけることも大切です。求職者の利用シーンに合わせる事で、応募率の向上につながる可能性があります。 UXの最適化。 最後にこれはとても大事なことですが、求職者の視点に立って情報を設計することです。応募フォームへの導線がわかりづらい、入力しづらい、ボタンの場所がわからない、正しく応募できたかわからない等、様々な事象を想定して情報設計をしましょう。 まとめ 採用サイトにおける情報設計は、企業の「伝えたい」と求職者の「知りたい」を解決するための非常に重要な要素の1つです。 また、求職者と企業のコミュニケーションをより良く築いていくことは採用活動においてとても重要です。 弊社は採用実績30年以上、WEB制作実績1,000社以上の実績がございます。専門的なリサーチ・分析、プロフェッショナルな技術で情報設計からデザインまで、効果のある採用サイトを実現します。採用活動でお困りの方、何から始めて良いかわからない方、採用のご相談はお気軽に弊社までお問合せください!
#パンフレット #採用ブランディング
採用サイトと採用パンフレットを併用しよう!
2024.7.1

採用サイトと採用パンフレットを併用しよう!

企業の情報を調べるときに採用サイトに訪れる求職者が多くなりました。 オンラインで好きな時に気軽に訪問できる手軽さを持ちながら、多くの情報を伝えることができる採用サイトは、多くの企業で採用活動に用いられています。 一方で、企業と求職者のリアルな接点で多く用いられる媒体に採用パンフレットがあります。 今回は、そんな採用サイトと採用パンフレットを併用した採用活動をご紹介します。 そもそも採用活動とは? 採用活動とは、求職者へのアプローチから、入社いただいた方の教育・育成・定着まで、採用前後にわたる広い範囲に渡ります。 求職者を多く集めれば良いわけではありません。企業も、求職者も、お互いに「良いね!」と思い合えることが大切です。 募集から内定まで企業と求職者の間で意思疎通を図り、ミスマッチを防ぐことがとても重要なのです。 採用媒体はなぜ必要? 企業と求職者がお互いに理解を深めるために、一体何をすれば良いのでしょう。 説明会、企業の学校訪問等で企業と求職者は接点を持ちます。その時に企業は自社のことを紹介しますが、同時に冊子の配布やウェブサイトへ案内することで、たった一度の接点から多くの情報を求職者へ届けることができるのです。 求職者は一度に多くの企業と接点を持ちます。企業は、その中で興味を集めなくてはなりません。折角、お互いにとって良い出会いがあったとしても、最初のきっかけがうまく作れなければ先に進むことができないのです。 先に進むためにも、求職者が企業に興味を持ち、理解をして、コンタクトを取りたいと思っていただくことが必要です。そこで採用媒体を通じて、企業に魅力を感じて、理解を深めていただくことが重要になります。 採用サイトと採用パンフレットを併用した採用活動 では、どうすれば魅力を感じてもらえる媒体ができるのでしょうか。それは、情報を正しく魅力的に伝えるデザインです。 情報を正しく伝えるとは、企業が伝えたい情報を余すことなく伝えるということではなく、求職者が能動的に情報を集めて理解することです。視線で情報を辿りながら企業の「らしさ」に触れ、「この企業の話を聞いてみたい」と心を動かします。 近年は、採用媒体にウェブサイト・採用パンフレットが多く利用されています。どちらも採用に特化した媒体で、求職者向けに情報を発信します。どちらか一方でも良いのですが、それぞれにメリットがあります。(その違いは別の機会でお話しさせていただきたいです!) そのため、併せて利用することで、より効果的なアプローチが期待できます。 そして、採用サイトと採用パンフレットのデザインを統一することで、企業が採用に力を入れているアピールにもなります。 まとめ 求職者と企業のコミュニケーションをより良く築いていくことは採用活動においてとても重要です。採用サイトと採用パンフレットを採用活動に取り入れてみてはいかがでしょうか。 弊社はWEB制作実績1,000社以上の実績がございます。併せてパンフレットのご依頼も多くいただいております。採用活動でお困りの方、何から始めて良いかわからない方、採用のご相談は採用実績30年以上の弊社にお気軽にお問合せください!
#パンフレット #採用ブランディング
採用担当者 必見!採用サイトをつくる前に自社分析をしてみよう!
2024.9.14

採用担当者 必見!採用サイトをつくる前に自社分析をしてみよう!

求職者が就職活動、転職活動をする際にまず行うのは、自己分析です。自分の強みや弱みを理解し、スキルや経験と合わせて、企業に自身の魅力を伝えられるように準備します。 採用を行う企業側も然り、自社の強みや弱みを しっかり理解した上で、企業の魅力、競合との違いや将来制がきちんと伝わるサイトを作らなければ非常にもったいないです。 今回は、自社分析のために使える、マーケティングフレームワークのひとつ「SWOT分析」をご紹介します。 SWOT分析とは SWOT分析とは、商品やサービスのマーケティング分析を行う際に用いるフレームワークの一つです。分析対象の内部環境「強み(Strength)」「弱み(Weakness)」と外部環境「機会(Opportunity)」「脅威(Threat)」の4つから課題や解決手法を見つける方法です。4つのキーワードの頭文字を取って「SWOT分析」と呼ばれます。 強み(Strength)・・・競合他社と比べたときの自社の強み 弱み(Weakness)・・・逆に競合他社に劣っている部分 機会(Opportunity)・・・市場環境や世の中の流れの中で自社のメリットになるような要因 脅威(Threat)・・・逆に自社にとってデメリットになりそうな外的要因 採用活動におけるSWOT分析のやり方 1. 目標やターゲットを明確にする まず 、分析を行う目的や目標を設定します。 どんな分析でも同じですが、ここがしっかり設定されていないと、正しい分析ができません。 採用活動であれば、応募者数や内定数など数値目標と、どのような人材を採用したいのかといった、質の目標があります。 特に、質の部分の設定には、別に人材像を具体化する「ペルソナの設定」も重要になってきます。ペルソナ設定についてはまた別の機会にご紹介します。 2. 外部環境(機会・脅威)の分析 まず、企業や採用活動そのものに影響を及ぼす外部環境から分析を行います。 Opportunity 機会 例えば ユーザーが増え、市場が拡大している 円安により、海外からの需要がふえている など Threat 脅威 例えば 技術者の需要が増え、採用コストが増加している 新規参入の企業が増え、価格競争が起こっている など 3. 内部環境(強み・弱み)の分析 次に、内部環境の分析を行います。 Strength 強み 例えば 黒字経営を◯年継続している 専門性をもった社員がたくさんいる など Weakness 弱み 例えば ・需要が拡大しているが、社内リソースが不足している ・中心となる事業が1社依存となっている など クロスSWOT分析 4項目の分析が終わったら、それぞれを次のような表にまとめます。 そして、環境同士をかけ合わせて、それぞれの項目で戦略を考えます。 強み×機会 自社の強みと機会を生かして最大化する戦略 強み×脅威 脅威に対して強みを用いて、影響を最小限にする戦略 弱み×機会 機会を生かして、弱みをカバーする戦略 弱み×脅威 今は実行を保留するなど、マイナス要因を判断する戦略 まとめ SWOT分析、クロスSWOT分析を行うことで、自社の強み、弱み、取り巻く環境などを正しく認識し、それらをどう活かせば、現状に最適な戦略を客観的に考えることができます。 採用活動が上手くいかない、採用サイトをどう作ればいいか明確でない時は、ぜひ一度、このSWOT分析を行ってみてください。 弊社では、SWOT分析の実施や分析結果に基づく戦略立案のお手伝いもしております。貴社のニーズに合わせた最適なソリューションを提供いたします。詳細なご相談やお見積もりをご希望の方は、ぜひお気軽にお問い合わせください。
#WEBデザイン #企業ブランディング #採用ブランディング
WEBサイトをリニューアルするタイミングはいつ?
2024.7.1

WEBサイトをリニューアルするタイミングはいつ?

みなさんの会社のホームページが新規公開、または前回リニューアルされたのはいつでしょうか?5年前?それとも10年前でしょうか? インターネットの技術やWEBデザインのトレンドは、進化や変化が目まぐるしく、もし、10年間一度もリニューアルされていなければ、いつのまにか、使えない技術や見られないコンテンツが放置されている可能性があります。パソコンの画面では大丈夫でも、スマートフォンやタブレットで見てみると、想定外の状態になっているかもしれません。 今回は、こんな状態ならすぐにリニューアルを検討すべきという点を5つご紹介します。 スマートフォンやタブレットで見づらい 以前のWEBサイトはパソコンで見ることが多かったですが、最近ではスマートフォンやタブレットでみることが多かったり、パソコンを持っていないユーザーもいたりします。 特に企業の採用ページを中心に閲覧している学生の方たちは、ほぼスマートフォンで見ていると思われます。 ご存知のように、スマートフォンの画面は縦長、ノートパソコンやデスクトップのモニターは横長です。 スマートフォンが、今のように普及する以前に作られたままのホームページでは、縦長の小さな画面を想定して作られていない可能性があります。もし、スマートフォンで会社のホームページを開いて、パソコンと同じ画面をそのまま小さくしたような見た目だった場合は、すぐにリニューアルを検討しましょう。 現在は、ホームページ作成の際に、パソコン、スマートフォン、タブレット、それぞれの画面表示にあわせて最適化する「レスポンシブデザイン」で作成することが必須条件です。レスポンシブデザインに対応しているかどうかは、SEOなど検索対策にも有効です。 デザインや画面レイアウトが古く感じる WEBデザインといわれるように、ホームページもデザインされています。 どんなデザインにもトレンド、流行り廃りがありますが、それはデザインが好みや、好き嫌いで作られているのではなく、ある目的に沿ってきちんと設計・計画されて作られているからです。ある目的とは、WEBデザインであれば、ホームページを閲覧しているユーザーに、情報を正しく、わかりやすく伝えるということです。 前述のスマートフォンで見ているユーザーとパソコンのモニターで見ているユーザーにとって、最適なデザインが異なるのは当然です。また、テキストを読んでもらいたい、画像や動画を閲覧してほしい、商品を購入するなどユーザーに何か操作をしてほしいなど、さまざまな目的をもったホームページごとに最適なデザインやレイアウトは異なります。 さらに、新しい技術がどんどん生まれるネットの世界では、デザインの考え方の大きな変化もたびたび訪れています。10年一昔という言葉がありますが、ネットの世界では、5年、もしかしたら3年でも古く思われてしまうかもしれません。 目的の情報に辿りつきにくい ホームページが公開された時のまま、何も更新されていないということはないと思います。日々、情報を更新されたり、新しいコンテンツを追加されたりして、数年が経っているという場合もあるのではないでしょうか。 公開時は、すぐ目的の情報に辿りついたのに、いつのまにかその情報までのクリック(タップ)数が増えていたり、メニューやボタンがたくさん増えていたりしないでしょうか。最悪なのは、リンク先のページがなくなっていることに気づかなかったりすることです。 デザインの項目でご紹介したとおり、ホームページは作成時のコンテンツや情報内容が最適な状態で伝わるように設計されています。 その後、新しい情報が追加されたり、想定していなかったコンテンツが追加されると、建物を増築するようにページが加えられていき、最初は想定していなかった経路が生まれたり、行き止まりの構造になってしまったりする場合もあります。 毎日見ていると気づきにくい場合もありますので、一度、初めてそのホームページを見る気持ちで閲覧してみると、よくわかるかもしれません。 その技術はもう使用できません Flash(フラッシュ)という言葉を聞かれたことはありますか?もしくはトップページなどにこのバナーとインストールを促す表示が出ていないでしょうか。 Flashは、Macromedia社(現在のAdobe社)が開発した、画像や音楽を組み合わせて、アニメーションなど動きのあるコンテンツを作り、ホームページに表示させるための技術です。以前は多くのサイトで使用されていましたが、動画技術の進化やセキュリティーの問題などがあり、2020年末でサポートが終了しています。 https://www.adobe.com/jp/products/flashplayer/end-of-life.html トップページのメインビジュアルなど、一番目立つところに使われることも多かったので、気付かないということはないと思ますが、もしFlashコンテンツを使用したままであれば、すぐにこの部分だけでもリニューアルしてください。 見た目の問題だけでなく、セキュリティーのリスクから、サイバー攻撃を受ける可能性もあります。 すぐに更新できない 自社のホームページで、お知らせのテキストや商品画像の差し替えをするだけでも、ホームページを作ってもらった制作会社さんなどに依頼しないといけない。という状態ではないでしょうか。 以前、もうかなり前になりますが、ホームページを知識なく更新することはかなり難しく、更新ミスにもつながってしまいました。しかし現在では、頻繁に更新を行うコンテンツやページがあれば、CMSという技術をつかい、管理画面から、ホームページを公開されている側で簡単に更新ができるように作成することが主流となっています。 パソコン操作技術が全くいらないわけではないですが、Wordを使ったり、ブログなどを書いた経験をお持ちなら、十分ご自身で更新を行っていただけます。 ただし、ホームページの作成時に、どこを、どのように更新したいのかを決めておく必要がありますので、リニューアルの際は制作会社さんとしっかり相談しましょう。 まとめ いかがでしたでしょうか。 ホームページはお店の看板や外観と同じです、古臭かったり、時代遅れだと思われてしまうと、ビジネスに大きく影響します。 自社のホームページが、この中の1つにでも当てはまるようなら、すぐにリニューアルされることをおすすめします。
#WEBデザイン #企業ブランディング #採用ブランディング
Webフォントの基本的な特性サイトパフォーマンス向上の方法を解説
2024.7.1

Webフォントの基本的な特性サイトパフォーマンス向上の方法を解説

Webフォントは、デバイスを問わず同じフォントを使用できるという特性があり、沢山のユーザーに使用されています。私も、コーディングする際にwebフォントを読み込み使用しています。 本記事では、サイトのパフォーマンスを上げる観点から、webフォント(主にGoogle Fonts )を使用する際の特性と気をつける点についてまとめました。 webフォントの特性 フォントデータのファイル容量 特に日本語や中国語の場合は文字数が多いため重たいです。「Noto Sans JP」は1ウェイトあたり1.6MBあるため、「Regular (一般的な太さの文字」「Bold(太めの文字)」の2種類を利用すると3.2MBになります。Googleの推奨は1ページあたり1.6MBで、これはすべてのリソース(画像、スクリプト、スタイルシートなど)を含む合計サイズです。したがって、フォントだけで3.2MBを使用するのはページ全体のパフォーマンスに大きな影響を与えています。 https://developer.chrome.com/docs/lighthouse/performance/total-byte-weight?hl=ja FOIT (Flash of Invisible Text) フォントデータをダウンロードしている間にページの描画が止まります。その為、サイト表示速度の低下に繋がります。 FOUT (Flash of Unstyled Text) webフォント読み込み時に代替フォントを表示し、フォントダウンロード後にフォントを置き換えるプロセスです。置き換わる際にチラつきやレイアウトシフトに繋がります。 キャッシュの挙動 当該ページで1度ダウンロードされたフォントデータは一定期間キャッシュされます。(2回目以降キャッシュされたフォントデータを使用するので、キャッシュ期間中はダウンロードされないです。) フォントデータの読み込み時間中のテキストの扱いは、FOITとFOUTのどちらかを選択して構築進める事になります。 フォントの読み込みを効率化する基本施策 必要ないフォントは読み込まない 構築時に不要なfont family, font-weightを一緒に読み込でいる事はありませんか?フォントの種類、太さ、斜体の違いで1つのフォントデータになります。ページに不要なフォントデータは読み込まない事が、一番重要です。ですので、外部からフォントを読み込まないのが最速です。デザインする時から、あまり多くの種類のフォントを使用することは表示速度にも影響すること理解しておくことも大事だと思います。 cssファイルに@importを使用せずに、htmlの<head>内で読み込む。 cssファイル内で読み込む@importに対して高速化する手段がございません。その為、フォントデータの読み込みは<head>内で行う事が基本となります。 Google Fontsを使用する際はリクエストを連結させて、まとめて記述する。 複数に分けてリクエストを記述するのは、余計な通信が発生します。なので、まとめてリクエストする事で通信の回数を少なくするのは基本になります。Google Fontsで設定を行う際は、複数のフォントもまとめて設定するようにしてください。 セルフホスティング フォントデータをダウンロードして、自サーバ内に設置して使用します。自サーバに設置することでパフォーマンス的にも安定して使用できます。※通信環境に問題のない環境であれば、CDNを利用した場合と比べても速さにあまり差はないみたいです。ダウンロードするデメリットとしては、更新が反映されないという事。(逆にサーバーにアップしたものから変わらないという事です。) サブセットを使用する。 この機能については、セルフホスティングした場合のみ使用できる機能です。サブセット化 = 使うフォントだけをフォントファイルにするようなイメージ。日本語書体については効果は大きいですが、使用できる条件は限定的だと思います。 まとめ フォントデータの読み込み時間は、サイトの読み込み速度、レイアウトシフトにも影響します。それはLighthouse(Googleが無料で提供しているWebサイトを分析・診断するための機能)の採点に反映されますのでSEOにも影響がでるということになります。 ですので、Webフォントの使用についてはメリット・デメリットをデザイン面からも理解していただき、コーディングの際もページに不必要なフォントデータは読み込まないなどの当たり前な事をきちんと守って設定することが大事です。 ジェイ・ラインでは、サイトのパフォーマンスも考慮しながら最適な採用サイトの制作を行っています。 質の高い魅力的な採用サイト制作を検討しているご担当者様は、お気軽にお問い合わせください。
#LP #WEBデザイン #採用ブランディング
Image 02

CONTACT US

お問い合わせ

ジェイ・ラインは「採用」の課題を
解決するサービスを提供しています。

採用のお困りごとがございましたら、
まずはご相談ください。