レッスン２ 和の趣と高級感を演出する
こちらの本のレッスン２の記事です
↓
架空の旅館のwebサイトのサンプルが載っています
- 雰囲気
- 和風/落ち着いた/高級感
- ターゲット
- ３０代から６０代
- 架空設定
- 隠れ温泉宿「朱泉閣」料金は他の温泉宿より少し高め
- 広い客室と豪華な料理で人気
- 老舗宿
- 主なお客様は、口コミとリピーター
- 目的
- 新規来客数アップと認知度アップのためサイト立ち上げ
- 本に書いていあるポイントとしては
- 老舗旅館なのでしっとり和風に
- 雰囲気環境が伝わるように写真は大き
- 縦書きレイアウト
- 予約ができるかすぐわかるように
- 上品に魅せるために大きい動きにせずシンプルに
- 配色は日本を感じさせる落ち着いた配色
- 和紙などの質感で和風を表現
まずは、サンプルサイトのワイヤーフレームを書いてみます
18ページに先生が手描きて描いたワイヤフレームの見本サンプルが載っているのでそれを参考にします
方眼紙までは、用意したのですが
先生のを見るとまずは、ピクセルはワイヤフレーム段階では描いていいないので、私もそうします
（これは、ケースバイケースで人によってやり方が違うと思いますが）
描いてみたのですが、ワイヤーフレームというよりは、模写になってしまいました
そこでもう一度ワイヤーフレームについて学ぼうと思い
スクーのこちらの動画をみました
↓
Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】 - webデザイナー学習記録帳
ワイヤフレーム段階でかなり描き込む人と、ただの四角と丸などの人もいたり
それぞれの方達が自分のやり易いやり方でやっているんだなと思いました
本の真似をして、id名とクラス名をイラレを使用して
つけてみました
↓
明日は、さらに進めていこうと思います！
Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】
スクーの今回の動画
Webデザインの骨組み「ワイヤーフレーム」を学ぼう【完成編】 - 無料動画学習｜schoo（スクー）
webサイトを制作する際に制作仕様書が必要になる
制作仕様書の基本的な構成のサンプル
（↓アスキーの連載が紹介されていました）
ASCII.jp：Webサイトの品質を保つ制作仕様書の作成｜Webディレクション最新キーワード
制作仕様書策定
もしくは、
プリントアウトして手描きで記入
（キャプチャ画面なので画像です↑）
コーディング時のタグ、名前を全部書き込んでおきて、コーディングしていくと名前がかぶらない
（これを、コーディングルールと言う）
【質問】
HTML5の先生オススメの本は？
【回答】
田中先生オススメの本はこちらだそうです↓
【質問】
web業界で働くのに最低限身につけていないといけないスキルはありますか？
【回答】
フロントエンドエンジニアを例にあげると、jQueryなどは英語なので
色々あるが、英語がもてはやされている
デザインは、絵のうまさではなく黄金律などのスキルなのでツールを毎日毎日使い倒していく
webサイトの基本的な制作手順
人を惹きつける美しいウェブサイトの作り方を購入 - webデザイナー学習記録帳を購入したので、学んだ事などを記事にしています
webサイト設計
- きれいなサイトやかっこいいサイトを作りたいと思いがちだが
- まずは、「こんな人に見てもらいたい」「だからこういうデザインにしよう」と考える
- PC の前に座って真っ白な画面から始めるのではなく、サイトに必要な情報をまとめてから制作に取り掛かる
最低限の情報とは？
サイトを作る目的とゴール
- 何が達成されればゴールなのか（認知度向上、「ブランディング強化」「新規顧客獲得」
ターゲットユーザーとペルソナ設定
- ペルソナとは、架空のターゲット像のこと
- 「３０歳女性、都内一人暮らしのOL、おしゃれなカフェで友人と女子会をするのが好きで」など
- ペルソナに響くようなサイト制作を目指していく。
- 性別などが違うだけでデザインやユーザビリティ、などに違いが出る。
- ターゲットの生活パターンにも注目する。
OLだと時短のが響くかな？や妊婦だと体に気をつかうだろうな？など
コンテンツの洗い出し
- 必要なコンテンツを決定する
- サイトマップとサイト遷移図も作成する
- 更新が必要なページもこの時点で確認しどう更新していくかも決めておく
ページ数の多いサイトは、エクセルで作ったりする
ワイヤーフレーム・デザインカンプ入門 -ワイヤーフレームの作り方-
オンライン動画学習サイトのschoo（スクー）にて視聴した動画の
動画の中で重要だなと思った部分や学習した事の自分メモです
今回の動画は、全部で４限ある授業の２限目
ワイヤーフレーム・デザインカンプ入門（全4回） - schoo WEB-campus（スクー）
この動画のアジェンダ
ワイヤフレームの作法や定義はチームや人によって異なる
- とりあえずわかればいいよ派
- 制作転用するので、ちゃんと作り込んで派
- 引き継ぎが容易になるから、テンプレも決まっているチーム
- MTGの場でディレクターや営業が描いてくる
- ワイヤーいりませんといったの「ざっくりしたレイアウトを」下さいというクライアント
作る人にっよても微妙に異なる
- 制作環境の違い（ディスプレイなど
- アプリケーションの違い
- スキル、経験の違い
ワイヤーフレームを構成する３大要素
- 画像、テキスト、短形
割とよく使う要素
- リンク（ボタンなど、線（hrやborderなどを表現、フォーム要素
ワイヤーフレームを描くツール
ワイヤーフレームをいきなり描けといわれても大変なので
- すでにあるサイトを題材にして、ワイヤーフレームをまず描いてみる練習をする
まずは、青山先生がパワーポイントで作成する
私も先生のを見ながらPowerPointで描いてみました
↓
次は、岡本先生がPhotoshopで作成します
今回、最新のPhotoshopでの使ってみてほしい機能を紹介したくて
Photoshopで描くようです
Photoshopのテクノロジープレビューというものに切り替えて作業する
環境設定から設定を変更する
現時点では、英語ですが選択ツール、図形、テキストと、とてもシンプルな作りで
直感的に操作できます
Adobecc2015から追加された機能だそうです
OmniGraffle（オムニグラフ）でワイヤーフレームを作成
公式サイト→https://www.omnigroup.com/omnigraffle
岡本先生が、ワイヤーフレームを作る時に使用しているソフト
macの歴史のあるドローイングツール、フローチャートを作る時に
よく使われるそうです
ステンシルとういう素材を使ってワイヤーフレームを作ることができる
テンプレートの中の960グリッドというのがあって、webサイトでよく使われるグリッドシステムの横幅960pxのグリッドが最初から引かれている
ボタンを作りそれをコピペして隣におく、そしてさらにコピペすると自動で同じ位置に揃えてくれるなどの便利な機能もあるそうです
スタンダード版：１万円くらい プロ版：２万円くらい
※公式サイトでは、無料体験版もあり
本格的なwebサイトのワイヤーフレームを作る
まず、青山先生がPowerPointで
岡山先生がAdobecnmoを使って実際にワイヤーフレームを作成していきます
あっという間にワイヤーフレームを作ってしまいました
そして、作ったワイヤーフレームはCCに転送できるので、すぐに作業に取り掛かる事ができるそうです
複雑に見えるwebサイトでも構成要素は、実はそれ程でもないことがある
宿題
タイムズカーのサイトのwebサイトのワイヤーフレームを作ってみよう
カーシェアリングをご検討の方へ | カーシェアリングのタイムズカープラス
まとめ
質疑応答
【質問】
縦スクロールのサイトのワイヤーフレームはどう作っていますか？
【回答】
全体の要素がわかるように、ざっくしたワイヤーを一つ作り
別ページに各コンテンツを切ったところを貼って詳細を描き込んでいく
【質問】
サイト幅は、どのくらいにしていますか？
【回答】
たいてい1024px、クライアントのもってるPCの幅に合わせたりもする、既存のサイトを持っているクライアントならアクセス解析から分析して幅を決めたりする
一般的に参考にされているサイトは、証券会社、銀行、車のサイトなど人がたくさん訪問するサイト、ソースをみて1096pxなど、なんで端数なんだろうと考えたりする
PowerPointでワイヤーフレームを作成するとピクセルの精度が気になる
まずは、PowerPointで素早く作成してからPhotoshopで作り直している
ワイヤーフレーム・デザインカンプ入門 概要と役割
オンライン動画学習サイトのschoo（スクー）にて視聴した動画の
動画の中で重要だなと思った部分や学習した事の自分メモです
今回の動画は、こちら↓
全部で４限ある授業の１限目ワイヤーフレーム・デザインカンプ入門 -概要と役割- 岡本 紳吾 先生 - 無料動画学習｜schoo（スクー）
ワイヤーフレーム・デザインカンプ入門
- 1限目 ワイヤーフレーム・デザインカンプ入門 -概要と役割-
- 2限目 ワイヤーフレーム・デザインカンプ入門 -ワイヤーフレームの作り方-
- 3限目 ワイヤーフレーム・デザインカンプ入門 -デザインカンプの作り方-
- 4限目 ワイヤーフレーム・デザインカンプ入門 -制作実演-
ワイヤーフレームはデザインの入り口
ワイヤーフレームを出先などでもささっと描けるアプリの情報
デザインカンプの利用シーン
- webサイトに不慣れなクライアントでも理解しやすい
制作の現場は、さらにスピーディーに
- PhotoshopのExtract（エクストラクト）（抽出）機能
iPhoneのアプリで手描きする
リンクはこちら↓
質疑応答
【質問】
- 青山先生・・・パワーポイント
- 岡山先生・・・色々なツール
青山先生は、企業様相手が多いのでクライアント側の環境に合わせる意味でも
オフィスのパワーポイントで作っているそうです
岡山先生は、ツールなどが好きなので色々なツールで作ったりしていて青山先生にファイルを渡そうと思っても開けない時があるので、そんな時はPDFで渡しているそうです。
CSS3で吹き出しを作る
参考になるサイト様
