webデザイナー学習記録帳

webデザインやwebに関する学んだことの学習記録帳です

ワイヤーフレーム・デザインカンプ入門 -ワイヤーフレームの作り方-

オンライン動画学習サイトのschoo(スクー)にて視聴した動画の

動画の中で重要だなと思った部分や学習した事の自分メモです

今回の動画は、全部で4限ある授業の2限目

ワイヤーフレーム・デザインカンプ入門(全4回) - schoo WEB-campus(スクー)

この動画のアジェンダ

ワイヤフレームの作法や定義はチームや人によって異なる

  • とりあえずわかればいいよ派
  • 制作転用するので、ちゃんと作り込んで派
  • 引き継ぎが容易になるから、テンプレも決まっているチーム
  • MTGの場でディレクターや営業が描いてくる
  • ワイヤーいりませんといったの「ざっくりしたレイアウトを」下さいというクライアント

作る人にっよても微妙に異なる

  • 制作環境の違い(ディスプレイなど
  • アプリケーションの違い
  • スキル、経験の違い

ワイヤーフレームを構成する3大要素

  • 画像、テキスト、短形

f:id:lovedeluxe5914smh:20151010151745p:plain

割とよく使う要素

  • リンク(ボタンなど、線(hrやborderなどを表現、フォーム要素

f:id:lovedeluxe5914smh:20151010153114p:plain

ワイヤーフレームを描くツール

  • オモニグラフ(岡本先生が主に使っているmacツール
  • cacoo(カクー)

ワイヤーフレームをいきなり描けといわれても大変なので

Googleのトップページのワイヤーフレームを描く

f:id:lovedeluxe5914smh:20151010153959p:plain

まずは、青山先生がパワーポイントで作成する

私も先生のを見ながらPowerPointで描いてみました

f:id:lovedeluxe5914smh:20151010162345p:plain

 

次は、岡本先生が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で作り直している