ウェブサイトをどんな外見にするか

前のページ Overview: Getting started with the web 次のページ

「ウェブサイトをどのような外見にするか」では、「どんな情報をウェブサイトで提供するか」、「どのフォントと色を使うのか」、「私のウェブサイトは何をするのか」といった、コードを書き始める前にあなたのウェブサイトについて計画したりデザインするべき事柄について説明します。

まず最初に: 計画を立てる

始める前に、いくつか考えておかなければいけないことがあります。あなたのウェブサイトは実際に何をすべきでしょうか？普通ウェブサイトは様々なことができます。しかし、はじめは単純なことにとどめておくべきでしょう。まずは、一つの見出し、一つの画像、そして少しの文章をもつシンプルなウェブページを作ることから始めましょう。

まずはじめに、次の質問に答える必要があります。

何について書かれたウェブサイトですか？ 犬、ニューヨーク、それともパックマン？
テーマについてどんなことを書きますか？ タイトルと少しの文章、それからページに表示させたい画像を考えます。
ウェブサイトをどんな見た目にしますか？ シンプルで高いレベルから考えます。背景の色は何色にする？サイトにピッタリのフォントの種類はどんなもの？フォーマルなフォント？漫画みたいなフォント？くっきりとした太字？それとも、繊細な細字のフォントでしょうか？

注記: 複雑なプロジェクトでは、カラー、フォント、ページのアイテム間のスペース、適切な文章のスタイルなど、詳細なガイドラインが必要です。これは、デザインガイドやデザインシステムやブランドブックと呼ばれます。一例として、 Firefox Photon Design Systemがあります。

デザインを大まかに描き出す

次に、ペンと紙を取って、あなたのサイトの見た目をどういう風にしたいのか、大まかに描き出します。はじめてのシンプルなウェブページでは、描き出すものもあまりないですが、ウェブサイトを作るうえでの習慣として身につけるべきです。ヴァン・ゴッホのようになる必要はありませんので！

注記: 現実の複雑なウェブサイトの場合でも、デザインチームは普通、ラフスケッチを描くことから始めます。その後、グラフィックエディタやウェブの技術を使って、デジタルのモックアップを作るのです。

多くの場合、ウェブの開発チームには、グラフィックデザイナーとユーザーエクスペリエンス (UX) デザイナーがいます。グラフィックデザイナーは、名前の通りウェブサイト上の目に見えるイメージなどを作り上げます。 UX デザイナーは、もう少し抽象的な役割を持っていて、サイトを訪れるユーザーがウェブサイトでどういう経験をし、どのようにインタラクションするかということを考えます。

アセットを選ぶ

この時点で、あなたのウェブページについて、将来どう表現したいかをまとめ始めるとよいでしょう。

文章・テキスト

あなたが先ほど考えたちょっとした文章やタイトルは、まだそのまま残しておきます。手近なところに置いておきましょう。

テーマカラー

色を選ぶときは、色選択ツール (カラーピッカー: Firefox のアドオンやアプリもあります) のサイトへ行き、自分の好みの色を見つけましょう。色をクリックすると、 #660066 のような6文字の奇妙なコードが出てきます。これはヘキサコード (16進法コード) と呼ばれ、あなたの選んだ色を表しています。今はどこか安全なところにコピーしておきましょう。

画像・イメージ

画像を探すには、Google 画像検索にアクセスし、ぴったりなものを探しましょう。

欲しい画像が見つかったら、クリックして拡大表示にします。
画像を右クリック (Mac では Ctrl +クリック) し、[名前を付けて画像を保存...] を選択して、画像を安全に保存する場所を選択します。または、後で使用するためにブラウザーのアドレスバーから画像のウェブアドレスをコピーします。

なお、ウェブ上のほとんどの画像には、 Google 画像検索にあるものも含め、著作権があります。あなたが著作権を侵害してしまう可能性を減らすために、 Google のライセンスフィルターを使うと良いでしょう。 ツールボタンをクリックすると、ライセンスオプションが下に表示されます。再使用が許可された画像などの選択肢を選択してください。