
Portfolio
Blog | Portfolio
Next.js15で制作した個人ポートフォリオです。UIを特に意識したデザインとなっています。 ヘッドレスCMSを使用したブログやHubSpotを利用したお問い合わせページを取り入れています。
https://asami-portfolio.vercel.appDesign
Form Button

エラー時と送信完了時のボタンデザインを変更することで状況をわかりやすくしました。状態を管理するstateで切り替えています。文字だけでなくアイコンも変更することでより直感的な見た目にしています。
UI

UIを意識し、Mobileのメニューやページネーションなどボタン部分は大きめの文字サイズにしたり、感覚を広く取っています。
MUI

ポートフォリオ自体のデザインはUIを意識したシンプルなものにしました。そのためReactライブラリのMUIを使用しフォントサイズや色、要素の間隔など統一感があり見やすいデザインにしました。MUIのデザインに合うようにfontも少し丸みがあり親しみやすいものにしています。全体のカラーは黄色にしていますが、黄色は昔から好きな色で、太陽が好きなこともあり自分を表すのに合っていると感じています。アクセントカラーの水色も好きな色なのでMUIのprimaryColorを使用しています。
Coding
Form | MUI & Server Actions & HubSpot

MUIとServer Actionsの機能を合わせ、エラー時の表示部分のUIなどはMUIの機能を利用するようにしています。