株式会社グランフェアズ 企業サイトリニューアル

株式会社グランフェアズ 企業サイトリニューアル

https://www.granfairs.com/

私たちの強みを浮き彫りにしてくれたプロジェクト

グランフェアズのサイトは、立ち上げ当初からレスポンシブWebデザインを採用してきました。今回のリニューアルで、トータル3回目の改修となります。そして、その改修タームは、1年強の間に3回です。この改修頻度は、集中して投資をしてきた証です。

今後、デバイスの多様化は避けられません。ユーザが接触するデバイスのスクリーンは、画面サイズ・精細度・タッチ操作の感度など、様々な種類が使われるようになります。もうこうなってくると、一つ一つ専用サイトを作っている訳にはいかなくなります。

これが、私たちの背中を押す、まさに追い風になりました。

Web業界における大きな転換ポイント

この流れは、Webサイト構築に大きな転換を求めることになります。モバイルファースト・レスポンシブWebデザイン・プログレッシブエンハンスメント・グレイスフルデグラデーション・プログレッシブレンダリング・論理的かつクリーンなコード。これらを体系的に理解する必要があり、従来の考え方ではまったく歯が立ちません。クライアントワークへ高い品質で適用するには、基本的な知識を習得したうえに、相当量の経験を積むことが必要でした。

試行錯誤こそ、唯一の解決方法

実際に取り組んでみると、様々な問題に突き当たりました。レスポンシブWebデザインは、各デバイス特性を考慮した複数のレイアウトを、同時に考えながら構築していかなければなりません。それは、考え抜いたグリッドシステムのうえに、成り立つものでした。さらに、レイアウト変更等の手戻りは、すべてのレイアウトに影響を与えます。通常のデスクトップ向けサイトの何倍もの作業量が発生してしまうのです。こういった問題を一つ一つクリアしていく作業が、お客さまへサービス提供する際の、プロジェクト管理の精度、実装品質の高さにつながっていきました。

モバイルファースト

マルチスクリーン化が進むと、ユーザの接触頻度が高いスマートフォン(モバイル)からコンテンツ構成を考えるのが、当然のワークフローになってきます。さらに、モバイルの方が表示上の制約が多いことも、優先的に考える理由の一つです。これらを破綻なく実行するには、サイトホルダー(お客さま)と、「Webでは、ユーザの行動にすべての決定権があること」を共通認識としなければなりません。この前提でコンテンツと事業の関係性を議論できることが、成功のポイントとなります。

私たちの従来持っている強み+実験して得た強み

モバイルファーストは、私たちが元々持っていたスキル・ノウハウがあってこそ成り立つものでした。ユーザビリティデザインスキルは、ユーザが置かれている状況と各デバイス特性に沿った、ストレスフリーなユーザ体験を実現しました。また、コンテンツファーストで磨いてきたプロジェクト管理ノウハウは、各スクリーンへアジャストするコンテンツを作りあげることができました。

また、試行錯誤の過程は、新しいワークフローを作り上げることにつながりました。現在も利用しているウォーターフォール型のワークフローと比較し、そのメリット・デメリットを把握することができました。この新ワークフローは、経験者ならではのものです。

プロジェクトが目指した最終目標final Target

  • 自分たちのスタンス・スキルを理解してもらえるコンテンツの開発。
  • VI計画に合致したデザインによる、ビジュアルイメージの統一。
  • 新しい技術への取り組み、R&Dのアウトプット。
  • オウンドメディアとして機能するためのベースを構築。

1回目のリニューアル

1回目のリニューアル

狙い

まずは、実績のバリエーション紹介を主目的としました。また、可愛いイラストを多用し、「⾯⽩いものをつくる」こと、「楽しそう」であることを、イメージとして⼤事にしていることを知ってもらおうとも考えていました。主に、制作者へのアピールを狙いました。クリエイティブについてはテストマーケティングの意味合いが強く、制作者からどういった反応があるかを意識していました。この段階では、まだブランディング戦略を持ち合わせていなかったのです。

実施内容

まさにレスポンシブWebデザインへの第一歩で、手探り状態。「モバイルファースト」の考え方は理解できるものの、取り組みはまさに「デスクトップファースト」でした。結果、タッチ操作にはふさわしくないインターフェイスを採用してしまうなど多くの課題を残しましたが、確実に次につながるステップとなりました。

2回目のリニューアル

2回目のリニューアル

狙い

デザイン主導でマークアップの限界に挑みました。スマートフォンやタブレットの表示において、犠牲になる部分にも目をつぶりました。また、敢えて過多かと思われるようなデザイン処理も実施しました。これは、デザインエレメントに凝って作るべきサイトと、コンテンツファーストで作るべきサイトの、棲み分けポイントを体感してみることが目的でした。この回から、グランフェアズらしい世界観を具現化するトライ&エラーを始めました。ビジネスドメインのイメージから、「あなたのためだけに作られた、大人のサーカス=移動遊園地」をコンセプトにしました。

実施内容

チームの方針が海外のモダンワークを参考に考案していることと、「移動遊園地」が海外ではメジャーなことから、海外を感じさせるクリエイティブを採用しました。「大人のサーカス」というコンセプトを、シルク・ドゥ・ソレイユのような、夜のショーを告知するポスターへとイメージ展開しました。「あなただけ」に提供されるオリジナルな場(サービス)のイメージを、アンニュイな場末感と時間軸のわからない不思議な雰囲気で演出しました。

3回目のリニューアル

3回目のリニューアル

狙い

海外情報を参考に、本格的なレスポンシブWebデザインの導入に踏み切りました。先進的な技術も、盛り込めることは出来る限り対応すべく挑戦しました。1回目・2回目よりも、表示速度、画像の品質、Webフォント・フォントアイコンを含めたテキストレイアウト等において、精度を高めた先進マルチスクリーン対応に取り組みました。オーダーメイドのレスポンシブWebデザインとして、挑戦できる限りの仕様を目指しました。

また、年頭のロゴ変更から始まった2013年度ブランディングプロジェクトの最終施策でもありました。VI計画に則り、白・赤(ブランドカラー)を基調にした、シンプルで上質なミニマルデザインを採用しました。派手な装飾はなくすっきりしているが、凛とした芯の強さを感じる。これは私たちの仕事に対するスタンスに通ずるものがあり、サイトからもそれが伝わることを願いました。

下層ページキャプチャ

実施内容

PSDデザイナーとマークアップエンジニアが並行作業し、リアルタイムにプロトタイプを検証することで、デザインと実装の両方の質の向上を実現しました。また、データベースを使用しない、フラットファイルCMSを採用。多くの場面において、表示速度の向上を図りました。その他、主な取り組みは次の通りです。

  • コンテンツの企画、撮影。
  • コンテンツ・ファーストの考えに基づき、全ての原稿をリライト。
  • オリジナルのグリッドレイアウトを構築。
  • Webフォント、フォントアイコンの採用による画像由来の容量削減。
  • SASSによるCSSコーディング。
  • スクリーンサイズ、解像度別に異なる画像を表示。
  • データベースを使用しない、フラットファイルCMSの採用。
Let's talk!
PageTop

Copyright © GRANFAIRS inc. All Rights Reserved.