Web制作・運営・解析・SEO用語集

ワイヤフレーム

ページの全体像の骨組みを設計した図面のことをいいます。

概要

ワイヤーフレームは、Webサイトやランディングページ制作において、デザイン設計前に大まかな全体像の骨組みを図にしたものになります。
どの部分にどんな情報を載せるかや、どこにどんなキャッチを入れるかといった図を先方へ提出し、決定した内容をもとにデザインを構築していく流れになります。

ワイヤーフレーム段階ではコピーや画像を差し替えるなどして複数案出力が必要となるケースが多いです。
それゆえ、方向性が定まった状態でデザインに入れる状況を作っておけば、スムーズに工程が進みやすくなります。

ワイヤーフレームは先方の要望を満たすために必要なレイアウトを策定するので、先方の思惑と制作会社の思惑にズレが生じやすいため、
認識合わせを行ったり、妥協点を折衝する必要があったりと進行が滞ることも多く、何かとストレスのたまりやすい工程になります。

ここではディレクターの腕が試される工程ともいわれております。

この用語のメモ

個人差はありますが、ワイヤーフレームはパワーポイントで作ることも多いですしillustratorを使用することも多いです。
ただ、この段階ではそこまで詳細に作り込む必要はないので、先方に必要と思われる情報を掲載し、説明できる状態を持っておくことが大事です。

ワイヤーフレームは1回作成で通ることはほとんどなく、繰り返し打合せで必要・不要要素を取捨選択していくことで何度か修正を行い、ワイヤフレームが出来上がってきます。
当然ながらユーザーインターフェースユーザビリティ、インタラクティブ性も問われることも説明の必要性も発生します。
デザインを経て出来上がったサイトが最終的にワイヤフレーム時に作成した意図通りに出来上がっているかをジャッジするのもディレクターの腕が試されます。

この用語の使いどころ

上流工程に当たる作業なので、初期の打合せからデザインカンプまでの長い期間、ワイヤーフレームを用いてやり取りを行います。
ディレクターのワイヤーフレームを順守したい思惑とデザイナーの表現力部分での衝突は多いですが、そういったやり取りも含めて「制作」ではないかと思います。

良いサイトができた裏には何かしらエピソードができるものです。それらすべて含めて「制作の醍醐味」と捉えられるようになれば素晴らしいことです。

関連用語

Web担当・運営・解析・SEO問題集の例題問題

ワイヤフレームに関連するジャンルの練習問題を掲載しています。Web担当・運営・解析・SEO問題集一覧から各ジャンルの問題にチャレンジできます。
クリックすると問題の答えと解説が見れます。

Q:次のタグの説明で正しいものを選んでください。
  • divタグは段落タグと言い、タグの中に文章や画像などのコンテンツが入る
  • h1タグはタイトル名が入るタグである
  • pタグは段落タグと言い、タグの中に文章や画像などのコンテンツが入る
  • ulとliはリストタグで、順序があるリストである

この答えの解説

pタグが段落タグと呼ばれます。
divタグは汎用タグ、h1は見出しタグ、ul・liタグのulはunordered listの略で、順序のないリストを示しています。

Q:次のタグのうちHTML5で使用できないタグを選んでください。
  • iframeタグ
  • strongタグ
  • textareaタグ
  • fontタグ

この答えの解説

fontタグは、HTML5では廃止されました。
CSSのfont属性でサイズ調整やカラー調整を行い、要素のフォントに装飾をつけましょう。

Q:h1~h6タグの入れ子(直下に入るタグ)で不適切なものを選んでください。
  • canvasタグ
  • iframeタグ
  • 不適切なものはない
  • imgタグ
  • buttonタグ

この答えの解説

実は全て入れ子にできるタグです。しかし、あくまで「見出しタグ」であることをきちんと理解したうえでタグを使用しましょう。
見出しなのに画像や別フレームなどが入ると構造的に非常におかしい形になってしまいます。

Q:ユーザーエクスペリエンスの説明として正しいものを選んでください。
  • ユーザーが体験したサイトの情報を公開すること
  • ユーザーのために技術者やデザイナーが経験を得ること
  • ユーザーがWebサイトなどのサービスや情報を利用することで得られる経験のこと
  • 閲覧されたユーザー数に応じて技術者が得られる経験を数値化したもの

この答えの解説

ユーザーエクスペリエンスは、製品やサービスを使用することで得られる経験のことを言います。
Web分野においては、如何にしてWeb内におけるサービスやコンテンツに満足できるサイト構築を達成できるかが大切で、マーケティング担当やディレクター担当、特にサイト構成を作るメンバーにおいて最も要求される要素になります。

Q:トーンマナーの説明として正しいものを選んでください。
  • デザインやクリエイティブの表現をルール化したもの
  • デザインのトーンをある一定数より下げないようルール化したもの
  • デザインの質やイメージを担保するもの
  • デザインのトーンに余計な追加をしないようルール化したもの

この答えの解説

販促物を制作する際、何故決められた表現を取り入れるのか。
トーンを統一化することは、そのブランド「らしさ」を表現することにつながり、ひいてはデザイン意図や意味の根拠の認識を担当者レベルで共有できるものになります。

Q:レスポンシブデザインの説明として正しいものを選んでください。
  • PC用サイトでは表現できないデザインのこと
  • 一つのページ(URL)で使用OSや画面、ブラウザを問わず閲覧をサポートしているデザインのこと
  • モバイル版のGoogleクローラーに読み取られるデザインのこと
  • スマートフォン用のサイトを制作するデザインのこと

この答えの解説

レスポンシブデザインは、一つのページ(URL)で使用OSや画面、ブラウザを問わず閲覧をサポートしているデザインのことをいい、一つのページであらゆる画面に対応できるため、テキストや画像の更新は当該ページ1つ更新するだけですべてのブラウザ対応が完了します。
主にはCSS内で特定の画面サイズになるとレイアウトが変わるようにプログラムを組むことで実装されます。

Q:直帰率の説明で正しいものを選択してください。
  • サイトに訪れ、いくつかページを見てサイトから離れた割合
  • サイトに訪れ、他のページを見ずにサイトから離れた割合
  • サイトから離れて、サイトに戻ってきた割合
  • サイトから離れて、後日サイトにアクセスした割合
  • サイトに訪れ、1時間後再度訪れた割合

この答えの解説

直帰は、ユーザーがサイトに訪れた最初のページにおいて、他の下層ページやカテゴリーページなどに遷移せずにサイトから離れる行為を言います。
直帰したユーザー数÷サイトに訪れたユーザー数が直帰率として計測されます。

Q:ユーザーエクスプローラで解ることを選んでください。
  • ある特定のユーザーの行動履歴から、コンバージョンに至ったルートを解析できる
  • ある特定のユーザーが購入などをしてコンバージョンをし、目標に寄与した割合を見ることができる
  • ある特定のユーザーの年齢や性別などのパーソナルデータを見ることができる
  • ある特定のユーザーの入力フォームの内容を辿ることができる

この答えの解説

ユーザーエクスプローラはあるCookie情報を持ったユーザーの閲覧履歴を追跡できる機能です。
コンバージョンに至るまでの中間ページや滞在時間等から、なんの情報記載を元に行動に移したのかの推測や仮説が立てられるようになります。

Q:「referrer」(リファラ)の意味で適切なものを選択してください。
  • 自サイトを紹介して流入した数
  • クリックされた数
  • 他のサイトから自サイトを検索された数
  • 他のサイトから自サイトを参照し流入した数
  • 他のサイトへ自サイトから遷移した数

この答えの解説

referrer(リファラ)とは、何らかの形で他のサイトから自サイトへ流入(参照)された際に計測されます。
計測したサイトはドメイン名などが表示されます。

スポンサードリンク

関連タグ【Web制作】に関するよくある質問

Web制作に関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。

Web制作って具体的には何をしますか?

全体的な工程としては、「打ち合わせ」「納期・見積」「サイトマップ」「構成案(ワイヤフレーム)作成」「デザインカンプ」「デザイン制作」「コーディング」「校正・テスト・品質管理」「公開」「運営・運用」をトータルとした工程になります。
これだけでもかなりの工程数になるかと思います。

各工程には普通、「納期」を設定しているため、各工程が遅れてくると、他の工程のスケジュールが圧迫されてしまい、タイトなスケジュールをこなさなくてはならなくなります。

ディレクターは主に前半の「打ち合わせ」から「構成案(ワイヤフレーム)作成」までを担い、あとは品質チェックや進行管理を中心に行います。

デザイナーは「デザインカンプ」及び「デザイン制作」、コーダーは「コーディング」と「校正・テスト」をそれぞれ担う形となり、Web制作の分業化が進んだ今、ざっくりですがこういった形で業務が行われています。

Web制作に必要なソフトを教えてください。

製作工程に応じて使いやすいソフトが大筋決まっていることが多いです。

構成案やサイトマップを作る際はMicrosoftの「Excel」や「PowerPoint」が鉄板です。
大まかなデザイン枠を作る分にはPowerPointがあれば十分作れますし、サイトマップやスケジュール・見積もりなどの情報は、Excelがほとんど使われることが多いです。
いずれもPDFに手軽に変換できる点も非常に使いやすい要因となっています。

デザイン面では、Adobeの「Illustrator」か「Photoshop」が鉄板で、まれに「Fireworks」を使用しているユーザーもいます。
一般的に紙媒体もやっている企業では、「Illustrator」を使用してサイトデザインを制作しているケースが非常に多いです。

コーディング等ではAdobeの「Dreamweaver」がもっとも有名ですが、テキストエディタでコードを作成できる力があれば、ワードパットソフトの「Terapad」やGithubが提供している「Atom」も非常に使いやすいです。
コーディング面においてはファイルのエンコードとHTMLやCSS記載のエンコードをあわせないと文字化けも起こしてしまうので、個人的には「Terapad」が使いやすいと感じています。

運用面、特にアクセス解析などにおいてはこちらもMicrosoftの「Excel」や「PowerPoint」が非常に使われます。ツールとしては「Googleアナリティクス」と「Googleサーチコンソール」を使います。
Excelはうまく使えば得られたアクセス情報からさらに様々な視点でのアクセス情報を拾い出すこともできるため、Excelを使いこなせることができれば大きな武器になります。
アクセス解析等はディレクターが兼任しているケースも多いです。

ざっと上げましたが、全てを担当する場合は「Excel」「PowerPoint」「Illustrator」「Photoshop」「Dreamwerver」「Googleアナリティクス」「Googleサーチコンソール」の7つをマスターすることで大半の業務が行える形になります。
浅く広く習得するか、深く狭く習得するかは得手不得手で決めればよいのではと思います。

CSSの最大の利点を教えてください。

何より少ない容量で「ある程度の動的動作」や「サイトの整形」が出来る点だと思います。
また、手軽にスマホサイト対応ができる「メディアクエリ」が使用できるのも大きな利点で、こんにちのモバイル対応を支えているものになります。

CSSは、手段を覚えておけば覚えておくほど、レイアウトの調整手段が増えてくるため、容量を抑えつつ動作を行えるソースが作れます。

関連タグ【マーケティング】に関するよくある質問

マーケティングに関するよくある質問を抜粋しています。マーケティング・Web運営に関するよくある質問はこちらから。

絶対にやった方がいいSEOは何ですか?

一言で言えば、「ホワイトハットSEO」を目指した取り組みになります。

SEOは、検索エンジンで上位表示されるように内外部の施策を行っていきますが、とくにホワイトハットSEOでは「検索意図」をしっかり吟味した上でその検索内容にふさわしいコンテンツをつくり、ユーザーに適切な情報を与えられるサイトと評価されるように取り組むものになります。
検索をして、ページに入ったユーザーが「役に立つ」と感じるサイトであることが重要で、昨今の「コンテンツSEO」が最重要とされている理由です。

そして、コンテンツをしっかり作ったとしても、それがきちんとGoogleの検索エンジンに認識されなければなかなか検索エンジン側へ反映されません。
したがって、文法上正確なHTMLタグを設置し、Googleの検索エンジンに情報がしっかり流れるようにするためのコーディングが必要です

マーケティングでまず大事なことは何ですか?

競合他社のベンチマークがまず挙げられると考えています。

Webサイトのデザインを作成するときもテーマ別に参考になるサイトを見てデザインを起こすことが多いです。

もちろんマーケティングにおいてもできるだけ同じか、似た商材を扱う競合他社をしっかり知る事が自社サービスの醸成につながる近道です。

急激にインデックス数が減ってしまいました。どうしたらよいですか?

長く情報が更新されていない場合、インデックスのクロール頻度が下がり、インデックスから外れる可能性があります。
単一ごとのページを一つ一つ更新する必要はありませんが、文章を変更したり、ページを追加したりなど、サイトを常に成長し続けられる状態を保ちましょう。
そして更新したら、常にsitemap.xmlを作成し最新の情報をGoogle側に届けるようにしてください。

専門知識が薄く困っています。何から覚えればよいですか?

現在実務で行っている方は、専門知識よりも自社・自社サービス知識を覚える方が最も良いです。
なぜならば、自社サービスに興味を持ってもらうためにどのような言い回しが良いか、伝わるかの基準を持てるからです。いわば、営業担当と同じです。

一個人の考えではありますが、これからマーケティングやWebサイト運営の勉強をされる場合においては、「正しい情報の集め方」を覚えることが近道かと考えています。

自身の「提供したい情報」がどんな検索キーワードで来てくれるのか、またそういった「検索してくれた人をどうさせたいか」ということを考えることがWebでのマーケティングや運営の第一歩になるのではないかと思っています。

絶対にやってはいけないSEOは何ですか?

一言で言えば、「ブラックハットSEO」全般に言えることです。
検索結果を欺くような対策は、かなり早い段階でGoogle検索エンジンからの「手動による対策」が行われてしまいます。

具体的には不要な外部リンクの設置やコンテンツの書き写しなどが上げられます。
この対策が横行していたときは、本来検索結果に上がってはいけないものが検索結果に表示されてしまうため、Google検索エンジンのリソースを大幅に消費してしまう事態を招いていました。

最近では不要なサイトはインデックス登録自体がされないように対策されているため、なかなかインデックスが増えてこない場合はサイト全体の情報品質を疑ってみたほうが良いかもしれません。

関連タグ【アクセス解析】に関するよくある質問

アクセス解析に関するよくある質問を抜粋しています。アクセス解析に関するよくある質問はこちらから。

アクセス解析レポートを作るうえで大切なことは何ですか?

まずは必要以上に情報を入れすぎないようにした方がよいでしょう。
沢山記載することは大切ではありますが、数値を見てもらい理解してもらうには沢山の情報は邪魔になります。

具体的には、資料のボリュームと話するボリュームが同じ位に量を調整すると伝わりやすいです。

Googleのアカウントをとった後、何をすればよいですか?

Googleアナリティクスのサイトに移動し、ログインしてアカウントに入場してください。
なお、アカウント登録した直後であれば、なにも登録されていないはずです。

Googleアナリティクスを見るにはどうしたらよいですか?

Googleアナリティクスを閲覧するには、まずGoogleアカウントが必要です。
何らかの連絡の取れるメールアドレスをお持ちであれば、Googleのログイン画面より新規アカウント作成を行ってください。

どんなレポート内容が喜ばれることが多いですか?

単純明快に「ここがよい」「ここが悪い」がはっきりしたグラフや数値の表記と、それに対するコメントや提案を記載していると、議論が進みやすく喜ばれやすいです。

複雑にしすぎると、概要が頭に入らなくなりがちになるため、「で、結局何が悪いの?」と打ち合わせの後半で陥る可能性があります。

年齢別や地域別のアクセスはどんな時に使いますか?

一例ですが、特定の地域や年齢層、それから男女どちらかまたは両方に大きく支持されているのであれば、支持された層のトレンドを狙ったコンテンツや広告ワード、閲覧されてる時間帯に広告費用をかけるなどといった費用投資判断の指標に使えます。

ユーザーエクスプローラーの活用方法を教えてください。

ユーザーエクスプローラは個人個人が持っているtoken情報をもとにユーザーを追えるものになります。
その性質から「サイトの遷移」「再訪頻度」「コンバージョン後の行動」等も追えます。

コンバージョンまでどうしたか、だけでなくコンバージョン後に何をしているかを見ていくことで「どんな情報を探しているか」「その情報をどうしたら見つけやすくなるか」といった対策をたてられます。
すなわち、再訪率の向上やシェア獲得率の向上にむけた改善に取り組むことができます。

索引から探す

タグから探す

よくアクセスされている用語

その他カテゴリー

Webサイトトップページに戻る

スポンサードリンク