サイトの紹介

利用技術

• Nuxt.js
  • @nuxt/content
  • @nuxtjs/axios
  • @nuxtjs/dotenv
  • @nuxtjs/pwa
  • nuxt-i18n
• Vuex （Store）
• eslint
  • eslint-plugin-prettier
  • eslint-plugin-vue
  • eslint-plugin-vuejs-accessibility
• modern-normalize
• Google Fonts

マークアップ

ヒューマンリーダブル（人が理解できる）とマシンリーダブル（機械が理解できる）となる情報設計を実現するためにセマンティクスなマークアップの実装しています。

また、WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）を使用して、コンテンツの補完をするための実装も行っています。

<article id="about:markup" aria-labelledby="about:markup_heading">
  <h3 id="about:markup_heading">
    {{$t("aboutPage.subHeading.markup")}}
  </h3>
</article>

コンポーネント指向設計

表示のために得るAPIを整形する必要がありますが、1つのコンポーネントで管理することで、ソースコードの簡略化・複数での使い回しや情報設計の効率化を図ることができます。

<ul role="list">
  <li role="listitem" v-for="list in listItem" :key="list.title">
    <template v-if="list.datetime">
      <time :datetime="list.datetime">
        {{dateReplace(list.datetime)}}
      </time>
      -
    </template>
    <template v-if="list.created_at">
      <time :datetime="list.created_at">
        {{dateCreated(list.created_at)}}
      </time>
      -
    </template>
    <a :href="list.url" target="_blank" rel="noopener" lang="ja">
      {{list.title}}
    </a>
  </li>
</ul>

PWA (Progressive Web Application)

Google Chromeで閲覧している場合、PCからはデスクトップPWA、モバイル端末からはPWAとして利用することができます。

ブラウザを通さずにネイティブアプリとして起動できたり、キャッシュを活用した早いページ体験、1度ダウンロードするとオフラインで閲覧することもできます。

• Your First Progressive Web App | Web Fundamentals | Google Developers

国際化対応

Nuxt.jsで開発しているのでnuxt-18nというツールを導入しています。国際化対応ほか、特定の言語のみに表示する場合などのレンダリング処理も可能となっています。

<template v-if="this.$i18n.locale !== 'ja'">
  <em>{{ $t("onlyJPText") }}</em>
</template>

オーバーデザインしすぎない

過剰な装飾をしすぎることは目的の情報にたどり着く阻害に成り得ます。ブラウザのデフォルトスタイル、つまり標準の姿を意識したデザインにしています。

また、セマンティクスなマークアップで設計していることで、ブラウザ標準のスタイルのままでも違和感なく情報にたどり着けるようになっています。

• This is a motherfucking website.

文字サイズ

基本16pxになるように設定しており、ページを拡大してもサイズ比を維持したremで指定しています。

カラーコントラスト

使用しているカラーはいずれも、背景とのコントラスト比が最低でも4.5:1となるように設定されていますが、純粋な白黒ではなく、濃淡を抑えてバランスをとったカラーとなっています。

最大幅について

メインコンテンツの最大幅は80chに設定しています。chはチェーンと呼ばれ、文字のサイズによって可変する単位です。

この設定にすることのメリットとして、長文が読めない読字障害の利用者のサポートができたり、文字サイズが大きくなるに従ってテキストの一部が欠けて読めなくなるような事態も発生しにくくなります。

バーティカルリズム

ページ全体の一貫性を重視したバーティカルリズムを採用しています。24pxの行間を基準としてマージンや余白などを設定しています。

認知障害がある利用者は、単語と単語の間隔が均一になっていると、テキストをより容易に読めるようになります。