読了: 約 6 分

PCサイトから、スマートフォンサイトで企業やサービス、アプリケーションを閲覧することが当たり前となり4.5年でユーザーが求めている環境が大きく変化しました。

スマートフォンサイト制作も、要件定義からワイヤーフレーム・構成から作成し、その後デザイン・システム開発というフローで案件が進みますが、ユーザーに好かれる構成・ワイヤーフレームを書く為のUI/UXはどのようにすれば良いのか、また、それは何故その配置にしているのか等考える事が多いですよね。

今回はUI/UXの優れているコーポレートサイトを幾つか例に挙げて説明してみたいと思います。
(2015年10月29日編集)

そういう中で、スマートフォンサイトのまとめサイトは多いのですが、
表面上の美しさだけでなく、情報設計がなされてないと製作者としてゴールを達成できてないとおもいます。

美しさ・情報設計の2軸で8社コーポレートサイトをピックアップしていきたいと思います。

1.面白法人カヤック

URL:面白法人カヤック

memo

・メニューは6つでJavaScript or jQueryでshow hideのみのシンプルな挙動
・PCのメニューと同じで、各コンテンツはキービジュアルと8行のリストを表示
・リストの幅は大きめに取り、MOREで一覧への導線を貼る
・PAGETOPを設けてある。
・フッタにはお問い合わせ・サイトマップ・プライバーポリシー・利用規約などの基本的な項目の他、
自社のブランディングに繋がるコンテンツを配置。
⇒クリエイターブログ・社長ブログ等
・safariでユーザーエージェントを切り替えても見れませんので、実機・ブラウザのサイズを小さくしてみてください。
safariでもfiremobilesimulatorでも変わらないのでなにかなーと思っていたらメディアクエリだったのですね。

2.スター精密株式会社

URL:http://www.star-m.jp/

memo

・jQueryMobileを使用し、ページ遷移は横スクロール
・PC同様シンプルなデザインとニュースなどの項目も5行で分かりやすい。
・PCの切り替えもjQueryMobileに付属されている機能を使いかなり明示的に表示。

3.ダイワハウス株式会社

URL:http://www.daiwahouse.co.jp/smp/

memo

・ページ上部にはキービジュアルを3つスライダーで自動切り替え。
・メニューは6つ、他項目については1行毎で表示
・ソーシャルアカウント一覧をメニューでひとまとめに。
・フッターは、ページ上部へを大きく取り、PCサイト・サイトマップの2つのみのシンプルな構成。

まとめ
・シンプルな構成
・アイコンを最小限にして、ピクトグラムを活用し見易いデザイン

4.株式会社クライマークス

URL:http://www.climarks.com/m/

memo

・ソースが分からない ⇒ PCのサイトを.htaccess等でリダイレクトして/m/でスマホサイト化している。
・sencha,smart4meのCSSをしている事からコンテンツは外部化している?
・UIはjQueryMobileのような横スクロール

5.ベネトンジャパン

URL:http://www.benetton.jp/

memo

・キービジュアルにカテゴリー分けのリストを含む珍しいデザイン・構成
⇒ファッションサイトなので柔軟性のあるデザイン

・プレスリリースは3件で、リストは広め、フォントサイズも大きめ(15pxで固定しているのはデバイスで変化してしまうから微妙)
・ソースを見るとdoctype宣言のみHTML5仕様で、構造はHTML4.01.section,nav,artticle,header,footerなどを使用していない。
・フッター要素はリストでシンプルな構成

6.さくらインターネット

URL:http://www.sakura.ad.jp/m/

memo

・サービス、ニュースをアイコンと1行の文言でまとめるシンプルな構成
・フッター要素にはPC・スマートフォン用の切り替え、ソーシャルへの導線を配置。
・トップのみページスクロールを極力させないような構成
・下層はベタの帯にテキスト・左側に画像のみのシンプルな構成。詳細はPCページへの遷移
・smart4me使用

7.BB media.inc

URL:http://bbmedia.co.jp/sp/

memo

・右上にMENUで6つのコンテンツをまとめている内容は会社概要などの会社に関するコンテンツ
・PICKUP・ニュースなどは5,6個とリストの個数はバラバラである。
・フッター要素はプライバシーポリシーと、ソーシャルメディアポリシーというものがあるのが新しい
・下層コンテンツは動画や、画像を大きめに使用している。
・下層のフッタにはパンくずリストがついており、階層が可視化されている。
・WORKSではタブ切り替えが出来、クライアントワークの内容ごとにWEB・TVなど年度毎で別れていて見易いインターフェース

まとめ
・全体的にシンプルながらもインタラクティブな機能が違和感なく使用されており、
ユーザーとしてはかなり使い易く美しい。

8.本田技研工業株式会社

URL:http://sp.honda.co.jp/honda/dream.honda.co.jp/?uid=NULLGWDOCOMO&x%2Bxcookie=on

memo

・メインメニューがリストで縦に並び、珍しいフォントを使用
・メニューはjQueryのsliddownのような挙動で心地良い。
・キービジュアルとリストを左・右で分けているのは珍しい。
・PCサイトへという導線はあるが、スマートフォンと書かれておらず、戻れないかの印象がある。
・ニュースは3つ、フォントサイズは10px程度
・下層ページはピクトグラム左でテキストというシンプルなフッタメニュー
・モバイルページをスマートフォンに移植したままである。(ソースをご参照ください。)
・ヘッダー要素のロゴがタップ出来ないのはユーザビリティ的に良くない。

まとめ
一流企業であるのでしっかりしたスマートフォン対応をしないと企業のブランディングにも関わるのではないでしょうか。

9.IMJ Investment Partnears

URL:http://www.imj-ip.co.jp/btcamp/
・メディアクエリ
・極力要素は少なく、親要素のみで下階層への導線を作っている。
・リストは大きめにとって操作性が高い。
・キービジュアルはJavaScriptを使用し、PCとスマホ同一。
・デザインは非常にシンプルで見易い。
・全体的に空間をあけて、テキストの多さを感じさせないような配慮がある。

全体のまとめ

今回スマートフォンサイトをみて 幾つかの共通点と良いと思った点

kayacのサイトのように、メディアクエリーを用いて、レスポンシブなサイトにして、コーポレートサイトの更新性を高める事が今後重要。
 ⇒ ユーザーエージェントの切り替えが必要ない。CSSも@mediaを中に入れてひとつにしておけば良い。

 コーポレートサイトに工数やチェックをどれだけ行うか、今後どのくらいの頻度なのかという事も考えなければなりませんので
 最初のみ形ができていればそういったチェックを最小限にすることが出来ますね。

メニューを設け、できるだけPCサイトへの導線は少なくする。
 上記したサイトでは結構PCサイトに飛ばしているケースがあります。しかし、ユーザーはスマホ最適化されているものだろう
 と思ってサイトを訪れています。なので、フッターなどでスマートフォン/PCでの切り分けで意図してPCで見たい時(ユーザーが)を除いては
 全ページスマホ最適化すべきだと思います。

極力JavaScriptを使用せずシンプルなものにする。
 ECサイトや他のショッピングサイトではスライダーなどガンガン使うことがありますが、あくまでコーポレートサイトなので
 メニュー、ページトップへなどでしかJavaScriptは使用しないほうがよいでしょう。
 ⇒ 高速表示のためにも。

・以外とコーポレートサイトをスマホ最適化している企業が少ない。
 DeNAやGREEなどIT企業でかつ大手にもかかわらず最適化していない企業が多かったです。
 もし、良いサイトがあるよという方はご一報ください。

以上で終わりです。
今度はコーポレートサイト以外でもやってみたいと思います。

それではまた。

関連記事

スマートフォンサイトのデザイン集サイトのまとめ
スマートフォンサイトのデザイン集サイトのまとめ

優れたiPhoneサイトデザイン集 – iPhoneデザインボックス
http://design.web-hon.com/