パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

ニュースサイトの感覚で手軽に毎日チェックしたくなるモバイルファーストなコーポレートサイト

2015年07月01日

こんにちは。デザイナーのやまざきです。
Web designカテゴリーでは架空の構築条件を元にデザインのサンプルを作成していきます。
今回は自分がその企業の社員、あるいはユーザーだったら、どんな環境で閲覧するか、どんな種類の情報を得たいか、どんな方法で情報を得たいか、という視点で企業のスマートフォンサイトのUIを考えました。

ところでスマートフォンサイトの上部のメニューを無理やり片手でタップしようとして親指がつりそうになったことはありませんか。わたくし手が小さいため、この機会に片方の親指でも使いやすいレイアウトに挑戦しています。

※以下、構築条件・画像内の情報はすべて架空の情報です。

クライアントの基本情報

  • 東京都千代田区に本社をおく多国籍企業
    ※今回は企業名(仮称)を「SeeD」としてデザインしています。
  • 世界10ヶ国にてビジネスを展開
  • 電子機器の製造会社から発展し、家電製品、情報通信、医療、食品等の分野での開発・製造・発売およびソリューション事業を手がけている

目的・要望

  • 社内ブランディングとしても使える情報集約のページを設けたい。事業が幅広いこともあり、海外拠点は愚か国内でも他の部署では何を行っているのか知らないが社員多いため
  • リリース、動画、ソーシャルなど、グループ企業を含め発信している情報を集約し、まとめて見られるようにしたい
  • ありきたりなニュースページやアグリゲーションページではなく、新しい情報発信の場の見せ方を打ち出したいと考えている

ターゲット

  • 海外も含むあらゆるステークホルダー(一般消費者、取引先、従業員、株主、地域社会)
  • 文字サイズは中高年齢層のユーザーへの考慮ポイントとして入れておきたいが、新しさや日々更新されていく情報やグループ全体で成長していく躍動感が伝わることが優先

デザインサンプル

コンセプト

ニュースサイトの感覚で手軽に毎日チェックしたくなるモバイルファーストなコーポレートサイト

ニュースサイトやアプリの感覚で毎日チェックしたくなるUIを目指しました。コーポレートサイトでありながらニュースを全面に押し出すことで、よりリアルタイムな企業情報をお届けします。

ニュース発信に特化した情報設計

Twitterのリスト機能のように“好みの情報” “自分にとってわかりやすい分け方”で取得できると、ストレスが少なく、定期的な閲覧につながると思いTOPページを全面タイムラインとしました。
※運用面、システムの仕様など細かな条件設定は割愛しております。ご了承ください。

 

片手操作を実現するUI

20150701setsumei.jpg

画面右下・下部に導線を集めることで片方の親指のみでメインの画面切替を行えるようにしました。
「あとで読む」「保存」「検索」の縦並びのボタンは画面右下に固定でフロート表示させる想定です。若干文末にボタンがかぶってしまいますが、エリアとしては親指でスクロールする際に指に隠れていることが多く、また本文自体は画面のセンターからやや上で読むことが多いことを踏まえ、あまり気にならない位置であると判断して配置しております。

 

片方の親指のみで遷移できる画面

20150701gamen.jpg

上記にプラスして、オリジナルのタイムラインを設定した場合もスワイプや下部のタイムライン切替から閲覧が可能です。

 

ユーザーの状況

  • 移動時間や休憩などのちょっとした空き時間でスマートフォンから情報を追うことが多い
  • すべてのニュースが流れる一覧ページには、魅力的ではない情報、得るべき情報を埋もれさせる情報の方が多いと感じている

メインコンテンツ

  • 企業が発信するニュース

機能

  • カテゴリ、エリア、事業体、SNSなどの分類から、好みの情報を集約できるオリジナルタイムラインの設定
  • SNSシェア
  • あとで読む
  • 保存
  • 言語切替
  • アカウント登録(主に社内向け)

20150701anime.gif

 

スマートフォンやタブレットでいつでもどこでも情報が得られ、なおかつ沢山の情報がインターネット上に溢れている今、Webサイトはいかにストレスなく情報を見せられるかがポイントですよね。

こちらのデザインサンプルについて詳しく知りたい方は、お気軽にお問い合わせください。

仕事のご依頼・お問い合わせ

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績