Skip to content

Latest commit

 

History

History
147 lines (108 loc) · 6.06 KB

EXPLAINING_PORTFOLIO_SITE_ja.md

File metadata and controls

147 lines (108 loc) · 6.06 KB
Raw

ポートフォリオサイト（開発・デザイン）にまつわる解説

ポートフォリオサイトの実装にまつわる解説

利用技術

  • Astro
  • Tailwind CSS
  • Biome
  • Markuplint
  • modern-normalize

詳細をもっと知るには package.json をご覧ください。

マークアップ

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

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

詳細を確認する 
<section id="basic" aria-labelledby="basic-heading">
  <h2 id="basic-heading">{t("heading.basic")}</h2>
</section>

aria-labelledbyとsection要素を紐付けることで記事間を移動するときにユーザを支援します。

コンポーネント指向設計

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

詳細を確認する

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

<ul>
  {
    list.map(listItem => (
      <li>
        {listItem.datetime && (
          <span class="time">{dateStirngReplace(listItem.datetime)} - </span>
        )}
        {listItem.url ? (
          <GlobalLinkComponent link={listItem} />
        ) : (
          listItem.title
        )}
      </li>
    ))
  }
</ul>

GlobalListComponent.astro

国際化対応

ポートフォリオサイトは日本語と英語で表示されるようになっております。１ファイルで対応する各言語ごとに自動的に翻訳されるように設計されています。

詳細を確認する

翻訳される各言語をディレクトリごとで管理しています。

src/i18n
├── en
│   └── dictionary.ts // 英語
└──ja
    └── dictionary.ts // 日本語

useTranslations を使用して対応するキーと一致した場合、翻訳された文言が表示されます。

---
import { useTranslations } from "../../../i18n/util";
const t = useTranslations(Astro);
---
<h2 id="contact-heading">{t("heading.contact")}</h2>
<!-- 日本語： <h2 id="contact-heading">連絡先</h2> -->

特定の言語のみに表示する場合などのレンダリング処理も可能となっています。

日本語ではない場合に表示される条件式は以下のようになっています。

---
const lang = getLanguageFromURL(Astro.url.pathname);
---
{lang === "en" && <em>Sorry, Japanese text only</em>}

ポートフォリオサイトのデザインにまつわる解説

あらゆる層の方が見やすいようにインクルーシブデザインを取り入れています。

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

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

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

文字サイズ

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

カラーコントラスト

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

詳細を確認する

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

design_token value
var(--y-black-base) rgb(21, 32, 43)
var(--y-white-base) rgb(255, 255, 255)
var(--y-white-low) rgb(210, 210, 210)
var(--y-white-medium) rgba(163, 163, 163)
var(--y-blue-low) rgb(90, 190, 255)
var(--y-blue-medium) rgb(18, 122, 200)
var(--y-purple-medium) rgb(220, 100, 220)

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

最大幅について

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

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

バーティカルリズム

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

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