紙を素材とするアイラッシュを取り扱っているクライアント様のショップサイトとブログをカスタマイズさせていただきました。
両サイトとも、元々クライアント様がご契約されていたショップサーブとアメーバブログを続行させカスタマイズで対応することに。ご要望でどちらもモノトーンでシンプル＋すっきりしたデザインで作成。
Webプランニング
Shop Siteカスタマイズ
白をベースに商品が際立つように構成。仕様上Htmlの変更ができなかったため、cssとJavaScriptのみでのカスタマイズ。そのうえ、テーブルレイアウト＋多くのクラスがダブっていた為、部分的にJavaScriptによって動的にHtmlの書き換えを行っている。
「枠」や「仕切り」を入れるのがお好きではないとのことで、各コンテンツの境界は余白のみで見えない境目をつくって作成。
Blog
クラインアト様からの強い要望もありショップサイトと対になるイメージで黒をベースにしつつ完全にモノトーンのみでデザイン。ファッションテイストを強めるためにクールなイメージに。
ショップサイトのメインビジュアルがスライダーを使用したため、ブログ側はメインビジュアルをアニメーションで作成。
Author's Comment
Designer: 深井 学
勉強になった案件
今や数多くのCMS（コンテンツマネジメントサービス）がありますが、コードがまったく書けない方に優しいCMSは普段コードを書く人間からすると非常に扱いにくいものになるケースが少なくありません。今回は個人的には非常に「難しかった」案件でした。
Htmlを編集できないうえ、モジュールの種類が少なく、一つのクラスのスタイルを変更するとありとあらゆるコンテンツ、ページにその影響が及ぶといったケースに多々見舞われ、かなり重箱の隅をつつくようなcss操作を強いられたように思います。
Html編集不可でのカスタマイズ製作時は元のサイトのHtmlをあらかじめ確認した上でデザインするのですが、それにもかかわらずデザイン画を再現するという作業が非常に時間のかかるものになってしまい驚きました。
ただ、こういった指定をしておくと共通レイアウトを多用する際は便利なんだなということも学ばせていただいたので、よい勉強にもなった案件だったと思います。
「後追い」はナンセンスになることもある
最近ではメインビジュアルにスライダー（画像のスライドショーなど）を用いるサイトが多いため、少し見飽きた感もでてきたかなと感じます。そこで本案件のアメブロカスタマイズでは「アニメーションによる動きがあるメインビジュアル」を採用しました。
ファッション系であれば尚のこと、新しさ（新鮮さ）は必要不可欠であり他とは少し違ったアプローチがあるべきであると私は考えます。