街にあるモノをコーディングしてみた〜 新宿からモノサス編 〜

モノサスでは自分たちのWebサイトにスタッフが交代でコラムを書いています。
今回はその中から、前回紹介したメンバーの丸山が書いた記事をご紹介します。

コーディングファクトリー部の丸山です。

突然ですが、みなさんには職業病と呼ばれるような「職業柄ついついコレをやってしまう」というものはありますか？

私たちコーディングファクトリーで働くコーダーは、日々Webサイトのコーディングを行い、コーディングについてアイデア出しをしたり悩んだりして日々奮闘しています。

そのためか、街中で看板や広告のポスターなどを見ると、ついつい「ここは divで囲んで、ここは見出しだろうし h2...いや h3か...」と頭の中でコーディングが始まってしまうコーダーも少なからずいるとかいないとか　笑。

僕自身もコーダーとして働き出した頃は、

「電車の中吊り広告を見ても脳内コーディングしちゃう」

という言葉を聞いてもピンと来なかったのですが、

会社からの帰り道、ふと新宿駅構内の案内図をボーッと眺めていたところ、

「これは見出しモジュール、これはカード型モジュールをリストにして...、あっ、これ（HTMLとして）組めるな！」

と考えるようになり、なんとなくその言葉の意味がわかるようになってきたことに面白さを感じました。そして、実際にコーディングもしてみたらどうなるだろうと思いました。

昨年、丸山がFacebookでつぶやいた内容 、新宿駅構内にてコーディングできそうな案内図を撮影

そこで今回は、僕が日常通勤に利用している新宿駅から会社までを散策して、見つけた風景やモノをコーディングしていきたいと思います。

1.新宿駅構内：販売店案内図

新宿駅の甲州街道改札（旧 サザンテラス口）付近の本屋さん横にある駅構内の食べ物ショップ情報が記載された案内図です。非常に美味しそうなものばかりで自然と涎が溢れてきますね。

見た目は、最近ではスタンダードになってきたフラットデザインっぽいシンプルな構成で脳内コーディングもしやすそうです。

モジュール構成としては、上から順に
「見出しモジュール」
「見出しモジュール」
「リストモジュール ＋ カード型モジュール」
といった構成でしょうか。

それではさっそくコーディングをしてみます。

コーディング内容は上記のソースコードのようになりました。（詳細なソースコードはCodepenの表示をご覧ください。）

案内図ですので、伝える情報の重要度にも順序があるはずです。

そのため、通常のWebサイトと同じように見出しレベルに気をつけたり、営業時間やF1やS1などの識別番号は見出し内容とはみなさずにh1〜h6要素で組まず（p要素等で組み）、CSSを工夫して見た目を合わせるといった処理を行いました。

（画像オレンジ色部分：h1〜h6要素にてコーディング、画像水色部分：p要素にてコーディング）

また、フロア情報によってパーツの色味が異なるため、共通クラス名をつくり共通のCSSスタイルを設定して、色味の違いはモディファイアがついたクラス名を2つ目のクラスとして付与することで調整可能にしました。

見出し
<header class="ttl-shopinfo ttl-shopinfo--foodhall">
<h2 class="ttl-shopinfo__title">フードホール</h2>

・・・・

カード型
<div class="card-shopinfo card-shopinfo--foodhall">

見出し
<header class="ttl-shopinfo ttl-shopinfo--ekisoto">
<h2 class="ttl-shopinfo__title">エキソト</h2>

・・・・

カード型
<div class="card-shopinfo card-shopinfo--ekisoto">

また、フードホールなどの見出し横のアイコン情報は、「その要素がないパターンも出てくるかも」という想定をし、2つ目のクラスを削除すれば見出しが左詰めできるように考えました。

「デザイン上は存在するパターンしかないけど、実はデザイン上存在しないパターンも必要だった！」ということはWebサイト制作ではあると思いますので、パターンの想定をする力というのは大事かもしれません。

こだわりポイント

◎汎用性が高まるように、ワイン色と黒色の見出し、カード型モジュールのベースは同じにし、色の異なりによる違いはModifier（モディファイア：色などの見た目や状態を担当する）で分類するようにした。

◎「その要素がない場合」も考慮したつくりにし、どんなパターンでも対応できるようにした。

2.甲州街道：観光案内所のインフォメーション

さて、新宿駅を出て、甲州街道沿いに歩いて行きます。

次に見つけたのが、上の画像のような「観光案内所の場所を知らせるインフォメーション看板」です。

雑誌や広告（たまにWebぺージもそんなときがありますが....）はどれだけ情報を詰められるかでデザインしている点に対して、様々な方が見る案内図などは誰でも大事な情報だけが読み取れるようにシンプルなデザインになっていることが多いように感じます。

シンプルなデザインのほうがコーダーとしても情報に対する設計がし易いですので、ありがたいです。

モジュール構成としては、はてなマークを意味のあるものと捉えるか捉えないかによって変わってきますので、悩ましいところではありますが、
今回はアイコン自体には文書構造的な意味は無いと捉え、HTMLとしては情報は出さずCSSで表示させたいと思います。

そのため、
「見出しモジュール」
「テキストモジュール」
「画像モジュール」
「画像＋テキスト情報の組み合わせモジュール」
と考えてコーディングしていきます。

コーディング内容は上記のソースコードのようになりました。（詳細なソースコードはCodepenの表示をご覧ください。）

ロゴ画像や階段を下るアイコンを用意するのは難しく、完全再現とはいきませんでしたが、
写真からコーディングのイメージを膨らませてなんとか形には出来たかと思います。

「今回一番情報として重要な部分はどこだろう？」と考えたときに、おそらく『観光案内図』の部分だと思いますので、ここを見出しにしました。

しかし、日本語・英語・中国語のそれぞれをH1にしてしまうと等価な見出しが複数出来てしまいますので、下記のようにひとつのH1の中に日（ja）、英（en）、中（ch）をspanでくくって出し分けるようにしました。

こだわりポイント

◎見出しの部分の日・英・中をひとまとめにできるように工夫した。

惜しいポイント

◎ロゴなどデザイン制作をする必要がある部分を再現できなかった。

3.甲州街道地下ルート　新宿駅周辺案内図

先ほどの看板に従い、地下に降りて甲州街道の地下を通って、会社まで進んで行きます。
雨の日や夏の暑い日、冬の寒い日などは快適に新宿駅から会社近くまで通勤できるルートなので、けっこう重宝しています。

さて、地下ルートの途中で、コーディング出来そうなものを見つけてしまいました。

この写真を見て、
「２カラム」
「メインコンテンツ と サイドナビ だな」
「地図はGoogle map...」
と思った方は合格です。ようこそコーダーの世界へ...。

今回は要素数も多いので、これをぺージとして考えていきたいと思います。
左側の広めの要素をメインコンテンツ、右側の要素をサイドコンテンツとして分割します。（画像の水色・緑色枠線参照）

コーディング内容は上記のソースコードのようになりました。（詳細なソースコードはCodepenの表示をご覧ください。）

今回の場合は、再現が難しいロゴ画像などもなかったので、できる限り再現できるように頑張りました。

この中で、一番頭を悩ませたのは、「新宿駅　周辺案内図」の右横にある駅のリストの表現でした。
写真だとわかりにくいのですが、実は、ボーダーが２本線になっています。
こちらは、::before擬似要素を使いborder-top、border-bottomで再現しました。
もしかしたら、borderのdoubleを使うなど他の表現もまだまだあるかもしれません。

また、JR線の路線表現もなかなかやっかいで、普通にborderのdashedやdottedを使ってしまうと黒と白の間隔が制御出来ませんでした。
そのため、linear-gradientを使った破線表現にして、それをリピートさせました。

こだわりポイント

◎見出し横の各駅のリストの路線のボーダーの表現を::before擬似要素を使いつつ再現した。

まとめ

今回はコーディングできそうなモノを探して新宿駅から会社までを散策しました。
その中で、普段なにげなく無意識で通過しているだけの道にも、あらためて様々なデザインの広告、看板、モノが存在しているなぁと意識するようになりました。

また、駅などの公共の場にある案内板などは、情報の見せ方がシンプルな場合が多く、あらためて情報設計の重要さを感じることができ、自身のWebサイトのコーディングやコード設計にフィードバック出来そうだと感じ、勉強になりました。

コーディング面では、
「構造はめちゃくちゃだが、pやspanを使いまくって再現する（ドラえもんやピカチューをHTMLとCSSのみで再現している方がネットでバズっていた記憶があります）」方向性にするか、
「Webサイトのパーツと同じように文書構造や設計まで考慮して再現する」方向性にするかで迷いましたが、今回は後者の方でコーディングしました。

ネタを決めてからコーディングしづらい部分も出てきて、頭を悩ませることもありましたが、それも含めてすごく楽しかったです。

また、デザイナーの方だと雑誌や街にあるモノや広告からインスピレーションを受けて自分のセンスにフィードバックすることは多いと思いますが、コーダーも街にあるオブジェクトに対して、「自分ならどう組むか？」「これにはどういうCSSプロパティを当てれば、うまくいきそうか」とイメージすることは、けっこうトレーニングになると思いますので、おすすめです。

この記事を読んだあなたも１度コーディング出来そうな街の風景を探して、想像を膨らませてみてはいかがでしょうか。

（2017/12/20 ものさすサイトに掲載）