忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[176] [175] [174] [173] [172] [171] [170] [169] [168] [167] [166

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

レスポンシブWebデザインにおけるコーダーの役割

先日、Twitterで
『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』
というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。

自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、
自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。



私の周辺では、レスポンシブWebデザイン(以下、RWD)の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。
PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。
いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の制約はあまりありません。

でも、RWDは1つのHTMLを複数のデバイスにうまくフィットさせるための技術。
「PC用」「スマホ用」に別で作られたデザインを、1つのHTMLで実装する、ということではありません。
冷静に考えれば、2つの異なるデザインを1つのHTMLで実装しようとすること自体、不可能ではないでしょうか?

でも、RWDというあたらしい手法が誤解され、免罪符として使われ、
「RWDだからしょうがないんだろうな」と言って、
「PC用」「スマホ用」で、どう考えても1ソースで組めないようなデザインでも、 HTML内に複数回要素を繰り返して、mediaqueryでウィンドウ幅によってdisplayを切り替えて実装してしまう、という例があるようなんです。

マークアップエンジニアとして普通に考えたら、
HTML内に同じコンテンツを2回繰り返して、それをdisplayで表示切替する、なんていうのはありえない手法です。

それが、なんだか『角丸実装するのに不要なdivちょっと入れようかな。仕方ないけど。』くらいのレベルで、
同じコンテンツをHTML内に複数回入れることが行われていたんです。

『デザインはもう変えられないから、仕方なくやった。』

という理由で。

これは、今まで、弊社が主に「分業」で案件をすすめてきたことに起因していると考えています。

  • ディレクター、デザイナーは、コーディングの技術的な部分に関してはあまりよく知らない。
  • コーダーはデザインに関して、あまり積極的に関わらない(受身)。

だから、コーディング可否の判断がされないデザインがあがってきて、
「デザインは絶対に変えられないもの」だと刷り込まれたコーダーはそのまま組む。
という図式になってしまっている。

従来のWeb制作ならそれでもよかった(よくはないけど)。
ただ、「RWD」という1つのHTMLで実装しなければいけない案件で、「PC用」「スマホ用」の複数パターンのデザインが上がってくる現状を考えると、
この図式なら『デザインはもう変えられないから、仕方なくやった。』
ということになるのは必然かな、と感じる自分もいました。

それを、
『ディレクター、デザイナーが技術的なことを知らないから、悪いんだ!』
『自分はコーダーとしてがんばってる、何も悪くないんだ!』

と結論付けるのは簡単ですが、上記の考えではおそらく、何の解決にもなりません。
なぜなら、あまりに「他力本願」だからです。

ディレクターがもっとRWDについて学べばいいんだ、デザイナーがCSSをもっと学ぶべきなんだ、
という意見は正しいし、本来ならそうすべきでしょう。
でも、「他人を変える」のは非常に難しいことなんです。

何かを変えたいとき、その一番の近道は「自分が変わる」こと。
だから、「自分(コーダー)がどう変わったら解決するのか?」を考えました。

じゃあ具体的にどうするのか?

コーダーがデザインすればいい』んです。

作業フローはこうです。

  • ベースのデザイン(これがPCかスマホかは決めの問題だが、とりあえず1枚)をデザイナーに作ってもらう。
  • ベースのデザインを元に、コーダーがmediaqueryで動きを作っていく。
  • それをデザイナー、ディレクターにプロトタイプとして出して、動きのレビューをしていく。

よくよく考えれば、
そもそも「レスポンシブWebデザイン」で、「PC用の見た目」「スマホ用の見た目」をデザインすること自体がおかしいのですから、ベースのデザインテイストだけデザイナーに作ってもらって、それ以外は全部コーダーで巻き取ってしまえば、全てうまくいくのです。


今までコーダーは、デザイナーの作ったデザインを、そのまま組めばよかった。
基本的にデザイナーはコーダーに相談せずデザインをしていたし、
コーダーがデザイナーに意見を言うこともほとんどなかった。

でも、上記のフローでは、 デザインのベースはデザイナーが作るけれど、それを「アレンジする力」がコーダーに求められます。
コーダーがデザインについて学び、他のサイトの事例について勉強する必要があります。

『そこまでコーダーがやるの?』と思う人もいるかもしれません。
もし『ディレクターやデザイナーに勉強させる』ことが出来るなら、やらなくてもいいと思っています。
でも、「他人が変えられない」なら、「自分が変わるしかない」んです。


それに気づかされて、正直「怖い」と感じた自分がいました。
「デザインをやりたい」と思いながらも、デザインすることから逃げて、
結局デザイナーに全て任せて、デザインを見て、「これはできません」と言っている自分がいたことに気づいたんです。

年齢が上がるにつれて「変化」することをためらうようになる、というのは感じていましたが、
自分自身が無意識のうちに、抵抗していたんだということに気づきました。

コーディングの知識だけじゃなくて、UIやIAの知識や、他のサイトのデザインを収集して、自分の仕事の幅を広げる。
今までマークアップしかしてこなかった自分には、かなり大きな変化です。
でも、むしろこれが出来るようになれば、コーダーとしての自分のワクが広がるのではないか。
そう考えたとき、自分がずっと感じていた、「コーダーってこの先あるんだろうか」という漠然とした不安が、すっと晴れた気がしたんです。

年齢を重ねるにつれて、「変化」するために必要なエネルギーは大きくなります。
でも、自分は恐れずに「変化」していきたいと、改めて思いました。




PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
無題
ゆーり様
はじめまして。

普段ひとりで作業してるためか、あまりデザインとコーディングを分離して考えたことがなく、とても新鮮な記事でした。

Web制作会社の中ってそんなふうになっているんですね。

勉強になりました。^^
ピアノ教室管理人 URL 2013/04/08(Mon)15:03:42 編集
Re:無題
はじめまして、
コメントありがとうございます。

私の所属してる会社はわりと規模が大きいので、分業になりがちです。
規模が小さい会社やフリーランスの方だと、一人でディレクションからコーディングまでこなすのが普通なのですよね。

なのでこの記事もあくまで「分業」を前提に書いてしまっているところはあります。
「分業」という制限がある中でよりよい方法を探したい、という思いで記事を書きました。

かなり冗長な文章だったと思いますが、読んでいただきありがとうございました!
【2013/04/13 23:00】
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
03« 2017/04 »05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
ブログ内検索
忍者ブログ [PR]