2016年05月

24

火曜日の投稿

榛葉 真透
投稿者:榛葉 真透
(デザイナー)

2016年05月24日

影響を受けたWebサイトをふりかえる
〜 デザイン部 座談会 # 02 〜

デザインの目のつけどころ

榛葉 真透
投稿者:榛葉 真透(デザイナー)

こんにちは、デザイナーの榛葉です。
現在デザイン部には6名のデザイナーがいますが、そのキャリアは多様です。もともとフラッシャー(Flash制作者)だった人もいれば、まったく違う業界から転職してきた人もいます。Webデザイナー歴も数年〜10年以上と様々です。

Webデザインそのものが目まぐるしく変化するなか、メンバー達はどんな視点でWebサイトを見ているのか。今回の「デザイン部座談会」では、これまでに影響を受けたり印象に残っているWebサイトを一人ずつ発表して、お互いの視点を共有してみることにしました。

※ちなみに、すでにリニューアルされてしまったり閉鎖してしまったサイトは、ウェブアーカイブ閲覧サービス「Wayback Machine」を利用しました。URLを専用の検索ボックスに入力するだけで、過去に存在したサイトも閲覧できるため、各々が紹介するサイトを実際に見ながら話すことができます。
 

Flash黎明期から全盛期の、斬新な2サイト
ー 紹介者:小野木 雄 ー
 


中村勇吾さんの1999年のFlash作品「モナリザ」。2002年頃の株式会社モリサワのコーポレートサイトでも応用したActionScriptが使用されていたよう。

小野木

僕が紹介したいサイトは「中村勇吾さんのモナリザ」と「2Advanced Studios」です。

まず「中村勇吾さんのモナリザ」ですが、WebサイトではなくFlash作品です。
Webデザイナーになりたてのころ、世界のフラッシャーを特集した海外の雑誌に中村勇吾さんに載っていて興味を持ちました。

当時のFlashは、ActionScriptをバリバリ書ける人も少なくて、オブジェクト指向も根づいていない発展途上の段階で。そんな時代に、クリックするとモナリザの顔が歪むという作品が出てきて、そのアイデアと技術に驚いた。「Flashっていろいろできるんだ、中村勇吾さんってすごい!」って。

前職でフラッシャーをしていた頃はActionScriptがVer.2.0になっていて、当時の同僚の顔写真で同じスクリプトを組んでいたら、上司に「人の顔で遊ぶな!自分の顔でやりなさい!」と怒られたり。良い思い出ですね(笑)。

続いて「2Advanced Studios」は、IT系のスピーディーな感じが流行っていた頃のサイトです。


2Advanced Studios(http://www.2advanced.com/)のコーポレートサイトVer.4.0

今井

このサイト、懐かしい!

上森

これも10年くらい前ですか?

小野木

そうです。映画のようなデザインでテンションが上がったのがVer.4のデザインで、とても印象に残ってます。

榛葉

今のフラットデザインからみると、想像もできないデザインですね。

小野木

当時流行っていたのが、近未来的なスピーディーさを演出したFlashサイト。このデザインと動きはその先駆けで、まとめ系サイトや記事でもたくさん紹介されていました。
オーバーレイのコラージュや、光とオブジェクトの不思議な交わりを感じるビジュアルなど、このサイトを見て勉強しました。先日手がけた某大学のサイトのデザインでもその影響はかなり出ていると思います。

今井

確かに。テクニカルなイメージがありますよね。

榛葉

最近はこういうデザインを作る機会も減っていて、なかなかチャレンジできませんが、テクニカル系のサイトには応用できそうですね。

 

旧モノサスサイトにも影響をあたえた、衝撃的なイラスト
ー 紹介者:今井 智也 ー


少数精鋭でデザインやアプリ制作をしている HYBRIDWORKS inc.(http://www.hybridworks.jp/)のWebサイト

今井

僕も1つめはFlashサイトで、入社当時(約10年前)に影響を受けた「HYBRIDWORKS」という会社のサイトです。

当時はAppleのUIが最高と言われていて、スキューモフィズムなリアルなディテールのアイコンが流行っていました。お茶のアイコンを見てもらうと分かりますが、色使いや細部の書き込み具合がとてもきれいで衝撃的でしたね。今あらためて見ても感動しちゃいます。
その頃のモノサスはデザイナーが小野木さんと僕だけで、このサイトのドット絵にインスピレーションを受けて、2人でモノサスサイト用のイラストを書いたこともあったな。

榛葉

旧モノサスサイトの没イラスト集に掲載されていたものですね。


旧モノサスサイトのサービスページ用に作成したイラスト。結果的には没案となった。現在は旧サイトの没リンク集にアーカイブされている。

今井

今はフラットなアイコンを作ることが多いですが、当時はこういうサイトを参考に、リッチなテイストのアイコンを作成していましたね。

小野木

このサイトを見ながらアイコンを作って、テクスチャの入れ方を勉強して…参考にしつつも、心の奥底では「僕の方が上手いな」なんて思ったり(笑)。

今井

スキューモフィズムの究極は、このサイトだと思います。アイデアもいいし、イラストも外国のクリエーターでもここまで描けるか描けないかというくらいレベルが高いですね。

小野木

コーディングファクトリーのサイト用のアイコンも、このテイストで作成したけど、結構大変だったなぁ。でも、最近はどのサイトもテイストが似通ってきてるから、昔を懐かしむだけじゃなくて、実際に取り入れてみるのもアリなのかも。何でもフラットデザインでいいのかな?って思ってしまうよね。

 


HYBRIDWORKS inc.に影響を受けたと語る、コーディングファクトリーのサイト(http://coding-factory.com/)に使用されているアイコン

今井

2つめはHTMLサイトで、「BLOG×WORLD ENDING」という記事サイトです。
残念ながら今は閉鎖されていますが、記事物のサイトの中では最高峰でした。運営していたクリエイターの人は、HTML5が勧告されてCSSでアニメーションが作成可能になったときから、すでに取り入れていて。世の中のWebデザイナーはみんなこのサイトを見ていたと思います。


記事物サイトの最高峰。Blogサイト BLOG×WORLD ENDING。現在は閉鎖してしまっている。

小野木

記事前のタイトルもタイポグラフィーをしっかり組んでいたよね。

今井

レイアウトもきれいでした。アグイジェという制作会社のメンバーで、デザイナー兼フロントエンドもバックエンドも何でも出来る方が作っていたんですよね。

 

自分の描いたイラストが踊る!体験型サイト
ー 紹介者:上森 拓 ー


PICTAPS(http://roxik.com/v/0/)のサービス画面。Webデザイナー 城戸雅行さんが制作したウェブサービスで、画面上に描いたイラストを踊らせることが出来る。

上森

PICTAPS」という10年ほど前のサイトですが、自分の描いた絵が音楽にのって踊りだすのが斬新でした。当時パソコンといえばタイピングソフトで遊んだり、情報収集に使う程度でしたが、自分の作った物がブラウザ上で動くんだ!と。今で言うと「Team Lab」の作品みたいな感じですかね。
自分で作ったものをシェアできるのも、新鮮でおもしろかったです。

今井

当時は目新しかったよね。

榛葉

おもしろいね!時間があるときに、じっくり描いて踊らせてみようかな。


 

奇妙なイラストが印象に残るバスキュールのサイト
ー 紹介者:榛葉 真透 ー

株式会社バスキュール(http://www.bascule.co.jp/)のコーポレートサイト

榛葉

僕が影響を受けたサイトは、バスキュールという制作会社のサイトです。

10年ほど前に同居していたグラフィックデザイナーの幼なじみから「面白いサイトがあるよ」と教えてもらったのがこのサイトです。

その頃はWebデザイナーになるとは思ってなかったので、サイトをデザインするという視点はありませんでしたが、当時めずらしかった縦長のサイトが新鮮で、イラストやギミックにインパクトがあったことが印象に残っています。

特におもしろかったのが、ページ最下部にある壷のイラストをクリックすると、サイト全体が吸い込まれていく動き。こんなことできるんだぁ、とビックリしたことを覚えてます。

今井

僕も見ましたよ。Flash全盛期のデザインだけど、この縦長のデザインは今のデザインにも通じますよね。

上森

どのくらい前のデザインですか?

榛葉

サイトは2001年からあるようです。

 

座談会を終えて

自分が影響を受けたサイトを語り合う座談会。それぞれの思い出や視点を知るとともに、あらためてWebデザインの変遷を振り返る時間となりました。

僕がWebの制作に関わりはじめた2012年頃は、iOSが一般化して、フラットデザインが主流になってきた時期でした。ただ当時も、ボタンにグラデーションやシャドウを入れたり、Flashのメインビジュアルやバナーを作る勉強もしていたので、ちょうどトレンドが入れ替わる時期だったんだと思います。

それから数年で、Flashを触ることはほぼ無くなり、CSSやJSでつくるアニメーションや映像を使うことがトレンドになるなど、目まぐるしい変化が起きています。みんなの発表を聞きながら、そのスピードにあらためて驚くとともに、過去のサイトの自由度の高さや作り込みの細かさに圧倒されました。(あの時代のWebデザイン黎明期を経験したかったです。)

これからのWebデザインも、今まで以上のスピードで変化していくと思います。その速い流れのなかで、自分自身も「記憶に残るようなサイト」を制作することを意識し続けようと背筋が伸びる座談会となりました。

この投稿を書いた人

榛葉 真透

榛葉 真透(しんは まさゆき)デザイナー

Webデザイナー。20代は音楽イベント、料理、ファッションに没頭し、最近Webデザイナーとして本格的に動き出したばかり。温もりのあるモノやデザインが好き。アメリカを代表するサイケデリックロックバンドGrateful Deadに魅せられてから、カリフォルニアをはじめとするアメリカの音楽カルチャーが大好物。

榛葉 真透が書いた他の記事を見る