ウェブサイトをどんな外見にするか
「ウェブサイトをどんな外見にするか」では、コードを書き始める前に、このウェブサイトについて計画したりデザインしたりすべき事柄について説明します。例えば「どんな情報をウェブサイトで提供するのか」「どのフォントや色を使いたいのか」「このウェブサイトは何をするのか」などです。
| 前提条件: | コンピューターのオペレーティングシステム、ウェブサイトを構築する際に使用する基本ソフトウェア、およびファイルシステムに概ね慣れておくこと。 |
|---|---|
| 学習成果: |
|
まず最初に: 計画を立てる
始める前に、いくつか考えておかなければいけないことがあります。このウェブサイトは実際に何をすべきでしょうか？普通ウェブサイトは様々なことができます。しかし、はじめは単純なことにとどめておくべきでしょう。まずは、見出し一つ、画像一つ、そしていくつかの段落のある単純なウェブページを作ることから始めましょう。
まずはじめに、次の質問に答える必要があります。
- 何についてのウェブサイトですか？ 犬、ニューヨーク、それともパックマン？
- 主題についてどんな情報を表現しようとしていますか？ タイトルといくつかの段落、それからページに表示させたい画像を考えます。
- ウェブサイトをどんな外見にしますか？ 簡単で大まかな言葉で言うと？背景色は？適切なフォントはフォーマル？漫画？太字で派手？繊細？
メモ: 複雑なプロジェクトでは、色、フォント、ページのアイテム間の余白、適切な文体など、詳細なガイドラインが必要です。これは、デザインガイド、デザインシステム、ブランドブックなどと呼ばれます。一例として、 Firefox Acorn Design Systemがあります。
デザインをスケッチする
次に、ペンと紙を取って、あなたのサイトの見た目をどういう風にしたいのか、大まかに描き出します。はじめてのシンプルなウェブページでは、描き出すものもあまりないですが、ウェブサイトを作るうえでの習慣として身につけるべきです。ヴァン・ゴッホのようになる必要はありませんので！
メモ: 現実の複雑なウェブサイトの場合でも、デザインチームは普通、ラフスケッチを描くことから始めます。その後、グラフィックエディターやウェブの技術を使って、デジタルのモックアップを作るのです。
多くの場合、ウェブの開発チームには、グラフィックデザイナーとユーザーエクスペリエンス (UX) デザイナーがいます。グラフィックデザイナーは、ウェブサイトの見た目を作り上げます。 UX デザイナーは、もう少し抽象的な役割を持っていて、サイトを訪れるユーザーがウェブサイトでどういう経験をし、どのように操作するかということを考えます。
この時点で、最終的にウェブページに現れるコンテンツの用意を始めておくといいでしょう。早くから文章とタイトルを決めておいてください。これらを近くに置いておいてください。
テーマカラーの選択
ページの背景色を選びましょう。
- 色を選ぶときは、色選択ツールへ行き、好みの色を見つけましょう。色をクリックすると、
#660066のような 6 桁の奇妙なコードが出てきます。これは 16 進コードと呼ばれ、選んだ色を表します。今はどこか安全なところにコピーしておきましょう。
画像の選択
それでは、サイトに表示させる画像を探しましょう。
-
Google 画像検索に行きます。
-
なお、Google 画像検索を含め、ウェブ上のほとんどの画像には著作権があります。著作権侵害のリスクを減らすには、Google のライセンスフィルターを使用しましょう。「ツール」ボタンをクリックし、下記に現れる「ライセンス」オプションをクリックしてください。そこで「クリエイティブ・コモンズ ライセンス」を選択できます。
-
合う画像を検索します。
-
探している画像が見つかったら、その画像をクリックして拡大表示にしてください。
-
画像を右クリック（Mac では Ctrl + クリック）し、「画像を名前を付けて保存...」を選択して、安全な場所を選んで画像を保存してください。
フォントの選択
ウェブセーフフォントと呼ばれるフォント群（Arial、Times New Roman、Courier New など）があり、これらは一般的にほとんどのコンピューターシステムで利用可能です。ウェブサイト上でこれらのフォントのいずれかを使用すると、ブラウザーはユーザーのコンピューターにあるフォントファイルを読み込みます。
ただし、端末に通常は利用できない他のフォントを使用したい場合は、ウェブサイトのファイルにそれらを記載するか、サードパーティーのフォントサービスからフォントファイルを参照して、ブラウザーが必要に応じてダウンロードできるようにする必要があります。Google Fonts は、数多くのフォントを利用できるそのようなサービスのひとつです。
Google Fonts を使用して、ウェブサイトのフォントを選びましょう。
- Google Fonts へ移動します。
- フォントの一覧をスクロールして、気に入ったフォントが見つかるまで探してください。もし見つからない場合は、他の列にあるフィルターを使用して検索を絞り込むことができます。
- フォントのオプションをクリックし、次のページで "Get font" ボタンをクリックしてください。
- 次のページで、「埋め込みコードを取得」をクリックしてください。
- 指定された 2 つのコードブロックを両方ともコピーし、後で使えるように安全な場所に保存しておいてください。
メモ: 画像と同様に、多くのフォントはライセンスによって保護されているため、商用ウェブサイトで必ずしも自由に使用できるとは限りません。学習用のサンプルを作成している段階では問題ありませんが、実際のウェブサイト用にフォントを選ぶ際には、この点を念頭に置いておいてください。