ワイヤーフレーム・デザインカンプ入門 -ワイヤーフレームの作り方-
オンライン動画学習サイトのschoo(スクー)にて視聴した動画の
動画の中で重要だなと思った部分や学習した事の自分メモです
今回の動画は、全部で4限ある授業の2限目
ワイヤーフレーム・デザインカンプ入門(全4回) - schoo WEB-campus(スクー)
この動画のアジェンダ
ワイヤフレームの作法や定義はチームや人によって異なる
- とりあえずわかればいいよ派
- 制作転用するので、ちゃんと作り込んで派
- 引き継ぎが容易になるから、テンプレも決まっているチーム
- MTGの場でディレクターや営業が描いてくる
- ワイヤーいりませんといったの「ざっくりしたレイアウトを」下さいというクライアント
作る人にっよても微妙に異なる
- 制作環境の違い(ディスプレイなど
- アプリケーションの違い
- スキル、経験の違い
ワイヤーフレームを構成する3大要素
- 画像、テキスト、短形
割とよく使う要素
- リンク(ボタンなど、線(hrやborderなどを表現、フォーム要素
ワイヤーフレームを描くツール
ワイヤーフレームをいきなり描けといわれても大変なので
- すでにあるサイトを題材にして、ワイヤーフレームをまず描いてみる練習をする
まずは、青山先生がパワーポイントで作成する
私も先生のを見ながらPowerPointで描いてみました
↓
次は、岡本先生がPhotoshopで作成します
今回、最新のPhotoshopでの使ってみてほしい機能を紹介したくて
Photoshopで描くようです
Photoshopのテクノロジープレビューというものに切り替えて作業する
環境設定から設定を変更する
現時点では、英語ですが選択ツール、図形、テキストと、とてもシンプルな作りで
直感的に操作できます
Adobecc2015から追加された機能だそうです
OmniGraffle(オムニグラフ)でワイヤーフレームを作成
公式サイト→https://www.omnigroup.com/omnigraffle
岡本先生が、ワイヤーフレームを作る時に使用しているソフト
macの歴史のあるドローイングツール、フローチャートを作る時に
よく使われるそうです
ステンシルとういう素材を使ってワイヤーフレームを作ることができる
テンプレートの中の960グリッドというのがあって、webサイトでよく使われるグリッドシステムの横幅960pxのグリッドが最初から引かれている
ボタンを作りそれをコピペして隣におく、そしてさらにコピペすると自動で同じ位置に揃えてくれるなどの便利な機能もあるそうです
スタンダード版:1万円くらい プロ版:2万円くらい
※公式サイトでは、無料体験版もあり
本格的なwebサイトのワイヤーフレームを作る
まず、青山先生がPowerPointで
岡山先生がAdobecnmoを使って実際にワイヤーフレームを作成していきます
あっという間にワイヤーフレームを作ってしまいました
そして、作ったワイヤーフレームはCCに転送できるので、すぐに作業に取り掛かる事ができるそうです
複雑に見えるwebサイトでも構成要素は、実はそれ程でもないことがある
宿題
タイムズカーのサイトのwebサイトのワイヤーフレームを作ってみよう
カーシェアリングをご検討の方へ | カーシェアリングのタイムズカープラス
まとめ
質疑応答
【質問】
縦スクロールのサイトのワイヤーフレームはどう作っていますか?
【回答】
全体の要素がわかるように、ざっくしたワイヤーを一つ作り
別ページに各コンテンツを切ったところを貼って詳細を描き込んでいく
【質問】
サイト幅は、どのくらいにしていますか?
【回答】
たいてい1024px、クライアントのもってるPCの幅に合わせたりもする、既存のサイトを持っているクライアントならアクセス解析から分析して幅を決めたりする
一般的に参考にされているサイトは、証券会社、銀行、車のサイトなど人がたくさん訪問するサイト、ソースをみて1096pxなど、なんで端数なんだろうと考えたりする
PowerPointでワイヤーフレームを作成するとピクセルの精度が気になる
まずは、PowerPointで素早く作成してからPhotoshopで作り直している