CSSグリッドテンプレート領域を使用したWeb向けアートディレクション

（この記事はCoffeeCup Softwareによって親切に後援されています。）さて、私は要点にまっすぐに行くつもりです。 CSSグリッドは重要であり、非常に重要であり、「すべてのブラウザーがサポートするときに使用する」プロパティの1つになるにはあまりにも重要です。 これは、CSSグリッドを使用することで、アクセシビリティ、応答性、または使いやすさを損なうことなく、印刷物と同じようにWeb上のレイアウトをクリエイティブにできるようになったためです。

Webデザインや開発に真剣に取り組んでいる場合は、CSSグリッドの学習と使用にも真剣に取り組む必要があります。 この記事では、グリッドテンプレート領域という1つの側面の使用方法、私のような大きくて馬鹿げたマグカップでも理解できる要素の配置方法、および十分な注目を集めていない要素について説明します。

さて、あなたはいくつかのアクションといくつかのコードを見たいと思っています、私はそれを知っていますが、1つのゴダム分を保持します。 「方法」を学ぶ前に、他のメディアで何十年も見られてきたが、ほとんどWebには存在しないようなレイアウトを作成することが重要である「理由」をお教えしたいと思います。

欲求不満を感じる

「今日、この2つのレイアウトのどちらをデザインしていますか？」を見たことがあると思います。 ツイート、ウェブ上のデザインの現状を嘆く。 私でさえ、ウェブデザインがどのようにその「魂」を失ったかについて話しました。 雑誌からポスターやページを再作成するためにCSSグリッドを使用している人もいるでしょう。 これらの技術的なデモンストレーションはクールであり、CSSグリッドを使用した複雑なレイアウトの実装が他の方法と比較していかに簡単であるかを示していますが、これらを行うことが重要である理由の根底にはありません。

それで、理由は何ですか？ なぜレイアウトがデザインの重要な部分なのですか？ ええと、それはすべて一つのことに要約されます、そしてそれはコミュニケーションです。

永遠のように思えますが、Webデザイナーは、コンテンツとレイアウトの関係をほとんど考慮せずに、テンプレートを作成し、それらを埋めてきました。 コンテンツ管理システム、デザインをレスポンシブにする必要性、これまで使用してきたCSSプロパティの制限を考慮すると、これは避けられないことだと思います。 確かに、柔軟で使いやすいデザインを作成しましたが、メッセージを配信する際にレイアウトが果たす役割であるパズルの重要な部分が欠けています。

ブロックを数回回ったことがあれば、デザインに適切なトーンを設定する際に色が果たす役割を理解できます。 タイプもその役割を果たしていると言う必要はありません。 間違った書体を選ぶと、コミュニケーションが効果的にならず、意図したものとは違った気持ちになるリスクがあります。

レイアウト—「メジャー」のようなタイポグラフィの側面と密接に関連している—も同様に重要な役割を果たします。 対称性と非対称性、調和と緊張。 これらの原則は、人々をあなたのコンテンツに引き付け、彼らを導き、そして彼らがそれをより簡単に理解するのを助けます。 そのため、適切な書体を選択するのと同じくらい、適切なレイアウトを作成することが重要です。 印刷デザイナーはこれを何年も前から知っています。

アートディレクションでストーリーを語る

アートディレクションは、印刷物を含む他のメディアと同様にWebでも重要であり、これから取り上げる内容は、ストーリーを伝えることと同様に、デジタル製品の宣伝にも当てはまります。

「アートディレクション」という言葉を聞いてどう思いますか？ レスポンシブ画像について考えますか？HTMLの<picture>要素または「sizes」を使用して、いくつかの画面サイズに代替の切り抜き、サイズ、または向きを表示しますか？ それらは便利なレスポンシブデザインとアートディレクションツールになりましたが、ウェブデザインにはツール以上のものがあります。

ジェイソン・サンタ・マリアやトレント・ウォルトンのように、独自の独特のイメージ、レイアウト、タイポグラフィをエントリに与えることで、アートが執筆を指揮することもあるデザイナーのことを考えてみてください。 これにより、アートディレクションの理解に近づくことができますが、画像、レイアウト、タイポグラフィはアートディレクションの結果であり、その意味ではありません。

それで、アートディレクションが正確にそれらのものではない場合、それは正確には何ですか？ 一言で言えば、それはコンテンツの一部から本質的で正確な意味または目的を抽出する技術です—その雑誌の記事または最もホットなスタートアップから最もクールなアプリを使用する理由のリスト—そしてその意味または目的を伝えるデザインを使用することでより良い。 ウェブ上でのアートディレクションについてはあまり耳にしませんが、おそらく最も記憶に残るのは雑誌やある程度の新聞など、別の媒体で確立されています。

私は、1934年から1958年までのハーパーズバザー誌でのアレクセイブロドヴィッチの作品を直接覚えているほど年をとっていません。

ネヴィル・ブロディのフェイス誌のアートディレクションを覚えていますが、それでも毎日インスピレーションを得ています。

アートディレクションがウェブに関連して議論されることはめったにないので、アートディレクションは関連性がないと考えることを許される可能性があります。 おそらく、アートディレクションは、ウェブよりも印刷の世界に適した活動だと思いますか？ アートディレクションを何らかの形でエリート主義者と考える人もいるかもしれません。

私はそれのどれも真実ではないと思います。 ストーリーは、どこに伝えられても、どのような媒体を介しても、ストーリーです。 それらは、ProPublicaで公開されているもののように示唆に富むものである場合もあれば、あなたの会社のストーリーであり、人々があなたとビジネスを行う必要がある理由である場合もあります。 あなたの慈善団体がどのように正当な目的を支援し、なぜ人々がそれに寄付すべきかという話があります。 次に、スタートアップの新しいアプリの話と、なぜ誰かがそれをダウンロードする必要があるのか​​について説明します。 これらすべてのストーリーで、あなたが何をしているのか、何を売っているのかについての事実を伝えるだけでなく、より深いメッセージがあります。

アートディレクションとは、それらのメッセージを理解し、言葉やビジュアルの構成と提示を通じてメッセージを伝えるための最善の方法を決定することです。 アートディレクションはウェブに関連していますか？ もちろん。 アートディレクターはデザインを使用して、コンテンツの重要性を人々がよりよく理解できるようにします。これは、印刷物と同様にWebでも重要です。 実際、アートディレクションの基本原則は、印刷物とデジタルの間で変わっていません。

さらに、アートディレクションは、複数のチャネルにわたってまとまりのある体験を生み出すために不可欠であり、デバイスと画面サイズの間のギャップでストーリーの意味が失われないようにするために不可欠であると言います。

元ガーディアンとニューステイツマンの出身であり、他の多くの出版物のデザイナーであるデビッドヒルマンは次のように述べています。

「最良の形では、（アートディレクション）には、アートディレクターが雑誌の内容を完全かつ深く理解し、デザインを通じて、雑誌の内容に影響を与えることが含まれます。」

偶然にも、ガーディアンの元クリエイティブディレクターである私の友人、マークポーターも次のように述べています。

「デザインは、空間における元素の分布を担当しています。」

CSSグリッドにより、これまで以上に要素の配布を担当できるようになります。

ハードボイルドストーリーを演出するアート

今がそれに取り掛かる時だと思うので、一連のハードボイルドの例でこれを機能させる方法を説明します。 レイアウトとそれがストーリーテリングにどのように役立つかについて懐中電灯を当ててから、CSSグリッドを使用してこれらのデザインの1つを開発する方法の概要を説明します。

まず、裏話。 私の2010年版のHardboiledWeb Design （1）の表紙には、赤いドレスを着た謎の女性（常に赤いドレスを着た女性がいます）が私たちのプライベートディックに銃を向けています。 （シーシュ、私はその気持ちを知っています。）2015年の5周年記念版（2）までに、物語は進み、影が私たちの探偵事務所のドアを横切って不気味に動きます。 ドアが開き、2人の悪役が爆発し（3）、最初の戦いが続きます（4）。 私たちの謎の女性は確かにパンチを投げる方法を知っていて、あなたが「私にキスして、致命的」と言う前に、1人の悪役が椅子に縛られて豆をこぼす準備ができています（5）。

第3章

その話は、2人の悪役がバストしてドアを開けた爆発的な瞬間から始めます。 さて、スコット・マクラウドの本「マンガを理解する」を読んだら、パネルのサイズが人々がエリアを見るのに費やす時間に影響することを知っているので、その影響を最大化するために私たちの悪者のイメージをできるだけ大きくしたいと思います（1）。 フードが知らないのは、私たちの女性が彼らを待っているということです。 私はレイアウトを使用して、彼らのアイラインを接続することによって緊張を加えます。（2）同時に、コンテンツが始まる場所に読者の目を引きます。

第四章

最初の悪役がシーンに突入したとき、私はページの左端を余白なしで使用して、開いたドアを表します（1）。 ほとんどのアクションは右側で行われるため、ページの高さと幅の大部分を使用して大きな空間ゾーンを作成します（2）。

さて、拳がすべての方向に飛ぶとき、私たちのレイアウトは同じことをする必要があるので、私のコンテンツは上から来ます—空白が太字の段落（3）に目を引きます—そして左から巨大な見出し（4） 。 右上の小さな画像について言及していないのはなぜか疑問に思われるかもしれませんが、すぐに説明します。

第5章

戦いは終わり、私たちの探偵は制御を取り戻したので、この最後のページでは、返された順序を反映するために、より構造化されたレイアウトを使用します。 正当化されたテキスト（1）の無地の列とその周囲に十分な空白があると、落ち着きが増します。 同時に、右揃えのキャプション（2）は、銃を突きつけられた尋問のように、エッジの効いた不快な感じがします。

私のダンドを汚す

告白の時間です。 CSSグリッドを使用したレイアウトの開発について知っておく必要のあることをすべて教えるつもりはありません。これまでにそれを行ったことのある賢い人がたくさんいるからです。

• レイチェル・アンドリューによる例によるグリッド
• WesBosでCSSグリッドを学ぶ
• CSSトリックに関するChrisHouseによるグリッドの完全ガイド

代わりに、1つのグリッドのインスピレーション、CSSグリッドの列と行を使用して（大画面）レイアウトに変換し、 grid-templateareasプロパティを使用して作成された空間ゾーンに要素を配置する方法を示します。 最後に、画面サイズを小さくするためにデザインを分解して変更します。

パーフェクトビート

私が使用するレイアウトのインスピレーションは、 The FaceMagazineのNevilleBrodyによる1983年のデザインから生まれました。 ブロディが横軸と縦軸の両方を巧みに作成し、メイン画像が占める大きなスペースに惹かれました。

次のCSSグリッドプロパティをページの余白のない<body>要素に適用して同じことを行いました。ここで、1分数単位幅の列が2vwのギャップで5回繰り返されます。

 body { margin: 0; padding : 0; display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); } 

CSSグリッドでは、名前を付けてグリッドモジュールを定義し、 grid-template-areasプロパティを使用して、要素を単一のモジュールまたは複数の隣接するモジュール（空間ゾーンと呼ばれる）に配置します。 複雑に聞こえますか？ いいえ、そうではありません。 これはCSSグリッドを使用する最も簡単で明白な方法の1つなので、作業を始めましょう。

まず最初に。 配置する要素は5つあり、それらは私の「Kiss Me、Deadly」タイトル、最大の「バナー」画像、メインコンテンツ、段落と2つの画像、fig-1とfig-2です。 私のHTMLは次のようになります。

 <body> <picture role="banner">…</picture> <h1 class="title">…</h1> <main>…</main> <aside>…</aside> <img class="fig-1"> <img class="fig-2"> </body>

私は、物語を作成するときと同じように、最も意味のある順序でそのマークアップを書きました。 それは小さな画面で、そしてスタイルがなくても夢のように読めます。 各要素にグリッド領域の値を指定します。この値を使用して、すぐにグリッドに配置します。

 [role="banner"] { grid-area: banner; } .title { grid-area: title; } main { grid-area: main; } aside { grid-area: aside; } .fig-1 { grid-area: fig-1; } .fig-2 { grid-area: fig-2; }

グリッド領域の値は、必ずしも要素タイプを反映している必要はありません。 実際、a、b、c、dなどの1文字でも、任意の値を使用できます。

グリッドに戻って、前に作成した列に3つの行を追加します。 各行の高さは、その中のコンテンツの高さによって自動的に定義されます。

 body { grid-template-rows: repeat(3, auto); }

ここで魔法が起こります。 grid-template-areasプロパティを使用してCSSで文字通りグリッドを描画します。ここで、各ピリオド（。）は1つの空のモジュールを表します。

 body { grid-template-areas: ". . . . ." ". . . . ." ". . . . ."; }

次に、前に作成したグリッド領域の値を使用して、そのグリッドに要素を配置します。 各要素の値をグリッド上のモジュールに配置し、その値を複数の隣接するモジュール（列または行のいずれか）で繰り返すと、その要素がそれら全体に拡張されて空間ゾーンが作成されます。 ピリオド（。）を残すと、空のスペースが作成されます。

 body { grid-template-areas: ". aside . fig-2 fig-2" "title title banner banner banner" "fig-2 main banner banner banner"; }

レイアウトCSSを完成させる前に、もう1つ小さな詳細を説明します。 脇の要素のコンテンツを下部に配置し、タイトルの近くに配置し、その上に十分な空白を残して誰かの目を下に向けたいので、Flexboxの学習でおなじみのalign-selfプロパティを使用しますが、 'end'の新しい値。

 aside { align-self: end; } 

残っているのは、印象的な逆配色や、タイトルの「Deadly」という言葉を女性のドレスの色に結び付ける明るい赤のアクセントなど、デザインを生き生きとさせるために他のいくつかのスタイルを追加することです。

 <h1 class="title">Kiss Me, <em>Deadly</em></h1> .title em { font-style: normal; color : #fe3d6b; }

煙に上がる

さて、あなたがその小さな戦いのイメージについて疑問に思っていることを私は知っています、そして私は何かを認める必要があります。 ナタリー・スミスは、私のハードボイルドショットのカバーのために、完成した拳の飛行イラストを1つだけ作成しましたが、彼女のスケッチは無駄にするには良すぎました。 CSSグリッドを使用して、1つの鉛筆スケッチの反転バージョンを銃の上に配置し、CSS変換を使用して回転させて、煙の雲を形成しました。

それを分解する

この記事では、大画面のレイアウトを作成する方法を説明しましたが、実際には、小さな画面から始めて、ブレークポイントを使用してスタイルを追加または変更します。 CSSグリッドを使用すると、さまざまな画面サイズにレイアウトを適応させるのは、要素をさまざまなグリッドテンプレート領域に配置するのと同じくらい簡単です。 これを行うには2つの方法があります。1つはグリッド自体を変更することです。

 body { grid-template-columns: 50px repeat(2, 1fr); } @media screen and (min-width : 48em) { body { grid-template-columns: repeat(5, 1fr); } }

2つ目は、同じグリッド上の異なるグリッドテンプレート領域に要素を配置することです。

 body { grid-template-areas: "fig-1 aside aside aside aside" "fig-1 title title title title" "banner banner banner banner banner" ".... main main main main"; } @media screen and (min-width : 64em) { body { grid-template-areas: ".... aside .... fig-2 fig-2" "title title banner banner banner" "fig-1 main banner banner banner"; } } 

CSSグリッドビルダーの使用

グリッドテンプレート領域を使用すると、アート指向のレイアウトを簡単に開発できるので、私のような扁平足でも実行できますが、ツールが汚い作業を行うのが好きなタイプの場合は、CoffeeCupSoftwareのCSSグリッドビルダーが最適です。君。 以前にWYSIWYGエディターを使用したことがあるので、それらが吐き出したコードがいかにひどかったかを覚えているかもしれません。 そこで止めさせてください。 CSS Grid Builderは、クリーンなCSSとアクセス可能なマークアップを出力します。 自分で書いたほどきれいではないかもしれませんが、かなり近くにあり、それを開発した小さなチームはそれをさらに良くすることを計画しています。 私の手書きのHTMLは次のようになります。

 <picture role="banner"> <source media="(min-width: 64em)"> <img src="banner-small.png" alt="Kiss Me, Deadly"> </picture>

CSSグリッドビルダーの<picture>要素は、追加の分割でラップされており、他のいくつかの要素が適切にスローされています。

 <div class="responsive-picture banner" role="banner"> <picture> <!--[if IE 9]><video><![endif]--> <source media="(min-width: 64em)"> <!--[if IE 9]></video><![endif]--> <img alt="Kiss Me, Deadly" src="banner-small.png"> </picture> </div>

私が言ったように、十分に近づけてください。信じられない場合は、ハードボイルドの例からエクスポートされたファイルのセットをダウンロードしてください。 多分それはあなたを納得させるでしょう。

ブラウザの開発者ツールはグリッドの検査に優れていますが、CSSグリッドビルダーはグリッドの構築に役立ちます。 明らかに。 CSS Grid Builderは、基本的に、ユーザーインターフェイスにラップされたChromiumベースのブラウザーであり、macOSとWindowsで実行されます。 つまり、ブラウザがレンダリングできる場合、CSSシェイプを含む1つまたは2つの注目すべき例外を除いて、UIツールがそれを書き込むことができます。

実際、CSSグリッドビルダーはグリッド以上のものを構築し、それを使用して、背景のスタイル（非常に便利なグラデーションを含む）、境界線、およびタイポグラフィを作成できます。 Flexboxや複数列のレイアウトも処理しますが、CSSグリッドについて学びたいのでここにいます。

インターフェイスを見回す

CSSグリッドビルダーのインターフェイスは、期待どおりであり、左側にデザインの広い領域があり、右側にコントロールがあります。 これらのコントロールには、共通の要素が含まれています。 テキスト、画像、インタラクティブなボタンとフォームコントロール、およびレイアウトコンテナ。 これらの要素の1つが必要な場合は、それを作業領域にドラッグアンドドロップします。

を押して[スタイル]タブを表示すると、クラスとID属性に名前を付けたり、特定のブレークポイントや特定の状態にスタイルを適用したりするためのコントロールが表示されます。 すべて非常に便利ですが、最も興味深いのはレイアウトセクションです（ペインの下部に少し不便に隠れています）。

このセクションでは、グリッドを設計できます。 視覚的な表現なしでレイアウトを形成するために列と行を設定することは、「グリッド」がどのように機能するかを学ぶ上で最も難しい部分の1つになる可能性があります。 グリッド構造を視覚的に定義するアプリの機能は、特にCSSグリッドを初めて使用する場合に便利な機能です。 これが私が説明しようとしているセクションです。

CSS Grid Builderを使用して、コンテナー分割を追加しました。 作業領域でそれを選択すると、グリッドエディタにアクセスできます。 それをアクティブにすると、グリッドを視覚的に構築するために必要なすべてのツールがあります。

• 列と行を追加する
• 各モジュール内のコンテンツとアイテムを揃えて正当化する
• frとminmaxを含むすべてのタイプの単位を使用して、列と行のサイズを設定します
• ギャップを指定する
• grid-template-areasに名前を付けます
• ブレークポイントを指定する

これらの設定に満足したら、変更を「OK」して、作業領域のデザインに適用します。 そこに戻って、スライダーを使用してさまざまなブレークポイントで結果をプレビューします。機能しないブラウザーを使用している人の割合が減少することを心配している場合は、CSSグリッドビルダーでフォールバックを計算できる設定も提供されます。 次に、CSSスタイルをコピーしてプロジェクト内の別の場所に貼り付けるか、キット全体とcaboodleをエクスポートします。

CSS Grid Builderは現在、CoffeeCupが開発している間は無料です。彼らが行っていることを気に入った場合は、その開発に資金を提供するために数ドルを投じることができます。

清掃

CSSグリッドについての興奮を抑えるのは難しいと感じています。 はい、私はもっと外に出るべきだと知っていますが、私たちが作成するWebサイトを視聴者に伝えたいことをよりよく伝えるために、他のメディアからの教訓を学ぶ最高のチャンスを私たちに提供すると本当に思います。 より多くの売り上げを望む企業向けのウェブサイト、正当な目的への寄付を通じてより多くの資金を集める必要のある慈善団体、より効果的にストーリーを伝えたいニュースアウトレットのいずれを作成する場合でも、CSSグリッドと思慮深いアート指向のコンテンツがすべてを可能にします。

これがハードボイルドです。

この記事を楽しんでいただけたでしょうか。CodePenでプロジェクトファイルを表示するか、サンプルファイルをダウンロードしてください。

アンディ・クラークによる「アートディレクションフォーザウェブ」、最初のハードボイルドウェブデザイン「ショット」。 ショットは、「ウェブ向けアートディレクション」、「ブラウザを使用したデザイン」、「クリエイティブなアイデアの販売」に関する一連の短い本で、2018年中に発行されます。