yamanoku.netについて

利用技術

• Nuxt.js
  • @nuxtjs/pwa
  • @nuxtjs/google-gtag
  • @nuxtjs/axios
  • nuxt-i18n
  • eslint-plugin-vue
  • eslint-plugin-vue-a11y
• Vuex （Store）
• 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>

コンポーネント指向設計

たとえばスライド一覧のリストでは以下コンポーネントを使ってレンダリングしています。

<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>

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

その他、コンポーネント指向開発でPropsが深くなってしまわないように、Storeから各APIを呼び出すように設定しています。

export default {
  data() {
    return {
      a11ybookIssue: this.$store.state.github.a11y_issues,
    };
  }
};

PWA (Progressive Web Application)

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

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

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

国際化対応

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

日本語と英語を標準で対応しておりますが、その他の言語対応も予定しています。

• i18n Project

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

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

また、セマンティクスなマークアップで設計していることで、スタイルを外してもデフォルトスタイルのままでも違和感なく情報にたどり着けるようにも繋がります。

• This is a motherfucking website.

文字サイズ

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

カラーコントラスト

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

共通で使用できるよう、以下カスタム・プロパティ（CSS変数）を使用して指定しています。

var(--black)

rgb(21, 32, 43)

var(--white)

rgb(210, 210, 210)

var(--gray)

rgba(70, 70, 70, 0.5)

var(--blue)

rgb(90, 190, 255)

var(--purple)

rgb(220, 100, 220)

var(--linkBlue)

rgb(18, 122, 200)

var(--linkVisited)

rgba(70, 70, 70, 0.5)

また、OSの設定によりますが、ダークモード（目に優しい暗い色調）にも対応しています。

最大幅について

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

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

バーティカルリズム

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

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