作成:全国イーコマース協議会
詳細はこちら:グッドデザインショップ認定
重要度Aの項目を全て達成し、全109点の中の81点以上獲得(約75%の達成率)で認定となります。重要度Aは「必須項目」=「最低限守られるべき項目」なので、全て守られていなければなりません。つまり、何点獲得していたとしても、重要度Aの項目を一つでも落とすと認定されないということになります。
| - | 番号 | 重要度 | 項目名 | 評価基準とその解説 | 項目についての解説 |
|---|---|---|---|---|---|
| トップページ | A-01 | A | 目的が明示されている | オンラインショップにおける「目的」とは「販売」という行為のことで、もっと言えば「何を販売しているのか」が一目で分かるかどうかということです。 | 「このサイトはなにがしたいのか」ということがユーザーに伝わらなければ、ユーザーは、商品に辿りつく前に、まずそのサイトがなにをしたいのかを立ち止まって考えなくてはならなくなります。オンラインショップは、まず、トップページで、このサイトは「販売サイト」であり、「何を」売っているのかをユーザーにはっきりと教える必要があります。そうすることで、ユーザーはスムーズに商品へと向かうことができるようになります。 |
| A-02 | A | セールスポイントが示されている | なぜ、他の販売チャネルや他のオンラインショップでなく、このオンラインショップで買うべきか、という部分が、トップページでアピールされているかどうかです。 | オンラインショッピングでは、ユーザーが同じ商材を扱う他店鋪と簡単に比較することができます。そのため、なぜこのオンラインショップで買うべきなのかということは、しっかり示されているべきです。 | |
| グラフィック | B-01 | A | サイトを通した統一感がある | サイトを通した統一感とは、レイアウトや書体とその大きさ、配色などのパターンがいくつかにまとめられていることで醸し出されます。 | 印象を統一すると、ユーザーがそのショップを認知しやすくなり、また、学習容易性の向上などが期待できます。また、そのオンラインショップのブランド力が上がることに繋がります。 |
| B-02 | A | 商品写真が美しく、充分な点数がある | 商品の形状や質感、大きさなどの情報や、そのイメージなどが過不足なく伝わっているかどうかです。それに加えてシャープネス、露出、色調の統一などの撮影技術を含めた評価です。 | 商品の写真は、商品の実物に触れることのできないオンラインショップでは、非常に重要なポイントです。技術的な部分はもちろん、商品の大きさや、質感、前後左右からの形状、温度などをうまく伝えられる必要があります。 | |
| B-03 | B | ビジュアルアイデンティティがある | ビジュアルアイデンティティとは、繰返し使用される特徴的な店鋪名のロゴなど、ユーザーがそのオンラインショップを思い浮かべた時、すぐに思い出せる視覚的な特徴・パターンのことを指します。 | ビジュアルアイデンティティが確立されていれば、ユーザーが視覚的にそのオンラインショップを記憶する助けになり、認知を向上させることができます。 | |
| B-04 | B | グラフィックスのクオリティが水準以上である | 商品写真以外のグラフィックスについて、適切な画像形式や圧縮率、効果が過剰でなく、自然に施されているかどうかを指します。 | 実店鋪に置換えて考えると分かりやすい部分ですが、商品と直接関係ないことがらでも、技術面に対する不安は、店鋪に対する不安に転換される可能性があります。 | |
| ナビゲーション | C-01 | A | 情報構造が適切である | 情報構造とは、それぞれの情報のまとめ方のことです。関連する情報ごとにまとめて整理しているかどうかを評価します。 | 情報がそれぞれバラバラに配置されてしまったり、そのまとめ方に一貫性がなかったりすると、ユーザーが必要な情報に辿り着きづらくなってしまいます。 |
| C-02 | A | 全ページにトップページへのリンクがある | 全ページにサイトのトップページへのリンクがあるかどうかです。 | ユーザーが多くのページを閲覧していくと、情報のスタート地点としてトップページに戻り、一旦情報整理をしてから他のページに飛ぶという行動を取ることがあります。また、検索エンジン結果ページから、下階層ページに直接飛んできた場合にも対応できることになります。 | |
| C-03 | A | 現在何のページを見ているかが明らかである | 現在見ているページの内容を表す言葉などが、しっかりと目立たせてあるかどうかです。 | ユーザーが多くのページを巡った場合など、今見ているページが何のページなのかをしっかり示してあげることで、サイトの中で迷子のような状態になってしまうことを防ぎます。 | |
| C-04 | B | ラベリングが適切である | ラベリングとはナビゲーションボタンの文言のことを指し、それが一般的に広く使われているものであるかどうか、不要な英語などが使われていないかどうかをみる項目です。 | ラベリングが適切でないと、ユーザーが必要な情報にたどり着くまでに、何度もリンクを試さなければならないということになります。またデザイン上の理由のみで英語を使用している場合など、リンク先にジャンプしないと内容が分からないなど、ユーザーにストレスを与えることになります。 | |
| C-05 | B | グローバルナビゲーションがある | グローバルナビゲーションとは、あるナビゲーションの呼称ではなく、サイトの全ページに共通するナビゲーションのことです。 | 全ページ統一したナビゲーションは、ユーザーが操作方法を覚える手間が少なくて済むので、余計なストレスを与えることを避ける結果になります。 | |
| C-06 | C | 検索機能がある | 検索機能とは、フリーワード検索だけでなく、商品一覧や索引なども含まれます。 | 検索機能は、ユーザーが必要な情報にダイレクトで飛ぶ手段を提供することになり、コンテンツ量が増えてきた場合や、リピーターへの利便性が向上します。 | |
| C-07 | C | 複数のナビゲーションを提供している | ナビゲーションにもサイドバー、上部バー、索引ページ、タブ型、目的別インデックス、パン屑ナビゲーションなど、いろいろな種類があります。検索機能を含め、3つ以上のナビゲーションが臨まれます。 | ユーザーが情報を辿っていく経路は十人十色なので、少なくとも3つ以上の方法を提供することで、様々なユーザーの思考に対応できるようになります。 | |
| C-08 | C | フレームレスである | フレームレス=フレームを使用しないページという意味です。ここではナビゲーションを個別のフレームに切った場合を想定しています。 | フレームの使用にはSEO的にも不利になり、検索エンジンから個別ページへのダイレクトリンクの際にもナビゲーションがないという事態が起きます。また、お気に入りに狙ったページがうまく入らないなどの不具合があるので、極力使用しないほうがよいです。 | |
| C-09 | C | _blankの使用は最低限に留めている | _blankとは、a要素のtarget属性の属性値の一つで、リンクを押すと自動的に別ウインドウが立ち上がる仕組みのことです。 | 現状、ユーザーには、_blankを無効にする自由とそれを事前に判別する手段がないため、極力使用しないほうがよいです。どうしても必要な場合はその旨(別ウィンドウで開きます、など)を明記するべきです。JavaScriptなどであれば、一応それをオフにする機能があるので、ここには含まれません。これに関わらず、ユーザーに選択の自由と簡単に判別する方法がない仕掛けは、ユーザーを不快にさせる可能性があるので、使用しない方がよいです。 | |
| 信頼性 | D-01 | A | 買い物のヘルプページがある | 実際に商品を購入する流れを解説するページと、その際、ユーザーが疑問に思う可能性がある問題に対する回答を示すページです。 | 直接、金銭的な問題が絡む部分なので、ユーザーが不安を感じることのないよう、充分に検討・整備されるべきポイントです。この部分が理解できない、または不安に感じられた場合、商品の購入に結びつくことはないと言っていいでしょう。 |
| D-02 | A | プライバシーポリシーが明示されている | 住所氏名等はもちろん、メールアドレスなどの取扱いに対しても、個人情報の漏洩はしないということをトップページに明記してあるかどうかです。 | オンラインショッピングにおいては、商品購入の際、ユーザーに個人情報を通知してもらうことが必須になります。ユーザーが個人情報をどう扱われるのか不安になることのないよう、明確に「漏洩しない」ということを明記すべきです。 | |
| D-03 | A | 特定商取引法に関する表示がある | 特定商取引法により義務付けられた情報がトップページに記載されているかどうかです。 | 法規上必要であるものが欠落しているのは、ユーザーとの信頼関係で成り立つオンラインショップとして問題外です。 | |
| D-04 | A | 連絡先が明示されている | トップページにそのショップの連絡先が示されているかどうか。又はそれが記載されているページが、トップページにはっきり示されているかどうかです。 | 責任の所在と販売の実体を明らかにすることで、ユーザーの、売り手の顔が見えないオンラインショッピングに対する不安が軽減されます。 | |
| D-05 | B | セキュリティ技術の説明がある | フォームを通じてクレジットカード番号などを送信する場合、SSLなどのセキュリティ技術を導入し、それを必要な場所に明記してあるかどうかです。 | ユーザーが個人情報を送信する際、技術的な面で不安になることがないよう、それを保護する技術に対しての説明があるとよいです。 | |
| D-06 | B | Q&A、FAQが明示されている | 個別の商品に対するQ&A、FAQが、分かりやすい場所にあるかどうかです。 | ユーザーのトラブルを事前に防ぐこと、またはそのような姿勢の提示。 | |
| D-07 | C | お客さまの声が掲載されている | 実際にその商品を使用したお客さまの感想が掲載されているかどうかです。 | 実際にそのショップで購入しているユーザーがいるということや、売り文句だけでない、公平な評価が提示されているということは、ユーザーの心理的なハードルを下げることに繋がります。また、その商品を購入することでユーザーが得られるベネフィットを具体的・多角的に示すことにもなります。 | |
| アクセシビリティ | E-01 | A | 機種依存文字を使っていない | 丸囲み数字やローマ数字などの、OSによって文字化けする文字(機種依存文字)を使用していないかどうかをチェックします。 | 丸囲み数字やローマ数字に代表される機種依存文字は、OSによって意図しない文字に化けてしまうため、制作者と違うOSを使用しているユーザーに意味が通らなくなってしまいます。 |
| E-02 | B | img要素のalt属性が適切に設定されている | 画像を配置するimg要素のalt属性が設定されているかどうか。加えて、alt属性が代替テキストとしての役割を果たしているかどうかです。 | alt属性に設定したテキストは、なんらかの理由で画像が表示されなかった際のフォローになるため、適切に設定するべきです。またHTMLの仕様上も必要であり、SEO対策としても必要となります。 | |
| E-03 | B | ブラウザの互換性への配慮がされている | それぞれのページが、幅広いOS、ブラウザ環境で、同じような機能、効果が実現されているかどうかをテストします。 | 店鋪は、できるだけ多くのユーザーが正常に閲覧できる努力をすべきですが、OS、ブラウザとも選択肢が多様・多岐に渡る現状では、全てを網羅するのは現実的に不可能なので、現時点でのシェア90%を目標にすることとします。 | |
| E-04 | B | Flash、JavaScriptなどは最低限に留めている | FlashやJavaScriptなどが使用されている場合、それはHTMLで実現できないものであるかどうか。またユーザーの立場から考えて、本来の目的に対する効果を本当に向上させるものであるかどうかを審査します。 | FlashやJavaScriptなどは、閲覧の際の不具合を誘発しがちであるので、必要最低限に留めるべきです。どうしても必要な場合は、次善策として、それらを使用していない代替ページを用意し、FlashやJavaScriptが使用できない(又は使用したくない)ユーザーも同等程度の情報が得られるよう、配慮する必要があります。 | |
| E-05 | B | テキストだけで意味が通じる作りである | なんらかの理由で画像やFlash、JavaScriptなどが表示されなかった場合でも、表示された時と同等程度の情報が提供できるような配慮がされているかどうかです。 | 画像やFlash、JavaScriptなどが表示されなかった場合も、代替テキストの使用などを通じて、意味が通る作りになっていることが必要です。テキストだけでもそのページの目的や意味が通じるよう配慮すべきです。 | |
| データサイズ | F-01 | A | サイズの大きなデータに対する注釈がある | PDFカタログなど、サイズが1MBを超えるような大きなサイズのファイルのリンクには、その旨が明記されているかどうかチェックします。 | サイズが大きなファイルを突然ダウンロードさせられると、ユーザーは大きな不快感を覚えることになります。目安として1MBを超えるファイルには、但し書きでそのサイズを記し、あらかじめユーザーの同意を得る必要があります。 |
| F-02 | C | 各ページは70KB程度に納まっている | HTML自体のサイズだけでなく、ユーザーが実際に体験するのと同じように、画像等も含めた容量の評価です。 | ブロードバンド時代でもモバイル機器を使用した場合や回線の混雑、サーバー環境などにより、転送レートが低くなる可能性はあります。画像を含めた70KBはおおよその環境(56kbps以降、AirHなど)で素早く(10秒程度)表示が可能です。 | |
| 配色 | G-01 | A | 背景色とテキストのコントラスト差が適切である | 背景色とテキストのコントラストがしっかりあるかどうかです。 | 背景色とテキストのコントラストが低いと可読性(読みやすさ)が落ちるため、ユーザーに余計な負担を強いることになってしまう。 |
| G-02 | B | 緑と赤の組み合わせがない | 赤地に緑のテキストなどの組み合わせが用いられていないかどうかをチェックします。 | 緑と赤の組み合わせは、識別が難しいユーザーがいるため、Xmasなど不可避な場合を除き、極力この組み合わせの配色はしないほうがよいです。 | |
| G-03 | B | 色彩がなくても同じ情報が得られる | 色彩のみで伝わる情報(例、注意を促す必要がある部分に赤く着色してあるだけなど)が極力ないように配慮してあるかどうかです。 | 注意書きなどを赤字にするのは効果的だが、それを太字にすることで、なんらかの理由で色彩が効果を発揮しない状況においても、同等の効果が得られるようになります。 | |
| テキスト | H-01 | A | フォントフェイス指定をしていない | font要素のface属性やCSSの指定で、特定のフォントを指定していないかどうかです。 | 特定のフォントの指定があった場合、環境によって、最悪の場合はテキストがまったく表示されなくなってしまいます。フォントフェイスはserifとsans-serifの別を指定する程度にすべきです。 |
| H-02 | A | 文字の大きさが適切である | 本文として読ませるテキストに極端なサイズの指定をしていないか、またOSごとに文字の大きさが大幅に変わることがないかどうかです。 | 大きすぎても小さすぎても可読性は下がります。 | |
| H-03 | A | 文字の大きさが変更できる | CSSでフォントサイズをpx指定していないかどうかです。 | グラフィックデザイン上の理由などからCSSでフォントサイズを固定することは、ユーザーからテキストの大きさを変更する自由を奪ってしまうことがあるので、フォントサイズを固定することはやめるべきです。 | |
| H-04 | B | 適切な区切りごとに空行がある | 段落ごとに1〜2行程度の空行を挟んでいるかどうかです。 | 段落ごとに、br要素を挿入したり、p要素のマージンを設定したりすることで、1〜2行相当のスペースを空けると、可読性の向上に役立ちます。 | |
| H-05 | C | 専門用語をなるべく避け、ある場合は注釈がついている | 専門的な用語が不必要に用いられていないか、どうしても必要な場合はそれに対する注釈があるかどうかを見ます。 | 専門的な用語はユーザーの混乱を招く原因となるので、なるべく使用を避けたほうがよいです。どうしても必要である場合は、専門的な知識がないユーザーでも理解ができるよう、注釈を付けたほうがよいでしょう。 | |
| H-06 | C | 日付けの表記に日本語を使用している | 日付を表記する際に、2004.1.1や1/1などにしていないかどうかです。 | .や/は音声読み上げブラウザなどに理解されないため、必要でない限りは1月1日などのように、日本語で表記した方がよいです。 | |
| H-07 | C | 適切な見出しが設定されている | 文章のまとまりごとに、その大まかな内容などを連想させる見出しがつけられているかどうかです。 | ディスプレイでテキストを読んでいくことは、紙に印刷されたモノを読む場合に比べ、ユーザーの目に負担をかけます。文章の内容を類推しやすい見出しがあることで、可読性、理解率は大幅に向上します。 | |
| H-08 | C | 行間が適切に設定されている | 行間が150%〜200%程度に設定されているかどうかです。 | 行間を適切に設定することで、可読性が向上します。150%〜200%程度が読みやすいとされています。現状ではCSSで設定することになります。 | |
| ハイパーリンク | I-01 | A | リンクが全て正常に動作する | リンクが全て制作者の意図したページやファイルにリンクされているかどうかです。 | リンク切れは、ユーザーに無益な行動をさせてしまうことになり、また、サイトの信頼感などを激減させてしまいます。 |
| I-02 | B | アンカーテキストが具体的な内容になっている | アンカーテキストとはハイパーリンクを設定されたテキストのことを指します。そのテキストがリンク先の具体的な内容を示すものであるかどうかを審査します。 | アンカーテキストは、「詳しくはこちら」などではなく、リンク先の具体的な内容を明示するべきです。SEO的見地からも効果があります。 | |
| I-03 | B | 重要なリンクがスクロールなしで見える | そのショップにとって重要度の高いリンクが、縦600ピクセル以内に収まっているかどうか。 | 重要なリンクはすぐに分かる場所に設置しなければ意味が半減してしまいます。目安として、縦600ピクセル程度の中に、重要なリンクが表示されるようにすべきです。 | |
| I-04 | C | 未訪と既訪が色分けされている | 一度も参照されていないリンク先と、既に参照されたことのあるリンクのテキスト色がわけられているかどうかです。 | 未訪と既訪が色分けされていないと、ユーザーに既訪のリンクを再度クリックさせることになり、不親切になります。できるだけデフォルトの設定を変更しないことが望ましいです。 | |
| デザイン全般 | J-01 | A | サイトの目的、コンセプトが明確に表現できている | サイトの目的やコンセプトと、グラフィックデザインの伝えるイメージがかけ離れていないかどうかです。 | デザインはサイトの目的やコンセプトをユーザーに理解させる助けになるべきであり、それらを視覚的に体現したものであるべきです。両者がかけ離れてしまうと、それぞれが足を引っ張り合う結果を招くことになるので、サイトの目的やコンセプトとデザインのイメージを重ね合わせていくことは必須になります。 |
| J-02 | B | 過度の装飾要素などがない | 過度の装飾要素とは、なくても効果が変わらないと思われるものを指します。 | なくても効果が変わらないものは、かえってユーザーの理解を妨げる結果をもたらすことがあり、ないほうがよいです。 | |
| J-03 | B | 基本デザイン要素に一貫性がある | 基本デザイン要素とは、配色、フォントサイズ、マージン、グリッドなどを指します。 | 基本デザイン要素に一貫性を持たせることは、美しいグラフィックデザインの基礎です。また情報整理の側面からも重要になります。 | |
| J-04 | B | 横幅800ピクセルで見られる | 横幅800ピクセルの画面で見た時に横スクロールバーが出ないかどうかです。 | モバイル需要の増加により、10数%以上のユーザーは800ピクセル以下でブラウジングしています。また、1024ピクセル以上の画面でもサイドバーを出している場合なども考えられます。横スクロールは従来のメディアインターフェイスにはないため、特別な意図がない限り極力避けたほうがよいことは統計的に明らかになっているので、800ピクセルを目安にするのが無難です。 | |
| J-05 | C | ブラウザサイズ変更でも破綻しないデザインである | 特定のブラウザウィンドウのサイズに依存したデザインでないかどうか。 | ある特定のブラウザウインドウサイズに特化することは、それ以外のサイズをとったユーザーの作業効率を著しく低下させる結果になります。ブラウザサイズに影響を受けづらいレイアウトをすべきです。 | |
| コンテンツ | K-01 | C | ユーザーの知りたい情報が不足なく掲載されている | 商品に関する直接的な情報などだけでなく、関連する情報・コンテンツが掲載されているかどうかです。 | ユーザーが欲していると想定される情報は網羅されているかどうか、様々なユーザーの立場に立って検証してみる必要があります。例えば、商品に関連する知識やノウハウなどを掲載するなどの工夫があるとよいです。 |
| K-02 | C | サイトの目的やコンセプトに沿わないコンテンツがない | サイトの目的やコンセプトに沿わないコンテンツがないかどうかのチェックです。 | サイトの目的、コンセプトに沿わないコンテンツは、ユーザーがサイトに抱くイメージをぼかすだけの結果となるので、ないほうがよいです。 | |
| HTML | L-01 | A | title要素を適切に記述している | title要素を個々のページに適したものに設定しているかどうかです。 | title要素は、ユーザーがそのショップをブックマ−クした際のラベルとなり、また、SEO的にも非常に重要なポイントとなるため、適切な記述を理解する必要があります。例:ページ名|店鋪名、など |
| L-02 | C | 論理マークアップがされている | 論理マークアップとは、レイアウトの都合でHTMLタグ付けをしていくのではなく、文書の構造にそってマークアップをしていくことを指します。 | HTMLの仕様に沿った記述はブラウザ、OS間の互換性や、将来的な拡張性、テキスト読み上げブラウザへの対応など、ユーザビリティ面からも重要。また、SEO的な効果も高くなる。悪例としては、liやblockquoteをインデント目的で使用するなどがあります。 | |
| L-03 | C | table要素をレイアウトに使用していない | table要素を表を作成するためでなく、レイアウトグリッドとして使用していないかどうかです。 | ソースがむやみに長くなったり、音声読み上げ、互換性などの点から不都合が生じる可能性があるので、徐々にtable要素をレイアウトのために用いないように意識する必要があります。 | |
| L-04 | C | DOCTYPE宣言がなされている | DOCTYPE宣言とはその文書がどのような規格に基づいて書かれたものであるかを示すもので、文書の先頭にこれがないと、HTMLとしては誤りになります。 | HTMLは文書の先頭でこの宣言がされている必要があり、現状、これがなくてもブラウザがHTMLを表示してくれることが多いのは、ブラウザ側の好意的な解釈によるものに過ぎません。ただし、この宣言によってブラウザのレンダリングモードが変化する場合などもあるので、正しい文書型に基づいた宣言をする必要があります。 | |
| L-05 | C | 文書の装飾にはHTMLではなくCSSが用いられている | HTMLは文書の構造を示すものであり、見た目の装飾にはCSSが用いられるべきとされています。 | HTMLから見た目の装飾を切り離すと、メンテナンス性の向上、様々なメディアへの対応、互換性の向上など、様々なメリットがあります。将来的な視野に入れておく必要がある項目です。 |
評価項目について、不明な点やご質問、ご意見などありましたら、担当:渕上(ec@ec-conference.com)が受け付けておりますが、本認定事業の目的として、会員の皆様の啓蒙や技術向上なども含まれておりますので、用語やHTML関連につきましては、なるべくGoogleなどで一度お調べいただいた上でご質問いただくようにお願いいたします。
Copyright 2002-2004 Japan E-commerce Conference All Right Reserved