ホームページのデザインを変えるかもしれないWebフォント。広告とホームページ制作のグラッドワークスホームページのデザインを変えるかもしれないWebフォント。>ホームページのデザインを変えるかもしれないWebフォント。時期尚早?ブログ<&lt今日は「立秋」ですが感覚的には真夏。あと1ヶ月で開業14周年を迎えます。>>2017.08.26ブログホームページのデザインを変えるかもしれないWebフォント。時期尚早?皆様おはようございます。八王子市南大沢は薄曇りの朝です。お盆も過ぎて、夏の甲子園大会も終わり、8月もあと少しとなって参りましたが、今日も朝からじんわりと蒸し暑くなっております。それでもなんとなく秋の気配が感じられる気がするのは気のせいでしょうか?ところで今回はホームページのデザインを変えるかもしれない「Webフォント」のお話です。Webデザインの悩みどころの一つ、フォントの問題。ホームページのデザインで悩ましいのは書体の問題。ホームページはいろいろなパソコンで見てもらうものなので書体の選択肢はあまりありません。基本的には閲覧者のパソコンに最初から入っている(インストールされている)書体を使うことになります。使用候補となる具体的な書体を挙げると、Windowsなら8以降は游ゴシックかメイリオ。7以前ならメイリオ一択。ちなみに明朝体の書体はWindows7では綺麗に表示されない傾向なので個人的には避けております。Pゴシックもさすがに古く見栄えも宜しくないので、よほど理由がなければ使う必要はないかと。Windowsでの游ゴシックは使い方によっては読みにくくなることも結構ある(白抜き文字をFirefoxで表示したりすると結構可読性が厳しくなる)ので、Win用にメイリオ、Mac用にヒラギノを指定しておけば無難ではあります。(※メイリオがインストールされたMacではメイリオでの表示になります。)「システムフォント」だけではデザイン的に物足りない?こうしたパソコンに元から入っている書体を「システムフォント」と呼びますが、ウェブサイト全体をシステムフォントだけで構成すると、やはりデザイン的にはちょっと物足りない感じはあります。前までは見た目を良くするために見出しはシステムフォントではない書体で作成したものを「画像」として書き出してホームページに配置する手法が一般的でした。最近はRetinaディスプレイなど、高精細なディスプレイが普及して来ており、標準的な解像度で作成した見出し画像では少々ぼやけた表示となってしまいます。SEO(検索対策)的にも見出しも画像に頼らずテキストで作成してCSS(スタイルシート)で装飾した方が有利。「alt属性」といって画像に文字情報を設定することもできますが、やはりテキストそのものでの見出しの方が有利な様子です。パソコンに入っていない書体が使える「Webフォント」これに対し、最近は「Webフォント」(ウェブフォント)というものも登場しています。書体のデータをインターネット上からダウンロードしてきて表示することができるので、パソコンに入っていない書体がかなり自由に使えるというものです。見出しでも本文でも使用OK。ウェブサイトによってはアクセスすると数秒程度キャッチフレーズなどの入った画面が表示され、その後ホームページが表示されることがあります。いうホームページは大抵Webフォントを使っています。オープニング風の画面を表示させておいて、Webフォントの書体データを読み込むための時間を稼いでいるわけですが、Webフォントのデータはそれだけ「重い」(データサイズが大きい)ということになります。欧文書体の場合はアルファベット26文字とその他記号類があれば済むのでフォントデータは比較的小さいのですが、日本語の場合、文字の種類が大量にあるので書体データも大きくなりがち。そのためインターネットの回線の速度が遅いとWebフォントデータの読み込みに時間がかかってしまうという問題があります。スマホでの閲覧の場合、データ通信量を増やしたくない人が多い(料金的にも速度的にも)と思いますが、Webフォントを使ったサイトを閲覧する場合、書体のデータをいちいちダウンロードするのでデータ通信量を増やすことになってしまいます。現実的対応としては、使用するWebフォントのすべての書体データをダウンロードせず、ある程度絞り込んだ文字のフォントデータのみダウンロードする手法でしのいでいるのが現状です。Webフォントは、文字詰め(カーニング)ができるWebデザインでは文字詰め(カーニング)の問題があります。ひらがなは漢字より横幅が狭いものが多いので、そのぶん「文字詰め」をして文字と文字の間を全体に均等にしたいところです(横書きの場合)が、通常の日本語フォントではこれが使えません。(欧文書体では使えるのですが。)ただWebフォントでは文字詰め情報を持っているものがあり、比較的簡単に文字詰め可能。これ、デザイン的には結構大きいです。イメージに近い書体が選択できて、文字詰めなどもある程度コントロールできると、仕上がりの完成度はかなり進歩すると思われます。Webデザインはどうしても文字組みの自由度の制限が大きく、デザイン的にかなりの妥協をしなくてはならない場面も多かったのですが、Webフォントの導入でホームページのデザインの常識が変わることになるかもしれません。残念ながら、Windows7の標準Webブラウザである「インターネットエクスプローラー(通称「IE」)」では日本語のWebフォントはきれいに表示されなかったりします。明朝系の書体はかなり見づらくなることが少なくありません。書体によっては比較的綺麗に見えるものもありますが、文字のサイズが小さくなると急激に見づらくなる傾向があるので、使うとしても見出しなどの大きな文字限定にされるのがおすすめ。Windows7のユーザーはまだ大勢おられることを考えると、Webフォントの使用はちょっと「時期尚早」な場合があるかもしれません。それでも1年前に比べればWebフォント使用の状況は確実に進歩してきています。あと数年後にはWindowsの世代交代も進み、通信速度も速くなるでしょうから、Webフォントを使用したサイトはかなり増えていると思われます。広告物の制作実績を、このホームページでご確認頂けますチラシやパンフレット、メニューなどの印刷物/ホームページの制作、運営管理/写真撮影やイラスト作成まで幅広く行っています。各種広告制作物の実績の一部を公開中です。制作の実績<&lt今日は「立秋」ですが感覚的には真夏。あと1ヶ月で開業14周年を迎えます。制作の実績印刷物各種とホームページ制作、写真撮影の実例を掲載中。グラッドワークスがご提供できることグラッドワークスがご提供できること広告宣伝の企画立案からデザイン制作まで丸ごとお任せ頂けます。お問い合わせはこちらお問い合わせはこちら広告宣伝やデザインのこと、なんでもお気軽にご相談ください。お客様の声お客様の声お取り引きのあるお客様にお話を伺いました(順不同)。制作実績より、おおよその制作料金を掲載。