仕事でホームページを作る時の各種確認事項をまとめるべく、スムーズな作業を目指すための制作手順を公開しています。
今回は2回目で、ホームページ制作の目玉と言える「デザイン制作」についての手順を公開します。
デザインについての理論を解説するのではなく、ホームページ制作を依頼されたクライアントさんとの間で、どんなやり取りを行うかと言う内容になっています。
デザイン制作手順
デザイン制作で重要なのは、まずは見た目です。 クライアントさんの中には、どんなホームページを作りたいかというデザインイメージを持っている場合もあるので、その場合はできるだけ具体的なイメージを一度見える形に描いてみます。 全くイメージが無いクライアントさんには、同業他社のホームページをいくつか見てみて、業界での必要な機能などを洗い出した上で、見えるデザインを描きます。 一番多いパターンで、制作側を困らせるぱたーんとして 、「何となくいい感じに作って欲しい」とか「デザインはどうでもいいから、必要最低限のホームページを作って欲しい」というオーダーです。 こうした場合には、自分の持っているポートフォリオや他社ホームページのデザインを見せて、感覚的にこれが良いという印象を引き出す必要があります。見た目デザインの確認
この段階で確認したい内容は、次の項目になります。色味
ホームページで使う色の基準を作ります。
基本となる3色を決めるのが重要で、
かっこいいホームページであれば、黒ベース。
かわいいホームページであれば、ピンクやオレンジベース。
シックな感じであれば、薄めの茶色やグレー。
夏場をイメージする様な場合は、青色と白色。
こんな感じで、ホームページのコンセプトに応じて基本となる色を決めていきます。
カラム構成
通常のホームページであれば、次のような構成が基本になります。
ヘッダメニュー（ナビゲーションメニュー） コンテンツ フッタメニュー（コピーライト）そして、コンテンツ部分が、サイドメニューとメインコンテンツに分かれる場合もあり、2カラム構成と言う風に言います。 さらに、サイドメニューが、右サイドと左サイドというコンテンツと合わせた構成になる場合を、3カラム構成と良います。 こうした標準的な構成ではない構造にする場合もあり、その場合は独自デザインとして考えます。 ホームページの目的に応じてトリッキーな見た目にするか、落ち着いた標準的なモノにするかはこの時点で決めておきます。
デザインテイスト
色と構成が決まれば、ある程度のデザインテイストを作ることができます。
最初に決めた、ペルソナ（ホームページを見る人の事）に対して、どんな印象を与えたいかということを念頭に置いて、どういう情報が必要なのかを洗い出します。
この場合は見た目を重要視して、手描きでもいいので、どういった感じになるのかというラフを描いていくのもわかりやすくていいと思います。
文字バランス（大きさ、字数など）
文字はホームページで非常に重要な役割を担います。
ターゲット層は、文字の多い少ないというだけのどちらかで、ホームページの価値を決めてしまいがちです。
写真素材を見に来るよ言うなサイトは、文字はほぼ邪魔になります。
しかし、学習コンテンツなどの様なサイトの場合は、必然的に文字ばかりになります。
ブログ主体のページも、文字が主体になりますが、適度に画像を配置する配慮も必要になります。
そうした文字も、大きさ、太さ、色、テイストなどを切り替えて緩急を付けるだけで、デザインとしての要素を担います。
写真やイラスト素材
ホームページの全体デザインとしての印象が決まっていれば、画像素材をどうするかが明確になってきます。
その素材は、フリー素材を使って作るのか、実際に写真素材などがあって、それを使うのか、新たにイラストを作成する必要があるのかという事を決めましょう。
クライアントさんから、素材提供をして貰う場合は、いつまでに素材をもらえるか（用意できるか）、その素材の著作権（肖像権など）は問題ないかという点を必ず確認しましょう。
モーションデザイン
モーションデザインは、多くの場合、一度コーディングをして、モックアップとしてホームページがブラウザで閲覧出来るようになってから、オーダーされるケースが多いのですが、
その場合は、製作作業の終盤で、スケジュールに組み込まれていない作業になるので、できれば、事前にモーションデザインとしての内容を確定しておくことをオススメします。
モーションデザインとして、一番要望が多いのは、トップページのファーストビュー（ページを開いたら見える画面の事）で、バナー画像などのスライドとしてのカルーセル機能や、
画面をスクロールした際に、画像や見出しなどのコンテンツがフワッと浮き出てくるような演出です。
他にも、ボタンをクリックした時の、アクションや、マウスカーソルが素材に重なった時のホバー操作などは、制作する側の構築経験によって、事前に洗い出しできる項目が変わってきます。
あと、メニュー箇所に対して、子階層がプルダウン表示されたり、階層選択するような場合も、ある程度のモーションデザインルールを決めておくと、この後の作業が楽になります。
何度も言いますが、このモーションデザインは、実際にページを見た時に必ず追加オーダーが入ります。
その際に、事前に言った言ってないというやり取りを無くすのと、他のホームページで当たり前にやっているという理由でクライアントとしては、工数などは関係無しにどんどんオーダーしてくるので、しっかりと事前対応しておきましょう。
機能デザイン
何かのボタンを押した時に、アラート表示がされる場合、そのアラートの内容もそうですが、独自のモーダルウィンドウでデザインする場合などは、どのくらいのモーダルが必要になるのかを、事前に洗い出しておく必要があります。
こうした、動的な動きをするモノについては、事前デザインでは、考えられることが少なく、コーディングを進めて、ブラウザで画面を見た時に、思いつきで追加オーダーされることが多い件でもあります。
0 件のコメント:
コメントを投稿