Frontend Engineering

フロントエンドエンジニアリング

フロントエンドエンジニアリングとは、HTML や CSS、JavaScript といったテクノロジーによって、UX デザインで練り上げたビジュアルを実際のウェブページとして実装するエンジニアリングプロセスです。

フロントエンドエンジニアリングのテクノロジー

フロントエンドエンジニアリングのテクノロジーとしては、HTML、CSS が必須、JavaScript が準必須というのが今日の状況です。ここでは HTML と CSS について簡単に紹介します。

HTML

HTML(HyperText Markup Language)とは、ウェブページに文字や画像などを表示するための骨格として用いられる言語です。例えば、次のように表現されます。

これは弊社のコーポレートサイトのトップ画面の一部を HTML のみで簡単に表現したものです。左側の記号と文字がセットになっているのが HTML で、右側がブラウザで実際に表示される見え方です。「Hello, brands.」を囲っている <div><h1> のような記号はタグと呼ばれます。

HTML は数個のタグを覚えれば見た目上は問題のないウェブページを実装できるため、簡単だと勘違いされることがあります。しかし実際には HTML タグには数十もの種類が存在し1、情報の意味に応じて適切なタグで囲い、適切に構造化することで、はじめて検索エンジンはそれぞれの情報の意味を理解できるようになります。HTML の適切なコーディングは SEO の必要条件です。

CSS

CSS(Cascading Style Sheets)とは、HTML の各要素に対する修飾を指定して、ウェブページのレイアウトとビジュアルを実装するための言語です。先の HTML に CSS を追加すると、ブラウザに表示される画面は次のように変わります。

左側の黒背景のエリアに記述されているのが CSS です。テキストが画面の中央にレイアウトされ、フォントもサンセリフに変わり、弊社のコーポレートサイトのトップ画面に近づきました。シンプルな例ですが、CSS のことを少しお分かり頂けたかと思います。

CSS で重要なのは、多くの場合あるビジュアルを実現する CSS の記述方法は、ある数学の問題の解法が複数あるように、1 つではないということです。そして、現実のウェブサイトでは CSS は膨大で複雑になります。したがって、CSS の記述次第でサイトのパフォーマンスは大きく変わることになります。つまり、CSS の適切なコーディングも SEO の必要条件なのです。

以下、専門的な話になりますが、私たちが実際に CSS をコーディングする際はほとんどの場合、CSS のメタ言語である SCSS で記述します。環境が許す場合は、弊社のコーポレートサイトでも採用している最新の CSS テクノロジーの 1 つである CSS Modules を使い、生産性とサイトのパフォーマンスを高めます。

また、CSS で外せない論点としてマルチデバイス対応があります。マルチデバイス対応とは、様々な PC やスマートフォンでそれぞれのデバイスに最適化された表示を実現する実装のことを指します。マルチデバイス対応のよく知られた解決策の 1 つとしては、CSS のレスポンシブデザインがあります。しかし、レスポンシブデザインでも一定の画面幅ごとに CSS を追加する必要があり完璧ではありません。そのため私たちは、ベースとなる CSS をできる限り相対的な記述にすることで、レスポンシブデザインのための CSS コード量を減らし、サイトのパフォーマンスを高めています。

フロントエンドエンジニアリングのプロセス

Cantas のフロントエンドエンジニアリングのプロセスを一般化すると次のようになります。ただし実際には、以下の仕事は同時並行的だったり循環したりしながら進むことが多いです。

  1. UX デザインの確認
  2. HTML コーディング
  3. CSS コーディング
  4. JavaScript コーディング

重要なのは情報アーキテクチャレイアウトデザインビジュアルデザインライティングといった UX デザインの結果を確認することです。なぜなら、フロントエンドエンジニアリングは、UX デザインの結果をどうウェブサイトとして実装するかを試行錯誤するプロセスだからです。この確認作業により、コードを最適化してサイトのパフォーマンスを向上できます。

Solution

フロントエンドエンジニアリング

常に学習続ける私たちだからこそ実現できる最新の優れたテクノロジーを適切に使いながら、UXデザインで試行錯誤されたビジュアルを、優れたパフォーマンスを備えた実際のウェブサイトとして形にします。

See more

バックエンドエンジニアリング

サーバー環境やデータベース、情報アーキテクチャで設計した機能を適切なテクノロジーで柔軟に実装し、ブランドを成長させるのに必要な機能を備えた実際のウェブサイトとして形にします。

See more

CMS構築

ウェブサイトの実装環境や運営メンバーのスキルや要望、予算に応じて、柔軟に適切なCMSを選定し、ブランドの持続的成長を実現するのに欠かせないコンテンツの継続的な発信を支える環境を実装します。

See more

EC構築

ウェブサイトの実装環境や運営メンバーのスキルや要望、予算に応じて、柔軟に適切なCMSを選定し、ブランドの持続的成長を実現するのに欠かせないコンテンツの継続的な発信を支える環境を実装します。

See more

Process

リサーチから企画、戦略、デザイン、実装、伝達までトータル支援。

Strategy Design

Product Design

  • Design Research

    エスノグラフィーやデスクリサーチから顧客のニーズやブランド連想を総合的に把握し、ブランドデザインの基礎をつくります

    See more

  • Brand Design

    中長期的に利益を最大化するブランドコンセプトを再定義または整理し、戦略やロゴ、タグラインなどをデザインします

    See more

  • UX Design

    ブランドコンセプトを実現するための顧客体験(UX)を積み重ねる、カスタマージャーニーやウェブサイトをデザインします

    See more

  • Digital Engineering

    UXデザインを、適切なモダンテクノロジーによって論理的かつ美的なウェブサイトに具現化し、ブランドコンセプトを伝えます

    See more

  • Digital Marketing

    コンテンツマーケティングやデジタル広告により集客したり、ウェブサイトを定量・定性の両観点から分析し、改善をデザインします

    See more

Cantasさんに依頼して本当に良かったです。というより、Cantasさんに頼んでいなかったら、ヤバかったなと感じています。ずっと、どうすれば集客できるか試行錯誤してきましたが、Cantasさんのおかげで、集客するために必要なことがわかりました。実際にお客様からのご予約も相次いでいて、こんなにも成果が出るのかと驚いています。本当にありがとうございます。

Jun Miyazaki, Vice President, Cuorehome

6x

How can we help you?

私たちはその場しのぎを嫌い、目的に対して本質的な問題を見極め、持続的成長につながるようにそれを解決します。2019年にCantasがトータル支援したクライアントの平均集客増加率はおよそ6倍*という結果になりました 🙌

現在、多数のご依頼を頂いており、これからご依頼頂いた場合のプロジェクト開始時期が3月後半以降となる見込みです。誠に申し訳ありませんが、ご理解どうぞよろしくお願いいたします。

* クライアントそれぞれのコンバージョン変化率の平均近似値として算出