webサイト制作の基本的なワイヤーフレームの話お役立ちブログwebサイト制作の基本的なワイヤーフレームの話2018/10/5はじめにウェブ業界においてもワイヤーフレームの作り方がわからない、正式な作り方を本当は知らないと言うディレクターやデザイナーは意外に多いと聞きます。理由は様々で、転職や就職して初めてウェブ業界に入った、もしくはディレクターとして独学でやられてきた方など。「イメージはあるけどうまくまとまらない・・・」と画面とにらめっこして時間だけが過ぎて上司や先輩に注意されている事でしょう。世間のディレクターが使っているツールにはどんなものがあるのか?をご説明したいと思います。熟練のディレクターが見たら、至極当たり前の事や、もっといいやり方があるよ!というご意見があると思いますがそういった方々向けと言うことで容赦いただければと思います。3次元形状のモデリングやレンダリングの手法のひとつで、立体の辺だけから成るような線の集合で表現するものである。引用元:Wikipedia———————-とあります。コンピューターを使用した業務の負担を軽減する為の型枠なようなものと解釈されているいるようです。この記事であげているワイヤーフレームとは、webサイトのレイアウトを定める設計図のことです。ページ上のどこに・何を・どのように、ディレクターのどんな意図で配置しているかを詳細に記してあります。クライアントとディレクター(制作チーム)の間でお互いの認識を共有する為のwebサイト構築の重要なドキュメントです。ワイヤーフレームの役割ワイヤーフレームの役割とはなんでしょうか。前述のとおり、「クライアントとディレクター(制作チーム)の間でお互いの認識を共有するため」に存在すると思います。制作チームメンバーや営業さんが見ても「どういうwebサイトなるか」「どういう機能があるのか」という質問をされた時に、ワイヤーフレームという設計図を基にすることで共通認識において話しをすることができるという事です。メンバーの入れ替えは途中で報告する際に、ワイヤーフレームがあれば認識の引継ぎも問題ありません。製作チームであるディレクター、デザイナー、コーダーの環境でも共有できるツールが望ましいと思います。いったツールの中で、私がメインでしているのは、Microsoft社のパワーポイントです。過去様々なツールを使用して来ましたが、一番普及している点でパワーポイントに落ち着きました。人によって適したツールは異なると思いますので、幾つかご紹介したいと思います。<パワーポイント>言わずと知れたMicrosoft社のプレゼンテーションツールです。Webサイト用のワイヤーフレームツールではありませんが汎用性が高い為、ワイヤーフレーム作成ツールとして使われています。・WindowsとMac間でやり取りすると、レイアウトやフォントサイズが変わる事がある・ワイヤーフレーム専用ではないので、ツールが乏しい・webページ用のフォーマットが無いので縦長の場合、ページが分割される場合がある<Cacoo>オンラインで利用できるワイヤーフレーム作成ツールです。専用ツールなので、オブジェクトパーツが豊富に揃っています。・インターネットが無い環境では使えない・無料版だと利用制限があるさいごにワイヤーフレームは、お客様の意向とディレクターの意向を上手にミックスした要素の集合体です。最初ごちゃごちゃしているのは当たり前です。手書きでも何でも良いのでノートなどにアウトプットして見える化し、そこから整理を始めてみてはいかがでしょうか。XD>Adobe社製のUI/UX制作ツールですが、ワイヤーフレームがそのままプロトタイプとして利用できます。モバイルファースト時代において、パソコン用だけでなく、スマートフォン用の動きも同時にクライアントと調整できます。Adobe社製なので、デザイナーやコーダーとの親和性もあり、今後ぜひ検討したいツールです。ホームページ(WEBサイト)を作成する方法は「自分で作成」「ホームページ(WEBサイト)業者に依頼」の方法があります。ドメインとは、言い換えるとインターネット上の「住所」です。ホームページを公開する際に欠かせないものですが、実はよく分からないという方が多いのではないでしょうか。WEBデザイナーの仕事は、制作会社の場合、クライアントからWEBサイトの制作を依頼されたものをデザインするのが一般的です。インターネットやスマートフォンの爆発的な普及に伴い、Webサイトのデザインは時代に合わせて大きな変化を遂げ続けています。