hasegawahiroshi.jp

ウェブデザイン ウェブデザイン、承ります。

hasegawahiroshi.jp

急ぎサイトが必要になったら - ウェブデザイン hasegawahiroshi.jp

様々な業態で今も大変な状況が続いていると思います。 既に可能な対策を取っていると思いますが、まだサイト作り(ホームページ作り)に手がつけられていないという方に、失敗しづらいおすすめの方法をご紹介します。 最低限のサイトを […]

hasegawahiroshi.jp 様々な業態で今も大変な状況が続いていると思います。 既に可能な対策を取っていると思いますが、まだサイト作り(ホームページ作り)に手がつけられていないという方に、失敗しづらいおすすめの方法をご紹介します.....

hasegawahiroshi.jp

SSL暗号化についての予備知識 - ウェブデザイン hasegawahiroshi.jp

サイトの暗号化、SSL化について今もお問い合わせが多いので、一般のサイト運営者がどう考えるべきかを簡単にまとめてみます。常時コストをかけて運営されている方にとっては今更な感もあると思いますが、通常のショップオーナーさんや […]

hasegawahiroshi.jp サイトの暗号化、SSL化について今もお問い合わせが多いので、一般のサイト運営者がどう考えるべきかを簡単にまとめてみます。常時コストをかけて運営されている方にとっては今更な感もあると思いますが、通常のショッ...

hasegawahiroshi.jp

wpXクラウドからwpX Speedへ移行して1ヶ月 - ウェブデザイン hasegawahiroshi.jp

先月このサイトのサーバをwpXクラウドからwpX Speedに移行しました。1ヶ月ほど使用しましたが、相変わらず快適なサーバなので安心しておすすめできます。 wpXクラウドとwpX Speedの違い 新機能について 大き […]

hasegawahiroshi.jp 先月このサイトのサーバをwpXクラウドからwpX Speedに移行しました。1ヶ月ほど使用しましたが、相変わらず快適なサーバなので安心しておすすめできます。 wpXクラウドとwpX Speedの違い 新機能について 大き...

hasegawahiroshi.jp

令和2年、あけましておめでとうございます - ウェブデザイン hasegawahiroshi.jp

本日5日が仕事始めです。 昨年はWordPressの案件を多くご依頼いただきました。ただ印象としてはまだGutenbergへの過渡期になっているようで、要件的にGutenbergがしっかりと使えるケースはほとんどありませ […]

hasegawahiroshi.jp 本日5日が仕事始めです。 昨年はWordPressの案件を多くご依頼いただきました。ただ印象としてはまだGutenbergへの過渡期になっているようで、要件的にGutenbergがしっかりと使えるケースはほとんどありませ...

hasegawahiroshi.jp

WordPressの多言語化はプラグイン「Bogo」が便利 - ウェブデザイン hasegawahiroshi.jp

多言語サイトの制作が重なったので、少しまとめておきます。 多言語化を実現しようとするとWordPress単体ではやはり難しくプラグインを利用することになります。いくつか確認したプラグインの中で「Bogo」が唯一の選択肢で […]

hasegawahiroshi.jp 多言語サイトの制作が重なったので、少しまとめておきます。 多言語化を実現しようとするとWordPress単体ではやはり難しくプラグインを利用することになります。いくつか確認したプラグインの中で「Bogo」が唯一の選択肢....

hasegawahiroshi.jp

カラーミーショップのHTMLメールがいろいろ難しい - ウェブデザイン hasegawahiroshi.jp

先日カラーミーショップの「HTMLメール」作成ツールを利用する機会がありました。プランによっては使えないこともあり本格的な利用は初めてでした。ただ使いやすそうな印象と異なり、なかなか思うようにデザインできません。苦労され […]

hasegawahiroshi.jp 先日カラーミーショップの「HTMLメール」作成ツールを利用する機会がありました。プランによっては使えないこともあり本格的な利用は初めてでした。ただ使いやすそうな印象と異なり、なかなか思うようにデザインでき.....

hasegawahiroshi.jp

OSのダークモード設定をウェブサイトでも - ウェブデザイン hasegawahiroshi.jp

PC、モバイルの各OSでは画面全体を黒で統一する「ダークモード(ダークテーマ)」を設定できるようになりました。ウェブサイトでも同様にダークモードにすることが可能です。このサイトでも対応しているので、OSをダークモードにし […]

hasegawahiroshi.jp PC、モバイルの各OSでは画面全体を黒で統一する「ダークモード(ダークテーマ)」を設定できるようになりました。ウェブサイトでも同様にダークモードにすることが可能です。このサイトでも対応しているので、OSをダー...

hasegawahiroshi.jp

カラーミーショップが消費税軽減税率への対応を開始 - ウェブデザイン hasegawahiroshi.jp

7月11日、カラーミーショップは「消費税軽減税率」への対応を開始しました。下記ページに詳しく説明されています。今後の更新状況も掲載されていくようなので、ショップオーナーの方は定期的に確認されると良いと思います。

7/12更新【予告】軽減税率制度に対応したシステム改修をおこないます

参考)軽減税率の品目について
https://www.gov-online.go.jp/tokusyu/keigen_zeiritsu/

以下、現時点で気になった点をまとめておきます。

CSVフォーマットの変更

7月11日より商品一括登録・更新用のCSVフォーマットが変わっています。列の最後に「軽減税率設定」が追加されました。これまでのフォーマットでは数が合わず登録できません。ご注意ください。

参考)マニュアル「一括登録」(新しい商品を登録)
https://shop-pro.jp/manual/product_imp

参考)マニュアル「一括更新」(既存商品の更新)
https://shop-pro.jp/manual/product_upd

商品の軽減税率をまとめて操作する方法としては、管理画面の商品一覧でチェックを入れる形か、このCSVでの一括更新になると思います。商品一覧ページも500件まで表示できますが、商品数が多い場合一つずつチェックしていくのは大変なので、CSVでの操作の方が更新しやすいと思います。

手順としては管理画面「データ管理」から「商品データ」(=CSVファイル)をダウンロードします。既に「軽減税率設定」が追加された新しいフォーマットになっているので、これをパソコン上で書き換え、再度アップすることで一括切り替えが可能です。
消費税増税が延期される可能性もあるかもしれませんが、時間があれば今のうちに対応されてもよいと思います。ただCSVには少し癖があるので利用が初めての方は数件の商品でテストしてからがよいと思います。自信がない方は商品一覧でチェックしていく形が無難です。

また今回を機に、内税から外税に切り替えるような場合、価格自体の変更が必要になりますが、当日に自動で切り替えてくれる予約機能も追加されるようです。こちらもCSVによる操作です。

軽減税率かどうかの判断

当たり前ですが、今後商品を登録する際、入力画面にある項目「軽減税率の対象商品に設定する」にチェックを入れるかどうか、その都度判断することになります。これを間違え、そのまま販売してしまった場合は思いのほか煩雑な処理が必要になりそうです。

これを少しでも防ぐため、チェックの有無についてデフォルトを設定できる形が良いと思いますが、問い合わせたところ今はそうした仕様は検討されていないそうです。商品の入れ替えが多い食品のショップではこのチェックには神経は使いそうです。
ちなみに酒類を含まないなど、全ての商品が軽減税率のショップの場合は、消費税を「8%」のままに設定できるため、この判断は不要になると思います。

軽減税率商品を識別する独自タグがない

軽減税率についてはいずれ世間的にも慣れてしまうと思いますが、当面は「この商品は軽減税率対象商品です」などの表示があれば、安心感や購買意欲などに一定の効果はあると思います。ただそれを自動で表示させるための独自タグ(フラグ)がまだ用意されておらず、確認したところ実装する予定もないそうです。
区別したい場合は、商品説明の中に直接記載するか、グループ機能で一つ一つ分類するような方法になりそうです。かなりイレギュラーな方法ですが、グループによって商品ページの表示を切り替えるということは可能です。

ついでに別件、「会員価格」の注意点

消費税とは全く関係ありませんが、カラーミーショップ内の操作で一つ気になっている仕様があります。価格に関連して見落としそうな点なので書いておきます(改善要望は出しています)。

商品の登録画面で「販売価格」を入力すると、自動で「会員価格」にも同じ価格が保存されます。その時点ではよいのですが、問題はその後、セールなどで「販売価格」を変更した際に「会員価格」は変化せずそのまま残るという点です。しかも入力画面がデフォルトの状態では「会員価格」が隠れているため、これに気づかない方も多いと思います。管理画面の商品一覧ページで「販売価格」を修正している方も同様のことが起こります。

これによって販売価格を安くしているのに会員向けになぜか高額で売っているということも十分ありえます。何よりこの仕様のおかげで、価格の修正は必ず2箇所で必要になり無駄な作業を増やしています。やはり本来システム側で改善すべき点だと思います。
(そもそも価格をコピーする必要はなく、「会員価格」が未入力の場合、会員が購入する場合も「販売価格」で処理するだけで済みます)

セールなどで頻繁に価格を変更するショップで、会員機能を使用している場合はご注意ください。

hasegawahiroshi.jp 7月11日、カラーミーショップは「消費税軽減税率」への対応を開始しました。下記ページに詳しく説明されています。今後の更新状況も掲載されていくようなので、ショップオーナーの方は定期的に確認されると良いと思い...

hasegawahiroshi.jp

明けましておめでとうございます - ウェブデザイン hasegawahiroshi.jp

本日5日が仕事始めです。今年は新しいWordPressの開発が少し難しくなりそうです。デザインを重視しながらバランスのよい方法を見つけていこうと思います。昨年はデザインだけのご依頼、コーディングだけのご依頼と部分的なご依頼も多くありました。今年もいろいろな形で柔軟に対応できるよう頑張ります。何かあれば遠慮なくご相談ください。
今年もどうかよろしくお願いいたします。

hasegawahiroshi.jp 本日5日が仕事始めです。今年は新しいWordPressの開発が少し難しくなりそうです。デザインを重視しながらバランスのよい方法を見つけていこうと思います。昨年はデザインだけのご依頼、コーディングだけのご依頼と部分...

hasegawahiroshi.jp

カラーミーショップの導入や他への移行で困ること - ウェブデザイン hasegawahiroshi.jp

ショップ機能が一通り揃ったとても便利な「カラーミーショップ」ですが、まだ細かな点で困ることもあります。ここでは導入する際や他のサービスへの移行する際に困ることを中心にまとめてみます。

サイト移行の一番の問題点

サイトの移行で一番重要なのは「URLの維持」です。
商品ページは特にパーマリンクとしてずっと変わらないURLとしなくてはいけません。ただカラーミーショップの仕様ではその点についてはあまり考えられていません。URLを転送する仕組みもないため、他のサービスから移行しようとする人にとってかなりのデメリットになります。

URL以外の商品データなどの移行についてはほぼ問題ないと思います。一括登録や商品データのダウンロードも可能です。商品画像はやや難しいため後述しますが、顧客情報の引き継ぎも可能なので、やはりショップ機能としては良くできているサービスだと思います。

カラーミーショップ「へ」移行する場合

外部のメールサーバを利用する場合

メールサーバをカラーミーショップではなく独自に持つ場合は、事前にドメイン管理会社を「ムームードメイン」に移行することになります。サブドメインを利用し他のサーバを利用する場合も同様です。ドメイン管理会社の移行は慣れない人にはハードルも高いので事前に確認が必要です。

もう一つ、これを書いている時点で大きな問題があります。
カラーミーショップに独自ドメインを設定すると、ドメインのTXTレコードとしてspf情報が自動で追加されます。これは「カラーミーショップからのメール送信(だけ)は迷惑メールではない」という宣言です。ですが外部にメールサーバがある場合は間違った設定になります。
しかもこの設定、ムームードメインの管理画面からは見えないため、それを知らず自らTXTレコードを追加すると二重に記述することになってしまいます。
一応このレコードは問い合わせをすると削除してもらうことができます。外部メールサーバを利用している場合は必ず確認してください。

トップページ以外のURLは全て404に

カラーミーショップでのURLは全て意味のないものになります。カテゴリー名も商品名もなく、単に決められたIDによるURLです。そのためトップ以外は全てリンク切れとなります。転送もできないため、SEO上も大きなデメリットになります。
できることとしては、せめてお客様向けに移行する数ヶ月前からアナウンスを徹底された方が良いと思います。

この問題の回避は難しいと思いますが、強引な方法がいくつかあります。

移行前のサーバでカラーミーショップのURLを実装する
もし現行のサーバでURLを操作(mod_rewrite)できる場合は、事前にカラーミーショップのURLを実装することで、検索エンジンに正しくインデックスさせてから移行することができます。
手順としては、移行の数ヶ月前からカラーミーショップの利用を開始し、商品を登録。商品ページのURLが決まるため、今あるサイト内で実装します。数ヶ月かけて検索エンジンに浸透したところで、カラーミーショップへ移行します。
こう書くのは簡単ですが、実際は一つ一つ大変です。また外部サイトからのリンクには対応できません。検索エンジンのインデックスを待つという少し雲をつかむような部分もありますので、たまたま条件が整っていて時間とコストをかけて「少しでもカバーしたい」という場合に限られそうです。

他のサーバでショップを運用する
話が少し変わってきますが、カラーミーショップには外部サイトに「カートに入れる」ボタンを設置する機能があります(どこでもカラーミー)。外部サーバのWordPressなどでショップサイトを作成し、カート機能だけカラーミーショップへ移行するという形です。
JavaScriptでのカート機能のため不安な面もありますが、この場合、カラーミーショップのURLを意識する必要がありません。最近、カラーミーショップは自らWordPressのプラグインを開発するなど「カートだけの利用」にも力を入れているように見えます。
ただ商品情報について外部サーバとカラーミーショップでの2元管理になってしまうため、運用面を考えると商品があまり多くないショップに限定されるように思います。

またカラーミーショップには「プラチナプラン」というシステム自体のカスタマイズを含むプランがあります。こちらで対応できないか問い合わせたところ、.htaccessなどを使ったURLの調整はプラチナプランでも一切できないそうです。

カラーミーショップ「から」移行する場合

URLの移行は移行先次第で可能

移転先のサーバでURLの書き換えができれば、正しいステータスコード301にてURLを引き継ぐことは可能です。
できない場合はトップページ以外全て404のリンク切れになります。カラーミーショップへの移行と同じく、事前のアナウンスなどで対処するしかありません。

商品画像のダウンロード

現状登録した商品画像の一括ダウンロードはできないと思います。一度CSVの商品データをダウロードし、その中の画像URLを使って独自に一括ダウンロードするなどの形になると思います。

ただもともとの画像管理を工夫しておくとより便利です。
一度、外部サーバやカラーミーショップのFTPディレクトリ(一定プラン以上)内に画像を保存します。そのURLを商品データCSVの中に記述して一括更新が可能です。普段の商品管理も管理画面からではなく、常にCSVでの一括更新という形にしておいても良いと思います。外部サーバにある画像をそのまま残しておけばバックアップにもなり、移行時などいつでもダウンロードできます。

サブドメインから独自ドメインに

外部サービスへの移行ではなく、ドメインプランの変更についても少し書いておきます。
サブドメイン「shop.example.com」で運用していたショップを、独自ドメイン「example.com」に切り替える場合についてです。おそらくその逆も同様かと思います。

ダウンタイムの発生

一度サブドメインを解除し、独自ドメインプランを新規に申請するという流れになります。その間ショップページは表示できません。移行作業をスムースに進められれば、数時間でチェックまで完了すると思いますが、ドメインの反映にはある程度時間がかかると思います。

管理者のメールアドレスについて

カラーミーショップの仕様では、登録する独自ドメインを使ったメールアドレスを管理者のメールアドレスにできません。サブドメインプランでは登録可能なため、そのままになっていると切り替え時に警告が表示されます。移行前にGmailなど別のメールアドレスを設定しておいてください。

旧URLを転送する

外部サーバの利用ができれば、URLの移行はある程度対処できると思います。
「shop.example.com/?pid=123」というURLだった場合、「shop.example.com」というサイトを新規に作成し、.htaccessなどで「example.com/?pid=123」」に転送するように設定しておきます。

設定例:
RewriteEngine On
RewriteRule ^$ http://example.com/?%{QUERY_STRING} [R=301,L]

ただ独自ドメインとして運用していたサイト(会社概要やブログなど)の方はトップ以外リンク切れとなり、カラーミーショップでは救えません。

カラーミーショップへの要望

最後にカラーミーショップへの要望を書いておきます。
移行については唯一「URLのカスタマイズか、転送設定のいずれかができるように」という点です。これができれば、他のシステムを利用している場合でもおすすめしやすくなります。派手な追加機能よりもこうした重要なインターフェイスを改善していってほしいと思います。

併せて最近気になった、その他の要望も書いておきます。

トップページのtitleタグを編集できるように
これが編集できないため、ショップ名が無駄に長くなります。他のページと同様、titleタグを個別に管理できるようにしてください。新しいショッピングカート内でもショップ名が大きく表示されるためかなり違和感があります。

フリーページの仕様を整備してほしい
現在はブログ機能もなくなり、日々の記事や特集ページ、LPなどはフリーページしか利用できません。せめてフリーページに「日付表示」と「ラベルによるグループ化」(各ラベルごとのインデックスページを作る機能)の追加をお願いします。この二点であればDBの構造も変えずに済むと思います。

お客様のキャリアメールをはじく機能
受注時にメールが届かないことが運用上かなりネックになります。ショップの個別の判断でキャリアメールを排除する機能があれば、トラブルを回避でき結果的にお客様にとってもメリットがあるように思います。

og:image指定のページ拡大
商品ページで実装されているog:image画像をトップページやフリーページ、カテゴリーページにも実装してほしい。現状モバイルのGoogle検索結果にも表示されるため必須です。

どうかよろしくお願いいたします。

hasegawahiroshi.jp ショップ機能が一通り揃ったとても便利な「カラーミーショップ」ですが、まだ細かな点で困ることもあります。ここでは導入する際や他のサービスへの移行する際に困ることを中心にまとめてみます。 [anchorlist] サイト移....

hasegawahiroshi.jp

最近の共有サーバで見るべきスペック・機能 - ウェブデザイン hasegawahiroshi.jp

最近の共有サーバが導入しようとしている機能に傾向があるので、それをまとめてみます。専門の方には今さらですが一般的には少しわかりにくいと思うので。

無料SSL

SSLというのは、サイトの暗号化機能です。
以前はコストもかかり導入も少し手間だったのですが、今は無料で簡単に利用できるようになりました。今は特定のページ(カート内など)だけでなく、サイト全体を暗号化する形が増えています。サイトの暗号化はGoogleも導入を推奨しており、SEOにも効果があります。後述するHTTP/2の利用にも必須の機能です。

SSLによる暗号化には、証明書を発行する第三者が必要になります。暗号化にかかるコストというのは、暗号化そのものより、その証明をしてもらうことへの対価でした。会社が正しく存在することを証明してもらい利用者が安心してサイトを扱えるようにするためです。
無料SSLはそうした部分を自動化しているため、その分信頼性は少し低いものになりますが、暗号化で通信を安全にすることに特化しています。

各サービス、無料SSLの導入自体はとても簡単です。ただサイト側ではリンクなど細かな調整が必要になるのでその点はご注意ください。

無料SSLに対応している共有サーバ

エックスサーバー

wpXクラウド(WordPress専用)

さくらのレンタルサーバ

スターサーバー

heteml

SSD化

サーバの読み込み速度を上げるため、HDDからSSDに切り替えているサーバが多くなっています。

以前は高価だったSSDも手頃な価格になり、速度以外にも耐久性が高いという記事も目にします。ページの表示速度はSEO上も大切な要素なので、記憶装置のレベルでも高速化を図るという流れです。

SSDを導入している共有サーバ

エックスサーバー

wpXクラウド(WordPress専用)

スターサーバー

heteml

HTTP/2

HTTPというのはインターネットの最も基本的な通信ルール(プロトコル)です。そのバージョンが変わります。

インターネットが生まれてずっと同じ方法でやりくりしてきたものを、より高速(大量)にやり取りできるように設計されています。条件が揃うとサイトの表示速度も体感でかなり変わります。

この仕組みにはSSLによる暗号化も必要です(HTTP/2というよりブラウザ側に必要になるようです)。そのためSSLが有効になっていないと導入できません。

HTTP/2を導入している共有サーバ

エックスサーバー

wpXクラウド(WordPress専用)

スターサーバー

heteml

nginx

エンジンエックスと読みます。サーバにあるWebサイトを表示するためのソフトの一つです。

今まではApache(アパッチ)というソフトが主流でしたが、このnginxのシェアも増えています。
違いは同時アクセスに強いという点です。HTTP/2もそうですが大量のアクセスに対応するための方法が今は選ばれています。

nginxを導入している共有サーバ

エックスサーバー

wpXクラウド(WordPress専用)

まとめ

nginxはたまたま状況に合致したため利用されているだけという気がしますが、それ以外はどれも当たり前の機能になると思います。慌てて導入する必要はないと思いますが、サーバを移行する際やリニューアルの際はこれらが実装されたサーバを選ぶようにした方がよいと思います。

エックスサーバーか、WordPressサイトであれば、wpXクラウドが上記いずれにも対応しているのでおすすめです。
またこの二つと関連した会社ですが、新しいスターサーバーもスペックや機能がとても良さそうです。今いろいろ試しています。

hasegawahiroshi.jp  

hasegawahiroshi.jp

住所変更のお知らせ - ウェブデザイン hasegawahiroshi.jp

業務に関するお知らせです。事務所の住所が変わりました。

これまで自宅兼事務所としていましたが、今回を機に住所貸し(バーチャルオフィス)のサービスを利用することにしました。郵便受けがあるという程度の住所になりますのでご了承ください。住所は自由に選べたのですが、一応会議室などが借りられる港区南青山を選びました。

ただ「事業概要」ページには住所の一部のみ表示しています。住所貸しサービスのためサイトにも住所は記載できるのですが、ルールとして検索エンジンにインデックスされない仕組みを入れる必要があります。どちらかといえばインデックスされる方が重要なので、住所は一部までの表記としました。お客様へは請求書などにて明確にお伝えいたします。

ちなみに主に作業を行う自宅は中央区になります。引越しの理由は建物取り壊しのためでした。本当に気に入って長く住んだ広尾ですが、最近は東の方に興味があり住んでみようと思いました。朝食を築地で食べられるのが楽しみです。

今後ともどうかよろしくお願いいたします。

hasegawahiroshi.jp  

hasegawahiroshi.jp

Retinaディスプレイの仕様と画像表示のおさらい - ウェブデザイン hasegawahiroshi.jp

スマートフォンを含め、高解像度ディスプレイ(Retina)が増えました。これによりウェブサイトも綺麗に表示されるようになりましたが、広告バナーなど一部の画像だけが粗く表示される場合があります。
問題点がわかりにくいため、その仕組みと現実的な画像の設置方法などまとめてみます。

構造は単純

構造としてはディスプレイの解像度、つまり点の数が多くなっただけです。
おおまかに通常の2倍になっています。

仮に同じ大きさの二つのディスプレイがあります。

A:横幅の点の数が300個(通常)
B:横幅の点の数が600個(高解像度ディスプレイ)

同じ大きさなので、横だけでみるとBはAよりも「点の数が倍、点の大きさは半分」ということになります。普通に考えればBの方が精細で綺麗な画面です。

高解像度ディスプレイの問題

高解像度ディスプレイには段階的に2つの問題があります。
1つはピクセルと点の数が一致しなくなったこと。もう1つはピクセルと点のずれを補完するため画像の色が変わる(滲む)という問題です。

ピクセルとドットのズレ

まずピクセルという単位についてですが、横300ピクセル(px)の画像は、横に300個の「色」が並んでいるという意味合いになります。ディスプレイの点は「ドット」という単位です。

これまではピクセルとドットが一致していたため、画像素材を作りやすいという面もありました。300pxで広告バナーを作るように言われれば、どのくらいのサイズ感かお互いに共通のイメージを持つことができました。

ただ本来ピクセルというのはサイズを示すものではありません。高解像度ディスプレイが現れたことでそのことが顕著になります。300pxの画像をどのようなサイズで表示するのかを、作り手が明確に決めなくてはいけません。
仮にこれまでと同じくピクセルとドットを一致させるというルールにすると、かつて作成した画像は高解像度ディスプレイでは約半分のサイズで表現されることになります。

高解像度ディスプレイによる滲み

300pxの画像を高解像度ディスプレイ600個の点全てを使って表現するという場合、単純に考えると点2つずつ同じ色が並ぶイメージになりそうですが、実際は異なります。
ピクセルとドットのずれをディスプレイが補完します。具体的には1つの色を点に変換する際に周囲の色と混ぜて色を変えます。
画像がぼんやりと滲んで見えるのはこれが原因です。

これと全く同じことが4Kテレビでも言えます。現在の放送は2Kの信号のままなので、特に大型の4Kテレビでは滲んでいることがはっきりわかります。

ただこの色の補完(滲み)は風景などの写真ではあまり気になりません。文字など本来はっきり見えるべきものが含まれる画像、広告バナーやテレビ画面では滲みが目立ちます。
この問題への対処はこの点で優先順位をつけることができます。

それぞれの技術の過渡期

4Kテレビもいずれ、放送が4Kの信号になれば、ピクセルと点の数が一致してにじみもなくなります。技術が進み、そうした重い信号を一般の家庭で受信できるようになってようやく4Kが正しく機能します。

今は「端末」「配信方法」「コンテンツ」、それぞれの進み方がちぐはぐで、どこかが間に合っていないという状況です。4Kテレビがあっても、信号の配信が整備されておらず、また番組などコンテンツのほどんどは2Kで作られています。

ウェブサイトの場合も同じです。高解像度のディスプレイがあっても、それに対応する画像を用意しているサイトがあまりなく、配信するための回線はモバイルなどではまだ遅いという状況です。

そのため今は、全てを高解像度の画像に切り替えることが正解とは言えません。

高画質な画像を用意すること

データ量は少なくし通信量を抑えること

この矛盾する二つをバランスをよく考えていく必要があります。

画像設置の注意点

4.7インチのiPhoneは、画面横幅が750ドットですが、そこに375ピクセルを並べるという仕様になっています(一般的な設定をした場合)。そのため幅375pxの画像があれば、画面ぴったりに収まるように表示されます。その結果、上に書いたように色を補間して絵が滲むことになります。

ただこの設定の場合、ドットに合わせた750pxの画像を準備しても画面から半分溢れて見えなくなってしまいます。
ぴったり画面いっぱいに表示させたい場合は、750pxの画像を375pxだとディスプレイに嘘を伝える必要があります。具体的にはHTMLやCSSにサイズを375pxと記述します。要はピクセル(色)の多い画像を運び、表示の際にギュッと圧縮するイメージです。

ここで注意が必要なのは、750pxの画像でありながら375pxに設定するというのは、作り手が決めた運用上のルールだという点です。目に見える記述は375pxだけなので、サイトのメンテナンスの際や運用担者者が変わった際にミスが起こりやすい部分です。

またWordPressの仕様でも注意が必要です。
デフォルトではimg要素にsrcsetという新しい属性を使われます。この属性自体はかなり細かく操作できるので、正しく設定できれば問題はないのですが、現在のデフォルトでは高解像度ディスプレイを想定した出力がされません。375pxの横幅が設定されていると、375pxに近い画像を作成して出力します。これはあくまでも様々な画面サイズに対応すること(=レスポンシブ)を意識した挙動で、高解像度ディスプレイを想定した挙動ではありません。もし画像の滲みが気になる場合はこの機能をOFFとし、適切な画像サイズを設定する必要があります。

具体的な画像の設置方法

iPhoneの点の数に合わせて750pxの画像を準備すると、画像が重くなりページの読み込みが遅くなります。モバイルでは通信速度が遅い時間帯があったり、通信料金を気にする場合もあるため、バランスを見ながら設定が必要です。

まず、前述のように「写真」(風景や人だけ)の場合は優先順位を下げてよいと思います。多少滲んでも気づきにくい画像になります。
急ぎ対応が必要なのは、広告バナーやテキストが入る画像です。

そこで画像サイズ(解像度)の目安ですが、ピクセルとドットの一致を目指すのではなく「色の補完を少しでも正確にするため色数を増やす」というスタンスが現実的です。経験的にこれまでのピクセル数から 1.2〜1.5倍が妥当だと思います。

375pxの画像を700に合わせるより、500pxの画像を700に合わせる方が補完の間違いが減ります。上図はデフォルメした例ですが、1.3倍でも滲みは緩和され、実際の印象はかなり変わるはずです。

またさらに将来のことも考えておくとよいと思います。
いずれ通信速度などの問題が解決されれば、ドットに合わせて700pxで出力できるようになり、そこでもう一度画像を作り直すことになります。今からそれに対応する仕組みや手順を検討しておくと安心です。WordPressであれば、アップしておく画像を今のうちに大きくしておき、出力するサイズを操作するということも可能です。

まとめ

高解像度ディスプレイでは、画像のピクセルと画面のドット(点)が一致しない

一致しない場合に色のずれを補完するようになり、結果的に画像の色が滲んでしまう

高解像度ディスプレイ用に用意する画像は、これまでの1.2〜1.5倍ほどが妥当

ただ今あるサイトで画像サイズを変えられるかどうかは事前に確認が必要です。場合によってはレイアウトが崩れる可能性もあります。ご注意ください。

hasegawahiroshi.jp  

hasegawahiroshi.jp

日本語Webフォントの使い方とリスク - ウェブデザイン hasegawahiroshi.jp

Google Fontsやフォントベンダーによって、日本語のWebフォントが簡単に利用できるようになりました。その使い方や注意点などまとめてみます。

Webフォントを使う理由

これまでサイトでの文字情報は、テキストと画像のいずれかで表現してきました。それぞれ下記のようなメリットデメリットがあります。

「テキスト」での文字の特徴

容量が軽く、大量に表示できる

高解像度ディスプレイでも綺麗に表示できる

書き換えが容易(=SEOへの対応もしやすい)

コピペ可能

指定できるフォント(=文字の形)の種類が少ない

OSやブラウザによっては綺麗に表示できない

画像の文字と区別するため、ページ上でコピーペーストできる文字をここでは仮にテキストと呼んでいます。

「画像」に描かれた文字の特徴

フォントもデザインも自由

どのような環境でも配置や形は同じ

文字のサイズをコントロールしづらい

容量が重くなる

高解像度ディスプレイで見ると粗くなる場合がある

書き換えが大変

コピペできない

これらを踏まえ一般的には「できるだけテキストを使い、デザイン的に厳しい場合に画像を使う」という使い分けをしてきました。
そこへ新たに「Webフォント」という選択肢が追加されます。

「Webフォント」の特徴

テキストと画像のメリットをほぼ併せ持つ

日本語はデータ容量が極端に重い

フォントによっては料金がかかる

サーバの障害などダウンロードできない場合は使えない

サービス内容によって一定のPV以上で使えなくなる

利用されるようになった背景としては、モバイルの普及が大きいと思います。
閲覧環境のサイズ感が様々になり、画像による文字表現に限界が出てきました。ただそれをテキストに置き換えるだけではクオリティを保てないため、Webフォントという選択肢を考えるようになったのだと思います。ですがこれはフォントが軽い英語圏での文脈。文字数が多い日本語には当てはまりません。

Webフォントの仕組み

そもそもウェブサイトにフォントは含まれていません。
文章などの「テキスト」と「このフォントを使ってください」という指定が書かれているだけです。もし指定されたフォントが閲覧者のパソコンやスマホの中になければ、意図通りに表示されないというのがウェブサイトの基本的な仕様です(参考: 標準フォントを指定する)。

それに対しWebフォントは、フォントデータそのものを一緒にダウンロードさせるという追加機能です。そのためトラブルさえなければ指定したフォントが必ず表示されるようになります。

このフォントデータには「A」や「あ」から始まる文字がほぼ全て含まれています。そのため、英語の場合は文字数も少なく容量的な問題はありませんが、日本語は漢字が多く極端に重くなってしまいます。
具体的な例として4MB程度の日本語フォントが必要になる場合があります。これは仮に大きな画像が400KBとするとその10枚分になります。モバイルの通信環境にもかなりの負担です。

フォントデータが重い場合に困るのは、読み込みに時間がかかるというだけでなく、フォントがダウンロードし終わるまでの一瞬(最悪は数秒)、代替フォントが表示されてしまう点です。初めて訪れたサイトではあまりよい印象ではありません。

これらの問題について対処法はいくつかありますが、構造的な問題でもありどこかで妥協が必要になると思います。

Webフォントの利用方法

A. 所有するサーバに置く

画像などと同様に、フォントデータは自らのサーバに設置可能です。
この場合、フォントを配信する立場になるため権利面も解決しなくてはいけません。またサーバの転送量や負荷の問題もあり自ら対応することになります。
記号などの自作フォントや各サービスにない英語・カナフォントを利用する場合はこの形になると思います。

B. フォントベンダーのサービス

ベンダーによるサービスは、コストに応じページビュー(PV)での制限がかかります。アクセス解析結果を確認して必要なプランを選んでください。

モリサワ「TypeSquare」

Adobe「Typekit」 モリサワの一部フォントも利用可能

またベンダーとレンタルサーバが提携し、サーバの利用者が無料で使える場合もあります。下記はいずれもモリサワのTypeSquareを利用しているようです。

さくらのレンタルサーバ「Webフォント」

エックスサーバ「Webフォント」

wpX「Webフォント」

このサイトが利用している「wpX」のサービスとAdobe「Typekit」を試してみましたが、どちらも賢い仕組みのようです。おそらくページで使われている文字だけのフォントを動的に作り出し、データを軽くしています。コスト(PV)の問題はありますが、重さの面は解決できそうです。

ただこうした仕組みは各ページで個別のフォントデータを作り出していることになるため、大規模なサイトでは非効率と感じる面もあります。またJavaScriptによる動作のため既存サイトでは処理がぶつかる可能性もありそうです。採用する際は動作チェックも必要です。

C. Google Fonts

「Google Fonts 日本語フォント」はまだ試験的に提供されているものですが、利用しているサイトも多くあります。コストもかからずサーバ負荷についても心配はいりません。モリサワなどが作るフォントはありませんが、とてもきれいなフォントが揃っています。

仕組みとしては、一度大きなフォントデータをダウンロードし、その後はダウンロードしたデータ(キャッシュ)を使って各ページを表示するという形になります。そのため最初の一度だけフォントの重さを意識することになります。

このサービスには特別なメリットもあります。
閲覧者が過去に「他のサイト」で同じ日本語フォントをダウンロードしている場合、同じフォントを新たにダウンロードする必要がありません。Google Fontsを利用するサイトが増えれば増えるほど、利用者もフォントの重さを意識する機会が減っていきます。試験中ではありますが、Googleのように誰もが使え、かつ安定した場所にフォントが置かれていることによるメリットです。

利用に適したケースとおすすめのフォント

A. 標準フォントに不満がある場合

日本語Webフォントが必要と思わせる背景として、Windowsの文字表現があまり綺麗ではないことや、一部のAndroid端末でフォントの種類がかなり制限されていることなどがあります。
文章が特に重要なサイトでは、読みやすさやクオリティを底上げするという意味でWebフォントは利用価値があります。

ただMacやiOSの場合、標準フォントがもともと綺麗なので他の環境のために不要なデータをダウンロードするということになります。環境によって分岐処理をするなども考えた方が良いかもしれません。

また標準フォントという前提では最低でも2つのウェイト(通常と太字)が必要になります。太字というのは単に通常の文字を太くしている訳ではなく文字の形自体が異なります。そのため全く別のフォントを二種類読み込むことと同じです。ウェイトについてもデザイン時点から慎重な検討が必要です。

おすすめのフォントGoogle Fonts「Noto Sans Japanese」
ただ容量がかなり重いため、ローディング画面を用意するなど何らかの対策が必要だと思います。

B. 装飾として利用する場合

これまで画像化していた見出しやバナーをWebフォントに置き換えるというものです。ただそうした部分的な利用のために重いフォントデータを読み込ませるというのはやはり検討の余地があります。見栄えだけの問題であれば、容量の軽い英語やカナだけのフォントを活用できないか検討してみてください。

またWebフォントも文字間や配置などが難しくデザイン的に万能という訳ではありません。サイトのクオリティを決定するようなパーツには難しい場合もあります。

おすすめのフォントGoogle Fonts「はんなり明朝」
落ち着いた雰囲気に適度な遊びがあります。個人的にも好きでよく使います。カナだけのフォントなので、漢字も含む場合は別途、明朝体フォントも組み合わせる必要があります。

C. 明朝体を使いたい

Windowsの標準フォントに実用的な明朝体がなかったり、Androidにそもそも明朝体がない場合もあるため、どうしても明朝体が必要な場合はWebフォントを利用することになります。旅館や和食料理店のサイトなどではやはり効果的だと思います。

おすすめのフォント
Typekit「源ノ明朝」源ノ明朝を特集したページでは実際にこのフォントが使われています。

もし上記のように明確な意図がない場合、日本語Webフォントはデメリットの方が大きいかもしれません。採用については実際にテストしながら慎重に検討された方が良いと思います。

hasegawahiroshi.jp  

あなたの事業をコンピュータ&電子サービスのトップリストShibuya-kuにしたいですか?

ここをクリックしてあなたのスポンサー付きリスティングを獲得。

ウェブサイト

住所


Shibuya-ku, Tokyo
その他 Shibuya-ku コンピュータ&電子サービス (すべて表示)
コーディング専門プロダクション FLAT コーディング専門プロダクション FLAT
1-23-21 Co-lab渋谷キャスト
Shibuya-ku

2016年に法人化した渋谷のコーディング専門プロダクションです。コーディング・マークアップなど何かありましたら、いつでもどうぞ!

株式会社サイバード CYBIRD Co., Ltd. 株式会社サイバード CYBIRD Co., Ltd.
猿楽町10-1
Shibuya-ku, 〒150-0033

㈱サイバードの公式Facebookページです。弊社のサービスや業界情報を発信します。   https://www.cybird.co.jp/

株式会社フィールファイン 株式会社フィールファイン
恵比寿1-27-20 恵比寿ワークルーム2F
Shibuya-ku, 150-0013

WEBサイト制作、WEBアプリケーション制作、DTP・広告デザイン制作、デザインコンサルティング、SEOコンサルティングなど

DeNA Co., Ltd. DeNA Co., Ltd.
Shibuya-ku

株式会社ディー・エヌ・エー(DeNA)の公式Facebookページへようこそ!

エフォーション新卒採用 エフォーション新卒採用
南平台町1-9 南平台宝来ビル10F
Shibuya-ku, 150-0036

Web制作会社 ウサくま Web制作会社 ウサくま
渋谷2-21-1 渋谷ヒカリエ8階Creative Lounge MOV内
Shibuya-ku, 216-0007

カワイイとかっこいいデザインをつくる会社

VAZ.inc VAZ.inc
神宮前3丁目1-30
Shibuya-ku, 150-0001

Open the World. 株式会社VAZは、YouTuberをはじめとした若年層に影響力のあるクリエイターたちと共に、日常の小さな変化からよりよい社会へと変えていくベンチャー企業です。 人を楽しませて

株式会社エイトレッド 株式会社エイトレッド
渋谷2-15-1 渋谷クロスタワー
Shibuya-ku, 150-0002

プロダクト製品開発・サポートサービス・クラウドサービス

株式会社ブレイン Brain Corporation 株式会社ブレイン Brain Corporation
神宮前2-2-22 青山熊野神社ビル
Shibuya-ku, 150-0001

Gftd Japan Gftd Japan
20-10 ニシカワビル
Shibuya-ku, 164-0022

発達障害を抱えるGiftedの人々が活躍する場

ハコスコ ハコスコ
Shibuya-ku, 151-0051

ハコスコへのお問い合わせはこちら

NJC Netcommunications NJC Netcommunications
本町3-12-1 住友不動産西新宿ビル6号館15F
Shibuya-ku, 151-0071

NJCネットコミュニケーションズ株式会社 「ICTをだれでもすぐに」 「ITの”おしい”を”おいしい”にする会社」