コンテンツ
3Dコンピュータモデリングの初期の頃から、モデラーはオブジェクトの「ワイヤーフレーム」ビューを使用して、最小限のコンピュータプロセッサコストでオブジェクトを3次元で表示してきました。 BattlezoneやTempestなどの初期のビデオゲームでは、3Dオブジェクトをワイヤーフレームとして表示していました。これは、初期の家庭用コンピューターでは3Dオブジェクトを完全にレンダリングするのに十分な能力がなかったためです（初期の1色ディスプレイでは表示できたとしても表示できませんでした）。
数年後、ソフトウェアの設計者と開発者は、構築を計画しているもののスケッチをワイヤーフレームとしても参照し始めました。彼らは、3Dモデラーと同じことを達成しようとしていました。それは、低コストの方法でアイデアを示すことです。彼らは、非設計者や開発者に、自分たちが設計しているものについての多面的な理解を提供したいと考えていました。 Webがリッチテキストドキュメントからソフトウェアのように設計されたインターフェイスに移行するにつれて、Webデザイナーもワイヤーフレーミングを開始しました（ただし、業界の中には、ワイヤーフレームを廃止する時期かどうかを疑問視している人もいます）。
何年もの間、安価と醜いという2つの形容詞を使用して、ワイヤーフレーミングの基本的な哲学を説明してきました。ワイヤーフレームは、迅速に作成できるものである必要があり、コンテンツ、コンポーネント、優先度、およびレイアウトをわずかなコストで根本的に変更できる必要があります。ワイヤーフレームも可能な限りスタイルを欠いている必要があります。ワイヤーフレームをレビューするときにクライアントに焦点を当ててもらいたい最後のことは、カラーパレット、テクスチャ、タイポグラフィ、および画像です。それが起こっている場合、あなたのワイヤーフレームは十分に醜くないか、少なくとも十分にローファイではありません。ワイヤーフレームはテストスタイル用ではありません。コンテンツモデル、アーキテクチャ、階層、フローをテストするためのものです。クライアントで視覚的言語またはスタイル言語をテストまたは確立することを検討している場合は、代わりにスタイルタイルのようなものを検討してください。
それらは安価なアイデアテストツールとして意図されていたため、何年もの間、ワイヤーフレームは、すばやくレンダリングされたボックスと波線のある紙に鉛筆で描いたものでした。最終的に、コンピューターが提供するコピーアンドペースト機能でさらに高速化できることに気付いた人もいたため、OmniGraffleやAdobeFireworksなどのツールを使用して処理をさらに高速化しました。それにもかかわらず、ワイヤーフレームは灰色のボックスのままで、テキストのコピーアンドペーストされたビットが固定キャンバスに配置されました。それらは、ウェブサイトがどうなるかについての忠実度の低いスケッチでした。
Web 2.0やAjaxなどのテクノロジーの出現、およびHTMLやCSSの進歩により、Webサイトの相互作用がますます複雑になるにつれて、これらのWebサイトのスケッチによって明確性が失われたり、ある程度の混乱が生じたりすることがよくありました。
救助への注釈！ウェブサイト自体も固定キャンバスに単一のサイズで表示されている限り、ウェブサイトの注釈付きスケッチを作成することは非常に理にかなっています。
- このチュートリアルのサポートファイルをダウンロードする
勇ましくて、新しい世界
私たちは今、さまざまな画面サイズ、解像度、インタラクションパターンの多数のデバイス上にウェブサイトが存在する勇敢な新しい世界に入りました。固定キャンバスは過去のものです。それで、私たちの解決策は何でしたか？ほとんどの場合、2〜3つの画面サイズ（通常、Appleの元の2つのiOSデバイスと1つのランダムなデスクトップサイズにマップされます）を選択し、それぞれに対してプロセスを繰り返します。すべてをスケッチし、すべてに注釈を付け、利益を上げましょう！
どのサイズから始めても少し学ぶと仮定すると、デスクトップデバイスだけの古いワイヤーフレームの3倍未満の時間でこれを実行できるはずですよね？違う。私の経験では、このアプローチでは注釈と混乱が増します。また、すべての画面サイズを理解しようとするドキュメントの作成に時間を費やし、クライアントが理解して理解しやすい方法で、さまざまなサイズでWebサイトのこれらのスケッチを提示します。
ワイヤーフレーミングへの時間投資を少なくとも2倍にしたという事実は別として、ある時点で行わなければならないいくつかの重要な決定も無視した可能性があります。 HTMLやCSSから抜け出すのが非常に難しいコーナーに自分自身を描くことさえあります。 2つのエンドポイントの幅が320pxと1400pxの場合、1,080の異なる幅があり、その間にさまざまなコンテンツ、コンポーネント、さらにはインタラクションタイプが壊れることがあります。結局のところ、これが「ブレークポイント」という用語の由来です。この方法でワイヤーフレームを作成するには、他の方法よりも3つの幅のワイヤーフレームをすばやく作成できると考えても、追加のコストがかかります。
レスポンシブHTMLワイヤーフレームを入力してください
多くの設計者は、さまざまな理由から、レスポンシブHTMLワイヤーフレームの作成に飛躍することを恐れているか、または望んでいません。以下は、デザイナーがこれについて言うのを聞いた最も一般的なことのいくつかの短いリストと、それぞれについてのいくつかの考えです。これらはそれぞれ非常に有効な質問であり、賢明な懸念事項であるため、それぞれ個別に回答します。何か新しいことを試すように説得することはできないかもしれませんが、設計プロセスにおける新しい成果物の1つがレスポンシブHTMLワイヤーフレームであると言ったときに、私が何を意味するかについてのいくつかの誤解を払拭できることを願っています。
- 「私はツールセットを使用して静的なワイヤーフレームを何年も作成していて、それに夢中になっています。その速度の利点をあきらめたくありません。」HTMLワイヤーフレームを作成すると、ワイヤーフレーミングを開始してからクライアントの承認が得られるまで、プロセスに時間がかかる場合があります。ただし、静的なワイヤーフレームでは多くの石が回転しないままになることが多いため、ワイヤーフレームが承認された後は、追加の通信と作業が大幅に減少する可能性があります。さらに、増え続ける画面サイズとインタラクションタイプのワイヤーフレーミングを開始すると、すぐに手に負えなくなる可能性のある、より多くのワイヤーフレームまたは追加のアノテーションが必要になる可能性があります。ワイヤーフレーミングの目標は、速度を最大化することだけではありません。
- 「HTMLやCSSについては考えていません。レイアウトやデザインのアイデアを作成するには、キャンバスベースのツールが必要です。」これは、多くの人が「ブラウザでのデザイン」と呼んでいるものについての、より一般的な誤解の1つです。私のクライアントの成果物はレスポンシブHTMLワイヤーフレームになりましたが、それでもプロセスの一部としてスケッチしているので、よくそうすべきだと思います。
- 「私はHTMLとCSSを知っていますが、フロントエンドの専門家ではありません。メディアクエリと戦い、レスポンシブ画面を構築する時間がありません。」ここでの朗報は、レスポンシブHTMLワイヤーフレームの作成を開始するのにEthanMarcotteである必要はないということです。便利で再利用可能なコードを提供するフレームワークがいくつかあるので、アイデアやスケッチに合ったコンポーネントやレイアウトをつなぎ合わせることができます。
フレームワークに入る
さて、次のプロジェクトでHTMLワイヤーフレーミングの水でつま先を濡らすように説得したと仮定して、フレームワークについて話しましょう。フレームワークは通常、組み込みのグリッドシステム、基本スタイル、および事前に作成された再利用可能なコンポーネント（ナビゲーション、スライドショーなど）を提供します。また、広く使用されているため、役立つ人々のコミュニティやドキュメントを提供しており、さまざまなブラウザで事前にテストされています。そこにはいくつかのフレームワークがあり、それぞれに長所と短所があります。いくつかのリストを次に示します。
- ブートストラップ
- 財団
- Wirefy
- スケルトン
レスポンシブHTMLワイヤーフレームを作成するための簡単なウォークスルーを提供するために、Foundationを選択しました。これは、人気があり、モバイルファーストであり、オプションでセマンティックであるため（つまり、クラスベースの割り当てをSassを使用してセマンティックにすることができます）、多くの機能があります。既製のテンプレートとコンポーネントの、そしてそれは活発な開発中です。基本的に、これは頭を動かすための最も簡単なフレームワークの1つであり、ワイヤーフレームを最終製品に変えるためにも使用できます。
Foundationの使用を開始する
Foundationを使用して最初のワイヤーフレームを作成するには、http：//foundation.zurb.comにアクセスして、ダウンロードリンクをクリックするだけです。パッケージをカスタム調整するための一連のオプションを提供するページが表示されますが、この例では、[ FoundationCSSをダウンロードする リンクして離れて行きます。その他の便利なリンクは、ワイヤーフレームで再利用できる既製のサンプルのFoundationのドキュメントページとテンプレートページです。
ZIPファイルがダウンロードされたら、ワイヤーフレームを保存するシステム上の任意のフォルダーに解凍し、フォルダーのタイトルを意味のあるものに変更します。たとえば、 acme-project。フォルダを開くと、中には help.html ファイル、 index.html ファイル、 humans.txt ファイル、 robots.txt ファイル、およびCSS、画像、JavaScript用のフォルダー。を開きます index.html ファイルを作成し、それを出発点として使用します。 bodyタグ内のすべてのサンプルコンテンツを削除するだけです。これにより、準備が必要な基本的なページ構造が得られます。自分で作成する場合に注意すべき重要な点 .html ファイルは以下のとおりです。
- 追加します normalize.css あなたの頭に：
リンクrel = "stylesheet" href = "css / normalize.css" />
- 追加します Foundation.css あなたの頭に：
リンクrel = "stylesheet" href = "css / Foundation.css" />
- 追加 modernizr.js あなたの頭に：
スクリプトsrc = "js / vendor / custom.modernizr.js"> / script>
- ドキュメント本文の最後にjQueryとさまざまな基礎スクリプトを追加します（サンプルを参照） index.html これらのファイル）。
財団グリッドシステム
Foundationの使用を開始するために理解したい最初の、そしておそらく最も重要なことは、そのグリッドシステムです。これは12列のグリッドであり、完全にネスト可能で流動的です。アイテムにクラスを追加するだけでグリッド幅を割り当てることで、非常に高速に作業できます（たとえば）。
グリッドを使用して要素に幅を割り当てる場合、小さい画面と大きい画面の両方に幅を割り当てることができます（Foundationに組み込まれている2つのデフォルトの「ブレークポイント」）。 xは、割り当てられたグリッド列の数です。たとえば、小さな画面では、 small-x列 または大画面で、 large-x列。を使用して、グリッドの新しいインスタンスを作成できます。 行 ラッパー要素のクラス。したがって、以下の例では、小さな画面では幅全体に広がり、大きな画面では幅の半分だけに及ぶ要素があります。
div> div> ... / div> / div>
上でスケッチしたワイヤーフレームの例では、小さな画面では全幅にまたがる合法的なテキスト領域がありますが、大きな画面では半分しかありません。これは次のように実行されます。
div> div>…/ div> / div>
また、Foundationのグリッドはモバイルファーストであるため、割り当てる必要があるのはグリッド幅が小さいことだけです。小さい幅のみを割り当てる場合、大きい画面サイズは小さい割り当てを維持または継承するだけです。以下の例では、要素の幅は、小さい画面サイズと大きい画面サイズの両方で8列になります。
div> div> ... / div> / div>
また、単純なクラスを使用することで、オフセット、センタリング、プッシュまたはプルなどを実行して、ソースの順序に反して設計することができます。次の例では、要素は小さな画面では全幅にまたがりますが、大きな画面では10列にまたがりますが、列2〜11ではそうします。
div> div>…/ div> / div>
次の例では、要素は小さな画面の12列のうち最初の9列にまたがっています。大画面では、9列の幅にまたがりますが、中央に配置されます。
div> div> ... / div> / div>
次の例では、最初の要素は12列の最後の2つにまたがり、2番目の要素は12列の最初の10にまたがります。
div> div> 2 / div> div> 10、last / div> / div>
ナビゲーションの設定
Foundationには、ワイヤーフレーム内で使用できるように事前に作成されたいくつかの異なるナビゲーションパターンがあります。ワイヤーフレームでは、画面上部にサイト名を含むナビゲーションメニューが表示され、小さな画面には簡単なメニューリンクが表示されます。ありがたいことに、Foundationの説明に一致するプリベークされたナビゲーションコンポーネントがあります。以下は、これを実現する方法の例です。体の上部に、次のものを追加します。
nav> ul> li> h1> a href = "＃">サイト名/ a> / h1> / li> li> a href = "＃"> span> Menu / span> / a> / li> / ul>セクション> ul> li> a href = "＃"> About / a> / li> li> a href = "＃"> Portfolio / a> / li> li> a href = "＃"> Contact / a> / li> / ul> / section> / nav>
念頭に置いていたナビゲーションスタイルをどのように実現したかを分析してみましょう。
- を作成します ナビゲーション 要素とクラスを追加します トップバー それに。
- を作成します ul クラスを持つ要素 タイトルエリア 私たちのサイト名と小さな画面のメニュートグルを含めるために。
- 私たちのサイト名をとして追加します h1 最初の内 li 私たちの要素 タイトルエリアul、クラスを追加します 名前 それに。
- 別の追加 li クラス名付き トグルトップバー 小さな画面のメニュートグルリンクを含めるため。
- クラスを追加する メニュー-アイコン に トグルトップバーli 小さな画面のメニューリンクにメニューアイコンが表示されるようにします。
- を作成します セクション クラスを持つ要素 トップバーセクション 実際のメニューを含める ul.
- 以内 トップバーセクション 作成する ul どちらかのクラスで 正しい または 左 （メニューの配置によって異なります）。この ul メニューリンク付きのリストアイテムが含まれます。
ブロックグリッドの作成
次に、ワイヤーフレームスケッチは、ポートフォリオアイテムのグリッドビューを示しています。これは、小さな画面では2つのアイテム幅、大きな画面では3つのアイテム幅です。 Foundationは、プリベイクを提供することにより、このようなブロックグリッドを非常にシンプルにします small-block-grid-x そして large-block-grid-x 任意のul要素で使用できるクラス。ポートフォリオアイテムのブロックグリッドリストを作成するには、次のマークアップを使用します。
div> div> ul> li> a href = "＃"> img src = "http://placehold.it/290x410&text=item+1"> / a> / li> li> a href = "＃"> img src = "http://placehold.it/290x410&text=item+2"> / a> / li> li> a href = "＃"> img src = "http://placehold.it/290x410&text=item+3 "> / a> / li> li> a href ="＃ "> img src =" http://placehold.it/290x410&text=item+4 "> / a> / li> li> a href ="＃ " > img src = "http://placehold.it/290x410&text=item+5"> / a> / li> li> a href = "＃"> img src = "http://placehold.it/290x410&text=item +6 "> / a> / li> / ul> / div> / div>
最初に定義したのは 行 ラッパーと、12列すべてにまたがるように設定されたコンテナー。これは、ブロックグリッドが画面の端まで伸びないようにするためですが、同じパディングを維持し、 最大幅 グリッド内で定義された残りのアイテムとして。
HTMLワイヤーフレーミングを試してみる力を感じていただければ幸いです。これは、Webデザイナーになるのに素晴らしい時期です。私たちが行うことをよりエレガントに効果的で理解しやすくするために利用できるツールがたくさんあります。
言葉： Jared Ponchot
この記事はもともとネットマガジン246号に掲載されました。
