Ka!za

Webデザインを学び始めた初期に、STUDIOの基本操作やWebサイトの構成、レスポンシブデザインへの理解を深めることを目的として制作した架空のコーポレートサイトです。

制作にあたっては、STUDIO公式コミュニティ「STUDIANS」のYouTube動画を参考に、実際に手を動かしながらデザインと実装を行いました。

※本作品はオリジナルの制作実績ではなく、Webデザインの基礎を学ぶために制作したトレース・学習作品です。

当時はWebサイトを一から制作した経験がほとんどなかったため、まずは完成されたデザインを再現することで、Webサイトがどのような考え方やルールによって構成されているのかを理解することを目標としました。

特に、

• 情報の優先順位の付け方
• セクションごとの情報整理
• 余白や文字サイズによる視線誘導
• カラーやフォントの統一
• レスポンシブデザインの考え方
• STUDIOを使ったWebサイト構築

といった、Webデザインの基本を身につけることを課題として制作しました。

参考動画をもとに、STUDIO上でのページ制作、レイアウト調整、レスポンシブ対応、画像素材の準備までを行いました。

制作では、単純に見た目を再現するのではなく、「なぜこの位置に要素が配置されているのか」「なぜこの余白や文字サイズになっているのか」を意識しながら進めました。

特に、見出し・本文・画像などの情報に強弱をつけることで、ユーザーが自然な順番で情報を読み進められることを意識しました。

また、PC版をそのまま縮小するのではなく、画面幅に応じて要素の配置やサイズを調整し、デバイスごとに情報が読みやすい状態を維持することも意識しました。

情報のまとまりを意識したレイアウト

コンテンツごとに余白を設け、セクション同士の区切りを明確にすることで、情報を整理して見せる考え方を学びました。

デザインルールの統一

カラー、フォント、文字サイズ、余白などに一定のルールを持たせることで、ページ全体に統一感を持たせました。

レスポンシブ対応

PC・タブレット・スマートフォンそれぞれで情報が読みやすくなるよう、画面幅に応じてレイアウトや要素サイズを調整しました。

この制作を通して、Webデザインは一つひとつのパーツをきれいに作るだけではなく、情報の優先順位や余白、レイアウトなどを含めて、ページ全体を一つのルールで設計することが重要だと学びました。

また、レスポンシブ対応やSTUDIOでの実装を経験したことで、デザインを画面上で成立させるだけでなく、実際のWebサイトとして形にするまでの基本的な流れを理解することができました。

私にとって、Webデザインを実際に形にした最初の作品であり、その後の自主制作や実案件につながる基礎となった制作です。