案件概要
個人事業主様よりご依頼いただき、清掃サービスとネイルサロンを紹介するWebサイトのSTUDIO実装を担当しました。
支給されたFigmaデザインをもとに、4ページ構成のサイトをSTUDIOで構築しました。
制作情報
- 種別：クライアントワーク
- 制作期間：1週間
- 使用ツール：Figma / STUDIO
- 担当範囲：FigmaからSTUDIOへの実装、レスポンシブ対応、CMS設定
ご依頼内容
クライアント様から支給されたFigmaデザインをもとに、STUDIOでのサイト構築をご依頼いただきました。
デザインの再現だけでなく、スマートフォン・タブレット表示を考慮したレスポンシブ対応や、運用を見据えたCMS設定も担当しました。
ページ構成
今回担当したページは以下の4ページです。
- トップページ
- 料金プラン（個人向け）
- 料金プラン（業務用向け）
- ネイルサロンページ
工夫したポイント
Figmaデザインの再現
支給されたFigmaデザインをもとに、余白やレイアウトのバランスを意識しながらSTUDIO上で再現しました。
デザインの意図を損なわないよう、細かな余白や要素間の距離を確認しながら実装を進めています。
レスポンシブ対応
PCだけでなく、スマートフォンやタブレットでも快適に閲覧できるよう調整を行いました。
特に文字サイズや余白、画像サイズの調整を行い、各デバイスで見やすいレイアウトになるよう最適化しています。
CMS設定
クライアント様が運用しやすいよう、CMSの設定も担当しました。
更新頻度や管理のしやすさを考慮しながら構築しています。
苦労した点
FigmaからSTUDIOへの実装は、デザインを忠実に再現しながらSTUDIOの仕様に合わせて構築する必要がありました。
また、デバイスごとの表示崩れが発生しないよう、レスポンシブ対応の調整にも時間をかけて対応しました。
各画面サイズでの見え方を確認しながら、使いやすさとデザイン性の両立を意識して制作しています。
まとめ
今回の案件では、FigmaデザインをもとにしたSTUDIO実装を担当し、レスポンシブ対応やCMS設定まで対応しました。
FigmaからSTUDIOへの実装やLP制作、既存サイトの改善など、お気軽にご相談ください。
STUDIOを活用したWebサイト制作や既存サイトの改善を行っています。
「デザインはあるけどSTUDIOで実装できない」
「スマホ表示が崩れている」
「既存サイトを修正したい」
といったお悩みがありましたら、お気軽にご相談ください。
副業として活動しているため、比較的リーズナブルな価格での対応も可能です。
コメント