Home > Tags > デザイン関連
デザイン関連
ユーザビリティを考慮したホームページ横幅の設定
昨日、ホームページの横幅の決め方についてお話しましたが、やはり、ごく少数とはいえ、一部のユーザーが快適に閲覧できない人がでてくるのは事実です。こういった人たちを無視するというのは、ビジネスホームページのユーザビリティの面から言うと、適切とは言えません。やはり、全てのユーザーに対して快適な環境を提供していくということが、本来のユーザビリティ向上の目的ですから。では、全てのユーザーに対して、快適に閲覧できる環境を作ることにしましょう。
ユーザビリティを考慮したホームページ横幅の切り替え
一つのデザインだけで、すべてのユーザーに快適な閲覧環境を提供するのは不可能です。どうしても一部のユーザーを無視することになってしまいます。では、この問題を解決する方法をご紹介します。
この問題を解決するには、コラム型のホームページのデザインを作ります。コラムとはホームページのサイドに表示される、コンテンツメニューのようなものですね。このコラムには1コラム、2コラム、3コラムといろいろなレイアウトがありますが、これをホームページの内容を変えずに、CSSで1コラムと2コラム、3コラムとそれぞれのデザインを作成していきます。これを、ホームページ上でユーザーが自由に切り替えられるようにするのが一番の方法です。
例えば、メインコラム(コンテンツ表示部)を480pxとします。1コラムの場合は、この480pxがホームページ全体の横幅となります。次に2コラムにした場合。サイドバーの領域の横幅を200pxに設定したとします。すると、200+480=680pxの横幅。同様に、3コラムの場合、200+200+480=880pxとなります。この3つのレイアウトをCSSで切り替えて表示するというものです。
CSSの切り替え方法については、また後日に詳しく解説したいと思います。
- Comments: 0
- Trackbacks: 0
ホームページの横幅の決め方
さて、今日はちょっとホームページ作成に関するTipsをお話しましょう。
ホームページの横幅について
ホームページのデザインをするのにいろいろと考慮しなければ行けない点は多いですが、その中でもホームページの横幅決定するのは、ホームページ全体の大まかなレイアウトを決定するとても重要度が高い項目です。では、何故、横幅を決定するのがそんなに重要視されるのでしょう?
ホームページの横スクロールをしないようにすること。これが一番の理由です。ホームページを見ていて、気づくかと思いますが、ほとんどのホームページで横スクロールが必要なホームページはありませんよね。それは、閲覧中に横スクロールがあると、非常に見にくいと感じるからです。要は、ユーザーの操作性を考慮した結果、ホームページの横スクロールをせずに済むようにしているわけです。
ちなみに、縦スクロールはマウスのスクロールボタンで簡単に制御できるので、ほとんどのホームページでは縦スクロールについては無視しています。
では、横スクロールが発生しないようにするためには、ホームページの横幅はどれくらいに設定するのがいいのでしょう?
ユーザーの動向を調べる
やはりどんなウェブデザイナーにおいても、一番着目する点はユーザーの利用頻度ですね。ユーザーの利用頻度は、ホームページのアクセス解析などで情報を集めます。ディスプレイ(解像度)の項に、ホームページ訪れた人の解像度が一覧で表示されますので、これを参考にしましょう。
上記のサンプルを見ると、一番多いのは「1024×768」ですね。ということは、このサイズに収まるサイズでホームページの横幅を設定すれば、ほとんどのユーザーは横スクロール無しで閲覧できるわけです。これらを考慮した結果、私の場合、ホームページの横幅は「800」で設定しています。これで、ほとんどのホームページ閲覧者が「快適」にホームページを見れるわけです。
ちなみに、解像度が「1024×768」を超えるものについては、当然、何の問題もなく表示できますので無視します。
- Comments: 0
- Trackbacks: 0
新しいホームページリニューアルプラン開始
- 2008-05-23 (金)
- ウィ・ドックの提供サービス | ウェブデザイン | デザイン関連
新しいホームページのリニューアルプラン開始
ウィ・ドックのホームページ作成プランに、今日から新たに「コピペdeリニューアルプラン」ができました。プラン名だけを見ると、「コピペってなに?」という感じでしょうか(=^_^;
コピペdeリニューアルプランの詳細
このプランは、既に開設、運営中のホームページをお持ちのお客様を対象に、内容をそのままにデザインのみをリニューアルできるという格安のプランです。要するに、今公開中のホームページの掲載内容を「コピー&ペースト」して、新しいデザインに置き換えてホームページをお作りするという内容です。
コピペdeリニューアルプランの料金
- デザイン料 :31,500 円 (税込み)
- ページ作成料 :1ページにつき 5,250円(税込み)
料金計算の例
[今あるホームページが10ページだった場合 ]
デザイン料 31,500円 + ページ作成料 5,250円 × 10ページ = 84,000円
何でこんなに安くできるの?
通常のホームページ作成やリニューアルとは違い、既にホームページに掲載する内容が決まっていますので、一切、お打ち合わせなどを行う必要がありません。そのため、すぐに作り始めることができ、コピー&ペーストでどんどん作れるので、通常の作成とは違い、短期間で作成できるという点から、これほど安い料金設定にすることができました。
こんなに安くて、ちゃんとしたページができるの?
- 基本ホームページデザイン設計料(ウェブ標準:XHTML+CSS)
- ページ作成料
- ページ内SEO対策(METAデータの調整及び、キーワードの調整)
- XML版サイトマップの作成
このように、最低限ホームページの開設、運営に必要な作業は含まれております。また、ホームページのレイアウトデザインは、すべてウェブ標準に乗っ取った、XHTML+CSSデザインにて行いますのでご安心ください。
さらに「コピペdeリニューアルプラン」の詳細をご覧になりたい方は以下をご覧下さい。
- Comments: 0
- Trackbacks: 0
DTPデザイン「リーフレット作成キャンペーン」開始
とってもお得!リーフレット作成キャンペーン実施中
新年度を迎え、会社やお店でいろいろと仕様変更がなされる時期。新しい会社やお店のパンフレット作成など、一年でも最もリーフレットの利用が多くなるこの時期に、ウィ・ドックでは「リーフレット作成キャンペーン」を開始しました。既に数件の作成依頼が入っており、デザイン作成に若干お時間をいただくことになりますが、キャンペーン期間終了までにお申込いただいたお客様に対しては、すべてキャンペーン価格にてサービスさせていただきます。
リーフレットって何?
ここで少しだけ、印刷物に関するうんちくをご紹介しましょう。
リーフレットとはどんなものかご存じですか?形こそパンフレットやカタログといったものに類似していますが、その定義はちょっと違います。リーフレットは用紙一枚だけで作られ、ホッチキスやのり付けといった加工は一切行わない、折り加工だけの印刷物を指します。
これに対して、パンフレットやカタログは複数枚の用紙を使用し、ホッチキスやのり付け加工を施し、4ページ以上(8ページ~)の印刷物。いわゆる冊子物を指します。
お分かりいただけたでしょうか?「そんなことは常識だ!」「知ってるよ!」という方は、この部分は軽ぅ~く聞き流してください(笑)
それでは、ウィ・ドックのDTPデザインリーフレット作成キャンペーンを是非ご利用下さい。
- Comments: 0
- Trackbacks: 0
DTPデザインサービス一新
先日、DTPデザインサービスの内容を一新した旨を、こちらのブログでもご案内いたしましたが、ブログシステムのトラブルが発生したために消えてしまいましたので、再度、ご案内させていただきます。
ウィ・ドックのDTPデザインサービスを一新
これまで、当社のDTPデザインサービスは、すべてDTPデザイン料に印刷代も含めた内容でサービス提供をして参りました。しかし、多くのお客様より「デザインのみ行って欲しい」との強い要望があたことと、これまでの実際のご利用状況を見た限り、印刷まで行うお客様が大変少なかったこと。この2点を踏まえて、この度、「DTPデザインはデザインのみを提供するサービス」と、大幅なサービス内容変更に踏み切りました。
より安価でお得なデザインの提供と経済的な印刷が可能に!
これにより、より安価にデザインを提供でき、またお客様ではより自由に、経済的に印刷物を作成できるようになりました。当社のお客様へは、本サービス内容の変更について、前回発行のウィ・ドックマガジンにてご案内しておりますが、メールを見逃してしまった方は、こちらのページよりご確認いただければと思います。
- Comments: 0
- Trackbacks: 0
Home > Tags > デザイン関連
-
« 2012 年 2月 » S M T W T F S 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
![Validate my Atom 1.0 feed [Valid Atom 1.0]](http://blog.we-dok.jp/wp-content/uploads/2008/05/valid-atom.png)

