今回のテーマが「魅力的な画面遷移」だということが、私にとって新鮮でした。「画面遷移」については、サクサク動くスピードが重要とか、そういうことは思い付くのですが、Webデザインの中ではどういう位置付けなのか、どのような重要性を持っているのか、ということを聞いてみたいです。「画面遷移」って、「Webサービスをつくろう！」というときに、必ず話題に上るものなんですか？

つくる人によって全然違いますが、たぶんスマートフォン、つまりタッチインターフェースになってからは、重要度が増していると思います。ただ、すごくかっこいいデザインって、表示速度とかユーザビリティの点では、利用者にとってアンハッピーになることが多々あります。だから、そのバランスを考えるのはとても重要です。

かっこいいデザインに時間とお金をかけるより、利用者目線でより快適に操作できるように、サクッとつくり上げるほうがいい。最近ヒットしているアプリは、画面遷移図とかなしに、モックをつくって、触りながら企画を進めていくんです。だから、ボタンの配置とかよりも、画面がどう動くかの遷移のほうが大事。そういう意味では、画面遷移はいま一番ホットなテーマですね。

iPhoneが登場してから、デザイナーは画面遷移を気にするようになりましたよね。「ローディング時間が遅い」と感じさせない遷移手法が、世に注目され出した瞬間だと思っています。実際、iPhoneの処理速度や通信速度はそんなに速くないけれど、いかにユーザーにストレスを感じさせないユーザーインタフェース（UI）を考慮しているのかどうかが重要。「LINE」はそういったユーザビリティがかなり研究されていると思います。Flash全盛期のWebサイトは、派手でハイクオリティな動画的な表現が主流だったけど、いまはいかにユーザーを待たせないかを考えたUIが、トレンドになっている気がします。Webデザインといえば、ボタンの配置などページのデザインに関心がいきがちですが、最近スマートフォンインターフェースも増え、より注目されているのが「画面遷移」なんですね。

私は自分がやってみたいサービスがあるのですが、自分のスキルが限られているため、できるところからつくっていこうと思っています。ゴールでこれだけのことを実現したいことを決めて、「それじゃここからつくり始めよう」という形をとる手法と、思い付いたところやできるところからつくってリリースし、あとで機能を追加していく手法はどちらがいいのでしょうか？　また、どちらの手法を採るほうが多いのでしょうか？

受託か自社サービスかで、アプローチが違いますね。受託の場合は、ちゃんと全体像を描いて、スケジュールを組んでやることが多いです。自社サービスの場合は、最小限から始める方がよいと思っています。特に、この機能がないと、サービスとして成り立たない、というポイントを見つけること。その最小限のところからつくっていって、仮説検証を繰り返しながらよくしていく、サービスを成長させていくべきだと考えています。初めに全体を網羅しすぎると、何か改善を施そうとするときに、修正のコストが大きくなります。だから、ガチガチに決めるよりも、フレキシブルな設計を心掛けています。シンプルにつくる事こそが、結果的に拡張性を担保することにつながると思っています。

まずシンプルな形でリリースして、ユーザーの反応を見ます。反響がなければ、「そもそもそのコンセプトが合っていない」ということ。海外でヒットしているサービスは極めてシンプルです。改善は行わなければなりませんが、それはユーザーフィードバックがあってからでいいと思っています。がっちり決めてしまってリリースが遅れるより、早く出してしまって、フィードバックをもらえた方がいいです。「おれのそうび」も現在はティザーサイトなので、アカウントをとってもらうだけですが、それでも十分ユーザーが集まっているし、いいフィードバックをもらえています。

Webクリエイターの方たちは、どこから発想を得ているのですか？　また、「デザイン」と「アート」の違いがあったら教えて下さい。

開発の仕方にも通じますが、チームでつくる時は、いかにつくりたいものを共有してそれぞれが分担するかというところにかかっています。モックがあるとわかりやすいし、大きな遷移図を書くとみんながどこをつくればいいかがわかりやすくなります。ただ、イノベーティブなものをつくろうと思ったときには、一人の人に任せた方が、圧倒的にいいものができているような気がします。

設計図はつくりながら書き、触りながら、想像力の中でレタッチを繰り返していくようなかんじです。その過程の中で、その人の面白い発想がサービスに組み込まれていくのだと思います。それっていわゆるアートなのか、デザインなのか境界線がわからない。でも、アートというより、「やるぞー！」と気合いを入れて力を凝縮して3日くらいでつくったものの方が、新しくて輝いているような気がします。

デザインとアートというと、かなり根源的な話で難しいですね。自分は典型的なエンジニアタイプで、「いかにソフトウェアとしてよくつくるか」という点を重視しているような気がしますが、その「よく」で重視する点がデザインかアートかで異なるのかなと。どう情報を提示して、どうユーザーにメリットをもたらすか、といういわゆる「情報設計」の部分がデザイン的な活動になる気がします。

いままでどんなキャリアを歩まれてきたのかということと、Webクリエイティブのスキルがあると、これから先どんな仕事ができるようになるのか、という部分についての考えを聞かせて下さい。

私は厳密にはWebデザイナーではありませんが、個人で受けた初めての仕事は、小さなパン屋さんのホームページをつくることでした。Web制作のスキルがあれば、最小単位で仕事が受けられるようになると思います。例えば女性は妊娠中でも自宅で仕事ができたり、最小単位で仕事を引き受けられるという点では、メリットが大きいと思います。

ただ一方で、Webクリエイター人口も増えてきているので、ライバルは多いと思います。そこは、自分の独自性を磨いていくことが大事。単にWebデザインだけでなく、そこからプラスオンで何ができるかということを考える必要があります。例えば、弊社のデザイナーは、スマートフォンアプリのデザインスキルがアピールポイントですが、少し前は、Flashが組めてActionScriptが書けることがトレンドでした。そういったプラスオンのトレンドをうまく読んで、自分のスキルとして身に付けていくことが重要だと思います。

私が小学生の頃はディスプレイなどもなくて、基盤の状態のものにプログラミングを施していました。学生時代の夢は、「テレビCMにURLが出るような世の中にすること」。そのための啓蒙活動をするために、「つくる」から「伝える」立場に移りました。ただ、この業界は現場にいないとわからないことも多い。だから、スタートアップ企業の立ち上げに参加して、企画もコーディングもやって、ローンチしたら抜けるというようなことを何度も経験してきました。いまは、やりたいことがやれる段階に来ていると思います。自分の考えてることや経験したことを総動員して、面白いものをつくることが、自分のアイデンティティにもなるし、キャリアにもつながっていくと思っています。

私は栃木県に住んでいますが、栃木にいながらロシアの仕事をしたり、アメリカの仕事をしたりなど、時間や場所にしばられない仕事ができる時代になっています。それは、大変な面もあるけど、自由です。どんなスタイルでもとれるという状況。最近はデザインとシステムの境界線があまりなくなってきて、自分のつくりたいものを全部自分で実現できるという、参入障壁がとても低い状態にあります。だから、自分のプログラミングやマーケティング、デザインなどの知識を駆使して、自分のセンスで、自分のつくりたいものをつくることができる。それが少しでもいい方向に向かっていくという経験が積めれば、いくらでもチャンスがある時代になっていると思います。

　私たちTech女子もレクチャーを受けながら、プログラミングを行ったのですが、あっという間に時間が経ってしまいました。いよいよ各チームの発表です。

　まずは、増田さんと私のペアから。基本方針は、CSSを使ってアニメーションをつくるということ。構文のレクチャーを受けながら、CSSを触ってみました。今回、実は私からお伝えしていたデザインイメージのリクエストは、「アゲハ蝶がにぎやかに飛んでいるかんじ」。それをなんと、画像などを一切使わず、文字通りHTMLとCSSだけで実現することができました。タブを切り替えると、アゲハ蝶をイメージした「▶｜◀」のカラフルな文字が、ページ上を飛び回ります。

　これは、CSS3のrotateというコマンドを使った動き。CSSでは、HTMLの色や配置などを指定する事ができますが、CSS3のrotateコマンドでは、この文字を「動かす」という指定もできるのです。CSSで、文字を動かすことができることも初めて知りましたが、しかも、「蝶が飛び回る」ような自由な動きが可能だということにも驚きです！

　コーディングのスタイルは、元のコードを活かしつつ、CSS3で実現できる「動き」の中で、イメージに近いものを選んで、コピーペーストして、カスタマイズするというもの。インターネット上にいろいろな人がUPしているデモを見ているだけでも面白かったですが、コードが公開されていて、それをみんながカスタマイズしながら使うことができることに感動！　初心者でも「自分のつくりたいものを自分でつくる」ための学習になるし、とても素晴らしい環境だなと改めて感じました。

　次に、大沢さんと澤田さんのペア。大沢さんいわく、澤田さんはHTMLも初心者だったので、「CSSはこういうものだと教え込む」ために、CSSを写経するようなスタイルでレクチャーされたそう。でき上がった画面遷移は、「おれのそうび」の世界観さながらに、ゲームの中から飛び出してきたようなキャラクターがナビゲートしてくれるようなデザイン。画面の切り替えは昔のゲームのようで、画面を切り替えるたびに、すべて英語とひらがなの文字が一文字ずつ浮き出ます。

　上下左右のカーソルキーでキャラクターを動かすことができ、ゲームのインタラクティブな要素も取り込まれています。世界観を一つひとつのディテールに落とし込んでいるこだわりが、全体のワクワク感や美しさにつながっていくということを改めて感じました。澤田さんは、画面上でキャラクターの動きを出す裏側の仕組みに、「画像9枚を、一つのキャラクターとして動かすのを知ってびっくりした」と、新鮮な反応を見せていました。

　澤田さんに感想を聞いてみたところ、「HTMLやCSSなど、授業では少ししか触れてないことを一つひとつ丁寧に教えていただけて、大変勉強になりました。最初にソースを見たときは、暗号かと思うくらい、ズラリと文字が続いていて、絶対にわからないと思いました。1個づつコードの意味を教えてもらったら、意味のわかる暗号に見えてきてうれしかったです。一回では覚えられませんでしたが、構造がわかっただけでも進歩したと思います！　貴重な機会をありがとうございました」と、とても楽しそうに答えてました。

　最後は、細羽さんと松元さんのペアです。細羽さんチームも、「CSS3の機能を使って画面遷移にデザインを入れていく」という基本方針。全体的にサイコロのようなキューブ型のデザインで、ページを切り替えるとページが回転して次のページのコンテンツが面として出るような仕組みを実現していました。

　サイコロが回るようなデザインで、一見とても難しそう。ところが、実は面ごとにCSSでデザインを変えて表示しているだけのシンプルなコードなのだそう。こちらも、回転する動きのrotateを使い、回転角度を指定しているそうです。松元さんは、もともと3つのコンテンツしかなかったところに、4〜6ページ目のコンテンツを入れる部分のところで、作業をされたそうです。

「難しそうに見えるけど、要素を組み合わせれば簡単につくれるということを体験して欲しかった。キューブなので、本当は、横を押したら横に回転して、上を押したら上に回転するような、直感的なクリックで回転させられるようなデザインにまで落とし込みたかった」と、細羽さん。そんなことまで、CSSでできるようになるなんて驚きです！

　松元さんは、「あっというまに時間が過ぎたが、印象に残ったのはCSSが、『昔はできなかったことがいまはできるようになった』という細羽さんの言葉を何度も聞いたこと。Webデザインは進化しているんだなと思いました」と、デザインそのものだけでなく、Webデザイン業界のスピードの速さを実感したようでした。