Notebook

Webデザインについて

Biscomでは、Webデザインの制作をメインの業務としています。
サイトを訪れたユーザーへの「見やすさ」の配慮はもちろんですが、デジタルな画面の中から「なにか伝える」ことを考えたとき、やっぱり「デザインって大切だな」と感じます。
デザインによって、サイトを見たときのユーザーの印象や行動がガラリと変わることもあります。

デザインを制作する前に必要です

デザイン制作に着手するまえに、必要となる素材(Webサイトに掲載する写真や文章など)のご用意をお願いしています。素材がそろわない前に先行してデザインを制作した場合、

  • 素材(文章や写真)がそろってみたらイメージが違った!
  • 掲載内容のボリュームが合わないのでレイアウトを変えなければならない!
  • なかなか素材がそろわず、デザインだけはできているのに制作が進まない・・
思わぬトラブル

といったトラブルが発生することがあります。
せっかくサイトを作るのですから、まずはお客さまの業務や商品を棚卸しし情報を整理してから、それらをどのように生かしていくのか、検討をしたうえでデザインの制作を行っていきます。

お客さまにご用意いただく素材について

具体的にご用意いただく素材は以下になります。

  • 原稿:会社概要や商品紹介等、掲載する文章をまとめたもの
  • 写真:店舗写真や商品写真、イメージ写真など
  • ロゴ:ロゴデータ(Illustrator)
  •        
  • その他:デザインイメージなどがあれば必要に応じてご用意ください。

お客さまにて素材のご用意が難しい場合には、取材~文章を作成するライターや写真撮影を行うカメラマンなどに分担(別途、お見積り)し、スムーズに制作が進められるようにします。

①まずは、デザインの基本となるレイアウトを決めます

デザイン制作は、見た目だけをきれいにするのではありません。
サイトのボリュームやコンテンツに合わせてまずは基本のレイアウトから考えます。

レイアウトのパターン例

1カラム

1カラム
ボリュームが少なめな簡易サイトやランディングページなどに向いています。また、最近ではスマートフォンやタブレットでの見やすさも考えてこの1カラムで構成されることも多くなっています。

2カラム

2カラム
ページの上部に配置したグローバルナビゲーションの他に、コンテンツの右か左にもナビゲーションやバナーなどを配置する、多くのサイトで使われているレイアウトです。

3カラム

3カラム
コンテンツの左右(または左右どちらかに2段階)にナビーゲーションを配置するレイアウト。ブログや情報が多いポータルサイトなどで採用しています。


②サイトや各ページの設計を考えます

必要な要素をどのように見せるとユーザーにとって効果的か、ユーザーが迷うことのない視線の配置、どのような導線でユーザーが行動をするのか、さらに公開後の運用やバージョンアップなども考えた設計、UI/UXなども考慮してサイト全体の構成~各ページの骨組みを考えていきます。

UI(ユーザーインタフェース)
Webサイトの使いやすさや操作感。ユーザーにとっての「使用感」を大きく左右する設計の要。
UX(ユーザーエクスペリエンス/ユーザー体験)
Webサイトがユーザーにもたらす「体験」のこと。
楽しさ、心地良さ、感動、愛着、インスピレーションなどを実現できる設計のこと。

③色について

すでにロゴなどをお持ちの場合には、ロゴで使われている色(や、それに合う色)を使うことが多く、メインとなる1色と、それに合う相性の良い色を1~2色サブカラーとして使用します。 お客さまの好きな色・ご希望の色でも対応が可能ですが、業種別に色が与える印象も考慮する必要があります。

色別(COLOR)で、これまでの制作実績をご覧いただけます。

④テイストについて

いよいよビジュアル(見た目の)デザインです。シンプル、ポップ、エレガント、さわやか・・など
デザインの方向性を決めるために、どのようなテイストにするのかを考えます。

テイスト別(TASTE)で、これまでの制作実績をご覧いただけます。

また写真を多く使うのか、イラストやキャラクターを使うかなども考えて決定していきます。

テンプレートを使う場合のデザイン

テンプレートを使用する場合、あらかじめ上記①~④についてはすでに確定していますが
Biscomでは、テンプレートを使用した場合でも、ご依頼いただいたお客さまのサイトに合わせたテンプレートデザインのカスタマイズを行っています。
納期やご予算などの関係でお手軽にWebサイトを作りたい方には、テンプレートをベースにしたサイト制作もおすすめです。

テンプレートを使った制作実績