ブラウザからウェブサイトのデザインプロセスにアプローチする

「これがクレイジーな人たち、ミスフィット、反逆者、トラブルメーカー、四角い穴の丸いペグ…物事の見方が違う人たちです。彼らはルールが好きではありません…あなたはそれらを引用したり、反対したり、賛美したり、それらを非難しますが、あなたができない唯一のことは、それらが物事を変えるのでそれらを無視することです…」—AppleのThinkDifferentキャンペーン、Steve Jobs、1997年。

ほとんどの場合、デザイナーはWebサイトのデザインプロセス中に従来のデザインツールを使用して画面の静的なモックアップを作成しています。 しかし、一部のデザイナーは大きな飛躍を遂げ、それらを迂回し、コードに直行し、ブラウザー内でデザインを構築および調整し、リアルタイムで人々に見えるようにデザインをテストしています。 彼らは狂ったもの、不適合、反逆者ですか？

通常、従来のWebサイト開発プロセスには、計画、コンテンツ戦略、設計、ワイヤーフレーミング、プロトタイピング、テスト、開発、公開など、多くのフェーズが含まれます。 しかし、設計段階で、「ピクセルパーフェクト」なレスポンシブサイトデザインを作成し、デザインツールを完全にバイパスする別の方法はありますか？

レスポンシブデザインの台頭と使用されているさまざまなデバイス（モバイル、タブレット、ラップトップ、デスクトップ、時計）により、すべての一貫性を維持することははるかに困難になり、考慮すべき可動部分が増えると、Webサイトとインターフェイスを設計するアプローチが増えます。変わってきている。

デザイナーがエキスパートコーダーになる必要はありませんが、1つの解決策は、デザイナーがWebサイトを駆動するコードを直接操作し始めることです。 ほんの少しのHTMLとCSSでコードをまとめることができる設計者は、どのチームにとっても大きな資産であり、全体として大きな利点があります。

なんで？ レスポンシブウェブサイトのデザインプロジェクトをそのすべての複雑さで行う場合、デザイナーは通常、10の異なる解像度とビューポートにわたって1つのコンポーネント（ヘッダーやフッターなど）の静的なデザインを作成する時間がありません。 最も人気のあるデバイスのみを対象に設計した場合でも、アスペクト比、画面密度、画面サイズが異なる4〜5台の画面を検討する必要があります。 控えめに言っても小さな仕事はありません。

最初にペンと紙でウェブサイトのデザインの課題を解決する

別のウェブサイトのデザインアプローチと計画プロセスを調べてみましょう。

最初のフェーズは、ビジネスの観点からの一般的なプロジェクトの目標、ターゲットオーディエンス、コンバージョン戦略、さまざまなパフォーマンスの期待などについて尋ねるクライアントアンケートから始まります。 これは、実際の設計フェーズが開始される前に行われ、クライアントのニーズとプロジェクト全体をよりよく理解し、将来的に効率を高めるために行われます。

次のステップは、プロジェクトの概要を書いて、概要が理解されたことを確認することです。 これは、経験や専門知識があまりないニッチなプロジェクトで作業する場合に役立ちます。 これを機能仕様と呼びますが、技術的ではありません。

これは、用語、キーワード、およびプロセスを定義するのに役立ちます。 プロジェクトの複雑さに応じて、いくつかのシナリオとユーザーフローを実行することをお勧めします。通常、オンボーディングフロー、サイトの検索とナビゲート、またはeコマースサイトの場合は「カートに追加」とチェックアウトフローです。

ワイヤーフレーミングとプロトタイピング

プロトタイピングは、ウェブサイトのデザインプロセスの次の段階です。 ページレイアウト、機能、およびサイトページがさまざまなデバイスでどのように表示されるかについて説明するためのクイックワイヤーフレームを構築することは、良いスタートです。 さまざまなテンプレートやコンポーネントのワイヤーフレームを数十個作成するのにそれほど時間はかかりません。 これらから簡単なWebサイトのプロトタイプを作成でき、プロジェクトの複雑さに応じて、InVision、Adobe XD、Balsamiq、Moqups、Axureなどのプロトタイピングツールを使用できます。

ムードボードとインターフェースインベントリ

次のステップは、ムードボードをまとめることです。デザイナー、クライアント、および他の利害関係者が他のWebサイトで好む可能性のあるもののコレクション（レイアウト、ルックアンドフィール、色またはフォント、アイコン、画像など）。 これは、サイトの全体的なルックアンドフィールを定義するのに役立ちます。 クライアントがブランディングスタイルガイドを持っている場合は、それを検討して新しいサイトデザインに組み込む必要があります。

ワイヤーフレーム、プロトタイプ、モックアップ、ムードボードなど、さまざまなアーティファクトが承認されたら、インターフェイスインベントリを作成することをお勧めします。

インターフェイスインベントリは、インターフェイスを構成する断片の包括的なコレクションです。

ブラッドフロスト

レスポンシブウェブデザインを最初から行う場合は、プロジェクトの構築元となるすべてのコンポーネントと要素を書き留めることから始めます。 順序付けされていないリストは問題なく機能し、何もないよりも間違いなく優れています。 たとえば、テーブル、ボタン、画像、タイポグラフィ、メディア、フォーム、ナビゲーション、コンポーネントなど。

ブラウザでのデザイン

「ブラウザでのデザイン」は、レスポンシブウェブデザインの台頭とともに普及した用語です。 Sketchなどの設計プログラムに費やす時間を最小限に抑えるために、設計者は設計フェーズをブラウザーに移し、レイアウトとスタイル設定にCSSを利用するように促されました。 このウェブサイトのデザインアプローチは、多くのステップを削減するため、より効率的であることが証明されています。

HTMLモックアップに焦点を当て、CSSを使用して「ブラウザー内」でデザインのアイデアをテストすることにより、Sketchなどの他のデザインツールでページの静的モックアップを作成するために通常費やす時間を節約できます。 設計者は、優れたコードエディタを入手し、ブラウザの更新方法を考案して、変更をリアルタイムで確認できるようにすることをお勧めします。 たとえば、SublimeTextとCodekitは素晴らしい組み合わせです。

HTMLとCSSは、そのまま構造化されているため、パターンについて考え、チェックする必要があります。 同じ構造を維持しながら、動的データを簡単にコピー、複製、および入力できるHTMLコンポーネントを構築する場合は、モジュール性について考える方が簡単です。 特定の変更を作成する場合は、その要素を明示的にターゲットにするか、別のCSSクラスを追加する必要があります。

見出しのスタイルを設定する場合、オーバーライドされない限り、サイト全体で一貫性があります。 他の要素についても同じことが言えます。 このタイプの考え方では、標準化、共通の要素のグループ化、既にスタイル設定された要素の可能な限りの再利用、そして最も重要なこととして、すべてをモジュール化する必要があります。

単一のCSS宣言で、ボタンのパディングを変更してタッチターゲットを改善し、携帯電話、タブレット、およびデスクトップで直接テストできます。 PhotoshopやSketchでは、他の要素がレイアウトでお互いを認識しないため、これを簡単に行うことはできません。また、サイズを変更するたびにオブジェクトを再編成する必要があります。

別のヘッダーの配色を試してみませんか？ ほんの数行のCSSコードで作業することにより、すべてのデバイスと画面で、すべてのHTMLテンプレートに変更が即座に表示されます。 20個の静的モックアップがある場合、この種の柔軟性を簡単にエミュレートすることはできません。 確かに、再利用可能なコンポーネントにはSketchまたはAdobe XDで「シンボル」を使用できますが、CSSほど用途が広いわけではありません。

このフェーズでは、いくつかの技術的な決定を行う必要があります。 回答が必要な質問は次のとおりです。

• CSSプリプロセッサを使用しますか？ （おすすめされた）
• レイアウトにはどのタイプのレスポンシブグリッドを使用しますか？
• 使用したいフォントは購入できますか？ クライアントにはプレミアムWebフォントの予算がありますか、それとも利用可能な無料のWebフォントの使用に戻りますか？
• マルチカラーまたはシングルカラーのアイコンを使用しますか？ サイズはサイト全体で異なりますか？ 続いて、カスタム描画アイコンに依存していますか、それとも既存のアイコンパックに依存していますか？ アイコンはどのサイズに対応する必要がありますか？

フォントとレスポンシブWebデザインの問題

レスポンシブウェブデザインプロジェクトのフォントを選択するのは難しい場合があります。 多くの可能性と同じくらい多くの落とし穴があります。 デザインはブラウザで使用されるので、これはそれらを試すのに最適な場所です。 フォントの読みやすさは、サイズ、太さ、色、レンダリングによって異なります。そのため、ブラウザでフォントを直接試すことで、設計者は物事が正しく表示され、目的の期待が満たされていることを確認できます。

フォントを選択してテストし、書体の組み合わせを試すためのオンラインツールはたくさんあります。 TypetesterとTypecastでは、さまざまなサービスやファウンドリのさまざまなフォントを見つけてテストできます。 TypekitやFonts.comなどの特定のフォントサブスクリプションサービスを使用する場合、デザイナーはフォントを生成し、ページテンプレートで直接テストできます。 新しいフォントを使用してTypekitパッケージを生成するのは簡単で高速であり、特定のフォントがWebページのパフォーマンスにどのように影響するかを簡単に確認できます。

ブランドスタイルに合ったアイコン

カスタムアイコンを描画する場合は、サイズ、グリッド、およびスタイルを定義する必要があります。 たとえば、Illustratorで作業する場合、すべてのアートボードは1つのアイコンを表します。 アイコンはIllustratorからSVGまたはPNGとして簡単にエクスポートでき、後でIcomoonなどのサービスを使用してアイコンフォントに変換できます。 ベクトルは解像度に依存しないため、ベクトルアイコン（SVG）を使用することをお勧めします。そのため、高解像度（Retina）画面での表示方法について心配する必要はありません。

ウェブサイトのデザインプロセスを抑えるためのスタイルガイドとCSS

数十のテンプレートとコンポーネントを使用してブラウザーで設計したとしても、どこで、どのように使用されているかを追跡できなくなる可能性があります。 すべてのコンポーネントのスタイルガイドを中央リポジトリとして構築することをお勧めします。 このスタイルガイドから、UIコンポーネントと要素をWebページに組み合わせることにより、特定のページテンプレートが作成されます。

UIコンポーネントは、ページネーション、製品リスト、画像ギャラリー、モーダルウィンドウ、フォーム要素などであり、テンプレートの構成要素として使用されます。 特定のUIコンポーネントをテストビルドするときは、すべてを1か所にまとめておくと非常に便利です。

CSSでは、コンポーネントスタイルを個別のファイルに分割することをお勧めします。 たとえば、ページ付けのスタイルは_pagination.scssにあり、フォーム要素は_form.scssにあり、これらのファイルはすべて、他のファイル（変数、ミックスインなど）とともに単一のSCSSファイルに含まれます。

style.scssは数十の「小さなファイル」で構成されている場合がありますが、複数の人が同じプロジェクトで作業している場合、すべてが小さなチャンクに分割されていると、（ソース管理を使用しているかどうかに関係なく）変更を追跡する方が簡単です。 チームはすべてのサイトコンポーネントを追跡する必要があるため、Webサイトのデザインプロジェクトが開始された後も、スタイルガイドを維持し続けることが重要です。

スタイルシートの使用–モジュラーCSS

開発の観点から、モジュラーCSSを作成するための多くのアプローチがあります。 最もよく知られているのは、SMACSS（CSSのスケーラブルおよびモジュラーアーキテクチャ）、BEM（ブロック、要素、モディファイア）、およびOOCSS（オブジェクト指向CSS）です。 独自のアプローチを開発することになったとしても、学ぶべきことはかなりあります。 この時点で、UIコンポーネントとWebページの優れたコレクションができているはずです。これにより、新しいWebページを簡単に作成できるようになります。 スタイルガイドから要素をコピーして貼り付け、必要に応じて再配置できます。

すべてがモジュール式であるため、設計とコードの一貫性について心配する必要はありません。 ただし、UIコンポーネントをシステム全体で調整する場合は、変更を加えてスタイルガイドを更新する（または新しいコンポーネントを追加する）必要があることを忘れないでください。 すべてを整理しておくには、GulpやGruntなどのWebページで作業するために何らかのテンプレート/自動化アプローチを使用するのが最善です。

次は何ですか？ ブラウザでのデザイン

これで、UIコンポーネントの中央リポジトリが作成され、すべての要素が文書化され、それらのコンポーネントからWebページが構築されました。 この時点から、ほとんどの「デザイン」はコードで直接行われ、ブラウザーでプレビューされるため、デザイナーはお気に入りのデザインツールを開く必要がなくなる可能性が高くなります。

特定の変更が設計にどのように影響するかよくわかりませんか？ これで、さまざまなデバイスやブラウザで同時にデザインをプレビューして、見出しのフォントがどのように変更されたか、またはボタンのサイズと色を変更するとデザインにどのように影響するかを確認できます。

カスタムWebフォントを使用する場合、フォントの太さを追加すると、ページの読み込みパフォーマンスにどのような影響がありますか？ WebPageTestなどのサービスを使用して進行中のWebページのパフォーマンスをテストし、実際の結果について十分な情報に基づいて決定を下すことができます。 PhotoshopやSketchでは絶対にできません。

HTMLとCSSの操作、およびブラウザーでの操作は、Webサイトのデザインプロセス中のすべてのデザイナーに適しているとは限りません。 しかし、デザイナーがさまざまなデバイスや画面サイズで自分の作品がどのように見えるかを本当に気にかけている場合は、毎回完璧であることを確認する必要があります。 静的なデザインのモックアップとして驚くべきものは、モバイルデバイスのWebブラウザで表示すると望ましくないように見える場合があります。 経験豊富なデザイナーは、誰もがブラウザで見ることができる環境でWebデザインを構築してテストすることをお勧めします。

Toptal Designブログでさらに読む：

• レスポンシブデザイン–ベストプラクティスと考慮事項
• 効果的なランディングページをデザインする方法
• eコマースウェブサイトデザインの究極のガイド
• ウェブサイトの再設計の基礎–ケーススタディ
• デザインの原動力–ウェブサイトの再設計のケーススタディ