こんにちは!三河屋 田中です。Webサイトデザインについてお伝えして行きます!
・Webサイトをデザインする、とは
サイトは”デザイン” がなくても作ることはできる
必要な機能のみを持たせたもの
↓
それははたして、使いやすいのか? 使っていてワクワクするか?
ワイヤーフレームから、フォントを整え、
写真を配置しただけでも、サイトとしては成立する
↓
使いやすいのか? 使っていてワクワクするか?
フォントや色、画像を適切に選ぶのは、デザイン全般で必要なこと
サイトデザインで一番大切なのは
世界観の演出、ルールの統一とレイアウト
・演出するべき “世界観” を定める
1.デザインコンセプト決め
2.参考デザイン集め
3.トンマナの策定
1.デザインのコンセプトを考える
立てられたサイト企画を元に、その企業・サービス・個人の特徴や、
サイトコンセプト、ゴール、ターゲットから
デザインの方向性と世界観を考え、デザインコンセプトを決めていく
例:かわいい?かっこいい? かわいい、とはどんなかわいさ?柔らかいとは違う?
2.デザインの参考になるサイトを見つけて、集める
企画のときに記載内容の参考としたサイトとは別で、
デザインの参考にしたいという視点で参考サイトを探す
3.トンマナの策定
トップページのメインビジュアルや、イントロダクションなどから
色、文字、画、リンクのルールなどを定めていく
トンマナ=トーン&マナー
コンセプトや雰囲気に一貫性をもたせること
商材のもつ世界観や企業のブランドイメージでユーザーに与える印象を
統一させるためのルール
キーワード、色、フォントを決める
コンセプトのキーワードをまず出し、そこからデザインのキーワードを連想させる
その上で、色とフォントを決めていく
例) サービスコンセプト
おしゃれ、洗練
デザインコンセプトカラー
トーン:ダル
フォント
遊ゴシック
遊ゴシック
Lato
Lato
シンプル、余白多め
線細い、写真大きい
Web フォントとは?
あらかじめサーバ上に置かれたフォントやインターネット上で提供されているフォントを
呼び出し、表示するCSS 3 から策定された技術
その種類には限りがあるので、特殊な文字を使いたい場合は画像化するなどする
※Webフォントの種類を知って、その上でフォントを選んでデザインをすること
トンマナの策定|フォント
・明朝体 か ゴシック体
・欧文書体 か 和文書体
・フォントファミリー
・組み合わせ などから選ぶ
どの端末・ブラウザでも見れるフォントかどうかも大切
トンマナの策定|色
扱うものなどから連想させて、メイン、サブ、アクセント、背景色などを決める
例:食べ物なら暖色系、企業サイトなら青系、など
いかがでしょうか?決めることがたくさんあるんです。webサイトは誰でも作成することができます。しかし、誰に何の目的でどのように受け取って欲しいのかを設計して作成できるかどうかは別の話ですよね。これがかっこいいからこの色にする!のような主観で、自分が好きなものだけを作っていてはビジネスではなんの成果も上げられない可能性が高いということです。デザイン=設計 これを忘れてはいけないのです。パート2は明日公開しようと思います!