みなさん、こんにちは。
アメーバ事業本部のHR戦略室でデザイナーをしております安西謙之(@anjilina_nolie
)です。
HR戦略室は、主に広報・人事案件を扱っている部署になります。
今回は、コーポレートサイトのマルチデバイス化を踏まえつつ、半年程前にリリースしました(だいぶ前ですが…)スマフォ版コーポレートサイトについて、ご紹介したいと思います。
コーポレートサイトのマルチデバイス化
弊社のコーポレートサイトでは、国内版PCサイト・フィーチャーフォンサイト・そして今回ご紹介するスマートフォンサイトはMobableTypeを使って、海外版PCサイトはWordPressを使ってを制作、運用しています。
【コーポレートサイト一覧】
マルチデバイス対応を進めていく中で、特に意識している事は「情報管理」と「デバイス特化」のバランスです。ここでの「情報管理」とは、共通の情報をより一つに集中させ、各デバイスの情報の一元管理・同時リリースを行う考えで、「デバイス特化」とは、各デバイスに合わせたコンテンツ・デザインを提供する考えです。
一見、両立できそうなイメージはありますが、PCとスマートフォンで情報の優先度が違ってくるので、デバイスごとに見せ方や情報の順序を変える必要があります。「情報管理」に寄せすぎると更新が簡単になる一方で、デバイスごとの実装面で制約が生まれます。逆に「デバイス特化」に寄せすぎても各デバイスで実装の自由度が上がる分、更新は複雑になってしまいます。
以上を踏まえて、できるだけ共通できるページについては「情報管理」を行い、ページによって「デバイス特化」を行う事を前提にページをデザインしています。その他に【コンテンツの優先度】や【閲覧者の利用環境】を考えた上で、総合的にサイトデザインを行っています。
客観的な印象として、他社のコーポレートサイトに比べてやや「デバイス特化」にやや比重を置いたサイト構築を行っていると感じています。
スマートフォンサイトについて
昨年9月にリリースしたスマートフォンサイトについて、ご紹介します。コンセプトとしては、PCサイトと同じユーザーエクスペリエンスをスマートフォンでも実現する事でした。
企業の中でデバイスによって異なるトンマナを入れ込むと企業ブランディング上、良くない事ですので、PCサイトのトンマナに合わせてベタでシンプルなデザインになるように心がけました。
【サイトTOP / 採用情報 / サービス情報】
また、スマートフォンサイトでは、2点「リアルタイム」と「ポータブル」というキーワードを意識してデザインを進めました。「リアルタイム」という点では、Twitterなどソーシャルサービスの露出を増やし、「ポータブル」という点では、外出先での閲覧を意識しました。
加えて、TOPページなどの主要インデックスページだけでなく、3階層下のコンテンツページまで網羅的にスマートフォン対応をしています。
サイトTOP
【サイトTOP】
まず、スマートフォンサイトTOPについてですが、コンテンツ内容は、特別誘導枠・プレスリリース枠・CyberAgent_PR Twitter枠・サービス枠・公式ソーシャルアカウント枠で構成されています。
特に、Twitter枠・サービス枠・公式ソーシャルアカウント枠については、PCサイトTOPと比較してソーシャルコンテンツを中心にして、「リアルタイム」な情報を得る事ができる様に設計しています。
採用情報
【キャリア採用情報】
採用情報については、新卒採用とキャリア採用を分けて表示をしています。特にキャリア採用は3月にリニューアルを行い、求人情報以外に社員インタビュー、事業部紹介などのコンテンツを追加しました。完全に蛇足ですが、キャリア採用の求人情報ページは夏までに全面リニューアル予定で進んでいますので、しばらくお待ちください。（大変、見にくいページがあるんです…）
サービス情報
【Amebaサービス一覧】
こちらは、CyberAgentから提供しているスマートフォンサービスを網羅的に紹介したページになります。当時はアプリでのサービス提供が主だった為、アプリに合わせたUIになっています。現在は、ブラウザでのサービス提供が主流になってきているので、近日リニューアル予定になっています。
また、更新面ではExcelから更新を行える様になっていて、デベロッパーがいなくても、随時更新できるフローを採用しています。
こちらのページについては、同プロジェクトのデベロッパー 久保の技術的な解説と合わせて、ご紹介します。
CSVファイルでの管理について
こんにちわ。アメーバ事業本部の久保です。スマートフォンサイトの技術面について少し説明します。
Amebaサービス一覧ページではDBの代わりにCSVファイルを活用したExcelでのコンテンツ管理を実施しています。この方式を採用した主な理由は更新頻度が頻繁なため技術に明るくない方でも更新できるようにすることで運用効率をあげることができるからです。
CSVファイルでコンテンツを管理するために以下のような方法を取っています。
フロントエンドではJavaScriptのXMLHttpRequestを使用して、サービス一覧のAPIをリクエストしデータを取得します。このときのレスポンス結果がCSVで管理しているデータになります。このときひとつ注意することがあります。ExcelでCSVを編集すると文字コードがShift-JISになります。もしフロントエンドでそのまま読み込んでしまうと表示する際に文字化けを起こしてしまいます。(コーポレイトサイトは文字コードがUTF-8のため)
これを解消するためにバックエンドでShift-JISからUTF-8に変換を行い、さらにJavaScriptで扱いやすくするためにCSVフォーマットからJSONフォーマットへ変換を行いレスポンスデータとして返却を行います。
こうしてJavaScriptに最適化されたデータを使ってページを表示させています。
次に、画面下部のナビゲーションバーについてお話いたします。
画面に固定させるUIはPCではそれほど難しくないのですが、スマフォで実装する場合いくつかの問題を解決する必要があり、自然なUIになるようにそれらを解決し調整を行っています。
その中でももっとも基本的なナビゲーションを固定する対応について書こうと思います。
iOS5以上 および Android 2.2以上でないとCSSのposition:fixedに対応していないため、それ以下の環境で近い表現をするためにはJavaScriptによる制御が必要になります。以下、対応の概要です。
1. ナビゲーションのレイアウトをposition:absolute (絶対指定)で行います。
CSS:
position: absolute;
}
2. タッチ開始時にナビゲーションを非表示にします。
3. タッチ終了時にナビゲーションの座標を算出した後、表示します。
タッチのタイミングでナビゲーションの表示/非表示処理を行います。
JavaScript(jQuery):
touchstart: function(){
//ナビゲーションを非表示にする。(②)
hide();
},
touchend: function(){
//ナビゲーションの座標を設定し表示にする。(③)
show();
}
});
ナビゲーションの表示する際に、以下のような処理でフッターの位置を再定義して擬似的に固定しているよう見せます。
JavaScript(jQuery):
$(’#footer’).css({
top : $(window).scrollTop() + window.innerHeight - $(’#footer’).outerHeight(),
width : $(window).width()
});
};
アクセス
【東京本社アクセス】
スマートフォンサイトでは、アクセスをグローバルナビに入れ込み、他デバイスよりアクセシビリティを高く設計しました。googleMAPを使って現在地からの経路を見る事ができます。
IR情報
【IR情報TOP】
IR情報については、個人投資家のみなさま向けのページで決算情報の資料などをPDFで閲覧する事ができるページになります。IRニュースや最新株価情報や決算発表の資料など、PCと連動し、ほぼタイムラグのない状態で「リアルタイム」でアップデートされる仕組みを採用しています。
まとめ
冒頭でも触れましたが、マルチデバイス化が進むに連れて、「情報管理」と「デバイス特化」の前者を意識しがちですが、しっかりと後者を考えた上で前者の取り組みを進めていきたいと考えています。
先にも言った通り、「情報管理」は、実質の運用効率にも関わってくるサイト設計の際の非常に重要な要素ですが、「デバイス特化」を意識したUI設計・情報設計をしない限り、ただのスマートフォンで見ることのできるサイトになってしまいます。つまり、閲覧する人（ユーザー）にとっては、見やすいサイト・使いやすいサイトとは言うことはできないのです。これが他社に比べて、「デバイス特化」に比重を置く理由になります。
今回のスマートフォンサイトでは、「リアルタイム」と「ポータブル」というデバイスの特性を考えて、各情報に優先度をつけ、デザインしてきましたが、半年経って改めて考えた時に「情報の拡散」という点に課題を感じています。
PCサイトでは、コンテンツの一部につけている"Twitterでつぶやく"ボタンや、"Facebookのいいね"ボタンなど リアルタイムに情報を拡散していく仕組みを、PCサイトだけでなく、親和性の高いスマートフォンサイトでも積極的に、今後対応していく予定です。
4月からコーポレートサイト全体のリニューアルも考えていますので、「情報管理」と「デバイス特化」のバランスに加えて「情報の拡散」というポイントをしっかり押えて、デザインを進めていけたらと思います。
最後までありがとうございました。