投稿日時:
Webにおけるセーフカラーを使えばどのWebブラウザでもまったく同じ色が表示されるのですか?
セーフカラーとは、Web上の色を構成するRGBの値をそれぞれ6つの段階に分割して、その6種類を組み合わせて作られる216色を指します。
結論から申し上げますと、Webのセーフカラーは全てのWebブラウザで同じ色の表示を保証するものではありません。
Webセーフカラーは本来Netscapeという特定のWebブラウザを使用した場合、閲覧環境が異なっても表示可能な色を定めようという考えの元で登場しました。Netscapeが普及していた時代がそもそも古いお話になりますが、現在は多くのモニターでは216色どころか1600万色以上の色が表示可能です。従って、セーフカラーは技術の発達によって役目を終えたと見て良いと思います。

さて、ここからは質問から少し離れますが、表示する色を同じにするというお話に関連して、モニター等機械自体の違いによって、制作者の画面で見る色は、閲覧者の画面で見る色と必ずしも完全に一致しない場合があるというお話をご紹介したいと思います。
例えば服やアクセサリーをWebサイトを通じて販売する会社は、魅力的にな商品の購入を促すために、商品撮影時の照明の方向からレタッチに至るまで、正確な色表現に対して細心の注意を払って商品画像を制作します。しかし、購入後お客様自身の目で確認する商品の色味と、購入前にお客様のモニターで表示されている色味が異なることがあります。これはお客様の閲覧環境が多様であるため、閲覧環境の違いによって生じる色の差異は制作者側で100%のコントロールが困難であることに起因しています。事前に制作者は複数のモニターなどで色味をチェックすることになりますが、それでも商品写真では特にグレーやベージュなどの薄い色が、モニターごとの色味の影響を受けやすく、場合によっては色味が少し異なって表示される場合があります。
そのため、ある程度の色味が違って見えることを前提にWebサイトや業務を検討すると良いでしょう。

(担当:斉藤 万幾子

投稿日時:
Webサイトのデザインを始める前にしておくべきことはありますか?
制作するWebサイトと同じ業種のWebサイトの研究をお勧めします。
ここでいう研究とは、業種自体の研究ではなく、それぞれの業種においてデザインに焦点を当てた視覚的な研究を指します。
Webサイトの場合、業種ごとにある程度の配色の偏りやデザインの傾向が見えてくることがあります。例えば、医療機関のWebサイトを制作する場合、血液を連想させるような鮮やかな赤の色が使用されることはほぼ無いでしょう。Webサイトの利用者には、清潔さや信頼感といったクリーンなイメージを伝えたいためです。一方、エンターテイメントに関連するのWebサイトでは、エネルギッシュな印象を与えるために原色の赤が使用されることも多いです。

このようにWebサイトの利用者に視覚的にどのように見せるかを決定する際、今ある同業種のWebサイトを研究することが大切です。同業種のWebサイトの利用者が重なっている場合も多く、利用者が見慣れたデザインや配色を使用することで、同業種のWebサイトを訪れる利用者の「違和感」を軽減させる効果もあります。さらに研究を重ねることで、ユーザーにとって見やすいWebサイトのレイアウトのアイデアや新しい表現のパターンを考えることも一つの方法です。

もちろん視覚的なデザインの研究も大切ですが、Webサイトで使用されている文章表現のわかりやすさや、文章表現そのものが、利用者に合っているのかを同時に考えていくことも大切です。

(担当:斉藤 万幾子

投稿日時:
Webサイトでよく使われるWebパーツはありますか?
はい、有名なものがいくつかあります。ここではWebサイトでよく使用されるJavascriptの例を挙げたいと思います。今回ご紹介するものは普段からWebを使用する方であれば、何度も見かけたことのあるものばかりかと思います。

・ロールオーバー
ロールオーバーとは、画像にマウスポインタを合わせると別画像に変わる仕組みのことです。ボタンなどにロールオーバーが使用されている場合が多いです。

・アコーディオン
アコーディオンとは、一つの領域が開かれたら別の全ての領域が閉じる仕組みのことです。狭い箇所に多くの情報を収納できるため、Webサイトのサイドバーやグローバルメニューなどにアコーディオンがよく使われています。

・ツールチップ
ツールチップとは、例えばある要素にマウスポインタを合わせると、小さな枠が現れてより詳しい情報を見ることができる仕組みのことです。
ツールチップを使用しますと、ユーザーに対して補足情報を必要なタイミングで提供することが可能になります。

・スライドショー
スライドショーとは、画像が一定時間で別画像に切り替わる仕組みのことです。トップページに配置するメイン画像やバナー画像を切り替える等、スライドショーが使用される場面は多いかと思われます。

・文字入力箇所の補助
様々な入力補助のための仕組みが存在します。例えばお申し込みフォームなどに文字入力をする際、文字入力箇所にフォーカスを当てると(クリックをすると)枠線に色が付く仕組みがあります。また、文字入力箇所に入っていた入力例の文字列が、フォーカスを当てることで消えるという仕組みもよく使用されています。

Javascriptのプログラムを使用しますとWebサイトに動的要素をプラスすることができ、より豊かな表現が可能になります。動的な要素に興味がある方は、Javascriptの学習をぜひ進めていただければと思います。

(担当:斉藤 万幾子

投稿日時:
タグの中でスペースキーを使用した場合、ブラウザではスペースがそのまま表示されますか?
スペースキーには半角と全角がありますが、半角の方から説明します。タグの中で半角のスペースを空けても、通常は文字として認識されないため、ブラウザに反映されません。半角のスペースを表示させるには、実体参照( )を使用してください。一部のブラウザでは全角のスペースは文字として認識されるため全角分のスペースを空けることができますが、HTMLのルールを司るW3Cの仕様からは外れている機能のため、少し注意が必要です。従って、スペースを空ける場合は実体参照を使用することをお勧めします。
タグの外でスペースキーを使用した場合、ブラウザでの表示に影響は出ますか?
よほど古いバージョンのブラウザでない限り影響はありません。
投稿日時:
Webサイトを作成する際には、どのようなソフトを使用することが多いのでしょうか?
Webページの作成・編集を行う際は、HTML/CSSについてはAdobe社のWebオーサリングツール(編集ソフト)のDreamweaver、画像については同じくAdobe社のPhotoshopなどがよく使用されています。ただし、これらのソフトを使用する際には、少し気をつけた方が良いと思われるポイントがあります。

まず、Dreamweaverについてですが、HTML/CSSのまったくの初心者の方が、いきなりDreamweaverを使用することはお勧めしません。
HTML/CSSの作成(コーディング)の際には、必ず守らなければならないルールがいくつか存在します。
そのルールをきちんと習得する前にDreamweaverのような編集ソフトを使用しても、簡単なWebページを作成することは出来るかもしれませんが、より高度なページや使い勝手の良いページを作成しようと思った際には、基本的なコーディングのルールを理解していないため、作成が難しくなる状況が発生する可能性が高くなります。すなわち、編集ソフトを使用する本来の目的である「生産性の向上」には結果的に言えば直結しない可能性があるということなのですね。
まずはコーディングの基本ルールをしっかり習得した上で、さらに生産性を向上させるためにDreamweaverを活用するというのが、本来のあるべき姿であると私は考えています。

一方で、画像の作成についてはPhotoshopを活用することが一般的です。画像の色調整やトリミングはもちろん、様々な効果をボタン一つで設定することが可能ですので、本格的に画像編集を行う場合にはPhotoshopを利用することが殆どです。ただし、無料でPhotoshopに近い操作ができるWebアプリケーションも存在します。Web制作を本職にする方はPhotoshopは必須ツールの一つとなると思いますが、Webページを時々更新する程度でしたら、無料のWebアプリケーションでも十分に対応可能なケースも多くあります。
当校ではこのような「Webページを時々更新する際に、手軽に画像編集が出来たら」という方向けの講座である「Webデザイン作成入門」セミナーも開講しています。
Photoshopを購入する前にWebアプリケーションを使って練習をし、画像作成・編集に関する感覚をつかむということも、よい方法ではないかと思います。

いずれにしても大切なポイントは、どのソフトを使用する場合であっても「基本をしっかり押さえたうえで」多くの練習をこなし、経験を積み重ねることになります。基本を飛ばしてソフトに頼っても、結局は遠回りになってしまう可能性が高いですので、まずはしっかり基本を学習することをおすすめします。

(担当:斉藤 万幾子