今、私は、あるWebのランディングページの
コーディング作業を行っています。
今回もレスポンシブですが、PCファストという要望でした。
レスポンシブコーディングは、
スマホで見るお客様優先のスマホファストサイト、
PCで見るお客様優先のPCファストサイト、
という大きく2種類にわかれます。
私はいま、イラストレータで作成されたあるサイトの原稿を
基にコーディングしています。
依頼者の要望は「メリハリがついた平面グラフィック」と
同じようなPCファストのWebです。
そのイラレで作られたWebサイトの原稿は、
通常のWebコーディングでは考えられない
「強調する部分で極大極太の文字」が多数含まれていました。
それは平面デザインでは普通の有様ですが、
「その通りにWebコーディング」しようとすると、
最大級サイズの太字、かつ「句読点は詰まっている」、
さらに平文部分も文字間が詰まっている、などなど、
まるで平面のチラシなみのWEBページを要求されているます。
特に、依頼者が「平面と同じ見え方」を希望していたのは、
見出し以外に、割引率、価格という数字の部分でした。
平面と同じインパクトを要求されています。
PC対応のみの画面で、かつSEO対策も気にしないなら、
そのコーディングはたやすいです。
いたるところに「画像」を使えばいいのですから。。。。
しかし今回は、平面原稿と同じような
PCWeb画面でのクオリティを求められ、かつ
レスポンシブ対応・・・
経理・総務・教育・システム運用など、
他部門の仕事を抱えて、Webコーディングは専門でない私。
数年置きに、たまに担当するWebコーディング、
したがって、レスポンシブ対応のコーディングは
思い出すだけで一大事。
しかし慣れたらある程度スイスイ行っている感覚です。
そういう中で、floatを駆使してPC画面を制作しました。
(このfloatで対応するのは古いかも知れません)
イラストレータの画像でいうと、
A3プリントアウトで12画面。
現在のところ、ほぼ、それは完遂。
依頼者のチェックも一昨日クリアしました。
次は、レスポンシブにおいてのスマホ画面対応です。
大概はメディアクリエイトで
float部分はnone、width部分は100%にすれば、
あとは文字部分のレイアウト調整作業ですみます。
ところが、これが、また要注意。
下手すれば、PC対応の画面に影響しかねません。
さらに、このスマホ対応の「レスポンシブ」対応。
グーグルの開発ツールを使い、
・スマホ画面のレイアウト生成
・それによるPC画面レイアウトの影響有無
の手順でコーディング作業を進めています。
ただし、このスマホ画面。
ここ20年近く、様々な機種が発売されています。
依頼者から「どの機種に対応するように」はありません。
したがって、一体どれを基準にレイアウト調整したらいいものやら・・・
下手すると意外なところで、改行や文字くっつきがいたるところで発生。
コーディング作業時間に制限あるなかで、
私はchromeの開発ツールを使ってレスポンシブのコーディングをしています。
しかし、下記の画面では、どれが新しいスマホの画面なの?と
これだけでは、????です。
★Chrome開発ツール

ところが、一昨日たまたま業務中に見た、
FireFoxの開発ツールの一画面。
★FireFox画面

機種名だけでなく、OSも表示してありました。
たとえば、Pixel2XLは、OSがAndroido8.0とわかります。
直近の機種に多いのではと読みました。
これなら、iPhoneにしてもAndroidにしても
機種とOSの関係性がわかります。
Pixel2XLに対応したコーディング画面は
職場の同僚のアンドロイドスマホと
同じ見え方をしていました。
したがって、レスポンシブのコ―ディングは
Pixel2XLを基準としてコーディングすることにしました。
コーディング時は、使い慣れたchrome開発ツールで
PC版とスマホ版を画面確認しながら作業を進めています。
私が今望んでいることは、W3Cが
スマホ画面の大きさにかかわらず、
適切なレイアウトにする基準を作ってくれることです。
私の情報不足で、すでにそういうツールや基準はあるのかもしれません。
しかし、しかし、自分のコーディングで、
Web画面がレスポンシブで表示される、
この事実は、私の作業の原動力です。
実は、Webコーディングが、今、私が最も好む作業なのです。
これを仕事にできるということはシアワセを感じます。
最近のコメント