利用技術
-
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
yamanoku.netは、yamanokuこと大山奥人のポータルサイトです。
ヒューマンリーダブル(人が理解できる)とマシンリーダブル(機械が理解できる)となる情報設計を実現するためにセマンティクスなマークアップの実装しています。
また、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>
aria-labelledbyと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>
Google Chromeで閲覧している場合、PCからはデスクトップPWA、モバイル端末からはPWAとして利用することができます。
ブラウザを通さずにネイティブアプリとして起動できたり、キャッシュを活用した早いページ体験、1度ダウンロードするとオフラインで閲覧することもできます。
Nuxt.jsで開発しているのでnuxt-18nというツールを導入しています。国際化対応ほか、特定の言語のみに表示する場合などのレンダリング処理も可能となっています。
以下は日本語ではない場合に表示される条件式です。
<template v-if="this.$i18n.locale !== 'ja'">
<em>{{ $t("onlyJPText") }}</em>
</template>
あらゆる層の方が見やすいようにインクルーシブデザインを取り入れています。
過剰な装飾をしすぎることは目的の情報にたどり着く阻害に成り得ます。ブラウザのデフォルトスタイル、つまり標準の姿を意識したデザインにしています。
また、セマンティクスなマークアップで設計していることで、ブラウザ標準のスタイルのままでも違和感なく情報にたどり着けるようになっています。
基本16pxになるように設定しており、ページを拡大してもサイズ比を維持したremで指定しています。
使用しているカラーはいずれも、背景とのコントラスト比が最低でも4.5:1となるように設定されていますが、純粋な白黒ではなく、濃淡を抑えてバランスをとったカラーとなっています。
共通で使用できるよう、以下カスタム・プロパティ(CSS変数)を使用して指定しています。
また、OSの設定によりますが、ダークモード(目に優しい暗い色調)にも対応しています。
メインコンテンツの最大幅は80chに設定しています。chはチェーンと呼ばれ、文字のサイズによって可変する単位です。
この設定にすることのメリットとして、長文が読めない読字障害の利用者のサポートができたり、文字サイズが大きくなるに従ってテキストの一部が欠けて読めなくなるような事態も発生しにくくなります。
ページ全体の一貫性を重視したバーティカルリズムを採用しています。24pxの行間を基準としてマージンや余白などを設定しています。
認知障害がある利用者は、単語と単語の間隔が均一になっていると、テキストをより容易に読めるようになります。