2017の25日目の記事です。Layoutの登場により、見た目とマークアップがある程度分離できるようになりました。これにより、要素を自由に配置しつつも、読みやすいコードを書くことが可能になりました。Layoutが登場するまでは、FloatやFlexbox、Tableを使ってレイアウトを実装して来ました。いった実装の中で頻発するのが、レイアウトするためだけに必要な要素がある、ということです。Floatではclearfixするための要素が外側に必要ですし、Flexboxでもjustify-contentのためにdiv要素で囲んだりします。記事一覧をFloat、Flexboxを使ってそれぞれマークアップしてみました。「画像を左側に、タイトルと更新日を横並びにして、その下に抜粋を表示して、、、」という感じでマークアップすると、こんな感じになってしまいました。どちらの場合でも、同じデザインを作ることは可能ですが、.clearfixや.leftが適用されている要素が多くなったり、ネストが深くなったりと、単純にコードが見づらくなるという問題があります。div要素は一切特別な意味を持たない要素であり、文書構造としては必要ないけれど、デザインを整えるために必要な要素が大量に出てきてしまいます。Layoutを使うと、必要のない要素を全て排除しても、上記のFloat/Flexboxと全く同じ見た目を実装できます。CSSのために必要な要素は無くなり、非常にシンプルで良い感じです。言えば<article>や<time>も利用することで<div>を全てなくすこともできそうですね。Layoutを取り入れると、div要素はかなり少なくなってくるんじゃないでしょうか。Flexboxボックスモデルでは要素が左上から配置されていくため、基本的にはデザイン上で左上に現れる要素からHTMLに書いていく必要がありました。Flexboxのorderプロパティを使えばある程度順番をコントロールすることができますが、限界はあります。上記のFloat/Flexboxで、タイトル=>更新日=>オーナー=>抜粋、という順番を、タイトル=>抜粋=>更新日=>オーナーに変更する場合、HTMLそのものを組み替える必要があります(そのままでもpositionなどでゴリ押しは可能ですが。Layoutではエリアを使用することで、HTMLの変更なしに表示順を変えることができます。表示順を変えたい要素同士は同じ階層にある必要がありますし、Gridをきちんと定義しないといけないですが、それができれば表示順は自由に変更することができます。これができると何が嬉しいのかというと、レスポンシブデザインでの柔軟性が上がります。デスクトップで見ている場合にはサイドバーに存在する要素を、モバイルではメインコンテンツの途中に挟むこともできます。具体的には、デスクトップではサイドバーに表示していたカテゴリー一覧を、モバイルでは3記事表示した後に表示する、といったことが可能になります。このデザインが正しいのかについてはここでは注目しておらず、あくまで表現の幅が広がる、という点に注目しています。CSSを意識しないレイアウトが可能になるここからは主観的な表現が多くなりますので、話半分ぐらいに聞いてください。Webデザインは、最終的にはHTML/CSSを使って実装されることになります。そのため、実現可能な範囲で最適なデザインを目指す必要があると思っています。Flexboxで実装できる範囲でレイアウトを組む必要があったため、それに合わせた情報設計を行ってきました。無意識的に実装の限界から逆算して、デザインを決めている場合もあると思います。(モバイルはとりあえずデスクトップのカラム落ちさせた感じで、という案件ありませんでしたか?私はありました。Layoutでは、基本的に要素の順番を気にせずにデザインすることが可能なので、レイアウトについては自由になったと言っても良いでしょう。IE11対応は引き続きあるものの、いずれは必要なくなります。2025年になってから、Gridで可能になったデザインを行っていくというスタンスでは、ユーザーに今現在な最適なデザインを届けられないのではないでしょうか。私はフロントエンドの実装を行う側なので、IE11対応なども行っています。Area未対応かつAutoprefixerでも対応できないので、Areaを伴う部分については全て手動でベンダープレフィックスを付与しています。正直に言ってかなり時間がかかりますし、辛い作業になりがちです。ユーザーにとって必要なことでありビジネス上でも重要なことであれば、最新技術を取り入れて表現の幅を広げていくことはかなり重要なことだと思っています。フロントエンドはなんとかするので、デザイナーさんは最適なデザインを生み出し続けてください!おまけなぜnoteで書いたのかについて。Increments買収というのをネット上で見かけ、Qiitaが消えるとは思えませんが一応別のプラットフォームを探そうということで、noteを使ってみました。Carbonでコードを画像化して載せていますが、割と大変なので具体的なコードについて言及したい時は他サービスの方が良いかもしれません。文章を書きたい時はnote結構良いんじゃないかと思います。箇条書きしづらいのだけは改善して欲しいです。ダウンロード#デザイン#Webデザインこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。サポートありがとうございます。サポートはコーヒー代や書籍代に使っています。Yuichiroフロントエンドエンジニア。数年後にはプロダクトマネージャーになる予定です。JavaScriptなどフロントエンドについて書いた記事です。こちらもおすすめnoteと"contenteditable"104ct8kerデザインガイドラインの初回構築時のポイントと運用方法101オオカワラポートフォリオサイトを公開しました。クリエイターへのお問合せnoteカイゼン目安箱クリエイターの。