🖥️ウェブの要素

私たちが公開するすべてのコンテンツは、いくつかの小さなコンテンツが集まってできたものです。このセクションでは、これらのウェブの要素についてのMailchimpのスタイルを説明し、SEOという一筋縄ではいかない技術へのアプローチについて説明します。

ガイドライン

代替テキスト

代替(Alt)テキストは画像にラベルを付ける方法で、ウェブサイト上で画像を見ることができない人にとっては特に重要です。1～2つの短文で代替テキストを作り、画像を簡潔に説明します。

代替テキストの使用方法や、なぜ使用するのかの詳細は、「アクセシビリティのためのライティング」をご覧ください。

ボタン

ボタンには、必ずアクションを示す言葉を表示しましょう。はっきりとわかりやすい言葉を使用します。冠詞を含むすべての言葉を大文字で始めます。ボタンのコピーにアンパサンドを使用しても構いません。

標準的なウェブサイトのボタンには、以下のようなものがあります。

• Log In（ログイン）

• Sign Up Free（無料でサインアップ）

• Subscribe（購読申し込み）

• Email Us（メール）

チェックボックス チェックボックスには、センテンスケースを使用します。

ドロップダウンメニュー

メニュー名にはタイトルケースを、メニュー項目にはセンテンスケースを使用します。

フォーム

フォームのタイトルは、フォームの目的を、わかりやすく簡潔に説明する必要があります。

フォームのタイトルにはタイトルケースを、フォームの欄にはセンテンスケースを使用します。

フォームはできるだけ短くしてください。

私たちが必要とし、使用する予定のある情報のみを尋ねてください。性別を含む、個人的または個人的と見なされる可能性のある情報を求めないでください。性別を尋ねる必要がある場合は、ドロップダウンメニューではなく、ユーザーが自分で記入できる入力欄を用意してください。

見出しと小見出し

見出しと小見出しを使用することで、コンテンツが整理されます。見出しや小見出しには、そのコンテンツのキーワードを含めたり、コンテンツのメインテーマが何かわかるようにする必要があります。

見出しと小見出しはセンテンスケースで書きます。疑問符、あるいは見出しが2文以上である場合を除き、末尾の句読点の使用は避けてください。

見出しと小見出しは、階層状に整理します。最初に見出し、次に小見出しの順に並べます。（H1の下にH2、H2の下にH3といった具合にしてください。）

• 見出し（H1）は、読者に対し、これから読もうとしているコンテンツのさわりを伝えます。ページやブログのタイトルに使用してください。

• 小見出し（H2、H3など）は、記事をより小さく、より具体的なセクションに分けます。小見出しは、読者にコンテンツの道筋を与え、内容を読みやすくします。

リンク

外部サイトの参照を促す場合はリンクを貼ります。リンクを使用して、関連コンテンツや信用できる外部ソースを、ユーザーに伝えてください。

テキストにリンクを貼る場合、リンクに冠詞（a、an、the、our）を含めないようにしてください。例えば：

• OK：Read the automation guide for details. （詳細については、自動化ガイドをお読みください。）

• NG：Read the automation guide for details. （詳細については、自動化ガイドをお読みください。）

文の終わりまたはコンマの前にリンクがある場合は、句読点をリンクしないでください。

「Click here!（こちらをクリック！）」とか「Click for more information（詳細についてはこちらをクリック）」または「Read this.（これを読んでください。）」のような言い方はしません。普段通りに文章を書き、関連するキーワードをリンクさせましょう。

リンクは、通常のテキスト、太字、強調テキストと区別できる外観でなければなりません。クリック可能であることを示すためにマウスオーバーを設定して、「未訪問」や「訪問済み」の状態を設定します。リンクにマウスオーバーを設定するときは、支援技術やタッチデバイスを使用している読者をサポートするために、「フォーカス(選択された状態)」を設定してください。 リスト

リストを使用して、手順、グループ、または一連の情報を提示します。簡単な紹介とともにリストのコンテキストを示します。プロセスのステップを説明する場合など、順序が重要な場合はリストに番号を付けます。リストの順序が重要でない場合は、番号を使用しないでください。

リストの中に、完全な文がひとつでも含まれていたら、リスト全体に、句読点とキャピタライゼーションを使用してください。リストの項目が完全な文が含まれない場合は、句読点は使用せず、各項目の最初の単語を大文字にします。

ナビゲーション

メインナビゲーションまたはグローバルナビゲーションには、タイトルケースを使用します。サブナビゲーションには、センテンスケースを使用します。

ナビゲーションのリンクは、わかりやすく簡潔にしてください。

ラジオボタン

見出しにはタイトルケース、ラジオボタンの欄にはセンテンスケースを使用します。

関連記事

長い文章の最後に、関連リンクがリストになっていることがあります。この場合、リンクの数が多くなりすぎないように注意しましょう。多くても、4つまでにしてください。

関連記事は、ステップダウン、ステップアップのルールに従って、論理的な順序で表示されるべきです。最初の記事は現在の記事より少し易しいもの。次の記事は、それよりも少し難しいものにします。

可能であれば、関連記事の本文からのリンクを繰り返さないでください。

タイトル

タイトルを利用してページを整理し、読者にとってわかりやすいものにします。タイトルは、ページやセクションの最初に表示され、本文の内容を簡単に説明してくれます。タイトルはまた、検索エンジンにページの内容を伝え、検索結果に表示されます。

タイトルは（ご想像の通り）タイトルケースで書きます。

タイトルが質問でない限り、タイトルに終わりの句読点を使わないようにしましょう。

※補足：疑問符(?)は句読点の１種です。

SEO

私たちは、機械ではなく人間のために書きます。検索結果を押し上げるために、キーワードを詰め込むようなSEOテクニックは使いません。とはいえ、より多くの人や検索エンジンが、私たちのコンテンツを簡単に見つけて共有できるようにしたいと考えています。それを実現する方法は次の通りです。

• ページのトピックをひとつに絞ります。タイトルや見出しには、そのトピックと関連した、わかりやすくイメージしやすい用語を使用します。

• 説明的な見出しを使ってページを構成し、重要な情報を強調します。

• すべての画像に、説明的な代替(alt)テキストを付けます。