メディアデザイン演習4β
06 サイト製作ヒアリング

サイト製作ヒアリング

先週までは、実際にHTMLを書いて行きながら、その基本的な方法や考え方を学びました。 これらを組み合わせていくことによってウェブサイトのデザインを作り上げて行きます。 しかし、HTMLを使う部分は、ウェブサイトのデザインのうち、ある一部分でしかありません。
次週本格的な企画書を提出してもらおうと思っています。

引き続きラフ企画書を元に、どんなサイトにしていきたいのか、話を聞いて行きます。
参考例などがあれば、見せて下さい。


どんなウェブサイトにするか

制作内容は自由にします。
ただし、

・全世界に公開しても問題の無い内容にすること
・ブログ(日記的)などの雑多なコンテンツの集積ではなく、一定のテーマや対象が決まったもののほうが好ましい
・自分ならではの着眼点や切り口を持って作成すること。(もうすでにあるものや自分が作らなくてもいいものではないよう考える)
・素材や文章は自分で責任を持って作るもしくは依頼して集める事
 
・トップページ以下、複数ページを行き来するつくりにすること


企画書制作

参考になりそうなウェブサイトや書籍などを使って、企画をまとめていきましょう。
自分用のメモではなく、 企画書を読んだだけでどんなものになるのかが把握できるような、外に向けての資料としての企画書にしてください。


 企画を考える

何故つくるのか 自分が作らなければならない理由はどこにあるか
誰が見る/どう感じる/どのような関係を築きたい
そうするためにどんな内容をどのように見せるか

こんな感じにしたいという類似例をいろいろ集めて分析してみる(オンラインブックマークを活用すると良い)


企画書を書く

ターゲット
コンテンツ/掲載するもの・文量・分類
構造/リンクなどの方法や見せ方
視覚的要素/全体的なグラフィックの方向性をスケッチ(参考になりそうなウェブサイトなども活用する)
時間計画(いつまでにこれをやる、などの予定をたてる)

ヒアリング

企画書を手元に、どんなサイトにしていきたいのか、話を聞いて行きます。
参考例などがあれば、見せて下さい。


ーー ーー ーー 企画と同時進行で ーーーー ーー

ラフデザインとして作ったワイヤーフレームから、レイアウトを決定していき、それに従ってグラフィックデザインを進めてください。

※ 1 ポイント
Illustrator 100%表示がブラウザに出る原寸です。
Photoshop 解像度72ppi で100%表示がブラウザに出る原寸です。

※ 2 ポイント
ワイヤーフレームやグラフィックデザインは、ピクセル単位で制作管理し、きりのいい数字のほうがレイアウトのときに役立つ。

必要なページフォーマット全部を作る。
文章や画像など、コンテンツ部分をさしかえればいいだけのものは一つだけ作って省略してもよい。


「連載!実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。今回は「ワイヤーフレームの作り方」です。

 

IllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします!今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。

 

ワイヤーフレーム作成+グラフィックデザイン作成

今後の作業のおおまかな流れ

ワイヤーフレームをノートに手書き や イラストレータ等でスケッチする
※画面のサイズ感を確認しながら(参考サイトなどをよく見る)

 ↓

IllustratorやPhotoshop、Fireworksなどでワイヤーフレームから完成形のデザインに落とし込んで行く

 ↓

DreamweaverでHTML(範囲を表すタグ)+CSSでレイアウト用の枠組みをつくっていく

レイアウト用の枠組みに、ウェブ用に書き出したグラフィックパーツを配置していく。
また、文字原稿なども配置していき最終の見た目の調整を行って行く。

作業のなかで発生した問題はどんどん質問して解消していってください。



Web・アプリデザイン用アセットの書き出し
https://helpx.adobe.com/jp/illustrator/how-to/export-assets-web-app-design.html?set=illustrator--key-techniques