4 Comment / Trackback

シングルページのWebサイトと言えばパララックス効果を利用したものが多いですが、今回、僕たちが作ったサイト（トップページ）は左右比対称にスクロールするUIが特徴的なサイト。

データ分析から導くWebデザイン／エンジニアリング – CGPWEB ［株式会社シータス＆ゼネラルプレス］

デザインのインスピレーションはアメリカのNPO法人National LGBT Museumの公式サイトから。

National LGBT Museum

インスピレーション元のサイトは左右のコンテンツが上下に組み合わさってページが作られるスクロール芸ですが、僕らのサイトは左側のコンテンツは縦にスクロールし、右側のコンテンツは左右にスクロールするというUIに。

なかなかに斬新なUIではありますが、思ったほど使いづらい感じはないかな、というのが僕の感想（決して使いやすいUIとは言いませんが）。
時には使いやすさとか見やすさみたいなことには多少目をつぶって、一風変わったクリエイティブで人を惹きつけるというのも我々デザイナーにできるひとつの「解」だと僕は思っています。
こういうのは自社プロジェクトだからこそできる実験だったりするわけですが。

UIデザインで魅せるということ

ほんの数年前までWebデザインで魅せるというと、ビジュアルの作り込みでライバルと差別化してやる、ってところだったと思うんですけど、最近はどのサイトを見渡してもビジュアルデザインのレベルがとても高い。
ビジュアルデザインの作り込みはもちろん今でもとても重要な要素だし、疎かにできるわけがないんだけれども、なかなかそこだけで闘うのは難しくなってきたなぁ、と感じます。前回のエントリーにもちょっと通ずる話ですね。

どんどん新しくなるWebブラウザ、jQueryやCSS3といったテクニカルリソースの充実もありますが、Webを閲覧するユーザーのリテラシーもここ数年で飛躍的に向上したと思います。
だから、新しいUIを生み出すというのはいろんな意味でハードルが低くなってきていて、表現の幅がとても広がっています。いろんなアイデアのUIがわりと簡単に作れてしまう。

National LGBT Museumのサイトにインスピレーションを得て、CGPWEBのデザイン全般を担当してくれたのは弊社デザイナーの若林。
ただ、UIについてはそのままパクるわけにもいかないので独自のスクロール芸を若林、僕、そしてフロントエンドエンジニアとして制作に協力してくれた小澤さん（ころく）でディスカッションしながら考えました。

ころく – フリーランスWebエンジニア／デザイナー

ソースコードの解説はしませんが、思ったよりもずっと少ないコードの量でスクロールエフェクトを実装してます（もちろんjQueryは使ってますけど）。
小澤さんにモックを組んでもらって、僕が他のJavaScriptとともにWordPressに実装していき、表示確認。左側のコンテンツが透明度を持ってスクロールしていくっていうエフェクトは、実装が終わったページを見ての僕のジャストアイデアでしたが、最終的に小澤さんにいい感じに仕上げてもらいました（IEは9以上で透明エフェクトを実装）。

そんなこんなでできあがったCGPWEBです。自画自賛ですが、絵としてはなかなか面白いサイトになったな、と思います。
ちなみにこのUIはPCのみを想定していて、タブレットやスマホだとスムーズには動きません。PC以外のデバイス対応はレスポンシブでレイアウトを変えてやろうかと思っています（時間があれば、ですが……）。

デザインが持つチカラ

上にあげたNational LGBT Museumという団体は、同性愛や両性愛への理解を、というのを目的に設立されたNPOみたいです。
つまり、世間一般からするとマイノリティで周囲からは身構えられがちな組織なわけですが、先鋭的なWebサイトによって世界じゅうから注目を集めることができただろうし、クオリティの高いWebデザインが組織のイメージ向上に与えた効果というのはかなり大きかったんじゃないかと想像しています。

スタートアップ企業なんかもそうだと思うんですが、無名な企業や団体こそWebのクリエイティブ戦略って超重要だな、と個人的に思います。
オフラインでの人と人とのファーストインプレッションと同様に、オンラインでのファーストコンタクトでユーザーにどれだけよい印象を与えられるかって相当大事に違いない。

有名企業や有名人についてはユーザー側に予備知識があるはず。その企業がどんな企業なのか、その人がどんな人なのか。
そういう場合、Webサイトの役割はその予備知識を補完する存在であって、そこでの印象向上ももちろん大事なんだけれど、Webの印象が悪かったとしても別のところ（商品・サービスはもちろん、TV・新聞・ラジオなどのWeb以外のメディア）で取り返せる可能性をたくさん秘めている。

逆に無名企業や無名な個人にとって、Webサイトこそが彼らのアイデンティティそのものだったりして。よい印象も悪い印象もすべては、初めて見たその会社（人）のWebサイトで決まってしまう、なんてことすら考えられるわけです。

我々も決して世間一般に広く名の知れた組織・人ではありません。
だからこそ、CGPWEBに関しても「ああ。あの変な動きするサイトね」っていうのが見た人の記憶に残り、何かのフックになってくれるといいなぁ、という狙いを持っています。
ある種のユーザーエクスペリエンス。

ほんの少しだけでもいいし、決して「優等生」でなくてもいいから、普通とは違った何かを生み出す。そのためには、当たり前のことを当たり前に手際よくこなしつつ、どこかで遊びゴコロを発揮するだけの余力を常に残しておきたいと思います。

なんか話が脇道へ逸れつつあるので強引に本筋に引き戻しますが、CGPWEBは僕としてはそんなことを考えながら作ったサイトです（自分のデザイン観については、また機会があれば書こうかな）。
短期間の突貫工事ながら、なかなか思い出深いプロジェクトになりました。
関係各位、ご協力ありがとうございました。感謝！
そして、みなさま、ぜひ一度ご覧くださいませ。

Trackback

http://writing-mode.com/20130418/cgpweb/trackback/