— web design
ウェブデ ザイン
ビジュアルデザインがインパクトとしては大きいですがこれはできて当たり前。芸術家としてデザインを提案するのでなくクライアントの要望、イメージを形にすることが大切です。
またビジュアルデザインだけでなく目に見えにくい残り2つのウェブデザインも兼ね備えたサイトが優れたウェブデザインと考えます。時代の変化に合わせたデバイスへの対応も当然のことです。
ワサビは創業以来、マーケッター、グラフィックデザイナー、ウェブデザイナー、コピーライター、フォトグラファー、システムエンジニア等がチームを組みご提案することにより三位一体となったハイクオリティなウェブデザインをご提供しております。

— Purpose
新型コロナウイルス感染症によるビジネス モデル変革への対応が必要
ワサビが10期目を迎えた2020年。新型コロナウイルス感染症により非対面、オンライン、テレワーク等とビジネスモデルの変革が求められ消費者の価値観も変わってきています。
従来モデルに囚われたままだとピンチに陥ります。
新たな販売戦略、消費者とのつながりを結びつけることが出来ればピンチがチャンスとなりえます。
ウェブデザインとウェブマーケティングを別々に考え、別々の企業に依頼していると柔軟な対応ができず、変革にも対応できません。
ウェブデザインとウェブマーケティング。その両輪をONE TEAM、ワンストップでクライアントに提供できるワサビのウェブデザインこそ新時代のビジネスに生き残る道だと考えます。
プランニングについて
ウェブデザインを制作するにおいてプランニングは重要です。
何事も行き当たりばったりでは迷走して失敗してしまいます。
まずはウェブサイトの目的とターゲットを明確化します。
会社案内としての情報発信が最低限出来れば良いのか、営業マンの代わりとして収益をあげるサイトにするのか、人材難の昨今、理想により近い求職者を多く集めるための求人サイトにするのか。
目的の違いによってその後のサイト設計やコンテンツ内容は大きく異なります。
また、目標を定め制作後の運用の指針とすることも重要です。
サイト設計について
目的やターゲットといったプランが固まればサイトマップやワイヤーフレームを用意してサイト設計に入ります。
サイトマップとはウェブサイトの骨組みのようなものでウェブサイトに必要なページを洗い出し、グループ毎にまとめて階層構造にしたり、優先順位をつけて表示順番を決めます。
サイトマップを見るだけでウェブサイト全体の内容が把握できるようになります。
ワイヤフレームは各ページにおけるコンテンツのレイアウトをラフとして起こすものです。
部屋でいう間取り図です。
ワイヤーフレームも大きく2種類ありますが、ページ内レイアウトを含めたものとページ内レイアウトは含めない概略のもの。
特にデザインを作り込んだ後にレイアウト変更は大変なので重点的に確認しますがページ内レイアウトはページコンテンツ内容によっても変化するため、省略することもあります。
ユーザビリティ、アクセシビリティの重要性
ウェブサイトの情報設計においてはビジュアル面でのインパクトよりもサイトの使いやすさ(ユーザビリティ)や高齢者や障碍者どんな方でも利用しやすいアクセシビリティを重視する方が良いケースが多いです。
特に特別なことではなくパソコンでは見れるけどスマートフォンではみれない、またその逆やボタンがクリックできない、クリックしずらい、問い合わせが分かりずらい意図せずにクリックしてしまう等設計面での確認も重要です。
コンテンツ内容について
ウェブサイトに使用するコンテンツは容量も種類も基本的には自由です。
枠が決められた平面の紙のデザインでは決められた文量のテキストと画像しか使用できませんが、ウェブサイトの場合はテキスト、画像はもちろんのこと動画や、スライドといった動きのあるプログラムも容量無制限に組み込むことができます。
ウェブサイトの目的やターゲットによって必要なコンテンツは異なりますが代表的なものをご紹介します。
ロゴマーク
ウェブサイトにはよくロゴマーク(以下、ロゴ)が使用されます。
ロゴが無い場合でも少なくとも何処のサイトか分かるようにテキストで社名は記載しますが、テキストよりもロゴを利用した方がブランディングとして訪問者の印象に残りやすいサイトになります。
ウェブサイトに使われるロゴはサイト全体にとっては小さな画像です。
主な企業のロゴは縦24px~70px、横24px~200pxの小さな画像です。
しかし、企業の理念や想いなどを具現化したロゴは会社の顔でもあります。
ロゴが一人歩きし社名を聞いてもイメージが湧かないけれどロゴを見るとピンと来るケースも珍しくありません。
起業すると同時にウェブサイトもオープンする時などはまだロゴが無いという状態のこともあります。
ツールや素材を駆使して自作することも可能ですが、ロゴは会社の顔といえるものですし、今後何年も使用しウェブサイト以外にも利用することが考えられるのでプロに依頼することがおススメです。
ワサビではブランディング構築の一環としてロゴデザインをご提供します。
ヘッダー画像
その際にサイトの一番目立つ場所にあるトップページのヘッダー画像は重要な判断材料となるためビジネスがイメージできる画像を配置することが大切です。
最近は静止画像だけでなく動画をバックで流すということもよく行います。
ヘッダー画像デザイン6つのポイントご紹介します。
フォトリア、ピクスタといった有料の画像素材集を利用すれば何万種類の画像が簡単に手に入ります。
ただこういった素材は写真自体は綺麗なもののコンテンツの魅力として欠けてしまいます。
出来れば実際のスタッフや商品、サービスシーンを写真に収めて使いましょう。
但し、テキストを詰め込み過ぎると文字が小さくなるのでスマートフォンでの閲覧を考慮することも大切です。
ずっと同じヘッダー画像を使い続けるのでなく、キャンペーンや新製品の販売に合わせて定期的に変更することも効果的です。
但し、ヘッダー画像のデザインを頻繁に変更し過ぎるとリピーターが別のサイトに来たのではと混乱してしまうので注意が必要です。
スライド毎にリンクを設定して該当するページへ誘導することもできます。
但しクリックが出来ることを示唆するデザインや他にもスライドがあることを示唆するデザインを考慮することが大切です。
途中で切れたり、画像やテキストがボケてしまわないように2000px~4000px程の横長の画像を用意しましょう。
— Blog
関連 ページ
ホームページの写真をコピー(転用・保存)できないようにしたい。どうすれば?
...
ホームページ制作 担当者は、何から始めるのか
...
アダプティブデザイン
...
Retina(レティナ)対応について
...
グローバルナビの数とレスポンシブ形状について
...
モバイル対応が検索結果に影響する?
...
IE11でホームページが正しく表示されないときの対処方法
...
印刷時にトンボ(トリムマーク)を外す方法
...
ホームページレイアウト崩れ 互換表示とIE11
...
SEOに有効な画像の使い方
...
ホームページの画像がコピーできない、印刷できない。
...
CMS導入のメリットとデメリット
...
テーブルレイアウト
...
よくある質問ページについて
...
リッチコンテンツの魅力とその活用
...
保護中: 弊社のパンフレットが変わりました。
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
レスポンシブWebデザインについて
...
保護中: (制作実績)LP(ランディングページ制作)・LPOサービス
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
モバイルサイト(スマホサイト)とPC用サイトのコンテンツは同じにすべき!?
...
ブラウザーチェックについて
...
WordPress 3.6 ベータ
...
Webデザインに役立つスクリーンキャプチャー
...
GoogleMapで任意の場所にマーカーを置く
...
タブレット向けサイトのガイドライン
...
保護中: HP制作実績(医療機関)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
Viper’s Video Quicktags
...
レスポンシブデザイン
...
スマートフォンで背景画像のリピートが反映しない現象
...
スマートフォン最適化
...
スライダーはコンバージョンに貢献するのか
...
Google と相性の良いサイト
...
保護中: HP制作実績(教育機関)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
ブラウザで作れるパターン生成ツール
...
保護中: HP制作実績(教育機関)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
保護中: HP制作実績(特設サイト)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
保護中: HP制作実績(家電メーカー)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
トーン – 色彩についての基礎【5】
...
コントラスト – 色彩についての基礎【4】
...
明度 – 色彩についての基礎【3】
...
Facebookをwebマーケティングに活用する
...
彩度 – 色彩についての基礎【2】
...
色相 – 色彩についての基礎【1】
...
リスト要素、<ul><ol><dl>の使い分け
...
保護中: HP制作実績(教育施設)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
保護中: HP制作実績(リハビリテーション施設)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
保護中: HP制作実績(リハビリテーション施設)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
保護中: ホームページ実績(医療関係)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
保護中: HP制作実績(デイサービス)
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
検索を誘導させる是非
...
ブラウザ上で画像の加工をする
...
facebookページのバナーを作る際の注意
...
動画コンテンツを活用する
...
スマートフォン対応サイト
...
blogのビジネス活用について
...
次世代NEW PC Ultrabook
...
お問合せ方法について
...
デザインについて
...
HTMLとCSSについて
...
Adobe モバイルブラウザ向け Flash の開発を終了。HTML5へ注力。
...
HTML5時代のhoverの使い方
...
HTML5 hr
...
photoshop パスで切り抜き
...
favicon
...
ロゴは、h1なのか?
...
XHTMLの立ち位置とHTML5について
...
addressタグにコピーライトの記述について
...
保護中: ストーンペーパー 名刺デザイン
パスワード保護済み
この保護されたポストを閲覧するためには、以下のパスワードを入力します:
HTML5のテンプレート
...
よりセマンティックになった イタリック(i)などのhtml5 タグ
...
IEtester と browserlab の表示が違う件
...
HTML5の基礎
...
リセットするスタイルシート リセットCSS
...
<ul><li> 横に並べたリストの中央揃え
...
サイトオープンの準備ができたら
...