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