メディアデザイン演習4β
10 制作4

技術ヒアリング

今回は、技術的に問題がある部分がないか、ヒアリングしていきます。
作ろうと思っているものが、試してみても、技術的な問題でうまくいっていない事に関してのヒアリングを行います。


何が分からないのか、を知る

作業が行き詰まっている時、その原因が何なのかを突き止めないまま解決方法が見つからないと途方に暮れていませんか。

何が決まっていないのか、何が分からないのか。

大事なのは、問題の原因を正確に把握することです。
「私は、ここがわからない」と気づくことが必要です。
それさえ分かれば、それを質問すれば良いだけの事なのです。
 
まだ何が分からないのかが分からない人は、早めに質問をして下さい。
一緒に原因を探してみましょう。
 

具体的な技術面で問題が発生している場合
書籍を読む、もしくはウェブの検索を使って、解決方法を探してみましょう。
まずは自分の力で解決しようと努力してみて下さい。
しかし、欲している情報がどうしても見つからない場合、またはそこに書いてある解決方法が分からない場合は質問して下さい。


スケジュールは大丈夫ですか?
悩む時間と、製作の時間のバランスは取れていますか?
この時点に来ると、考えすぎて留まるより、手を動かして考えたほうが良いでしょう。

作成しようと思っているページの多い人、また、編集する情報量が多い人は、そろそろまとめにかかる必要があるでしょう。
 

残された時間や、自分の理解度を把握する

自分の作りたいサイトは、どう作れば良いのか。サンプルを作ってみて、出来るかどうかを試す。
その後、実作にどれくらい時間がかかるかを考えて、そこから逆算したコンテンツ量を決めて作り始める。
ウェブサイトデザインは追加したり更新していけるので、まずはすっきりと出来る範囲のコンテンツ量を目指すと良いと思います。

 

今後の制作において大事なチェックポイント
一番最初に開きたいデータ(トップページ)のデータ名は”index.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でレイアウト用の枠組みをつくっていく

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

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