• TOP
  • コーポレートサイト

コーポレートサイト

ゴシック体と明朝体、どっちにするべき?
2024.6.27

ゴシック体と明朝体、どっちにするべき?

普段、生活している中で何気なく目にしている看板やポスター、新聞、テレビやスマホなど、世の中には様々な文字があふれています。それらの文字を見て「どんな情報が書かれているか」を気にする人はいても「どんな文字が使われているか」を気にする人はほとんどいないでしょう。 色にイメージがあるように、文字もまた、読む人に印象やイメージを与える重要な役割を持っています。 今回は、Webサイト制作において欠かせない文字のデザインについてご紹介します。 印象を左右する、文字のデザイン 文字が与える印象の違いについて、まずは下の文字を見比べてみてください。 同じことを書いているはずなのに、それぞれ印象が違うと思いませんか? このように、文字をデザインするために必要なのが「フォント」です。このフォント選びによって、人に与える印象やイメージが大きく変わってきます。 それでは早速、フォントの種類について見ていきましょう。 フォントの基本 フォントには、ひらがな・カタカナ・漢字が含まれる日本語(和文)フォントと英数字・記号の英語(欧文)フォントがあります。 さらに、日本語フォントはゴシック体・明朝体・筆書体・デザイン書体に分けられ、英語フォントはサンセリフ体・セリフ体・スクリプト体・デザイン書体のそれぞれ4種類に分けられます。 ここからは、Webサイトでよく使われる日本語フォントの代表格、ゴシック体と明朝体についてさらに詳しくご紹介します。 ゴシック体 ゴシック体は、文字にうろこ(▲)がなく、縦線と横線の太さが均一にデザインされていて、視認性(目で見たときの認識のしやすさ)が高いのが特徴です。 線が細いと洗練された女性的なイメージに、線が太いとインパクトがあり、力強さや安定感を感じさせます。 遠くから見ても見やすいため、看板やポスター、道路標識などでよく見かけます。 明朝体 明朝体は、はねやはらい、文字にうろこ(▲)があり、縦線が太く横線が細いデザインで、可読性(読みやすさ)が高いのが特徴です。 線が細いと繊細で上品なイメージに、線が太いと和のイメージが強く、伝統や信頼感を感じさせます。 読みやすく疲れにくいため、印刷物(新聞や学校の教科書等)の長い文章によく使われています。 まとめ ゴシック体と明朝体、どっちにするべきか。 それぞれの特徴をご紹介しましたが、実際には数えきれないほどのフォントが存在します。選んだフォントに文字の大きさや太さ、色を組み合わせることで、与えたい印象やイメージをさらに強めていきます。 採用サイトを制作するときに重要なのは、その採用サイトを誰に見せたいか、ターゲットを明確にすることです。ターゲットを明確にした上で、そのターゲットに刺さるデザインを、弊社ディレクター・デザイナーがご提案いたします。まずはお気軽にご相談ください。
#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デザイン #採用ブランディング
Web制作会社の営業必見! 新規顧客獲得テクニック
2024.8.9

Web制作会社の営業必見! 新規顧客獲得テクニック

営業に携わっている方であれば誰しも成果を上げたいと思うもの。 今回はお客様の心を掴み、成果を出すための営業のコツをご紹介します。 ターゲティング 売れる営業の第一歩は、正しいターゲティングから始まります。ターゲティングが適切でないと、どんなに優れた商材や営業スキルを持っていても成果を上げることは難しくなります。 取り扱う商材がどのような業界にニーズがあるのか見極め、かつ受注角度の高いお客様へコンタクトを取ることで成約率はグッと高くなります。 弊社ではMARUTTO(まるっと)コーディングサービスというコーディング代行サービスを展開しており、このサービスにおける営業方法を例に解説します。 サービスをご利用していただくお客様の大半はWeb制作会社です。 構築のニーズはあるが、リソースが足りないというお客様が多く、そういった背景からWeb制作会社を中心にサービスのご紹介をしています。加えて、依頼先企業を探している時間もないというお客様は非常に多く見受けられます。 そこで、そういった企業に対しテレアポやルート営業などを行うことで、ちょうど依頼先を探していたという流れから受注につながるケースが多いです。 商材に対する知識をつける 次に重要なのは商材に対する深い知識を身につけることです。 営業する側が自信を持って商材を説明できるようになるために、商材の特性や利点をしっかりと理解する必要があります。 お客様から受けた質問に対して、回答できなかった部分は振り返りの時間を設けて次回以降回答できるように日々引き出しを増やしていくことも大切です。 お客様の課題や要望を汲み取る 営業を行うにあたって、商材の説明やアピールだけでは不十分です。お客様はどのような課題を抱えているのか、またどうなったら良いと思っているのか会話の中で汲み取る必要があります。 その課題や要望を、提案する商材でどのように解決できるのか考えることも売れる営業のコツです。 つまり、その商材が、お客様にとってどのようなメリットを与えるのか提示することが大切です。 例えば、キャンプに行くのでスニーカーが欲しいと思っていて靴屋さんに来店されたお客様がいるとします。そのお客様に対して、イチオシだからという理由でピンヒールのパンプスをおすすめしても残念ながら購入意欲は起きませんよね。極端な例ですが、お客様一人ひとりの声に耳を傾け、お客様にあったかたちで商材を提案する力がクロージングにも繋がってきます。 そのためには、お客様とのコミュニケーションを通じて、ニーズや課題を引き出すヒアリング力を磨きましょう。オープンエンドな質問を用いることで、考えや気持ちをより深く理解することができます。 また、お客様の話をしっかりと聞き、共感を示すことで信頼関係を築くことができます。お客様が安心して自分の悩みや要望を話せる環境を作り出すことが重要です。 不安を解消する お客様の課題や要望を汲み取った提案を行った上でも、商材を購入する際には、不安や疑問を抱くことが多いです。 これらの不安を解消することで、購買意欲を高めることができます。お客様の不安を解消するためには、具体的なデータや証拠を提示することが効果的です。 加えて、よく質問がある項目をあらかじめお伝えする、会話の中で質問があった際には明確な回答を行うことでお客様の不安を取り除き、安心感を持っていただけます。 反対にメリットだけを伝えるだけでなく、あえてデメリットになり得る事柄も事前に提示しておくことで、より商材への説得力が増します。 クロージング 最後に、クロージングが営業の成功を決定づけます。適切なタイミングと方法でクロージングを行うことが重要です。 適切なタイミングはお客様の購買意欲が高まったタイミングを見極めることが重要です。 STEP01〜04までで既に信頼関係の構築と顧客理解はできていることと思います。お客様の不安や疑問を丁寧に解消し、購入のメリットを具体的に示します。不十分であればクロージングに入る前に該当のSTEPへ戻り、丁寧に提案しましょう。 クロージングの方法は「今、この条件でご提供できます」といった限定的な条件を提示し、お客様の決断を後押しします。 例えば、価格で最後決めかねているお客様がいる場合、通常であれば難しいが、今回限定で予算に合わせた価格で提案するといった方法も効果的なクロージングになります。 さいごに お客様の心をつかみ、売れる営業を行うためには以上のポイントを押さえ、日々の営業活動に活かすことで、成果を上げることができるでしょう。継続的な努力と学びを通じて、さらなる成長を目指しましょう。 弊社でもMARUTTO(まるっと)コーディングというコーディング代行サービスを展開しております。 Web制作会社ですので、コーダー以外にもディレクターやデザイナーも在籍しており、社内でWebサイト制作も行っています。 30年以上Web制作に携わってきたノウハウを活かし、品質は担保した上で他社と比較してもお安くコーディングサービスをご提供できるかと思いますのでお困りの際はぜひお気軽にご相談ください。 コーディングサービス:MARUTTO(まるっと) https://www.jlweb.jp/project/marutto お問い合わせ先 メール:coding@j-line.co.jp 電話:06-6110-8717 (平日10〜19時) Chatwork ID :jline_marutto
#MARUTTO
コーディング代行とは?外注先を選ぶポイント!依頼時の疑問や不安についてまるごと解説!
2024.7.1

コーディング代行とは?外注先を選ぶポイント!依頼時の疑問や不安についてまるごと解説!

サイト制作において重要なコーディング作業。 今回はこの作業を代行するサービスについてよくある疑問や不安などを取り上げながら、ご紹介します。 コーディング代行とは WebサイトやLP(ランディングページ)などをサイトに表示できるようなかたちで構築していくコーディング作業を代行するサービスです。 コーディング代行のメリット・デメリット メリット:デザインは作れるけれど、構築に関しての知識を持ち合わせていない場合や、社内のリソースが不足している場合に親和性が高いサービスです。 また、コーディング代行を通じて、企業は内部のリソースを他の戦略的な業務に集中させることができるため、結果的に高いコストパフォーマンスに繋がる可能性があります。 デメリット:デメリットは下記が挙げられます。 初めて利用する方は、どのように依頼すればよいのかわかりづらい 品質が依頼してみないとわからない 費用感がわかりづらい 納期に間に合うのかどうか不安 依頼方法 依頼予定のサイトやページなどの概要や仕様、納期、納品形式を事前に伝えて見積りや対応可否を確認します。その際にデザインデータや要件定義書(指示書)なども共有するとすり合わせがスムーズなので、正確な費用感やスケジュール感を把握することができます。 品質 コーディングサービスのサイトや運営する企業のサイトから制作実績やデモサイトなどを掲載しているようであれば参考にしてみるとよいでしょう。 技術面だけでなく、サポート面も重要です。レスポンスに時間がかかりすぎないか、対応は丁寧かといった信頼性を見極めることも依頼する上で見落としがちなポイントです。 その点も踏まえてまずはコンタクトをとってみましょう。 費用 コーディングサービスの費用は依頼先や依頼内容によって異なります。 一般的にトップページと下層ページ、LPでは1ページあたりの単価が異なります。サイトの顔となるトップページやLPは下層ページと比較すると単価が高めに設定されている傾向があります。 CMS(WordPressなどの更新管理システム)を導入する必要があれば費用はさらに上がります。 しかし、代行サービス会社によってはページ構築費以外に基本料金やディレクション費といった費用もかかってくる場合がありますので、可能であれば一度見積りを取ってみることをおすすめします。 納期 依頼するページボリュームやデザイン、仕様によって大きく異なります。 トップページやLPは下層ページと比較すると時間がかかります。CMSを導入して構築を行う必要があれば更新機能のない静的サイトの構築よりも時間を要します。 構築においては納品や公開前に必ず、テストアップといってデモサイトで一度動作確認や崩れがないか、デザイン通りに構築できているかなどの確認期間が必要になってきます。 依頼前に、テストアップがいつまでに必要なのか提示した上で、対応可能か相談してみるとスムーズです。 選ぶポイント ご紹介してきたように代行サービス会社によって「品質」「費用」「納期」はさまざまです。 例えば、費用は安いが品質がよいものではなく、結果的に修正の追加費用や手戻りで工数がかかってしまった...。ということもよくある事例のひとつです。 トラブルにならないためにも事前に与件をきちんと伝え、不明な点や不安な点があれば潰しておきましょう。必要であれば打ち合わせを依頼し、安心できる代行サービス会社を選ぶようにするとよいでしょう。 さいごに 弊社でもMARUTTO(まるっと)コーディングというコーディング代行サービスを展開しております。まるっとお任せできますよという由来からこのサービス名になりました。 Web制作会社ですので、コーダー以外にもディレクターやデザイナーも在籍しており、社内でWebサイト制作も行っています。 30年以上Web制作に携わってきたノウハウを活かし、品質は担保した上で他社と比較してもお安くコーディングサービスをご提供できるかと思いますのでお困りの際はぜひお気軽にご相談ください。 コーディングサービス:MARUTTO(まるっと) https://www.jlweb.jp/project/marutto お問い合わせ先 メール:coding@j-line.co.jp 電話:06-6110-8717 (平日10〜19時) Chatwork ID :jline_marutto
#MARUTTO
Image 02

CONTACT US

お問い合わせ

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

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