Facebook UPBROOM(グリーンオフィス)のWebサイト
Logo

UPBROOMのWebサイト

クレジット
UPBROOMのWebサイト-1
シェア
制作ノート
UPBROOM(グリーンオフィス)のWebサイト

【製作期間】

3週間(2026.8)

【担当箇所】

コーディング

【使用言語】

HTML、CSS

【URL】

https://sprightly-travesseiro-18a9db.netlify.app/

【制作時に意識したこと】

既存のデザインをもとに、HTML・CSSでWebサイトを実装しました。

コーディングでは、デザインの意図や世界観をできるだけ忠実に再現することを意識しました。特に、余白の取り方や文字の大きさ、画像とテキストの配置など、全体のバランスを確認しながら細かな調整を行いました。

また、さまざまな画面幅(360~2560サイズまで対応)で閲覧されることを想定し、レスポンシブ対応も行いました。単にデザインを当てはめるのではなく、画面幅が変わった際にも情報が見やすく、自然なレイアウトになるよう調整しています。

コードについても、後から内容を修正・追加することを考え、構造を整理しながら記述しました。

デザインから読み取った意図を大切にしながら、「見た目の再現性」と「Webサイトとしてのユーザーの使いやすさ」の両方を意識して実装した作品です。

※デザインサンプルです。

シェア
UPBROOM(グリーンオフィス)のWebサイト

【製作期間】

3週間(2026.8)

【担当箇所】

コーディング

【使用言語】

HTML、CSS

【URL】

https://sprightly-travesseiro-18a9db.netlify.app/

【制作時に意識したこと】

既存のデザインをもとに、HTML・CSSでWebサイトを実装しました。

コーディングでは、デザインの意図や世界観をできるだけ忠実に再現することを意識しました。特に、余白の取り方や文字の大きさ、画像とテキストの配置など、全体のバランスを確認しながら細かな調整を行いました。

また、さまざまな画面幅(360~2560サイズまで対応)で閲覧されることを想定し、レスポンシブ対応も行いました。単にデザインを当てはめるのではなく、画面幅が変わった際にも情報が見やすく、自然なレイアウトになるよう調整しています。

コードについても、後から内容を修正・追加することを考え、構造を整理しながら記述しました。

デザインから読み取った意図を大切にしながら、「見た目の再現性」と「Webサイトとしてのユーザーの使いやすさ」の両方を意識して実装した作品です。

※デザインサンプルです。

シェア
Makiko Tanakaの他の作品
画像
作品を見る
TalentProgressコーポレートサイト
画像
作品を見る
雑貨店EveryU.のWebサイト
画像
作品を見る
野菜の定期便VEGEEのLP
foriio

あなたのforiioを無料で作成

fori.io/
UPBROOMのWebサイト-1
UPBROOM(グリーンオフィス)のWebサイト

【製作期間】

3週間(2026.8)

【担当箇所】

コーディング

【使用言語】

HTML、CSS

【URL】

https://sprightly-travesseiro-18a9db.netlify.app/

【制作時に意識したこと】

既存のデザインをもとに、HTML・CSSでWebサイトを実装しました。

コーディングでは、デザインの意図や世界観をできるだけ忠実に再現することを意識しました。特に、余白の取り方や文字の大きさ、画像とテキストの配置など、全体のバランスを確認しながら細かな調整を行いました。

また、さまざまな画面幅(360~2560サイズまで対応)で閲覧されることを想定し、レスポンシブ対応も行いました。単にデザインを当てはめるのではなく、画面幅が変わった際にも情報が見やすく、自然なレイアウトになるよう調整しています。

コードについても、後から内容を修正・追加することを考え、構造を整理しながら記述しました。

デザインから読み取った意図を大切にしながら、「見た目の再現性」と「Webサイトとしてのユーザーの使いやすさ」の両方を意識して実装した作品です。

※デザインサンプルです。

シェア
Makiko Tanakaの他の作品
画像
作品を見る
TalentProgressコーポレートサイト
画像
作品を見る
雑貨店EveryU.のWebサイト
画像
作品を見る
野菜の定期便VEGEEのLP
foriio

あなたのforiioを無料で作成

fori.io/