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

フロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。

サイトのキャプチャ

Your Brain on Front-End Development


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

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

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

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

Webデザインのキャプチャ

Food Recipe Website

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

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

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

Webデザインのキャプチャ

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

ヘッダはFlexboxで

Webデザインのキャプチャ

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

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

レイアウトはCSS Gridで

Webデザインのキャプチャ

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

縦書きの要素

Webデザインのキャプチャ

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

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

テキストの省略

Webデザインのキャプチャ

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

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

カスタム フォント

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

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

画像上のテキスト

Webデザインのキャプチャ

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

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

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

SVGアイコン・レイティング

Webデザインのキャプチャ

デザインのあちこちにシンプルなアイコンがあります。これらはSVGアイコンで間違いないでしょう。SVGアイコンの採用には私も賛成です。インラインのSVGはシンプルで、パワフルです。

よく見ると、レイティングもあり、ここもSVGの領域です。これを実装するには、ラジオボタンを使用するのがスマートな方法だと思います。

See the Pen CSS: Radio Input Stars by Jake Albaugh (@jakealbaugh) on CodePen.

ハンバーガーメニュー

Webデザインのキャプチャ

このデザインカンプのように、大きなスクリーンのデザインでは余分な要素に思われるかもしれません。しかし、ビジターは必ずしもこのサイズで見るとは限らず、小さいサイズのスクリーンでもナビゲーションが機能するように実装すべきです。

See the Pen Hamburger menu flip with text change by Eric Grucza (@egrucza) on CodePen.

sponsors

top of page

©2018 coliss