リニューアルしたポートフォリオサイトについて
2026年10月1日にポートフォリオをリニューアルしました。
名称もこれまでの「Ryo-Flute.com」から「Ryo Web Craft」に改め、コーダー・Web制作者としてより積極的に活動していく拠点となるように制作しています。
意識したこと・制作時間
今回は、自分自身にとっても新しい技術を多く取り入れることを意識しました。また、制作当時は平日昼間に本業がありましたので、平日の早朝や夜、休日のスキマ時間に少しずつ作業を行いました。数分だけの作業や、通勤電車の中で調べ物をして、使用するコードをメモしておく日もありました。そんなわけで具体的な作業時間を明確に記載できませんが、6月からワイヤーフレームの作成を始め、9月はじめに大枠が完成し、10月間近に公開できる目処がたった、という感じです。
デザイン
デザインはAffinityを使用しました。今思えばなぜFigmaを使わなかったのか…。ただ、今回はネットが繋がらない環境で作業することもあったので、結果としてはAffinityで良かったのかもしれません。
トンマナ
後述しますが、全体的にAIの力を借りています。デザイン面ではライトモードとダークモードそれぞれの配色やボーダー、角丸、ボックス・シャドウについて提案してもらい、さらに各モードのイメージを画像化してもらいました。そこから自分なりに想像を膨らませてデザインを行いました。デザインそのものについては出力していません。
構成
もともとのポートフォリオサイトの構成を踏襲しつつも、フリーランスとして活動することを念頭に置いて調整しました。ただし、やや世界観、雰囲気を重視しています。例えば、MVにCTAを置いても良かったのかもしれませんが、営業色が強いため省略しました。
デザイン面で気をつけたこと
案外にコンテンツ数が多いです。これからさらに増えることも考えると、「迷わない」が最優先だと考え、ギミックは多いものの、構成・構造や主要UIはできるだけシンプルに明快になるようにしたつもりです。
使いやすく、見やすいWebサイトになるよう、最後まで調整を重ねました。例えばお知らせの帯の色を調整することでコントラスト比を確保したり、WorksとBlogの記事パネルは似たUIだからこそ、操作方法がバラバラにならないように統一して、より直感的に使えるようにしました。
コーディング・構築の流れ
HTML、CSS、JavaScriptでトップページのコーディングを済ませたあとはAstroに移行させて、ページで共通する部分をコンポーネント化することにより下層ページの静的コーディングの効率化を図りました。大方のコーディングを完了させて、WordPress構築に移りました。公開時点では必要なところだけ動的化させて、あとはハードコーディングの状態です。
実装した要素
ライトモード・ダークモード
CSS変数を使用し、それぞれのモードにおける配色、ボーダー、フォントなどを設定しています。
JSでhtml要素のdata-theme属性を切り替え、data-theme属性の値で実際に使用するCSS変数を切り替えています。
なお、prefers-color-schemeにも対応しています。
具体的には–light-background-colorと–dark-background-colorを用意しておき、data-theme属性の値に応じて–background-colorに先程のCSS変数のどちらかを格納する、といった形です。
ブラウザを閉じたらリセットされてほしいがタブ間で設定は保持したい、と考えてcookieに格納しています。（外部への送信を行いませんので、同意ダイアログは不要と判断しています。）期限を指定していないため、通常はブラウザを閉じればデータは破棄されます。
ローディング画面
JSでタイルの敷き詰めを行い、GSAPでアニメーションを実装しました。
こちらもライトモード・ダークモードと同様にcookieにデータを格納しています。ちなみに、タブ間で設定は保持したくない、新しいタブで開くたびに表示させたい、という場合はsessionStorageの使用が良さそうです。
ページ遷移アニメーション
CSSのView Transition APIを使用してアニメーションを設けました。基本的な遷移アニメーションは非常にシンプルなので分かりづらいかもしれません。
WorksとBlogについては、画像にview-transition-nameの指定を行いましたので、わかりやすくアニメーションします。トップページからアーカイブページ、アーカイブページからアーカイブページといった遷移時にはJSで無効化しています。
トップページの背景アニメーション
ライトモードとダークモードで異なるアニメーションを表示するようにしました。
ダークモードのアニメーションはtsParticlesを使用しています。また、ライトモードのアニメーション自体はオリジナルではなく、参考にしたサイトがあります。
JavaScriptで取り組むクリエイティブコーディング – パーリンノイズを使いこなせ – ICS MEDIA
こちらのアニメーションを使用しています。ただし、そのまま使用しているのではなく、コードに手を加えてクラス化しています。これにより、tsParticlesに近い書き方で設定やアニメーション制御ができるようになっています。
dialog要素とpopover
各所にdialog要素やpopoverを使用したコンテンツを配置しています。これに合わせてCSSのポジション・アンカーも使用しています。ポジション・アンカーは位置の指定などにややクセがあるように感じられたので、何度も試して慣れていくのが良いように感じました。
トップページSkillsセクションはbutton要素と対になるdiv要素（popover）で構成されています。基本の仕様としてクリック（タップ）でポップオーバーが開閉しますが、それに加え、ホバーでもポップオーバーが表示されるようにしています。なお、他に開いているポップオーバーがなければ開閉するまでのタイミングにややディレイがかかるようになっています。
GSAPによるアニメーション
ローディング画面だけでなく、例えばNewsのカルーセルにもGSAPを使用しています。これは公式ドキュメントにある「seamlessLoop」のコードをベースに実装しています。
seamlessLoop | GSAP | Docs & Learning
アクセシビリティに関する実装
一部メニューのキーボード操作対応
基本的にキーボードのみでWebサイトを閲覧する場合、タブキーでフォーカスを移動させます。上下キーで画面スクロールが可能ですがフォーカスを移動させると画面はフォーカスがあたっている要素までスクロールします。
今回、テーマ切り替えとグローバルナビに関してはEnterキーで展開し、上下キーでもフォーカスが移動するようにしました。ちなみに実装方法はシンプルと言うかアナログな方法です。
「視差効果を減らす」設定の反映
色々やってみたいことを詰め込んだので、割と「動き」が多いサイトになったと思います。この動きはOS設定にある「視差効果を減らす」で変わります。トップページの背景アニメーションは停止、ニュースカルーセルも停止、パララックスも停止。ページ内リンクの遷移アニメーションやview-transitionのアニメーションも停止します。
ちなみに、設定の変更は再読み込みで反映されます。
トップページのアニメーションを停止するボタン
「視差効果を減らす」とは別に、動き続けるものを停止するボタンを設けました。トップページの背景アニメーションとニュースカルーセルを停止・再生することが可能です。こちらはクリックごとにリアルタイムで反映されます。
AIの使用
コードの書き方は調べながら行うのが常ですが、その時間を短縮する目的でAIを活用しています。
以前、デザインもふくめて全部AIにやってもらう試みをしたのですが、うまくいかず、自分自身もそのやり方はしっくりと来ませんでした。
現在はまずはできるだけ自分でやってみて、それを添削してもらったり、わからないところのコードを出力してもらったりする方法でAIを使用しています。出力された内容は一通り確認して、問題ないかどうかを確かめ、必要に応じて修正してから使用しています。
デザインやコーディング全部を任せるには、自分自身がそれを評価できるようにならないといけないと実感しました。そもそも試行錯誤してデザインやコーディングするのが好きなので、それをAIに任せるのも本末転倒でした。
最後に
無事に公開できて嬉しい限りですが、実はまだコンテンツの追加を予定しています。
それは絶対に必要になるものであったり、ややギミック的要素の強いものであったりします。
コーディングも改善点がきっと出てくるでしょうから、都度手入れしていく予定です。
2027年からは、この新しいポートフォリオサイトを拠点に、自身の環境を大きく変え、より良いものを制作できるよう努めて行く所存です。
どうぞよろしくお願いいたします。