Ruto Okazaki

https://route-site.com/

サイトの分類
ポートフォリオサイト
担当範囲
情報設計 / デザイン / コーディング / WordPress
使用技術
HTML / CSS / Sass / JavaScript / PHP / WordPress / Figma / Photoshop / Git / Github / スプレッドシート
制作期間

情報設計 1週間
デザイン・コーディング 2週間
WordPress 1週間

経緯・詳細

このサイトになります。
就職活動用に作成したポートフォリオサイトなので、見やすさや使いやすさ、UI/UXを意識しながら、伝えたい情報がしっかりと伝わるデザインを心がけました。
履歴書や面接で伝えきれない内容を、このサイトを通して補えるように設計しています。

情報が多くなりがちなので、それぞれを整理し、何を伝えたいのかを明確にした上で、アイコンや写真を使って視覚的に分かりやすいデザインにしています。特に、文字だけでは伝わりにくい部分を視覚的な要素で補い、ユーザーが理解しやすいように工夫しました。UIの実装は難しい箇所もありましたが、伝わりやすさを優先し、時間をかけてでも丁寧に作り込みました。

ほとんどのコンテンツは管理画面から簡単に編集でき、動的に表示を切り替えられるように構築しています。

デザイン面では、シンプルで見やすく、かつ使いやすいサイトを目指し、さまざまなサイトを参考にしました。
情報設計においては、ポートフォリオを見てくださる方に伝えたい情報を整理し、ページ構成をシンプルに保つよう心がけています。情報量が多くなる部分では、UIの工夫を凝らして視覚的に整理し、わかりやすいレイアウトにしています。

こだわり
モーダル(Skillsの詳細表示)やタブ切り替え(Skillsのカテゴリ)、スクロール時の要素の表示/非表示など、さまざまなインタラクションをJavaScriptで実装しました。また、スライダー機能はjQueryを使用しています。
管理画面についても、実案件に近い形でカスタマイズを行いました。特に、WordPress初心者でも、操作方法を教えれば簡単に更新・運用できることを意識しています。
データ管理に関しては、初回のデータ量が多いため、CSVデータでの書き出しと、スプレッドシートを使った編集・インポートを利用し、効率的に情報を更新しました。これにより、一つ一つ手作業で更新するよりも作業時間を大幅に短縮できました。