Succeeding Support Maker MTG
こんにちは。Firefox3を導入しようか迷っているお茶目です。今日も頑張っていきましょう。
サイトについて
健康・美容・リラクゼーションをテーマに、企画開発を行っている企業のコーポレートサイトです。
シンプルなデザインで、サイト全体を一貫したトーン＆マナーで保っており、とても洗練された印象を受けました。グラフィックなどのクオリティはさほど高くはありませんが、レイアウトのバランスが素晴らしいサイトです。また、一般的なサイトではあまり見た事がないような“目から鱗”な構成もいくつか見られました。
UIについて
- 追従するローカルナビゲーション
- 下層ページではスクロールをしても、ローカルナビゲーションが画面上に追従するギミックが適用されている。一般的に、コンテンツが多くなってしまう場合は“ページトップに戻る”ボタンを設置する事が多いが、当サイトのようにローカルナビゲーションと一緒に“ページトップへ戻る”ボタンも追従する方法もある。最近ではこういったギミックがライブラリーを使用する事で簡単に実現できるので、試す価値はあるのではないだろうか。
- リンク要素には一貫したアイコン
- テキスト、画像にリンクが貼られている場合、体裁は違えどオレンジ色の矢印が表示されている。テキストリンクやナビゲーションに対してだけではなく、バナーやイメージリンクにも一貫性を保つ事で、全体的に整理整頓された印象を与えている。
- コンテンツに連番をふる
- 当サイトの特徴として、各ページのコンテンツに連番がふられている事が挙げられる。例えば「MTGのものづくり」では、各項目で連番を強調している。一般的に見出し要素が視線ターゲットになる傾向が強いが、あえて連番を目立たせる事で“順番に見る”というユーザ行動が期待できる。
- リンク元を常に表示
- 「導入フロー」では、STEP01〜STEP08までのボタンがあり、一見するとアンカーリンクの役目を果たすかと思いきや、 実はSTEPごとにHTMLファイルが用意されている。そうする事で、フローのボタンは常に見える状態で、各STEPを確認する事ができる。商品ランナップとは違うところは、ページ内で完結する詳細な情報であって、ページが長くなってもローカルナビゲーションが機能しない点だ(項目がないため)。情報のボリュームでページが長くなってしまうのを抑えるため、或いはリンク元を常に表示させるユーザビリティのためにはこういう手段もありだと思う。
デザインについて
- うっすらとグラデーション
- 目を凝らせば気づくほどの薄いグラデーションがメインコンテンツの上部にかかっている。たったこれだけでも、ページ全体が断然引き締まるから不思議だ。
情報設計について
- ローカルナビゲーションの情報を一定に保つ
- 当サイトの特徴として、各カテゴリの情報が分類されておらず、ローカルナビゲーションの内容が常に一定に保たれている点が挙げられる。例えば「商品ラインナップ」では、インデックスと商品詳細のみというシンプルな構成になっており、必然的にローカルナビゲーションの情報が一定に保たれる事になる。情報のボリュームによってページが長くなってしまうという問題は“追従するギミック”で上手くカバーしている。
以上になります。
