こんにちは、竹内です。
前回記事「様々なアプローチで商品をPR！カテゴリページ作成」 ではカテゴリページのデザインについて紹介しましたが、今回は商品詳細ページについてご紹介します。
この商品詳細ページではレイアウト変更・カスタマイズを行わず、フラッツの標準テンプレートに沿ってデザインを作成しました。
トップページ・カテゴリページのデザインに合わせ、商品詳細ページもシンプルでスタイリッシュに！と意気込んで作成に着手したものの、やはり難しいものです。何度も調整しながらデザインの作成を進めました。
商品詳細ページは1カラムレイアウト
メイン商品画像と商品情報
商品詳細ページは1カラムレイアウトにしています。
Magentoは商品毎に様々な設定をすることができ、商品詳細ページの表示内容に影響を与えます。
例えばオプションを設定した商品にはオプション選択フォームが表示されます。
2カラム・3カラムレイアウトでは、これらのパーツで画面が窮屈になってしまいます。しかし、1カラムレイアウトにすれば余白を活かし見やすい画面にすることができます。
適切なアイコンを使用してシンプルに装飾
（上）カートボタン周辺（下）商品のタグ
上の画像は、カートボタン周辺と商品のタグ部分です。
カートボタンの下のテキストリンクをアイコンで装飾しています。また、商品のタグではフォームの項目名の部分をアイコンのみに省略しています。
適切なアイコンで、より直感的に意味を伝えたり、テキストを省略しすっきりとさせることができます。
フォントの太さに注目する
太字に頼らず見出しを表現する
これは社内レビューで指摘されたことなのですが、テキストを目立たせたい時に太字にすると分かりやすい反面、画数の多い文字（漢字など）などが続くと、やけに目についてしまうことがあります。
そこで、見出しは文字の色・サイズ・文字間を調整して強調されるようにしました。
また、「text-transform」というCSSプロパティを使い、文字を全て大文字で表示させています。（英語サイトでの使用に限ってしまいますが）この方法でもテキストを強調することができます。
サイト全体の印象が重いな…と感じたら、フォントの太さにも注目してみると良いかもしれません。
完成した商品詳細ページ
こちらが、完成したカンプです。
商品の良さ、商品への想い、お買い得感などなど、ユーザーに注目して頂きたいところは沢山あります。
ですが、それら全てを思うままにページに載せてしまうと雑多になりやすく、その状態で高級感のあるサイトを作るのは至難の業です。
最低限の装飾・機能に絞ったデザインにすることで、商品そのものの良さがユーザーに伝わるのではと思います。
さて、今回はシンプルデザインを目指しましたが、Magentoではシンプルデザインに限らず、細部までこだわってデザインすることが可能です。Magentoで、自分の思い描く理想のECサイトを自由自在に作っていきましょう！