Zenn
⚒️

ポートフォリオをつくりました

2023/12/30に公開
#
ポートフォリオ
アクセシビリティ
tech

こんばんは．ふじえもんです．
2023年が終わろうとしています．
大学学部から始めたコーディングの成果やこれまでの登壇に使った資料を公開するために，ポートフォリオをつくりました．
ふじえもんのおへや

https://fujiemon.dev/

そこで，ポートフォリオ作ったよ報告として，作成するにあたり使ったツールとこだわりをまとめたのでご覧ください．
ついでにこの記事を読んでいただいた方のポートフォリオなどの作成の参考になれば幸いです．
質問などあれば遠慮なくコメントください．気が向いたら対応します．
GitHub-ふじえもんのおへや

開発環境と選んだ理由

  • repl.it を使ってコーディングしています．
    オンライン(ブラウザ上)で複数人でいろんな言語で書けることが嬉しいです．
    Gitを使ってGitHubと同期を取りバージョンを管理できます．
    なにより嬉しいのはすぐに書いたコードの実行結果を確認できることです．
    Chrome上で作業することが多いのでコーディングと実行結果の確認がブラウザ一枚で完結するのは大変嬉しいです．
  • GitHub Pagesについてでサイトホスティングをしています．
    GitHubを使っているならば，関連サービスのGitHub Pagesを使うのが自然でしょう．
    ※GitHub Pagesサイトのカスタムドメインを管理するを参考にCNAMEとAレコードをお名前.comで設定するのを忘れずに．
  • お名前.comでドメインをとりました．
    これはとくに理由はありません．
    よく名前を聞くサービスであることと，他のホームページを公開した(開発サークルや学園祭など)ときにもこのサービスを使っていて慣れていたから選びました．
    トップドメインを「dev」にした理由は，折角ならエンジニアらしい物がいいなーと思ったからです．また，常時SSL化されていることとGitHub PagesでもHTTPSを使って保護していることから，セキュリティを重視して選びました．
  • LighthouseとWeb Developer ChecklistというGoogleChrome拡張機能を使って，SEOやアクセシビリティ，ユーザビリティ，モバイルでの表示などの項目をチェックしながらデバッグしました．
  • Siegemediaで，実際のコンテンツの見え方やコントラスト比を確認しました．
  • ChatGPT(GPT-4)とアイデアを壁打ちしました．
    こだわりを実装する際に，どのように見せるか，どういうことをやりたいのかをざっくり投げて，言語化・コードサンプルの提供をしてもらいました．

考えたこと・こだわり

  • なるべく１ページに１つの情報を．
    • １ページにいろんな情報があっても，何を伝えたいのかがぼやけてしまうのでページを分けました．
    • まずサイトにアクセスした際に目に入るのはプロフィールとポートフォリオ，スキル・開発経験です．エンジニアとしてのプロフィールをすぐに把握できるようにしています．
  • 自分のポートフォリオからすべての公開資料・成果物にアクセスできるように．
    登壇資料ページでは過去に登壇したイベントページ，資料リンク，スライド(ページ上で読めます)をまとめました．iframe様様です．
    また，プロダクトについても下線を引いた文字をクリックするとすぐにデモを試すことができるページに遷移します．
  • 全ページで統一したデザインでどこでも著者の情報に触れられるように．
    ヘッダーには，プロフィールとナビゲーションがあります．また，フッターには連絡先とSNSやブログサイトを記載しています．これを全ページに置くことで，全体の見た目を統一し，どこのページにいても著者の情報に触れられるようにしました．
  • アクセシビリティを考慮した配色，情報提供

ヘッダーでは，配色のコントラスト比が7.24です．

図1:ヘッダー

図2:ヘッダーのコントラスト比

最初は，アイコンにも使っている藤色を文字色にしようとしたのですが，コントラスト比2.21と読みにくい配色となってしまいました．そこで，濃い目の色に調整したことで好きな紫系の色を使いつつ，読みやすくできました．

図3:#EEEEEEと#A09BD8のコントラスト比

ポートフォリオやスキル・開発経験のところもSiegemediaでみてみると，図4に20.21:1,図5に13.56:1とAAAを満たしたコントラスト比が示されています．

図4:ポートフォリオセクションのコントラスト比


図5:スキル・開発経験セクションのコントラスト比

  • プロダクト紹介は絵と文字ですぐにプロダクトの中身がわかるように．
    アプリタイトル，アイコン，イメージ画像，説明をカード形式で記しています．マウスをカードにホバーすると，少し浮くようにしたり，丸みを帯びて影をつけて立体感が出たりするなどモダンなデザインにしました．
    通常の見た目はこんな感じ．プロダクトイメージとアイコンとプロダクト名，説明をカード風の見た目で表示しています．

    図6:ポートフォリオの一部(通常)

マウスを動かしてカードにカーソルを当てる，つまりホバーするとカードが少し浮いたり，文字色が白色に変わったりします．背景も少し暗めの色に変わります．(右隣のコンテンツと比較すると，表示の違いがわかりやすいです．)

図7:ポートフォリオの一部(ホバーしたとき)

また，スクショではうまく撮れなかったのですが，下線を引いている「プロダクト名アイコン」のところにホバーすると，矢印カーソルから指カーソル☝️に変わるようにしています．
この部分がリンクで別ページに遷移することを視覚的にわかりやすくしました．

(ポートフォリオの一部の成果物のアイコン，プロダクトイメージはまだ準備できていないので整備中です．画像生成AIを使っているのですが，狙い通りの絵になるようにするのが難しい．．)

おまけ

趣味のページも設けてみました．
ひとまずよくプロフに書いている読書と日本酒，あとは使っているデバイスを紹介しています．
表形式にして，表のヘッダーは商品名，ふじえもんの一言としました．文章量に応じて表の幅が広がっているので，今後気が向いたら等幅にするかもしれません．

図8:趣味ページ

まなび

ポートフォリオサイトをつくることで，これまでの棚卸しをする機会になったりコンテンツの見せ方を学んだりすることができました．
それから，過去に自分がつくったもの，書いたものが１つのページからアクセスできるのはとても便利です．

おもってること

  • ヘッダー部分を名刺風にデザインしたい．
    NFCカードとかQRコードで自分のサイトにアクセスしてもらったときにまず目に入るのがヘッダーですが，ほかの見せ方も模索してみたいなーと思っています．

  • ヘッダー・フッターの変更を楽にしたい
    それぞれのページで表示するようにしているのですが，どこか一つを変更したら他のページもコピペで書き換えているので，なんだか無駄な作業のように感じています．

  • 成果物のアイコン，プロダクトイメージを更新したい
    これは時間を見つけて対応したい．

2023年お世話になりました．よいお年を．
以上．ふじえもん．

Discussion