on:2018年6月19日sponsorsフロントエンドのコーダーがデザインを見た時にどんなことを考えるのかを紹介します。デザインカンプを手がかりに、そのデザインが意味する仕様上のさまざまな可能性やそれらを実現するための実装方法を考えるなど、コーダーとして最も楽しい時間の一つです。Development下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。デベロッパーの仕事は、さまざまなテクニックとテクノロジーを使用して望まれるUIとUXを引き出すことです。デザイナーと協力して、それらのデザインを実現させることになるでしょう。私はデザインを見ると、仕事に関係しそうなあらゆるタスクを私のフロントエンドの脳が思い浮かべます。いうことなのか説明します。このようなデザインカンプがあるとしましょう。Website非常に魅力的なデザインです。フロントエンドのWebデザインと実装する観点から考えると、ある程度の負荷があるように見えます。ここでは、HTMLとCSSの技術的な面に絞ります。フロントエンドには他にも多くの作業があります。システム、すべてが同じくらい重要です。複数行のテキストの長さに沿った背景まずは、複数行のテキストの長さに沿った背景があります。Text」と呼ばれるもので、実装する方法はいくつかあります。中でも一番簡単でモダンなのは、「box-decoration-break」を使用した実装です。CodePen.ヘッダはFlexboxでヘッダを見ると、Flexboxでの実装が適しているように見えます。異なるサイズの要素があり、それぞれのスペースも異なった、一方向のレイアウトです。いったレイアウトはFlexboxが簡単で、固定されたレイアウトではなく、フレキシブルに実装できます。Gridが適しています。Gridは競合していないことに注意してください。グリッドのセルに配置された要素であればFlexboxが適しており、上記のヘッダのようなレイアウトが良い例です。メインのコンテンツエリアとフッタは、グリッドのセルとしていずれかの方向に定義することができます。縦書きを実装するのに最も良いのは、「writing-mode」を使用する方法です。Modesの下記のデモでは縦書きが実装されています。CodePen.テキストの省略テキストをよく見ると、文末に「...」があります。DBからテキストを出力し、3行だけをここに表示する仕様だと想像できます。デザインが意味するのは、常に最大テキスト3行分のスペースが必要であるということです。clamping」と呼ばれるもので、さまざまなスタイルで実装できます。フォントが使用されています。いった印象的なデザインでは、私はフォントのロードに注意を払います。FOUTよりもFOITがよく、理想としてはフォントファイルをキャッシュしないようにします。Menu」というテキストが画像上にあります。画像の暗い場所に配置されているため、テキストの明るいホワイトは読みやすいデザインです。いったケースについて、以前考えたことがあります。暗い画像にホワイトのテキストを重ねるのは、一般的には問題ありません。どのようなタイプの画像でもOKです。オプションとして、ぼかしやグラデーションを使う方法もあります。CodePen.SVGアイコン・レイティングデザインのあちこちにシンプルなアイコンがあります。これらはSVGアイコンで間違いないでしょう。SVGアイコンの採用には私も賛成です。インラインのSVGはシンプルで、パワフルです。見ると、レイティングもあり、ここもSVGの領域です。これを実装するには、ラジオボタンを使用するのがスマートな方法だと思います。CodePen.ハンバーガーメニューこのデザインカンプのように、大きなスクリーンのデザインでは余分な要素に思われるかもしれません。ビジターは必ずしもこのサイズで見るとは限らず、小さいサイズのスクリーンでもナビゲーションが機能するように実装すべきです。