「Web サイトをどのような外見にするか」では、「どんな情報を Web サイトで提供するか」、「どのフォントと色を使うのか」、「私の Web サイトは何をするのか」といった、コードを書き始める前にあなたの Web サイトについて計画したりデザインするべき事柄について説明します。
まず最初に: 計画を立てる
始める前に、いくつか考えておかなければいけないことがあります。あなたの Web サイトは実際に何をすべきでしょうか？普通 Web サイトは様々なことができますが、はじめは単純なことにとどめておくべきでしょう。まずは見出し、画像、そしていくつか段落をもつシンプルな Web ページを作ることから始めましょう。
まずはじめに、次の質問に答える必要があります。
- 何について書かれた Web サイトですか？ 犬、ニューヨーク、それともパックマン？
- テーマについてどんなことを書きますか？ タイトルと少しの文章、それからページに表示させたい画像を考えます。
- Web サイトをどんな見た目にしますか？ シンプルで高いレベルから考えます。背景の色は何色にする？サイトにピッタリのフォントの種類はどんなもの？フォーマルなフォント？漫画みたいなフォント？くっきりとした太字？それとも、繊細な細字のフォントでしょうか？
注記: 複雑なプロジェクトでは、カラー、フォント、ページのアイテム間のスペース、適切な文章のスタイルなど、詳細なガイドラインが必要です。これは、デザインガイドやブランドブックと呼ばれます。一例として、Firefox OS ガイドラインというガイドラインがあります。
デザインを大まかに描き出す
次に、ペンと紙を取って、あなたのサイトの見た目をどういう風にしたいのか、大まかに描き出します。はじめてのシンプルな Web ページでは、描き出すものもあまりないですが、Web サイトを作るうえでの習慣として身につけるべきです。Van Gogh (ゴッホ) のようになる必要はありませんので！
注記: 現実の複雑な Web サイトの場合でも、デザインチームは普通、ラフスケッチを描くことから始めます。その後、グラフィックエディタや Web の技術を使って、デジタルのモックアップを作るのです。
多くの場合、Web の開発チームには、グラフィックデザイナーと user-experience (UX) デザイナーがいます。グラフィックデザイナーは、名前の通り Web サイト上の目に見えるイメージなどを作り上げます。UX デザイナーは、もう少し抽象的な役割を持っていて、サイトを訪れるユーザーが Web サイトでどういう経験をし、どのようにインタラクションするかということを考えます。
アセットを選ぶ
この時点で、あなたの Web ページについて、将来どう表現したいかをまとめ始めるとよいでしょう。
文章・テキスト
あなたが先ほど考えたちょっとした文章やタイトルは、まだそのまま残しておきます。手近なところに置いておきましょう。
テーマカラー
色を選ぶときは、色選択ツール (カラーピッカー：Firefox のアドオンやアプリもあります) のサイトへ行き、自分の好みの色を見つけましょう。色をクリックすると、#660066 のような6文字の奇妙なコードが出てきます。これはヘックスコード（16進法のコード）と呼ばれ、あなたの選んだ色を表しています。今はどこか安全なところにコピーしておきましょう。
画像・イメージ
画像を探すには、Google 画像検索 にアクセスし、ぴったりなものを探しましょう。
- 欲しい画像が見つかったら、それをクリックします
- 画像を表示 ボタンをクリックします
- 次のページで画像を右クリック (Mac では Ctrl +クリック) し、[名前を付けて画像を保存...] を選択して、画像を安全に保存する場所を選択します。または、後で使用するためにブラウザのアドレスバーから画像の Web アドレスをコピーします
注記1: Web 上のほとんどの画像には、Google 画像検索で見つかるものにも、著作権があります。あなたが著作権を侵害してしまうのを防ぐために、Google のライセンスフィルターを使うと良いでしょう。それには、次の画像のようにして、1) ツール をクリックし、2) ライセンス を選びます。
注記2: 2018年2月15日現在、Google は画像の表示ボタンを削除しています (https://twitter.com/searchliaison/status/964226180776845312/photo/1を参照)。Google以外の方法として、Bing Images や米 Yahoo が同じように使用できます。
フォント
次のような手順でフォントを選びます。
- Google Fonts に行き、ページをスクロールして気に入ったフォントを見つけます。右側のコントロールを使って、結果をフィルタすることもできます。
- 使いたいフォントの上にあるプラス (追加) アイコンをクリックします。
- ページ下部のパネルにある "* Family Selected" と書かれたボタンをクリックします ("*" は選択したフォントの数によって変わります)。
- ポップアップボックスに、Google が用意してくれた数行のコードが表示されるので、あとでテキストエディタに入力する時のためにコピーしておきます。
