▼オリジナルサイト https://momoko0402.web.fc2.com 使用ソフト：Photoshop 制作期間：7日 サイズ(PC)：W1920pxH8148px 使用フォント：Montserrat/Noto Sans CJK JP ターゲット層： イベントやSNSで興味を持ってくださった方に もっと自分を知ってもらう機会にしたい ----- 使用した配色：シンプルだけどモダンな配色にしました。淡い色を少し加えて親しみ感が出るよう意識しました。 アクセントカラー：温かみのあるイエロー(#f2af05) - モダンなイメージ。ポイントになり、テキストがチャコールグレーでも明るいグレーでも映える色。（今後の自分のテーマカラーにしていきたい） アクセントカラーサブ：淡いブルー(#c7d5d9) - モダンな配色の中に柔らかさをプラスする。さりげなく変化を付けたい箇所に使用 ベースカラー：ホワイト(#ffffff) - 他の色を邪魔しないカラーを選択 テキストカラー：チャコールグレー(#333333) /　明るいグレー(#f2f2f2f) - 読みやすさを重視 ----- 全体的に派手過ぎないけれど「こんなこともできます」というアピールにつながるよう それぞれのページにところどころアニメーションを入れ込んでみました。 レスポンシブ対応にしてスマホ版とPC版でそれぞれ使いやすく見やすいよう画像の見せ方や文字の調整・配置の変更を行いました。 chrome・firefox・safariの標準ダークモードに対応させました。 2025年のトレンドを取り入れダークモードを意識したカラー・文字のみのミニマルなヒーローページを取り入れました。 ▼参考サイト https://coosy.co.jp/blog/2025_webdesign_trend/ https://brik.co.jp/tips/438 ▼サイト名 もともと自分が作成するものに「396（マイクロ）」という言葉をつけていたため「396」とPORTFOLIOを掛け合わせて 396 FOLIOとつけました。 小さなPORTFOLIOという意味もあり「これからこのサイトも自身も大きくなっていきたい」という想いも込めています。 ▼TOP ・無名なのでトップには略歴とWORKSをもってきて「どういう人間なのか」をまず見てもらうようにしました。 ・ヒーローイメージが固定であったりボタンにエフェクトがあったりと動きをつけて単調にならないよう気を付けました ・NEWSページの最新のもののみTOP画面でみられるように工夫しました。 ▼ABOUT ・自己紹介と職務経歴を簡単にのせてみました。 ・職務経歴は画面上に移ったときホバーエフェクトがかかるようにして注目してもらえるよう工夫しました。 ▼CONTACT ・入力制限をかけてきちんと入力しないとメッセージが送れないようになっています。 ・GoogleFormと紐づけており、CONTACTから送信するとGoogleForm→スプレッドシートに書き込まれる→メールに通知が届くといった仕組みを構築しています。 ・送信が完了するとSUCCESSページに飛ぶようになっています。 ▼PORTFOLIO ・一つずつスライドして画像が登場するエフェクトをかけて動きを付けることで ワクワク感を演出してみました。 ・画像をクリックするとプレビューでゆっくり見てもらえるよう工夫しました。