1. ホーム
  2. boxBoaの取り組み
  3. デザイン・カテゴリーアーカイブ

デザイン

デザインについて

ws20061114.gifこの項ではデザインについてお話します。WEBのページを製作するにあたり、文書構造についてはサイトカテゴリに合わせてパターンがありますが、デザイン部分でのテンプレート的な要素は容易していません。各クライアントさまのイメージや業種、コンテンツ内容、要望などの各資料を基に最適なデザインを設計します。WEBサイト特有のインターフェイスであるナビゲーションボタンなどの画像化されたテキストは特にご指定がない限り弊社ではテキストタイプのボタンで設計します。その訳は、WEB標準の観点から画像は画像、文書はテキスト、表は表、リストはリストと適切な構造と表現が重要とされているからです。画像で作られたボタンが持てはやされていることも事実ですし、実際そういったご要望も多いのが現実ですが、テキストボタンにおいても外部デザインプログラムのCSSによる作り込みで、ある程度装飾されたナビゲーションインターフェイスが可能です。視覚的なゴージャス感は大事と思いますが、それ以前に使いやすさと分かりやすさ=ユーザビリティ・アクセシビリティを考慮したWEBページがSEO的にも良い結果をもたらしています。次に私が悩む(本職が悩んではいられないのですが)サイトイメージのベースであるイメージカラーと配色の選考です。個人的な主観も当然選考対象としてピックアップされますが、クライアントさまのご要望やコンテンツ内容、サイトカテゴリに適当なものも候補として羅列します。トップページにイメージ画像を大きく配置するようなプレゼンも、ご提案のひとつとして毎回必ず入れるようにしています。これまでの例では大体において一押しのサンプルが採用されていますが、何通りものデザインパターンを産み出す苦労は毎回変わりません。ワークフローをスムーズに進行させるためにも、やはりヒヤリングと打ち合わせの徹底が大切だと思っています。理想のイメージを忠実に形にする、更により良いものにするためにも、お問い合わせいただいた瞬間から、すべての作業に重要度をおいて取組んでいます。どうぞささいなことでも、お気軽にお問い合わせください。

WEB標準のデザインはCSS

w3c_valid.jpgWEB標準が文書構造を厳密に定義することからホームページ上で展開されるレイアウトとデザインは外部のCSSで行います。WEB標準に沿わないサイトでもCSSを使い表示させることができますが、意図どおりの表示がされていない場合があります。それはWEBブラウザ各社のホームページ言語=HTMLの解釈が微妙に違うために起こる表示の誤差=クロスブラウザにより、IE6では正常な表示でもFireFox1.0ではレイアウトが崩れた表示になることがあります。現にネットワーク上に溢れる無数のホームページの多くがIE以外のブラウザで起こっている現象といえます。優良な製作会社が開発したものであればほとんどの場合、この問題は回避されています。特にWEB標準に基づいた開発であればほぼ必然的に解消されています。現在最新の各ブラウザはWEB標準規格に沿ったバージョンになってきているので、WEB標準=ブラウザを選ばない=意図どおりのホームページ表示が可能です。逆に言えばWEB標準でなければどのブラウザでも、意図どおりの表示がされにくいことにもなります。しかしWEB標準であれば正常表示が必ず大丈夫か、というとそう言うわけでもありません。外部デザインのCSSにおいてもブラウザ間の解釈誤差があるために、それぞれに合わせたプログラムを仕込む作業を必要とします。デザインの観点からどうしてもCSSだけでは出来ない部分もあります。クライアントさまの強いご要望などで画像にした文字=ロゴタイプや装飾的なデザインなど、直接、本体コンテンツとは離れた要素に対してのご注文が多いことも正直なところです。製作現場ではこういった工程を踏み、実際仕上がるサイトは完全なWEB標準に沿わないこともありますが、プログラム次第でそれほど問題なくクリアされます。ある意味コンテンツ不足を派手な装飾でごまかすようなサイトも少なくないようですが、テキスト=文書のみでも重要度の高いホームページを作るためにも、お客様と製作側が綿密な打ち合わせと、理想具象化に向けての努力を惜しまないことが大切と考えます。

洗練された清潔感のあるデザイン

洗練された清潔感のあるデザイン現在進行中の案件で塗装店さんのプレゼンデザインに執務中です。サイトデザインにおいて、もっとも重要としていることがイメージ=雰囲気。大前提としてギラギラした装飾にインパクトを求めない、印象として誠実さ・清潔感・信用性・信頼性を持たせるために毎回、最適なデザイン捻出に頭を悩ませます。今回の塗装店=ペンキ屋さんの場合は、「ペンキ・色・筆」などのキーワードから「パステル」というテーマを導き出しました。(この記事の画像イメージ参照)別サンプルにもうひとつ、「職人」というテーマからプレゼン資料を作っているところです。必ずしもこちらの主観のみでは納得されないケースがあるのでクライアントさまのご要望案でも必ずひとつはプレゼンします。プレゼンにおいて納得いただけるまでこの作業は繰り返されるのですが、手間ヒマがかかるここの部分を大事にしています。完成間際に「やっぱり」的なことが起こらないとも限らないわけですから、完全オーダーメイドの定義にのっとり徹底したヒヤリングを心がけています。今日の夕方、この資料をもって早速お客さまのところへいってきたいと思います。

ページデザイン カラム

img20070129.jpgWEBサイトのページデザインにおいて、基本となるページ構成を段組でまとめます。ページ上部がロゴマークなどを配したヘッダー=header、中央部が2カラム、3カラムの構成になり、メインの部分をコンテンツ=contents、ナビゲーションリンクなどの部分をナビメニュー=navi menu またはサイドメニュー=side menu と呼びます。そしてページ下部に企業情報やコピーなどを表示させる、フッター=footer。トップページ、以下サブページを含みサイトの規模が大きくなるにつれ、各ページの統一感とナビゲーションの表示位置がユーザビリティ的に重要となってきます。通常、多くのサイトで採用されているのがヘッダー・左ナビメニュー・右コンテンツ・フッターの段組です。趣向の差はもちろんあると思いますが、私が推奨するのはヘッダー・左コンテンツ・右ナビメニュー・フッターです。その根拠は、多くのユーザが右手でマウス操作をし、ブラウザウインドウの表示・クローズボタンが右上に配置されていること、人間の目が、ウインドウが展開されて始めて注目する視点が左側上部ということを考慮して、左コンテンツ・右ナビメニューのレイアウトがユーザビリティ的に有効だと考えるからです。

しかし、一般的に普及している仕様のほうが使いやすいことも確かなので、一概にそれが正しいとも言えないとも思います。いずれにせよ構造面でのユーザビリティと視覚=designにおいてのわかりやすさも重要となるので、わかりやすさを追求した配置・配色・表現が求められることに間違いないのです。

特に要望がない場合は右サイドメニューの段組で開発していますが、クライアントサイドの希望があれば当然左メニューでの開発になります。XHTMLのマークアップの際はヘッダー→コンテンツ→ナビ→フッターの序列を維持しながら、配置をCSSで制御する方法で構造序列の問題を回避しています。

VISTAにバージョンアップ、ホームページは大丈夫ですか?

blog44.jpgインターネットエクスプローラー最新版(IE.7)での表示は崩れていませんか?

VISTAの導入や、windowsの自動更新でインターネットエクスプローラーのバージョンが最新のIE.7になり、これまでのWEBサイトの表示にトラブルが起こるケースが見られます。その理由はこれまでのIE.6においてデザイン要素プログラム=CSS(Cascading Style Sheets)の解釈に独自拡張が多かったのに対し、最新のIE.7では標準仕様に近づいたため解釈の差異が表示の崩れとして反映されているからです。

問題なく表示されているホームページでも、CSSを利用せずテーブルレイアウトという手法で設計されたWEBページでは上記の問題は発生しにくいのですが、構造的に大きな問題があります。WEBのバリヤフリー=WEB標準・ユーザビリティの確保・ユニバーサルデザインに重きをおいた設計が注目を集めている昨今では、構造として意味解釈が可能な設計が必須となります。テーブルレイアウトでは構造を無視して見栄え=デザイン本意の設計となるために、その目的を達成していません。

WEBページの修理=メンテナンス、承ります。

VISTAの導入、自動更新に伴った表示差異、テーブルレイアウトによる重大な欠陥。あなたのホームページは大丈夫でしょうか。弊社では問題のあるホームページを診断し最適な修正案を提示して、お客さまにあったリニューアルをご提案します。

WEBサイト・メンテナンス調査お問合せページ

カテゴリー

  1. RSS
  2. WEB標準
  3. XHTML CSS
  4. ウェブサイト
  5. デザイン

RSSフィード

  1. RSS2.0
  2. XML