フロントエンドのコーダーの頭の中、デザインを見た時にどんなことを考えるのか

サイト構築 -制作

Post on:2018年6月19日

デザインがあがってきた！

フロントエンドデベロッパーの仕事は、さまざまなテクニックとテクノロジーを使用して望まれるUIとUXを引き出すことです。デザイナーと協力して、それらのデザインを実現させることになるでしょう。

私はデザインを見ると、仕事に関係しそうなあらゆるタスクを私のフロントエンドの脳が思い浮かべます。どういうことなのか説明します。
例えば、このようなデザインカンプがあるとしましょう。

Food Recipe Website

非常に魅力的なデザインです。フロントエンドのWebデザインと実装する観点から考えると、ある程度の負荷があるように見えます。

ここでは、HTMLとCSSの技術的な面に絞ります。フロントエンドには他にも多くの作業があります。アクセシビリティ、パフォーマンス、セマンティック、デザインシステム、すべてが同じくらい重要です。

複数行のテキストの長さに沿った背景

まずは、複数行のテキストの長さに沿った背景があります。これは「Multi-Line Padded Text」と呼ばれるもので、実装する方法はいくつかあります。中でも一番簡単でモダンなのは、「box-decoration-break」を使用した実装です。

See the Pen Multiline Padding with box-decoration-break by Chris Coyier (@chriscoyier) on CodePen.

ヘッダはFlexboxで

ヘッダを見ると、Flexboxでの実装が適しているように見えます。異なるサイズの要素があり、それぞれのスペースも異なった、一方向のレイアウトです。こういったレイアウトはFlexboxが簡単で、固定されたレイアウトではなく、フレキシブルに実装できます。

備考: CSS Flexbox の各プロパティの使い方を詳しく解説

レイアウトはCSS Gridで

ページ全体のレイアウトは、CSS Gridが適しています。FlexboxとCSS Gridは競合していないことに注意してください。グリッドのセルに配置された要素であればFlexboxが適しており、上記のヘッダのようなレイアウトが良い例です。メインのコンテンツエリアとフッタは、グリッドのセルとしていずれかの方向に定義することができます。

縦書きの要素

縦書きを実装するのに最も良いのは、「writing-mode」を使用する方法です。CSS Writing Modesの下記のデモでは縦書きが実装されています。

See the Pen Writing Mode Demo — Headline by Jen Simmons (@jensimmons) on CodePen.

テキストの省略

テキストをよく見ると、文末に「…」があります。おそらく、DBからテキストを出力し、3行だけをここに表示する仕様だと想像できます。デザインが意味するのは、常に最大テキスト3行分のスペースが必要であるということです。これは「Line clamping」と呼ばれるもので、さまざまなスタイルで実装できます。

See the Pen Line Clampin' by Chris Coyier (@chriscoyier) on CodePen.

カスタムフォント

最近のほとんどのサイトと同様に、このデザインでもカスタムフォントが使用されています。こういった印象的なデザインでは、私はフォントのロードに注意を払います。FOUTよりもFOITがよく、理想としてはフォントファイルをキャッシュしないようにします。

備考: Webフォントを快適に表示するCSSの新しいプロパティ「font-display」
Webフォントの表示の仕組みと最適化

画像上のテキスト

「Dinner Menu」というテキストが画像上にあります。ちょうど画像の暗い場所に配置されているため、テキストの明るいホワイトは読みやすいデザインです。
こういったケースについて、以前考えたことがあります。暗い画像にホワイトのテキストを重ねるのは、一般的には問題ありません。どのようなタイプの画像でもOKです。しかしオプションとして、ぼかしやグラデーションを使う方法もあります。

備考: たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説

See the Pen ByKwaq by Chris Coyier (@chriscoyier) on CodePen.