l10n-blog ローカライゼーション・ユーザビリティ・翻訳


どんな環境でも閲覧できるWebサイト

イラスト:様々なデバイスで閲覧されるWebサイト


どんな環境でも閲覧できるWebサイト

だいたい、忙しいですし、こうなることが多いかもしれません。

え?! どんな環境でも?

そう、そう。

レスポンシブにしとけばいいんでしょ。忙しいんだからさあ、分かりきったこと言わないでくれる…。

まあね〜。

一つだけあげるとすると、「そのコンテンツを利用する人は、どの機械を使ってホームページにアクセスすることが多いのか。」を明確にすることは大切です。

ここから、ホームページの中身や配置の手がかりの一つになるからです。

 


文字の扱い方が肝

イメージ:文字

文字の扱い方が肝


読みやすい文章の法則。
テキストのデザイン、これに始まりこれに終わる。
文章は、大きさ○、行間○、一行につき○文字にすべし!

などいろいろ考えてみましたが、どうもピンと来ないまま、一日が過ぎました。

  • ○ピクセルの幅が良い。
  • 文字の大きさは○ほどが良い。

などの情報はいろいろとあります。

結局どうなのだろう、結局どうなのだろう・・・、と思案しました。思案すればするほど、天使というより、悪魔?のささやきが強くなってきました。

😈 ぶっちゃけ、読みたければ、どんなデザインでも、読むんじゃないの?

😱 ・・・。


これでは記事になりません。何か、ひねり出さなければ…。

* * *

昔、おしゃれなサイトは、とても字が小さくて、チョロチョロっと散らした感じがありませんでしたか?
あれは、読みにくかったですね。
読みにくいということが、そのブランド感を高めて、喜びになるのか、逆にストレスになるか、無視されるか…。

ツンツンしている表情がステキに見えるか、いけ好かなく感じるのか…。
その文脈、タイミング、様々な要素がからんでいます。

ケースバイケースの案件の中、多様な要望に対応できるだけの、具体的なデザインの引き出しを持っているか、あるいは、とても詳しい人物が隣にいるか・・・。

 


イメージの統一

イメージ:秋のイメージ

イメージの統一


Webサイト全体のイメージの統一が大切です。

ページによって、ロゴの位置が違ったり、文字の大きさ、バナーの印象などが違うと、スムーズなサイト体験の妨げになる可能性が高いと言えます。

背景が、ページごとに違うのも、注意が必要です。

統一感を出すために大切な要素としては、レイアウト、カラー、文字の大きさなどがあります。

また営業年数が長いネットショップでは、その時々に撮影した商品写真がありますが、カメラのスペックによって、撮影者によって、写真画像のクオリティが不揃いなこともあります。この辺りのメンテナンスも有効です。

またWebサイトではありませんが、良く見かけるのが、パワーポイントのプレゼンテーション資料です。

いろいろな所から集めて来たイラストが、作者が違うため統一感が薄いことがあります。もちろん一概に、それはダメだ、ということはありません。ですが、注意は必要かもしれません。

 


サイト構造が分かるように

イメージ写真:サイトの構造が分かるようにする

「サイトの構造が分かるようにする」には、二つの視点から検討するのはいかがでしょうか。

すなわち、

  1. 人にとっての分かりやすさ。
  2. 機械にとっての分かりやすさ。

人に対しては、ターゲットユーザーの求めている行動に寄り添った、理解しやすい表現が、良い働きをしてくれます。

機械に対しては、どういった理念の基に検索エンジンが作られているのか?という観点をふまえ、サイト構築をすることが重要になってきます。

 


表示速度の高速化

 表示速度のイメージ

以前、「ホームページのダウンロード時間(2018/05/22)」という記事を書きました。

読み返すと、まず、タイトル自体が、分かりにくっと思ってしまいました。

これは、ホームページの表示速度のことです。これのチェック、高速化が大切というお話。

 

適切な表示速度を保つことは、Web体験をスムーズにしてくれる、縁の下の力持ち的存在のようでもありますが、実は主役級の存在かもれません。

googleのサイトで、測定してみました。その結果の中に、次のような説明文がありました。

 

読み込み時間:
Speed Index というスコアのことで、3G接続のMoto G4 端末でChromeを使って読み込んだ際、ページ上の可視コンテンツが表示されるまでにかかる時間を指します。読み込み時間は、サーバーの場所、端末、ブラウザ、サードパーティのアプリの有無などによって変わってきます。また、カルーセル、オーバーレイ、インタースティシャルなどを使うと、サイトの読み込み時間に影響することがあります。異なる条件でサイトの速度を確認したい場合は、webpagetest.orgをご利用ください。

 

これを見ますと、表示しているページ自体はもちろん大切なのですが、「読み込み時間は、サーバーの場所、端末、ブラウザ、サードパーティのアプリの有無などによって」変わるとあります。

なるほど、様々な条件によって、成り立っているのですね。

 


モリオフィスのHTMLコーディングページへ