A comprehensive visual study of a B2B service landing page, conducted as part of the SHElikes design programme. The focus was to analyse the underlying design system, including the grid structure, colour harmony, and responsive layout adjustments between desktop and mobile. SHElikesのデザインプログラムの一環として行った、B2BサービスLPの総合的なビジュアル学習です。グリッド構造、色彩の調和、デスクトップとモバイル間のレスポンシブなレイアウト調整など、根底にあるデザインシステムの分析に重点を置きました。 [ Design Analysis / デザイン分析 ] ■ Colour Palette & Typography / 配色とタイポグラフィ Strategic Colour Use: I identified how a multi-colour palette is balanced by a consistent white base, maintaining high legibility while conveying a friendly and diverse brand image. / 多色使いのパレットが白ベースによっていかにバランスを保ち、親しみやすく多様なブランドイメージを伝えつつ高い視認性を維持しているかを特定しました。 Typography Hierarchy: Analysed the effective use of font weights and sizes (Noto Sans JP and Brandon Grotesque) to create a clear information hierarchy that guides the user's eye. / Noto Sans JPとBrandon Grotesqueのウェイトとサイズを使い分けた、明確な情報設計を分析しました。 ■ Spacing & Layout / 余白とレイアウト Spacing System: By measuring specific pixel values, I discovered a meticulous spacing system that creates a clean and professional aesthetic. / ピクセル単位で余白を測定することで、清潔感とプロフェッショナルな美しさを生み出す緻密なマージン設計を発見しました。 Responsive Adjustment: I examined how the layout adapts from desktop to mobile—such as converting navigation bars into hamburger menus and adjusting vertical spacing to optimise the mobile user experience. / ナビゲーションのハンバーガーメニュー化や、スマホでの閲覧に最適化された縦方向の余白調整など、レスポンシブな適応方法を調査しました。 4. Project Details / 制作詳細 Focus: UI Analysis & Recreation / UI分析と再現 Tools: Photoshop / 使用ツール：Photoshop