room-studio note
room-studio note
学びと制作のノートをまとめた、ポートフォリオサイトです。
About
設計から実装まで一貫して行うポートフォリオサイトです。
架空案件を想定し、Figmaでの構成設計からHTML/CSSでの実装まで制作しました。 情報整理と導線設計を意識した、シンプルで読みやすいWeb制作を心がけています。
制作のこだわり
HarvestBread
- やさしいベージュとブラウンで、パンの温かみが伝わる世界観を意識しました。
- ファーストビューで写真を大きく見せ、“おいしさ”が直感的に伝わるレイアウトにしました。
- 写真の明るさ・色味を Photoshop で調整し、全体のトーンを統一しています。
- 見出しやボタンの余白を広めに取り、読みやすさと操作しやすさを重視しました。
家具LP
- 家具の質感が引き立つよう、ミニマルで落ち着いた配色を採用しました。
- 写真を主役にするため、余白と視線の流れを意識したシンプルな構成にしています。
- 写真の色味のバラつきを Photoshop で補正し、サイト全体のトーンを揃えました。
- 説明文は必要な情報に絞り、直感的に読みやすい情報整理を心がけました。
room-studio note
- オリジナルテーマとして、header / footer / front-page を一から構成しました。
- 余白と角丸、影を統一し、やさしい印象のコーポレートデザインにしています。
- Works のカードはUIとしての見やすさと操作性を意識し、ホバーで動きをつけました。
- PC・スマホどちらでも同じ印象になるよう、レスポンシブを丁寧に調整しました。