こんにちは、シナップの小茅です。
年が明けてから早いもので約半年。あっという間に時間が過ぎていきますね。

そこで今回は、2016年上半期にリニューアルされたサイトをまとめてみました。
話題になったもの、新しい試みなど様々なサイトをご紹介していきます。

リニューアルされたサイトを眺めながら、
このリニューアルによって担当者が実現したかったことはなんだろう？と思いを巡らせてみたり、
リニューアルならではの最新の技術トレンドや表現手法が盛り込まれていないかな？とチェックしてみたり、いろいろな切り口からお伝えしていきたいと思います。

シフトブレイン

• コーポレイトサイト

1月後半にリブランディングプロジェクトとしてサイトリニューアルした、Webプロダクションのシフトブレインコーポレイトサイト。 サイトだけでなくロゴや名刺の刷新、オフィス移転もあわせてリニューアル。
ロゴには「無限大」の可能性に挑戦していくという意味があるそう。(詳しくはこちら)

すぐ目に飛び込んでくるのは新しいロゴのS。ローディング的にロゴの逆成り立ち順と、その次にインパクトがありながらも動画の何を邪魔することのない次々に色を変えていくS。ロゴ刷新をサイトでも存分アピールし押し付けがましくもないのに印象に残るのはさすがです。
また構成や要素自体はとてもシンプルにも拘らず、スクロールやクリックした時のインタラクション、現在地アイコンのアイデア(総数は◯、現在地はI)、ホバー時の要素の変化などは、大胆かつシンプルでひとつひとつ分解していくのが楽しいほどです。
個人的にデザイナーとエンジニアがどのようにコミュニケーションをとり作り上げていったのか、とてもとても制作過程が気になるサイトでした。

このサイトは3月にSOTD・MOTD４冠を達成しています。
毎日のデザインチェックにかかせないwebサイトギャラリーの賞なので是非チェックしてみてください。

• AWWWARDS
• FWA
• CSS DESIGN AWARDS

各サイトの詳しい紹介は「毎日チェックしたい世界のWebサイトギャラリー5選」に詳しく掲載されています。

神戸市

• コーポレイトサイト

神戸市のサイトリニューアルでは大胆に検索UIがメインとなっています。
確かに市区町村のサイトは項目が多いからか目的のページにカテゴリ選択→リンク遷移でたどり着くことは稀かなとも思うと、「ゴミ分別」「図書館」など知りたい情報をすぐに検索できるUIはベストなのかもしれません。
このサイトではAndroid OS系など800px程度の解像度まではリキッドレイアウトで、それ以下はスマホ版振り分けの設定になっているようでした。

昔から自治体サイトで見かける背景色の変更UIですが、3月にリニューアルした「阿蘇くまもと空港」のサイトでも文字サイズとともに変更できるようになっています。 アクセシビリティ閲覧支援ツールのひとつとして機能しているものですが、最近のUIではかなり目立つようにデザインされている印象です。
この背景色変更のUI実装については、対象者は誰か、アクセシビリティとして効果があるものなのか改めて検証する必要はありそうです。

ニッポン放送

• コーポレイトサイト

放送内容を書き起こした記事やオリジナル記事を配信するメディア型のWebサイトとしてオープンしました。
「SmartNews」や「antenna*」にも記事を配信し露出を大きく図る取り組みをはじめています。ラジオだけじゃない、オリジナル記事やラジオ番組が記事でも読める試みは新しいアイデアですね。
サイトは、デジタルソリューション部を中心に、3人ほどの編集部が立ち上げたそうです。すごいです。

引用：ラジオ番組の書き起こし記事 ニッポン放送公式サイトで配信

NTTドコモ

• コーポレイトサイト
• サイトリニューアルについて

ドコモは、サイトリニューアルによって何を目指したのか大きく3つ提示しました。
ひとつめは、必要な情報をすぐに探しだせるような分かりやすいデザインにしたこと。
ふたつめは、各デバイスごとに最適な利用ができるマルチデバイス対応。
みっつめは、パソコン版のみに提供していたログイン機能をスマートフォン版にも加えたこと。

利用者も多いため、変更箇所をわかりやすい言葉で伝えること、意識してもらうことは、サイトリニューアルで意図した目的が浸透するのに効果がありそうだと思いました。

JAL

• コーポレイトサイト
• スマートフォンサイト
• リニューアルについて
• スマートフォンサイトキャンペーン

JALもドコモと同じように、リニューアルした内容を大きく3つ説明しています。
航空券チケットを購入するステップやチケットの種類など、煩雑になりがちな情報を再整理し使いやすいUIを目指したようです。
実はサイトリニューアルしたことを知らずに夏休み旅行の航空チケットを購入したばかりだったんですが、わかりにくい、という事が確かになかったように思います。
かなりスムーズに日時別の価格検討をして納得した往路復路のチケットを購入することができました。

また「JALスマートフォンサイトリニューアルキャンペーン!」という新しくなったスマートフォンサイトのデザインは3つのデザインのどれが該当するか、という面白いキャンペーンも立ち上がっていました。
答えが知りたくてすぐにスマートフォンで検索した私でしたが、狙いは「JALマイレージバンク新規入会」のようで、上手な動線だなと感心しました。

ピクセルグリッド

最後は弊社とオフィスシェアをしているフロントエンド開発に特化したスペシャリスト集団のピクセルグリッドさんのサイト。
アクセスマップ、最寄駅からの経路が本当にわかりやすい!
ピクセルグリッドさんやシナップにお越しの際に是非参考にしていただければと良いなと、思った次第です。

まとめ

いかがでしたでしょうか。

サイトのリニューアルは、時間も労力もかかる一大プロジェクトです。
そのぶん、できあがったサイトからは、プロジェクトに関わった担当者たちが込めた想いが伝わってくるように感じました。

自分の担当するサイトに活かせそうなヒントが見つかればいいなと思います。