Smartphone スマホ

 
スマホwebマーケティング

マルチスクリーン時代に必要なWEBディレクターのスキルとは?

8e0db9690b4151a5dfbe4658f929cdba_m
「レスポンシブWEBデザイン」「スマホ最適化」「html5」…昨今、WEBディレクターが覚えるべきことは一気に増えてきました。そこで今回は、マルチスクリーン時代において、WEBディレクターが身につけるべきスキルをテーマに、株式会社サウンドエフ 代表取締役 兼 デザイナーの岡田篤氏にお話を伺いました。

okada_main岡田篤氏プロフィール
株式会社サウンドエフ代表取締役。WEB制作だけではなく、映像編集や音楽制作など幅広い分野で活躍するデザイナー。
株式会社サウンドエフ https://sound-f.co.jp

マルチスクリーンの時代が確かに来ている

――岡田さんの会社でも、スマホやタブレット対応を考慮したサイト制作の案件は増えていますか?okada_2
もちろんです。ここ最近で一気に増えてきた印象がありますね。特に大手企業の場合は、コストや納期の短縮という面で「レスポンシブWEBデザインにしたい」という声をよく聞きます。

逆に、小さな飲食店のサイトなどは、まだまだフィーチャーフォンからのアクセスも多く、「レスポンシブにしない代わりに、ガラケーサイトのコンテンツを充実させましょう」という提案をする場合もありますね。

――そこはクライアントのニーズにあわせて、ということですね。
そうですね。「マルチスクリーンの時代が来た」と言われていますが、あくまでもお客さんにとって「サイト制作の選択肢が広がった」だけ、と個人的には捉えています。

――無理してトレンドにあわせる必要はないということでしょうか。
WEBサイトの制作というのは、単にPVを上げることが最終目的ではく、その先にある、例えば「売り上げを上げる」「購入につなげる」ということがゴールなので、そこはスマホだろうと、PCであろうと変わらないですよね。トレンド重視も大事ですけど、根本のゴールを見失ってはいけないと思うんです。

でも、単純に「新しいからやりたい」というクライアントもいますけどね(笑)。そんなわけで、全体的にはスマホやタブレット対応の制作は年々増えているのが現状です。

マルチスクリーンの時代におけるWEB制作の問題と課題

――レスポンシブWEBデザインの要望が多くなった、とお話がありましたが、PCサイトのみの制作と比べ、問題点などはありますか?
ブラウザ対応は大きな問題ですね。古いバージョンのIE、特にIE6とIE7では、半分も画像が表示されなかったりしますし、IE8でも激しい動きがあるページは表示できなかったりします。

お客さんが見たいのはサイトの素敵な動きではなく、あくまでもサイトに掲載される情報なので、レスポンシブ対応にすることでページが最適に表示されないのであれば、スクラッチで別々に作ることも提案しています。

――「最適に表示されるかどうか」というのは、PCだけでなくスマホにも言えますよね。
スマホの場合は、最適に表示されるための前提として、ページ容量の問題があります。読み込みに時間がかかったり、次のページになかなか遷移しなかったりするとイライラしますからね。

特にレスポンシブWEBデザインだと、Retina対応などで、必然的に画像サイズが大きくなるので、当然容量も大きくなります。ですから、画像はギリギリの容量で作ったり、画像ではなくテキストで処理する必要がでてきます。でもそうすると、今度は見た目がチープになったりするんですよ。

――デザインとの両立が課題になっていくわけですね。
デザインに加えて、UIの問題もあります。ユーザビリティーを考えつつ、容量問題もケアしながら、さらにクライアントのKPIを満たさなければならないわけですから、考慮すべき点はたくさんあるのです。

WEBディレクターが気を付けるべき点とは

――では、そういった課題をどのようにしてWEBディレクターは対応していくべきだと思いますか。

まず、最初の要件定義や設計で、どのユーザーをターゲットとしてサイトを制作するのかを決めておく必要があります。例えば、閲覧するユーザーに年配の方が多い場合は、文字サイズを大きくしてナビゲーションなどは通常よりも分かりやすく設計する必要があります。

また、どの機種やデバイス、OSに対応させるのかなど、レギュレーション関連も細かくヒアリングしておく必要があると思います。特にスマホの対応機種についてはキリがないので、僕は「2年以上前の機種は考慮しない」と提案しています。携帯電話は契約の都合で、2年サイクルで変えるユーザーが多いですからね。

――提案やワイヤーフレームを作成する段階で、そういった細かい部分の設計が必要になるというわけですね。
okada_3
ワイヤーフレームを作る際には、さきほど言いましたようにUI設計も必要ですよね。これまでPCのみの制作では意識することがなかったかもしれませんが、今後はPC用、スマホ用、タブレット用それぞれのワイヤーフレームが必要で、それぞれにUI設計を考えなければなりません。


――UIの勉強は難しく感じてしまいますが、どうやって身につけていけばよいでしょうか?
例えば、PCのみの制作案件があった場合、「このスマホサイトを作ったらどうなるだろうか?」と仮定して、スマホ用のワイヤーフレームを作ってみてはどうでしょう。「PCは3カラムになっているけど、スマホではどう設計したらよいか」「情報量がスマホで見たときに適切か」など、UIを考える良い機会になるはずです。

逆に、PCとスマホがセットになった案件を制作する場合は、スマホのワイヤーフレームから着手する、というやり方をオススメします。これまではPCのワイヤーフレームを作成してからスマホのワイヤーフレームに着手する、というやり方が一般的だったと思いますが、順番を逆にすることで、「スマホでデザインしたものをPCに落としたときにどう見えるか」という視野が養われるはずです。ワイヤーフレーム作成の段階から「モバイルファースト」を意識してみる、ということですね。

マルチスクリーンの時代に必要なディレクターのスキルとは

――いままでのお話を総合すると、今後デザイナーやディレクターはますます幅広いスキルが必要になるということでしょうか。

昔のデザイナーはhtmlとcssだけ書ければよかったのに、今は当たり前のようにJavaScriptやjQueryを理解していないといけない時代になってしまいました。ディレクターも「何を使って何ができる」ということを知っておく必要がでてきましたね。もちろん、ディレクターは技術的なことを深く知る必要までないですけど、WEBの最新トレンドなどを浅くでも構わないので、色々知っておくと武器になると思います。

――クライアントから「これできる?」と聞かれて、なんとなく見たことがあるから「できます!」と答えると後で痛い目にあうケースもありそうですね。

クライアントは「できる・できない」に加えて、費用とスケジュールを必ず聞いてくると思うので、ディレクターはその場で判別できる知識が必要ですよね。さらに、「こういうのは無理だけど、こういうのはできますよ」と代替案を提案できるのもディレクターのスキルだと思います。

ディレクターにせよデザイナーにせよ、やはり大事なのは経験を踏むことだと思います。本を読んで得る知識も重要ですが、それを実践で使わないと身につかないと思います。失敗して、クライアントに怒られて、徐々に経験値を高めていけば良いのではないでしょうか。

――日々の業務の積み重ねが大切ということですね。
マルチデバイスを考慮したサイト制作が避けられない時代になってきました。ディレクターもデザイナーもPCだけの知識だけあればよいという時代ではなくなり、幅広いデバイスの勉強をして、クライアントの要望に答えられるWEBサイトを作っていければいいですね。

タグ

記事mobifyロゴ
Mobify(モビファイ)とは

Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。

▸Mobify(モビファイ)についてさらに詳しく

 最新記事