ポートフォリオについてのキービジュアル

ポートフォリオについて

2018年にフロントエンドディベロッパーとしてキャリアを始めてからの取り組みをまとめた。

期間
2022.04 - 2022.06
役割
企画・デザイン・実装
技術・ツール
Next.js, TypeScript, SCSS, Vercel, MicroCMS, Figma, Storybook

情報整理・配置

情報の優先順位を考えて設計。

これまでの経験・これから何をしていきたいかを明記し、人となりが見えるように簡単なプロフィールも記載した。

作品については、当時どのようなことを考えて制作したかを振り返って記載するようにした。

色彩計画

自分の性格は診断テストの結果によると「仲介者」で、「落ち着きがあり控えめで、内気にさえも見られますが、内には激情と情熱があり、まさに光を放つ可能性を秘めている」とのことだった。

概ね当たっているような気がするため、落ち着きを与えながら光を放つようなグリーンを、暗めの背景とあわせて表現した。

アクセシビリティ対応

ウェブアクセシビリティ簡易テスト(SmartHR Design System)に沿って確認。

また、下記のようにWebアクセシビリティ実装チェックリストを作成しながら、
Web Content Accessibility Guideline (WCAG)のガイドラインを詳細に確認している。

a11yチェックリスト(PDF)

上記について、https://a11y-i-guideline.netlify.app/でチェックリストを作成。
※ただしWCAG2.1未対応のため、差分を確認する必要あり

少しずつポートフォリオを改善していきたいと思う。

Storybookの導入

だれかと共同作業するときに特に役に立つと思うが、Webサイトを拡張する際にどんなコンポーネントがあるか把握できて便利かも?と思い導入。

Storybookのキャプチャ

詳細

Next.jsにおけるコンポーネント設計・CSS設計にまだ最適解が見出せていないので模索中。

GitHubのリポジトリ