入社４か月の新入社員奮闘記【失敗から学んだこと_WEB編】

台北、三宅デザインの新入り営業アシスタント、NODOKAです。今のところわたしが関わっているお仕事はWEB関係が多めです。ところが、わたしは入社するまでWEBといえばスマートフォンでWEBサイトを閲覧するくらいしか触れる機会がなく（PCサイトを見ることすら最近は少なくなっていました）、知らないことだらけの状態でした…!今回はそんな私が入社してから知ったWEB関連の基本知識を２つご紹介したいと思います。

WEBの見え方はデバイス次第

わたしが入社して間もなく、最初にお手伝いしたのは進行中のWEB案件の仮アップ校正でした。
校正ならば以前紙ベースの制作物でやった経験があったので問題ないだろうと思っていたのですが、やはり紙とWEBでは勝手が違って戸惑いました。

すでにクライアントから校了をもらっていたデザインをプリントアウトしたものを見ながらモニター上で仮アップサイトをチェックしていると、モニター上とプリントアウトとでレイアウトが違うことに気づきました。そのことを先輩に報告するとブラウザのウィンドウを画面いっぱいにしてもう一回チェックしてみるよう言われ、その通りに試してみるとモニター上のレイアウトはしっかり、プリントアウトと同じようになりました！

▲わたしが最初に見ていたウィンドウサイズでの見え方(左)と画面いっぱいにしたときの見え方(右)


ある程度WEBの基本をご存じの方にとっては、当たり前だろう。と思われるかもしれませんが、恥ずかしながら当時のわたしはこんなことすら知らず、びっくりしてしまいました。その時先輩に教えていただいて初めて、RWD（レスポンシブウェブデザイン）というものを知ったのです。

RWDとは、現在流通している様々なデバイス（iPhone、android携帯、タブレット端末、ラップトップパソコン、デスクトップパソコンなどなど）の様々な画面サイズに柔軟に対応し、見やすく最適なWEBサイト表示を可能にしたWEBデザインのことです。RWD方式で作成したWEBサイトであれば、閲覧者のターゲットや閲覧のシチュエーションを制限することなく、さらにスマホ版とPC版を別で制作するよりもコストを抑えられる、といった利点があるので近年では非常に多くのWEBサイトで採用しているそうです。

一方で、画面サイズに対して柔軟にレイアウトが変化するということは、こだわってトリミングした画像の見え方が変わってしまったり、レイアウトした文字が思わぬところで改行されてしまったり、といったことが起こりうるのでデザインする側はこれを理解した上で、画面サイズが変わっても違和感のない画像や文字配置を用意する必要があるのですね。

データ名は勝手に変えてはいけません！

前回の【画像データ編】でも少し触れたように、わたしはデータに関する知識が非常に浅かったがために思わぬ失敗をしてしましました。そのデータというのがWEBに関するデータだったのでこちらで内容を紹介させていただきます。（わたしとしては封印したい記憶ですが…）

ある案件で、WEBサイトを仮アップし、無事クライアントの校了ももらったところでデザイナーからHTMLデータを受け取り、クライアントに納品するよう指示を受けました。
そこで、わたしは受け取ったデータをそのまま送れば良いものを、わざわざ「このデータ名英語だしわかりにくいから日本語に変えておいてあげよう！」という要らぬお節介をやき、データ名を丁寧に日本語名に変えてから納品しました。その結果、デザイナーがせっかく用意してくれたHTMLデータは使えなくなってしまいました…。なぜわたしのこのお節介がデータを破壊してしまったのかと言いますと、ご存じの方もいらっしゃるかもしれませんが、HTMLデータは単一で成り立っているわけではないからです。
ちなみにHTMLデータというのは、WEBサイトを構築している記号の羅列の集まりです。(私と同世代の日本人であれば、中高生の頃に流行った「ホムペ(ガラケー時代に流行した、個人がプロフィール感覚で作っていたWEBサイト)」の作成で、その記号の羅列自体は見たことがある方が多いのではないでしょうか)

そして、今回納品したHTMLデータは様々なデータとリンクして存在しているため、データ名を変えることはそのデータ同士の相関性を断絶し、WEB上での正常な表示を阻害してしまう行為だったのです。
ですのでみなさんは、間違ってもこういった他のデータと関連して成り立っているデータの名称を勝手に変えるようなことはしないでくださいね。

以上が入社してWEBのお仕事に関わってからわたしが学んだ基礎知識です。
かなり基本的な内容だったかと思いますが、少しでもわたしと同じく最近WEBに関する仕事に携わり始めた方のお役に立てると嬉しいです。