WEB(ホームページ)制作会社better standars

Blog of Better Standard

Webサイト制作やデジタルマーケティングのブログ

日本語WEBフォントとHelveticaやDINに似ているフォントをGoogle Fontsで探す

better standard editorbetter standard editor

WEBフォントを利用してWEBサイトやWEBページを制作するケースが多くなってきています。

欧文については、フリーで使える Google Fonts のおかげでアンチエイリアスがついていて綺麗な曲線が表現されているフォントをWEBページにも使えるので、フォントの選択肢が増えることでデザインの幅が広がると同時に、テキストデータですのでSEO的にみても効果があります。とくにモバイル環境から閲覧される場合においては、モバイル端末の画面がPCに比べるとほぼ倍と詳細微細になってきているために、そのままPC用に用意した画像で表現すると荒く見えることもあり、できるだけテキストでの表現を心がけた方がデータの軽さ的にも検索エンジンなどの機械的な読み上げなどの面からも望ましいです。画像もPC用に表示するファイルのほかに倍程度の画像を用意すれば、綺麗に表示することも可能ですが、ただでさえ通信帯域が細い環境に4倍ほどの情報を配信することが適当ではありません。(倍といっても縦横あるのでピクセル数は4倍になります)

Macでの閲覧環境においては、かなり以前よりブラウザでみるWEBページのフォントはスムースな表示となっていますが、Windowsデバイスでは、現在でもアンチエイリアスなしで表示するのがデフォルトとなっています。フォントをスムースにするCSSプロパティーやハックなどもありますが、一般的にWindowsのマシンではスムーズなフォントで表示されない現状があり、Windowsでもスムースなフォントで表示させたいということも多いですし、フォントを変えることで雰囲気が変わってきますので、ユーザーに与える印象も変わってきます。是非とも効果的に使いたいところですが、デメリットや使い方にはどのようなものがあるのでしょうか?

日本語こそWEBフォントを使いたい

現在のWEBフォントの利用環境が劇的に改善しているなかで、WEBページのほとんどを占める日本語にこそ、WEBフォントを使いたいと考えるのは自然な流れであるとおもいます。しかしながら、日本語フォントについては、文字数の多さ、画数の多さなどフォントデータ自体が重くなる傾向もあり、なかなか利用する機会がないのが現状です。利用するには、フォントファイルをサーバーにアップするか、Googleが提供している Google noto sans を代表とした早期アクセスの中から使うか、Adobe Typekitなどの有料のサービスを利用することになります。

日本語のWEBフォントサービス

WEBフォントのツールやサービスが増えており、それにともない使える日本語フォントも増えていますが、ファイルの重さもあり、全面的に実用できるケースは増えてはいないです。Adobe Typekitは Creative Cloud を利用していればWEB上の設定で、モリサワやフォントワークス、字游工房などの有名どころのフォントを使用することができます。500,000ページビュー/月までであれば、Creative Cloud に付随しているライセンスで使えますし、25,000ページビュー/月 までであれば無料で使用することが可能です。ただ、日本語のフォントデータが重いのか、フォントの読み込みに多少のタイムラグがあり表示が一瞬ずれてしまうように見えることもあります。体感的には Google Fonts の方が表示が早いような気がしますが、メニューや見出しやキャッチコピーなどのポイントに使用する程度にとどめておいた方が無難です。Fonts.comは、250,000 ページビューまで月9.99ドル。appleも使っている AXIS Font Japaneseを使うことができます。また、日本語のWEBフォントについては、ライセンスについても注意が必要です。使えるからといってサーバーにアップして使うことが許されていないフォントも多くありますので、フォントをサーバーにアップして使う場合にはライセンスを一度確認したほうがいいでしょう。

AXIS Font Japanese

AXIS Font Japanese @Fonts.com

レンタルサーバーのサービスにWEBフォントのライセンスが付いている場合がある

レンタルサーバーによっては、使用できるフォントに限りがある場合もありますが、これらの日本語WEBフォントをサービスとして無料で提供されているケースもあるので、フォントを気にしたいなどの場合は、サーバーを選ぶ際に注意してみてもいいでしょう。

モリサワフォントが使えるレンタルサーバー

実際に使用するには読み込みの設定を行う

使い方はCSSで読み込むフォントを指定、フォントを表示させたいところにフォントを指定すればフォントをWEBフォントで表示することができます。下記は、Google FontsのM+ 1pを読み込んで表示する方法です。

<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
.wf-mplus1p { font-family: "Mplus 1p"; }

いまのところは欧文フォントだけでも使いたい

日本語フォントの現状については、使えるケースも限られますが、フォント自体が軽い欧文フォントでは見出しやメニュー、キャッチコピーなどでも使えることもありますし実際に使っていますので、ゴシック体の有名どころである、HelveticaやDINに似ているフォントをgoogle fontでピックアップしてみました。

HELVETICA(ヘルベチカ)

ヘルベチカは1957年にスイス人のマックス・ミーディンガー、エドゥアルト・ホフマン(Eduard Hoffmann)が発表した活字組版用の書体です。すっきりとしていてとても使いやすくいろんなところで使われています。視認性も良く是非、WEBサイトに使ってみたいとことろですが、WEBサイトでそのまま使う場合には画像にして利用するしかないのが現状です。Macには最初からインストールされていますが、Windowsでは入っていなく、Google Fontsには取り扱いはありませんので、形が似ているものをピックアップしたいとおもいます。

Google Fonts から

  • hi! helvetica alternatives
    (this is Open Sans)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

  • hi! helvetica alternatives
    (this is Lato)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

  • hi! helvetica alternatives
    (this is Noto Sans)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

ヘルベチカを使ったロゴ

実は、ヘルベチカを元にして作成されたロゴもいくつかあります。




アメリカン航空とルフトハンザ航空は近年ロゴをリニューアルしていますが、微調整といったところです。

こちらに、ヘルベチカを使ったロゴの記事があります。パナソニックもヘルベチカベース?
20 famous logos made with Helvetica

DIN(ディン?)

「DIN」というのは「ドイツ工業規格(=Deutsches Institut für Normung)」の略称で、交通標識や行政などの書類や看板表示などの工業用に設計された、わかりやすく、見やすく、シンプルで飾り気のないフォントです。現在ではその見易さなどから商業用の看板などにも多くつかわれています。

Google Fonts から

  • hi! DIN alternatives
    (this is Ropa Sans)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

  • hi! DIN alternatives
    (this is Abel)

    Apparently we had reached a great height in the atmosphere, for the sky was a dead black, and the stars had ceased to twinkle. By the same illusion which lifts the horizon of the sea to the level of the spectator on a hillside, the sable cloud beneath was dished out, and the car seemed to float in the middle of an immense dark sphere, whose upper half was strewn with silver. Looking down into the dark gulf below, I could see a ruddy light streaming through a rift in the clouds.

better standard editorbetter standard editor

レスポンシブルWEBデザインでパソコンからもスマートフォンからも同じデザインで閲覧してもらうメリットとデメリット

better standard editorbetter standard editor

レスポンシブルWEBデザインとは

Webサイトはスマートフォンの利用が多くなり、BtoBのサイトであっても、50%以上がスマートフォンからのアクセスというWebサイトも珍しくなくなっています。弊社が管理しているWebサイトでも90%以上がモバイル、タブレットからというWebサイトもあります。こうした利用するデバイスが変化してきている世の中の流れからスマートフォンへの対応を行わないのは不自然ですし、合理的な判断ではないでしょう。

レスポンシブルWEBデザインとはアクセスしてくるデバイスに応じて適切な画面表示を行うWEBデザインを指しています。アクセスしてくるデバイスは多岐にわたり、画面のサイズも様々です。大きく分けてPCとスマートフォン、タブレットがあります。
PCでも画面サイズは、代表的なサイズのFullHD (1920×1080)から4K (3840×2160)、5K(5120×2880)とサイズ展開も幅が広くなっています。スマートフォンについては、日本国内においてはiPhoneのシェアがかなり高く60%を超えているとのデータもあり、そのiPhoneのサイズ展開は、iPhoneSE(320×568)、iPhone7,8(375×667)、iPhone7Plus,8Plus(414×736)、iPhoneX(375×812)といったとものになっています。Androidの端末においては、Sony Xperiaが国内ではシェアが高く、画面のサイズは、SO-02J(360×640)などがある(360×640)を多くの端末で採用されています。タブレットについては、iPad(768×1024)などがありますし、他にもあります。さらに、スマートフォン、タブレットについては目の近くで見ることを想定しているのか、画面の詳細度がほぼ2倍にちかくなっていますので、綺麗に表示させるためにはこのサイズの倍の大きさの画像を用意する必要があります。こうしてみてみても微妙に違う画面サイズのデバイスが数多く存在しており、それぞれに最適なWEBサイトのコンテンツを提供することができるのがレスポンシブWEBデザインです。

参考データ

PC画面サイズ

  • FullHD (1920×1080)
  • WUXGA (1920×1200)
  • WQHD (2560×1440)
  • WQXGA (2560×1600)
  • 4K (3840×2160)
  • 5K(5120×2880)

スマートフォン・タブレット画面サイズ

  • iPhoneSE(320×568)
  • iPhone7,8(375×667)
  • iPhone7Plus,8Plus(414×736)
  • iPhoneX(375×812)
  • Android SO-02J(360×640)
  • iPad(768×1024)

レスポンシブルWEBデザインは、スマートフォン向けの画面をPCからアクセスした場合に表示するHTMLと同じHTMLが適用されますが、CSSでその表示を切り替え、複数の画面サイズでも同じような雰囲気でユーザーが閲覧できるようにするものです。また、レスポンシブルデザインでも画面横幅100%に応じて画像サイズなどが変化するリキッドレイアウトデザインというものも可能でデザインの表現の幅も広がっています。

レスポンシブルデザインのメリット

別々にHTMLを用意する必要がないので、HTML側のメンテナンス性が向上します(逆にCSSのメンテナンス性は若干落ちます)。スマートフォン向けのWEBサイトを用意する場合はURLが別々のものになってしまう場合もありますが、レスポンシブルデザインの場合は、URLが別々のものにならないため、SEO効果も期待できます。また、余計なリダイレクトがなくなるため、高速にページを表示させることができます。現在PC向けのWEBサイトがある場合も、レスポンシブルデザインを追加することが可能です。PCでみてもモバイルからみても同じようなデザインでサイトを閲覧することができるため、一般的には閲覧ユーザーもどのWEBサイトを見ているのかの認識が容易で、ブランド認知向上に効果があるといわれています。別々にファイルを用意するより初期の制作工数が軽くなる傾向があります。

レスポンシブルデザインのメリットまとめ

  • URL同一になるためSEO効果が期待できる
  • メンテナンスが軽くなる
  • 初期構築工数が減る
  • どのデバイスから見ても同じような印象を与えることができる

レスポンシブルデザインのデメリット

そもそもモバイルとPCでは利用するシーンが同じではなく、それぞれに最適なユーザー体験を提供するということを考えると一緒にしてしまうことに無理があるという考えもあります。モバイルサイト、PCサイト、モバイルのアプリなど多くの環境でも快適に利用できるようにするのがベストだとも言えます。また、PCでは表示しているが、モバイルの場合には表示しないというケースがレスポンシブルデザインでは発生することがあります。その場合、回線速度を気にしなければならないモバイル環境に対して必要のないデータを送ってしまうということが起き、結果的に必要ないデータをユーザーにダウンロードさせてしまいます。当然ですが、コスト面を見ても、PCサイトだけ、モバイルサイトだけのWEBサイト制作より工数が増えるためその分割高となってしまいます。

SEOを考えるとAMP(Accelerated Mobile Pages)への対応の方がいいのでは?

PC、スマートフォン別々にHTMLを用意する場合の方が最適なケースもあるでしょう。検索エンジンのgoogleはモバイル環境でも高速で快適なブラウジング環境を提供するWEBサイトを優先的に上位表示するアルゴリズムを採用しています。そのWEBサイトの仕様がAMP(Accelerated Mobile Pages)と言われるものになり、モバイルでWEBページをを閲覧するときに高速にコンテンツを表示できるフレームワークです。モバイルでの検索結果ページに対応しているWEBページの場合にはAMPとラベル表示がされています。
先ほどURLがモバイル、PCで統一となるためにSEO効果が高いという表現をしましたが、モバイルに限っていえばAMP対応した方がSEO効果は高い可能性もあります。ただ、その場合同じコンテンツに対してURLが複数存在るうような仕組みとなってしまうと、被リンクという概念では分散してしまいますので、それぞれSEO対策が必要となってしまいますので、悩ましいところではあります。ただAMP対応していないために検索順位を落とすということはないようです。
AMP プロジェクト

レスポンシブルデザインのデメリットまとめ

  • 初期工数が増える
  • 余計なデータをダウンロードさせてしまうためページが重くなる
  • AMP対応の方が高速、検索結果の表示にAMPラベルをつけることができる
  • ユーザー体験がアプリなどに比べると制約がある

SEOとレスポンシブルデザイン

URLが別々にならないので、googleもレスポンシブルデザインを推奨しています。下記のようにあげています。
https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ja

  • URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
  • 対応するパソコン用ページやモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、ページへのインデックス プロパティの割り当てが正確に行われます。
  • 同じコンテンツのページをいくつも維持管理する手間が省けます。
  • モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
  • ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。ユーザー エージェントに基づくリダイレクトはエラーが発生しやすく、ユーザー エクスペリエンスを損なうおそれがあります(詳しくは、ユーザー エージェントを正しく検出するをご覧ください)。
  • Googlebot がサイトをクロールするために必要なリソースを節約できます。同じコンテンツのページが複数存在すると、別々の Googlebot ユーザー エージェントが複数回クロールしてすべてのバージョンを取得する必要があります。一方、レスポンシブ ウェブ デザインの場合は、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。Google によるクロールの効率が上がると、サイト内のより多くのコンテンツがインデックスに登録され、適切な間隔で更新されることにつながります。

先ほどAMPについて書きましたが、モバイルフレンドリーとAMPでは目指しているところが異なるようですが、それぞれに最適なコンテンツとユーザー体験を提供できればいいですが、費用対効果などを考えるとレスポンシブルWEBデザインを採用するのが現時点でメリットが大きいです。

better standard editorbetter standard editor

googleが提唱するSEO対策の基本(検索エンジン最適化スターターガイド)

better standard editorbetter standard editor

検索エンジンといえば日本国内においては、Yahooも採用していることからシェア90%以上だと思われるgoogleが検索エンジン最適化についてのガイドラインを公開しています。2010年に公開された情報で、とても基本的な内容になっていますが、Googleが考える ”検索エンジンとは?” という疑問に対しての理解も進みます。

検索エンジン最適化スターターガイド(PDF)

目次は下記ようになっています、基礎からサイト構造、ナビゲーション、クローラー対策、モバイル、プロモーションと分析となっており、個人的にはこれをまずやっておいて、コンテンツを更新していくだけでかなりの効果があるのではと考えています。(アフィリエイトサイトなど熾烈なキーワードについてはこれでは物足りないこともあるでしょう)

SEOの基礎

  • 適切なページタイトルを付けよう
  • descriptionメタタグを設定しよう

サイト構造の改善しよう

  • URLの構造を改善しよう
  • ナビゲーションをわかりやすくしよう

コンテンツの最適化

  • 質の高いコンテンツを提供しよう
  • 適切なアンカーテキストを書こう
  • 画像の利用を最適化しよう
  • 見出しタグを適切に使おう

クローラーへの対処

  • robot.txtにを効果的に設定しよう
  • リンクにnofollow属性を活用しよう

モバイルSEO

  • モバイルサイトをGoogleに知らせよう
  • 携帯ユーザーを適切に誘導しよう

プロモーションと分析

  • 正しい方法でサイトを宣伝しよう
  • 便利なツールを活用しよう

すべて重要で検索エンジンからの集客を少しでも考えているのであれば、これらの基本的な最適化は必要です。また、CMSとの組み合わせでコンテンツから自動でディスクリプションを作成できるカスタマイズやプラグインなどもありますので、これらを使って効率化することも可能です。

弊社では、これらGoogleが提唱するサイトの検索エンジン最適化を行ったコーディング、実装を行っています。
お気軽にお問い合わせください。

検索エンジン最適化スターターガイド(PDF)

better standard editorbetter standard editor

WordPressをCMSにおすすめする理由について

better standard editorbetter standard editor

Webサイトのコンテンツ管理を行うツールは、CMS(Content Management System)と言われています。キャンペーンサイトなどではCMSを使わないことも多いですが、現在のWebサイトでは、何かしらのCMSを導入するケースがほとんどです。このCMSをWebサイトに導入することによって得られるメリットは、リニューアル時にコンテンツの再利用ができたり、サイトのあらゆる箇所で一度登録したコンテンツを再利用できたり、公開日時を設定することができたり、公開までの承認フローを導入できたりと多くを挙げることができます。

CMSという視点で世の中にあるツールを見てみると、Drupal、MovableType、Xoops、WordPressや最近ではPhotoshopやIllustratorを販売するAdobeもCMSとデジタルマーケティングソリューションを販売していたりします。

CMS導入の主なメリット

  • 誰でもWebサイトを更新するができる(サイト価値の向上)
  • 記事公開日時設定ができる(サイト運営にメリット)
  • コンテンツの再利用ができる(サイト価値の向上)
  • コンテンツの表示をサイト内のあらゆる箇所で可能(サイトの回遊性が向上)
  • リニューアル時にコンテンツの再利用が可能(コンテンツが資産化する)
  • コンテンツ公開フローを設定できる(サイト運営にメリット)

企業やサイトの規模によっても最適なツールは異なってくるはずですが、そのなかでも多くのケースにフィットするのではと思われるWordPressを弊社ではオススメしている訳ですが、何故なのかを検証してみます。

WordPressは、オープンソースでプログラムのソースコード全てが公開されており、コード自体も改変することも可能です。世界で一番利用されているブログツールでもあります。理にかなったコード構成、セマンティック Web、コードやデザインの美しさ、Web 標準、ユーザビリティなどを意識して開発されており、無料でダウンロードして使うことができます。カカクコムのコーポレートサイト、クックパッドのコーポレートサイトもWordPressを使って構築されています。(2017年8月現在)

もともとブログのツールとして開発されているという面がありますが、カスタマイズすることで、高機能なCMSとして利用することも可能です。基本がブログのツールという一面からも、ブログやニュース記事など時系列に投稿を行なっていく、配信するという機能は長所となるところでもあります。SNSとの連携やSEOといったマーケティング的な視点でみてもWordPressは低コストにてこれらの機能的なものがカバーできるので、とても優秀なツールだと言えます。

WordPress導入のメリット

  • カスタマイズ性の自由度
  • オープン性(プログラムの改変などが可能)
  • プラグインの充実(最適な機能を実装するのが低コストで可能)

WordPressをCMSと使用するデメリット

セキュリティの問題

Webサイトのツールとして、世界で一番多く使われている、そしてオープンソースというこで、悪意のあるbotなどに攻撃、アタックされる可能性が無名なツールに比べて大きくなってきます。管理画面のログインURLを変更するとか2段階ログインを導入するとか対策は行えますが、利用されている数が非常に多い為にこのような攻撃対象になり得るということを認知しておく必要があります。
また、インターネットで販売や配布されているテーマをむやみに利用することで、サイトが乗っ取られたり、なにかの攻撃の踏み台にされてしまったりすることがありますので、テーマ選び、プラグイン選びは慎重に行う方がいいでしょう。

テーマとプラグインの選択の問題

テーマに限らずプラグインについても同様です。公式サイトにあるもの以外のテーマ、プラグインの利用は極力避けるべきです、
また、無料のツールだからと言ってまったく費用がかからないというわけでもありません、セキュリティーの抜け穴はすぐに修正され、アップデートされることが多いですが、アップデートすることでテーマやプラグインの機能を利用できなくなったり、エラーになり、サイトの運用に問題が発生することもありますので、適切な対応ができる人を雇用するか、外注する必要があります。

特に注意したいのが、テーマの選び方です。無料や安価なテーマは多く販売されておりますが、独自のカスタマイズのために、メンテナンス性が低いものやコンテンツが増えてきた際に動作が重くなるものがあります。また、情報設計の視点から見た場合には、Webサイトのあるべき情報構成と配布されているテーマの構成がフィットすればいいですが、なかなか適切なテーマを見つけるのも難しいのが現状です。

WordPress導入のデメリット

  • セキュリティー面での心配事

WordPressを採用するにあたって、メリットとデメリットについて書いてみましたが、総合的にみて使いやすいCMSであるということから弊社ではおすすめさせていただいております。

better standard editorbetter standard editor