room-studio note

room-studio note
学びと制作のノートをまとめた、ポートフォリオサイトです。

About

room-studio note は、職業訓練校で学んだ基礎と、
独学での学び・制作をまとめた小さな制作ノートです。

シンプルで読みやすいレイアウトを大切にしながら、
一つひとつの制作物と向き合い、ていねいに作ることを心がけています。

掲載しているLPサイトは、いずれも架空の案件を想定した自主制作です。
レイアウト設計からデザイン、コーディングまで一通り行いました。
これからも学びの記録とあわせて、少しずつ制作物を増やしていく予定です。

デスクとノートのイメージ写真

制作のこだわり

HarvestBread

  • やさしいベージュとブラウンで、パンの温かみが伝わる世界観を意識しました。
  • ファーストビューで写真を大きく見せ、“おいしさ”が直感的に伝わるレイアウトにしました。
  • 写真の明るさ・色味を Photoshop で調整し、全体のトーンを統一しています。
  • 見出しやボタンの余白を広めに取り、読みやすさと操作しやすさを重視しました。

家具LP

  • 家具の質感が引き立つよう、ミニマルで落ち着いた配色を採用しました。
  • 写真を主役にするため、余白と視線の流れを意識したシンプルな構成にしています。
  • 写真の色味のバラつきを Photoshop で補正し、サイト全体のトーンを揃えました。
  • 説明文は必要な情報に絞り、直感的に読みやすい情報整理を心がけました。

room-studio note

  • オリジナルテーマとして、header / footer / front-page を一から構成しました。
  • 余白と角丸、影を統一し、やさしい印象のコーポレートデザインにしています。
  • Works のカードはUIとしての見やすさと操作性を意識し、ホバーで動きをつけました。
  • PC・スマホどちらでも同じ印象になるよう、レスポンシブを丁寧に調整しました。