【Webデザイナー入門ブログ】HTMLの基本!Webの基本構造を知る
目次
HTMLの基本!Webの基本構造を知る
HTMLとは
コンピューターに指示を出すのがHTML
Webページの土台となるファイルを作成する言語。
Webページに表示したい文書などを「<」と「>」(タグ)で囲んで書いていきます。
(例)
コンピューターがそのページの構造を理解できるようにすることがHTMLの役目
よく使う代表的なタグ
タグ | 役割 |
---|
h | 見出し(h1,h2…) |
p | 段落 |
a | リンク |
div | 範囲を指定 |
HTMLファイルの骨組み
- 1行目にDoctype宣言
- これは「html」の文章だという事を表しています。「lang」はWebページの言語を設定できる部分で「ja」は日本語の略です
- <head> </head>は外部ファイルやリンクなど、ページ情報を記述します
- 文字コードを<meta charset=”UTF-8”>にする指定です
- <title> </title>ページのタイトルを記述します
- <meta name=”description”content=””>
検索エンジンでページのタイトルとともに表示される部分です
- <body> </body>HTML文書の本体部分
見出しをつける
見出しタグは
<h1>~<h6>まであります。
見出しタグを使う順番は
大見出しとなる<h1>
中見出しは<h2>
小見出しは<h3>
と上から順番に使っていきます。
まとめ
<h1>は1つのWebページにつき1つがおすすめです
つづく・・・
Webサイト制作の流れ
STEP
企画を立てる
目標を設定する
はじめにメイン目標とサブ目標を設定する
(例)メイン:商品の売上を伸ばすなど
サブ:商品評価を書いてもらう
ターゲットユーザーを決める
(例)趣味、性別、年齢層など
ターゲットユーザーをより具体化した「ペルソナ」(22歳、女性。新しい物が好き、おしゃれなカフェでゆっくりするのが好き、入社2年目、収入は月20万、ライブが好き)とよばれる人物像を設定することでデザインの方向性が定まってきます。
まとめ
ペルソナは実在する人物のように考えます。Webサイトの利用場面も思い浮かべてみましょう
STEP
サイトマップ制作
ページをグループ分けする
構成を上手にまとめるには関連するページをグループ分けすることです。
必要なページを書き出し、関連性のあるページ同士を1つのグループとして分けましょう。
(例)
ページの優先順位
特に見てほしいページやユーザーが求めているであろうページが何かを考えて、優先順位の高いページはすぐに目に止まるようなナビゲーションメニュー内に配置しましょう。
まとめ
サイトマップはペンと紙があれば手書きですぐ作成可能です。階層はなるべくユーザーが迷子にならないように2階層以内がおすすめです。
STEP
ワイヤーフレーム作成
「ワイヤーフレーム」
全ページのレイアウトを考えます。色や装飾などは入れずテキストやライン、ボックスのみで制作します。
コンテンツの優先順位
ページの中でどんな要素が必要かを書き出します。その要素の中でどれが1番見てもらいたいかかを考え、優先順位をつけます。
(例)
- メイン画像
- ロゴ
- ナビゲーションメニュー
- タイトル
- 紹介文
- 商品写真
視線の動きを考える
ユーザーの視線は上から下、左から右に移動します。優先順位の高いコンテンツほど上部や左側に配置しましょう。
まとめ
サイトマップはペンと紙があれば手書きでできます。修正などが大変になるためツールを使うのもおすすめです。
STEP
デザインする
「デザインする」
ワイヤーフレームが完成したら
【デザインカンプ】と呼ばれる、実際のWebページと変わらないデザインをツールを使って作成します。
まとめ
デザインカンプを作成することで、Webページのイメージがしやすくなります。
ユーザーさんが見やすい画像の配置、配色、書体、余白などにも気をつけて作成します。
STEP
コーディング
「ファイルを用意」
必要なのは「HTML」と「CSS」と「画像ファイル」です。
「HTMLでWebサイトのコンテンツを記述」
「.html」ファイルでは、ページ毎にそれぞれファイルが必要になります。
「CSSでWebサイトを装飾」
HTMLだけでは『色、文字装飾、レイアウト』などはできません。なので基本的に装飾に関することは全て「.css」ファイルに記述します。
「画像ファイルを用意する」
使う画像は【images】などのフォルダに保存します。
Webに使える画像は、『JPG、PNG、GIF、SVG、WebP』などです。
(例)
(JPG,PNG,GIF,SVG,WebP 等の画像を保存)
STEP
Webに公開
「Web上に公開する」
パソコンの中にファイルがあるだけでは、サイトを閲覧できるのは自分だけになります。
世界に公開するには、Webサーバーにファイルを転送する必要があります。
「※1サーバーを用意」
Webサーバーは一般的にサーバー会社からレンタルして利用します。会社によって料金やできる事が違うので、自分のサイトにあったサーバーを選択しましょう。
月額500円〜でもサーバーをレンタルできます。
「ドメインを取得」
ドメインとはサイトの場所を表す【住所】のようなものです。ドメインの名前は世界にひとつだけです。
サーバー会社さんによっては申し込んだ時点でドメイン取得の手続きも同時に行える会社もあります。
「Webサーバーにアップロード」
用意したサーバーにファイルをアップロードします。ファイルの数が多い場合にはファイル転送ソフト「※2FTP」のほうが、アップロードがスムーズになります。
※1 サーバーとは?
①何らかのデータを受け取り
②受け取ったデータをもとに何らかの処理をし
③処理を行った結果を返す
という役割を持ったコンピュータ全般のこと
※2 FTPとは?
FTP(File Transfer Protocol)
「ファイルを送受信する時に使う決まりごと(通信プロトコル)」です。
Webサイト制作を始める前のステップ
STEP
テキストエディターをインストール
HTMLやCSSファイルの作成は、『メモ帳』などでもできますが、制作するのに役立つ「補助機能」が備わっているテキストエディター(VSCode)がおすすめです。
特に人気なテキストエディターは、Microsoftの「Visual Studio Code」です。
VSCode(Visual Studio Code)を日本語化
手順
拡張機能の画面表示
赤枠ない左端にある拡張機能アイコンをクリックします。
手順
拡張機能をインストール
左上検索から
「Japanese Language Pack for Visual Studio Code」を検索し表示されたら選択し、「Install」ボタンをクリックします。
Screenshot
手順
日本語化完了
VSCodeを再起動するメッセージが表示されるので、案内に従って再起動すると日本語表示へ変わります。
STEP
ブラウザーをインストール
ブラウザーによって多少表示が異なります。
そのため、ユーザーがどのブラウザーを利用するかわからないので、なるべく全てのブラウザーで動作確認をしておくのがおすすめです。
よく利用されるブラウザアプリ
- Google Chrome
- Safari
- Firefox
- Microsoft Edge
STEP
グラフィックツールおすすめ
グラフィックツールとは、イメージやデザインを作成したり編集したりするためのツールのことです。
Figuma
デザインカンプ(完成見本)の作成に便利なツールです。
簡易なアニメーションなども含めた実際に動作しているような「プロトタイプ」も作成できます。
ブラウザー上で扱えるのでとても便利です。
Figma
Canva
デザイン作成の経験が少なくても、Canvaには魅力的なテンプレートが豊富にあるので、ビジュアルコンテンツを比較的容易に作成することができます。
こちらもブラウザー上で扱えるので便利です。
Canva
Adobe photoshop & Illustrator
言わずと知れたAdobeの代表的なツールです。PhotoshopとIllustratorを扱えれば、それだけで専門的なお仕事ができるくらい幅広い活動に利用できます。
少々費用が高い点と、動作する環境がある程度のスペックを求められるので導入障壁が高いのが難点です。
Adobe photoshop
まとめ
最初に知っておくと便利な「Webサイトの基本」
いざ、Webサイトを作ろうと思っても、何から始めたらいいのか悩みますよね。
本記事を参考に、Webサイトの基本的な構成やWebサイトを制作する流れを把握して、学習のお役に立つことを願っています。
ご質問や、サイト制作に関するお問い合わせはメールフォームよりお寄せください。
その他のお問い合わせ
0267-25-5990
info@ailesys.co.jp
営業時間:9:00〜18:00
定休日:土曜、日曜、祝日