「制服専科本店」事務服館のデザイン、コーディング
OVERVIEW
フューチャーショップ2を使用した自社ECショップのデザインとコーディングを行っています。楽天市場「制服専科」と同じようにメディカルウェアの販売がメインですが、作業服館、事務服館などカテゴリーごとに枠組みを変えて、違った印象に見せています。そのうちの事務服館をご紹介します。
レフトサイドのメニューはアコーディオンメニューに視覚的に判別しやすいよう写真を付けました。
アイテム別だけではなく、なりたいイメージや必要な機能、色別、ブランド別でも探せるようなページ作りをしました。特に女性をターゲットにしているので、全体に華やかで視覚に訴えるようなデザインを意識しています。
一見イラストに見える部分もSEOの観点からスタイルシートを使ってHTML上に文字を打っています。サイズの異なるブラウザで見たとき、スマートフォンで見たときにレイアウトが崩れないようチェックしながら作業を進めました。
制服専科本店は専門のWEBデザイナーに外注した部分もありますが、フリーの状態からサイトをデザインしていくので、HTMLだけでなくスタイルシートについて学べる良い機会になりました。また、まだまだ勉強中ではありますが、java scriptやjQueryについても触れることができました。
※2022年3月現在、本店デザイン担当が変更になり別のデザインに変更されています。