catch

「Webデザイン」とはなにか?ザックリ考えてみた(2013年)

「Webデザイン」について今の自分が考えてることを記録として書きました。去年に続き二回目です。タイトルに2013年が入ってるのは時間と共にwebのあり方や自分の考えも変わっていくからです。

はじめに

このテーマを毎年恒例にしようとしてたのですが、早くも2回めで躓きそうになりました…。
「Webデザイン」とはなにか?じっくり考えてみた(2012年)

内容は「Webデザイン」の範疇を超えてるのですが、前回と同じタイトルにしてます。ただし、年末年始バタバタしてて時間掛けて考えることができなかったので、”じっくり”を”ザックリ”に変更してます。

また、この記事は2012年の総括や2013年のトレンドではなく、制作者の立場からWebについて今の自分が思ってることをつらつらと書いてます。なので、異なる意見があって当然だと思ってます。
読んでくれた方が「webデザイン」について考える一つのきっかけになったら良いなと、そのくらいの気持ちでいます。

Webデザインとアプリのデザイン

Kinetic GPS
「Kinetic GPS」via flickr photo by wearemothership

全体的にWebデザインはシンプルな方向に向かってます。(もちろんブランドやビジュアルをメインにしたそうではないサイトもあります)
その背景にはより「情報」に重きが置かれてること、マルチデバイスに伴い回線速度の低い環境からでも閲覧するユーザーが増えたことなどが挙げられます。
シンプルなのでデザイナーの力は必要ないかと言えばそうではないのですが、凝った画像や装飾を作る機会が減った分制作の労力は減ったのは事実です。

一方でアプリは今でもSkeuomorphicなリアルな凝ったデザインが求められるケースはあります。Webの主な目的は情報を取得することなので見た目のデザインは重要度が減りますが、アプリは所有するものですし、回線速度も関係ないです(ネット接続を前提としないアプリ)。
家電やインテリアを買う時にデザインも重要視することがあるように、アプリでもデザインの重要性は高いです。
例えば天気のアプリはiOS向けだけでも何百とありますが、この中からどれを選択するかの中にデザインが好きだからという理由で選択する人もいるでしょう。

Webデザインとアプリのデザインは考え方を全く変えなければならない部分もありますが、Webデザインからアプリのデザインに流用できる部分や、アプリからWebに流用できる部分は多々あります。
例えばアプリのデザインはUIやUXが重要視されます。そしてそれはWebデザインにも影響を与えてます。
このようにお互いを高めあえる点もあるので異なる環境のデザインを経験することはプラスになります。

[参考]
[過去記事]Appleが推奨するSkeuomorphic Designとそのメリットデメリット

ウェブのアプリ化

今のウェブ=ページと言う概念も変わってきてると思います。
目的によっては従来のページのような形が最適なケースもあれば、アプリとして完結された形が最適なケースもあります。スマートフォンのアプリもネイティブで作らずともWebアプリで十分に実現できるだけの環境ができてきてるのかなと思います。
ハッキリと言ってここは情報追いきれてませんので、今後注力して行かなければならないところですが、取り敢えず自分の中に凝り固まった「Web」の概念は壊さなければと思ってます。

マルチデバイス対応

Multi-device delivery demo
「Multi-device delivery demo」via flickr photo by Interact Egypt – Play Innovation

去年のWebデザインの大きな話題といえばレスポンシブWebデザインでしょう。微妙な立ち位置になってますが、これには幾つか理由が考えられます。
一つはレスポンシブWebデザインはスマホ対応のベストプラクティスではないという点。
現在はどうしてもスマホ対応としてレスポンシブWebデザインが取り上げられることが多いですが、レスポンシブWebデザインのメリットが最大に感じられるのが把握しきれないくらいスマートデバイスが増えてきた時だと思います。
意外なデバイスにブラウザが搭載される可能性は十分あります。それでWebを閲覧するのかと言われれば疑問なのですが、そういう常識も変わってくるのだろうと思います。

そもそもレスポンシブWebデザインはスマホに特化した手法ではないですし、スマホ対応であれば、専用にサイトを制作したり、出力するファイルを切り替えたりする方法を選択した方がベストなケースは多々あります。
その他にもメリットが先行してしまってデメリットが後回しになっていたり、今までの制作の考えで進めるとリスクが大きかったり、捨てるべき部分を捨てられなかったりと、理由はいろいろ考えられます。そこを追求したら1つ記事が書けるほどに膨大になったので端折りましたが、結局はまだ発展途上の技術だと考えてます。

僕個人はレスポンシブWebデザインはあくまで選択しの1つとしか考えてないので、サイトの目的に応じて使い分けてます。なので場合によっては専用サイトとレスポンシブWebデザインの両方使ってもいいと思ってます。ただ、レスポンシブWebデザインに関しては今後も情報は追い続けていくつもりです。
それはレスポンシブWebデザインだからと言うよりは、マルチデバイス対応は今後考えていかなければならない問題だからという理由です。まだまだレスポンシブWebデザインはデメリットもありますが、それを知って解決するためにはどうすればいいのかを考えることは大切だと思います。
最終的にマルチデバイス対応の決定的な手法がレスポンシブWebデザインの進化の先にあるのか、全く別の手法が生まれてくるのかは分かりませんが、そこに向かおうとすることが大事だと思ってます。

柔軟なサイト・柔軟な思想

個人的にレスポンシブWebデザインを知れて良かったと思う点が幾つかあって、その1つがこれを切っ掛けにWeb制作の様々なことを考えることができたことです。

今までは Webはラフで仕上げたものをブラウザ上に同じ形で載せるものとして認識していました。
しかしレスポンシブWebデザインのように可変するデザインはピクセル単位でのコントロールは非常に厳しく、ピクセルパーフェクトの考えは捨てなければなりません。プログレッシブ・エンハンスメント、グレースフルデグラデーションの考えを持って進めることも大事です。
全てのデバイスで全く同じデザインを求めないことです。この考え方を持たずにレスポンシブWebデザインに取り掛かると炎上するでしょう。

そしてレスポンシブWebデザインに限らず、この考え方はもっと一般に広まって欲しいと思ってます。
そもそもWebを紙のデザインの延長線で捉えてたのを見直すべきでした。
ユーザーがサイトに訪れる目的は情報を得るためです。多少デザインが崩れてても、見た目が多少異なっても欲しい情報があればユーザーはアクセスするでしょう。

制作側に都合のいい考えと言われるかも知れませんが、対応するということは時間を要し、それだけ費用がかかります。
リソースや時間が無限にあるならばデザインも完璧にできなくはありません。
でも通常はそうでないことが多いので、であればデザインに割く時間をコンテンツの充実やページの高速化などに割いた方が良いです。
そう言った考えは制作側だけでなく発注する側にも浸透するようにして行かなければなと思います。

[参考]
[過去記事]HTML5・CSS3時代のweb制作コンセプト

ワークフローの変化

去年からWeb制作のワークフローはできるところから少しずつ変化させてきました。
大きな変化がPhotoshopなどでラフデザインする工程をなくすことと、アジャイルで進める点です。
始めの頃はコツが掴めず、今までどおりPhotoshopで形にしてから進めた方が早いと思うとこもありましたが、慣れてくるとDesigning in the browserで進めた方が簡単で効率がいいと実感できます。
CSSでデザインができる部分をPhotoshopで作成して同じようにCSSを書くのは二度手間です。
また最終的な出力先であるブラウザでデザインすることは、いち早く問題に気づくことができます。

ただし、デザインの方向性が無いとサイトのクオリティは保てないので、その部分を補うためにStyle TileやStyle Guideを使用します。これらは今後更に進化したり、作成するためのツールも生まれてくると予想されます。

実際の現場の話をすると完全には変化しきれてません。
慣れてない部分もありますし、ラフデザインを求められることもあります。
僕は個人でやってる立場なので思うように変えて行けますが、大規模な会社や古い体質の会社だと変革はなかなかに難しいでしょう。ただ、Webのあり方や求められるものが変化してきてるので、制作のワークフローも少しずつ変えていく時に来てるのだと思います。

[参考]
[過去記事]Web制作フローの再考とDesigning in the browser
Style Tiles
モバイル時代におけるCSSの設計と実装|1 pixel|サイバーエージェント公式クリエイターズブログ
Web制作者は変化についていけるか? 変化についていくべきか?

制作ツールの変化

代表的な例で言うとコーディングで使うエディタが挙げられます。
一昨年あたりはDreamweaverを使ってる人が多かったのですが、去年辺りからCoda2やSublime text2などをメインに使う人が急速に増えてきました。
単純に動作が軽いからと言う理由や、Dreamweaverではできないことができるから、など人それぞれ理由はあるでしょう。
ただその背景にはHTMLやCSSを理解して使える人が増えてきたというのが読み取れます。
webデザインを始めた頃の僕はHTMLのタグの理解もそこそこにDreamweaverのビジュアルで中心に作ってました。その頃では他のエディタは考えられなかったでしょう。
でも最近はHTMLやCSSは理解して使ってる人が増えたので、選択肢も広がったのだと思います。制作者各々のスキルも上がってます。

更に今まで以上にやることが増えたので、今まで使用してたツールでは補えなくなったという理由もあるでしょう。
今までのツールはバージョンアップして機能もよくなってますが、結局は求めるものが全く変わってきてしまったのでそれらでは足りなくなってきてます。
Webのあり方やワークフローの変化に伴い、それに対応した新しいツールも続々出てきてます。
アプリやツールをよく知ってるたにぐちさん(@seltzer)は「自分が人より知ってるのは気になるものがあれば実際に使って試してるから」と言ってました。確かにその通りで、試してみないことには理解することもできません。
ツール1つで制作効率が大きく変わることもあるので実際にいろいろ試して自分に合ったものを見つけていきたいと思ってます。

[参考]
一歩先行く! ツール活用で制作効率アップ in TOKYO – Togetter

適切に情報を届ける

既にそのサイトのコンテンツはそのサイトでしか見れないものではなくなってます。
色々なところで、色々な形で見られるようになってきてます。
RSSリーダーくらいであれば、それをコントロールできるのですが、キュレーションサービスなどではどのような形で切り取られ表示されるのかサイト管理者がコントロールするのは難しいです。

しかしそれがコンピューターによる自動的なものであるならば、ある程度コントロールは可能です。
HTML5からはより厳密に文章構造にコンピューターに伝える事ができるようになってきました。またGoogleのリッチスニペットは意図した通りの情報を検索結果に表示させることができます。

今後コンピューターに伝えられた文章構造などの情報が、どのような形で使われるようになっていくのかは明らかではありませんが、それをデータとして扱えることでできることが増えてくることは確実です。
その時に正しい情報を正しい情報で伝えるために、人だけでなくコンピューターに向けたサイト制作も意識しておく必要があります。

[参考]
[過去記事]Microformats、RDFa、Microdataとschema.orgとリッチスニペット

まとめ 変化にどう対応していくか

この業界は流れが早いと言われてますが、その変化は緩やかなものだなと最近感じてます。
例えば去年で言えば、新しいタブレットが続々と発表され「これからはタブレットをターゲットにしたサービスを」的な空気になりました。
ただ、実際今の段階でタブレットの所有率は約1割です。早い人はずっと以前からタブレットへの対応を進めてますが、殆どの人は「そのうちやらなきゃ」くらいなのではないでしょうか。タブレットが一般の層に普及し始めた頃にようやく動き出す人もいるでしょう。
全体に浸透するにはそれなりに時間がかかり、ある日を境に制作に携わる全ての人がタブレットの対応を始めるとは考えにくいです。

緩やかであると言うことは、逆に言えば徐々に対応が可能ということです。
いきなりあれもこれも身につけようとするのは実際無理な話ですし疲弊してしまいます。
しかし少しずつ身に付けていくことなら可能です。
このWebの変化に対応するには、早い時期から行動し、日々考え、学び、アウトプットする、その積み重ねが大事だと思います。
この記事もその一貫ではあります。

取捨選択

とは言え、コツコツやっていくにしてもデザインもコーディングも、プログラミングもネットワークも全部やるのは不可能です。
その中で何をやるかを選択して行かなければなりません。
その選択は人によって異なり、多方面に手を広げる人もいれば、なにか1つを極める人もいるでしょう。
その選択に正解はなく、何を創りたいか、どのように働きたいか、どうすればお金を稼げるか、など目指すもので人それぞれ選択が異なります。
そしてそれは自分で考え決めていかなければならないものです。
きっとこの選択はこの業界にいる限りついて回るのでそれを考えると、なかなかにタフな世界だなと思います。

情報に飲まれないこと

また情報の取捨選択も必要です。
最近はキュレーションサービスが人気がありますが、裏を返せば把握できないほどの情報が溢れてるということになります。ソーシャルネットワークのおかげで更に玉石混交の情報が溢れてます。
実際僕も仕事が忙しい時は集めた情報を見るだけで終わって学んだ気になってることがよくあります。
これはよくない傾向だと感じてます。

情報を見て"学んだ気"になって、"学んでない"ことが増えてきてます。
10の記事を読むより、1の行動の方が確実に自分の中に残ります。
正しい情報を得て、咀嚼し、それを自分のものにする力もまた必要です。

あとがき

去年の記事と読み比べると、大分内容が変わってます。おそらくこの一年で「デザインだけ考えてられない」と自分の中で感じたのが大きな要因です。

先程も書いたように今はインプットの比率が大きくなってしまってるので、アウトプットの比率を上げるのが今年の目標の1つです。
学ぶことは際限なく多くなってますが、手を動かすことにかける時間は短縮できる環境も整えられるようになってきてます。
とにかく作業の効率化を目指し、空いた時間をクリエイティブな作業や学ぶこと・アウトプットに使いたいと思います。

最終的に選択したものが間違ってて、数年後にはいらない技術になることもあります。
それを考えると変化し続けるこの世界は厳しいなと思いますが、まあ好きでやってるので今はそれも楽しめてる感じです。
今年は去年より少しだけ先を歩けるようになって、アウトプットとともに確かなものを身につけて行くのが目標です。

Add Comment

本文

コメントはまだありません。

PAGE TOP