どもです。

昨今のWebデザインのトレンドのひとつが、「フラットデザイン」というものです。
フラットデザインとは、「Material Honesty（マテリアルオネスティ）」という、工業製品は素材に忠実であるべきだという考え方から生まれたデザインで、

簡潔に説明するなら、

って感じらしいです。
参考サイト：【@IT】5分で分かるフラットデザイン

で、このフラットデザインが流行ったことで「Webサイトの形状」に変化が起こりました。
もしかしたら、この変化こそがフラットデザインがトレンドである理由なのでは？と思った事件があったので、記事ネタにしてみました。

デザイナーに「川の字型サイト」を提出された

僕の働いている会社にはちゃんとデザイナーがいるのですが、お客様が外部のデザイナーの方と直接契約することもあります。

で、ある日そんな顔も知らないデザイナーに提出されたデザインが…
なんというか、2000年台前半を思い出すデザインでして…

端的に言えばこういう。

うぉぅ…(´・ω・｀)

個人的に、こういうサイトデザインを「川の字型」と読んでいます。
非常に古めかしいですが、まぁやれと言われたら従わなければならないのが雇われの悲嘆。

気を取り直してコーディングしてみたところ、こうなりました。

＼(^o^)／

僕が仕事で使ってるPCのブラウザwidthは2000px弱。
サイトコンテンツの幅が1000px程度。
つまり、約1000pxが背景画像（ド派手）。

これはあかん。

想定すべき画面サイズってこんなにあったのか…

まず、昨今のデスクトップPCはSサイズのテレビぐらいには画面幅があります。
ので、最長2000pxくらいは想定すべき。

でも持ち運び性が重要なノートPCのサイズは従来と然程違わないでしょう。
伝統の数字、1024pxや1280px。これも想定すべき。

スマホサイトを作らない（レスポンシブサイトでない）場合、それらのデフォルトの倍率、
980pxも想定しなければなりません。

レスポンシブの場合は、レスポンシブの仕方によりますがiPadを縦長にしたときの横幅、
768pxも無視できません。

スマホサイズの現実的な最小widthは320px。
これを抑え損なうと痛い目を見ます。

…画面サイズってこんなに想定すべきだったのか。

背景がウィンドウいっぱいに広がるフラットデザイン

そこで、昨今のトレンドであるフラットデザインに目を向けてみます。
フラットデザインは、セクションごとに大きく色分けをするのが特徴ですが、そうするとコンテンツの内外で背景色を変えるのは厳しいです。

よって、フラットデザインでは実際のコンテンツの幅関係なく、セクションごとの背景をウィンドウいっぱいに引くのが普通。

つまり、こういうことか。

あくまでデザイン上の副次的産物だと思われるのですが、こうすることで
2000px、
1280px、
1024px、
980px、
どのwidthで見ても背景が目に痛いことはなくなるわけです。

なんと合理的な。

現在、日本において生み出される新しい全てのWebデザインがフラットデザインではありません。
グラデーションも影も、使う方は使っていますし、何事においてもフラットが良いというわけでもないでしょう（企業イメージ優先）。

しかし、背景に関してはこういった風に引くデザインが増えたように思います。
こういった「フラットデザイン風」が流行している背景はこれなのでは？と思いました。

デザイナーの方には「何を今更」な記事の気がする。

コーディングだけしていると見えてこない流行の裏側を垣間見た気がしました。
勉強になった。