1. はじめに

1.1　記事について

テックディレクションではプロジェクトマネジメント業務だけではなく、ECプラットフォーム：Shopifyを中心にECストアの構築も多く行なっています。 その際、やみくもにサイト構築を行うのではなく、デザインの再現性はもちろん、構築効率、納品後のメンテナンス性などを意識した、高い品質のサイト構築を目指しています。

この記事ではテックディレクションがサイト構築で意識していることを簡単にご紹介したいと思います。

1.2　対象読者

以下のような方々の参考になれば幸いです。

・サイト構築を行うフロントエンドエンジニア

・Webデザイナー（非エンジニア）

・サイト構築を管理するPMなど

1.3　記事を読み終えるまでの時間

約10分程度

2. サイト構築で意識したい2つのポイント

ざっくりですが、本日のポイントは以下の2つです。

・デザインルールの整理・確認

・要素の範囲を意識する

3. デザインルールの整理・確認

エンジニアの方はデザインと聞くと直感的であったりアーティスティック、クリエィティブなイメージでエンジニアとは逆の印象で苦手意識を持つ方が多いかと思います。 しかし実はデザインの本質は非常にロジカルで、寧ろエンジニアの方にも親しみやすいものと思いますので、この記事を通して是非デザインの理解を深めていただけると幸いです。

3.1　デザインとは整理すること

まずデザインは「何となく」であったり「直感」で作るものではありません。デザインの要素１つ１つには全て意味（目的・意図）があり、ルールを持って作成しています。

目的からデザイン要素を決定してる例：

・文字が大きい　→　主に子供・年配層向け（読みやすくする配慮）

・メインカラーが赤色　→　元気でエネルギッシュな印象

・明朝体を使用している　→　高級感を演出

・途中で背景色が変わる　→　場面転換を意図

・角丸を多用している　→　親しみやすい印象

・余白が広い　→　安心感・誠実感・高級感

上記を見て皆さんも何となくそれぞれのイメージが沸くかと思います。 会社の特徴やサービスによって伝えたい印象（コンセプト）が必ずあるかと思いますので、デザインをする時はその要件に合う要素を整理して取り入れていく作業をしています。

逆にいうと、一貫性のないデザインはまとまりが悪くなってしまうため、デザインには必ずルールがあると言うことです。

3.2　ジャンプ率・余白を崩さない

またデザインの印象を決める要素としてジャンプ率と余白があります。 以下は商材が同じPCですが、それぞれジャンプ率と余白が異なるため違う印象に見えます。

ジャンプ率と余白による印象の違いの例：

文字サイズの差が大きく情報量も多いため、カジュアルな印象（参考：Apple MacBook Air）

上記に比べ文字サイズの差が小さく余白は広いため、高級な印象（参考：Apple MacBook Pro）

このようにジャンプ率と余白が異なるだけでかなり印象が変わってしまうので、この２つはルールを崩さないように注意したいところです。

ただ特に余白は要素が並ぶことで管理が煩雑になりやすいので、構築前にしっかりルールを見極めて管理することがポイントになります。

3.3　ルール化しておきたい要素

上記を踏まえ、構築前にデザインを確認・整理したい要素が以下になります。

・文字サイズ（本文・大見出し・中見出し・小見出し・注釈など）

・行間（本文・見出し）

・カラーパターン（ベースカラー・アクセントカラー・文字色・背景色・罫線など）

・書体（日本語・英語）

・コンテンツの幅（上限サイズ・最小サイズ）※主にPC

・余白（エリアの余白・コンテンツ毎の余白・段落余白）

・ボタン（背景色あり・背景色なし・最大幅・最小幅など）

デザインルールのパターン化を探す例（参考：A day in the coffee）

これらはCSSでroot化し管理しておくと設定が一元化でき、仕様変更や追加開発の際にデザインを崩すことなく対応することができます。

余白などをパターン化し一元管理することで、保守性もアップ。

4. 要素の範囲を意識する

また前述を踏まえ、以下の観点をしっかり意識してスタイルを適用する範囲を押さえておくと、よりデザインと構築後のギャップを抑えることができます。

・コンテンツ幅を意識できているか

・不要な余白はついていないか

・marginとpaddingの使い分けを意識できているか

・余白の足し算をしない

特に「不要な余白」や「余白の足し算」は構築でよく見られますが、当初のデザインからレイアウトが変更になったり、追加要素が入ったりした場合に印象が崩れる原因となりやすいので気をつけたいところです。

5. まとめ

今回はデザインを意識した構築の観点について簡単にまとめてみましたが、いかがでしょうか。 サイト構築の際、参考になれば幸いです。

またこの様にテックディレクションでは、プロジェクト管理だけでなく構築面でも細部までに意識を持つことで、プロジェクト全体の質を高めています。

著者：TO