ホームページ作成/ホームページ作成の基本

ホームページ作成に必要な4つの基礎知識

ホームページ作成に役立つ知識はHTML以外にもあります。ホームページ作成ソフトや制作サービスの機能に任せて整ったデザインを手軽に得る方法もありますが、無料の各種ツールを活用して自作することで自由度の高いWebサイトを作る方法もあります。ウェブ製作に役立つ情報として、4種類に分類した26の技術や知識を簡単にご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ホームページ作成に役立つ知識とは

知っているとホームページ作成に役立つ4種類の知識(制作技術だけでなく運営方法なども知っておけると望ましい)

知っているとホームページ作成に役立つ4種類の知識(制作技術だけでなく運営方法なども知っておけると望ましい)

知っているとホームページ作成に役立つ知識には、大きく分けて下記の大目次に挙げた4種類があります。「ホームページ作成を始めたいが、どんな知識を付ければ良いのか分からない」という方のために、本記事ではそれらの概要をご紹介いたします。

ホームページ作成に役立つ知識はHTMLだけではありません。ホームページを構成する技術的な知識も必要ですが、画像や動画などの各種オブジェクトを作る知識もあればより自由度の高いページ制作ができるでしょうし、たくさんのアクセス者を獲得するために様々な改良を実践する知識もあると望ましいでしょう。

作成したいページの内容に応じて、知りたい情報から少しずつ試すのがおすすめ
作成したい内容に合わせて少しずつ調べて試す方法がおすすめ

作成したい内容に合わせて少しずつ調べて試す方法がおすすめ


最初からすべてを把握しておく必要はありませんし、完璧に理解する必要もありません。興味のあるところから徐々に手を広げていけば、楽しくホームページ作成ができるようになります。

あなたの作成したいページの内容に合わせて、以下の解説を参考にしつつ、必要な部分から少しずつ試してみるのがおすすめです。

【大目次】
  1. ホームページを構成する技術的な知識(用語の一覧)
  2. ホームページ上のオブジェクトを作る知識(用語の一覧)
  3. ホームページをより良く・より便利にする知識(用語の一覧)
  4. ホームページの公開・運営に関する知識(用語の一覧)

 
以下に、小目次としてホームページ作成に関する用語を一覧でご紹介しておきます。各用語をクリックすると、それぞれの解説をご覧頂けます。

 

1. ホームページを構成する技術的な知識(用語の一覧)

ホームページを構成する技術には、HTMLやCSS以外にも多数ある

ホームページを構成する技術には、HTMLやCSS以外にも多数ある

ホームページは主にHTMLという言語を使って書かれており、そこにCSS(スタイルシート)という言語を使って装飾を適用することでデザインされます。JavaScriptというスクリプト言語を使えば、ページ上に様々な機能を用意することもできます。

ほかにもホームページ作成に使える重要な技術は多数あります。詳しく知っておけばウェブ制作の幅が広がるでしょう。

 
  • HTML:ホームページの中身を作成する言語です。無料のページ作成ソフトで作ることもできますが、テキストエディタで直接ソースを書けると制作の自由度が高まります。
  • CSS(スタイルシート):ページのレイアウトやデザインなどの各種装飾を作成する言語です。ページ作成ソフトの記述支援機能を活用して簡単に設定することもできます。
  • JavaScript:ページ上の表示を動的に変更したり、様々な機能を加えたりできるスクリプト言語です。自力で書かなくてもコピー&ペーストで使えるソースも多数公開されています。
  • CGI(PerlやRubyなど)・PHP:メール送信フォームや掲示板などの機能を作成する際にも使われるプログラミング言語です。設置するだけで使えるフリーCGIも多数あります。
  • SSI:複数のファイルをウェブサーバ側で合成して1つのページを構成する際などに活用できる機能です。全ページで共通のヘッダやフッタを分離しておけると管理が容易になります。
  • .httaccess:パスワードによる認証機能を用意したり、アクセス制限を設定したり、エラーページをカスタマイズしたりする際に使えるサーバ設定ファイルです。
  • データベース:CMSツールなどでデータの保存先に利用されます。技術的な知識はなくても、準備方法だけでも知っておけば、各種ツールのセットアップ時などに役立ちます。
  • フレームワーク:レイアウトやデザインが簡単に作成できるパーツ群を提供してくれる仕組みです。無料のフレームワークも多数あり、手軽に整ったデザインが使えます。
  • ライブラリ:ソースの記述量を削減するのに役立つスクリプトのセットなどです。自サイトにセットアップしなくても、CDNサーバ経由で読み込めるライブラリも多々あって便利です。
  • CMSツール:WordPressやMovable Typeなど、ホームページ全体をブラウザ上で作成・編集できるようにした統合ツールです。無料で使えるCMSツールもあります。

 

2. ホームページ上のオブジェクトを作る知識(用語の一覧)

ホームページ上に掲載する画像や動画などオブジェクトを作る知識もあると便利

ホームページ上に掲載する画像や動画などオブジェクトを作る知識もあると便利

ホームページ上に掲載する画像や動画などの各種オブジェクトを自力で作成したり加工したりする知識があれば、表現の幅が広がるでしょう。単に作成するだけではなく、「できるだけ読み込み時間が減らせるようにデータサイズを軽くする方法」や「見栄え良く加工する方法」など、様々な知識があると役に立ちます。

統合ホームページ作成ソフトの付属機能で作ることもできますし、フリーソフトを利用して無料で作ることもできます。

 
  • 画像素材:自分で絵を描く能力や時間がなくても、自分のホームページ上で自由に使える画像を提供してくれるサービスを使えば、手間なく見栄えの良いページを作成できます。
  • 画像加工:画像素材を加工したり、撮影した写真を様々に加工したりできると、表現の幅が増えるでしょう。無料で使えるツールやソフトも多数あります。
  • 動画(アニメーション)作成:ちょっとしたアイコンを動かすアニメーションGIFから本格的な映像まで、動画の作り方や公開方法も知っておくと役に立ちます。
  • Webフォント(アイコンフォント):望みのフォントで綺麗に文字を表示したり、拡大・縮小に耐えるアイコンを作ったり、フォントの活用方法も知っておくと便利です。
  • SNS連携:TwitterやFacebookの「いいね」ボタンを掲載したり、自分のアカウントのタイムラインを埋め込んだり、各種SNSと連携できる機能も無料で提供されています。

 

3. ホームページをより良く・より便利にする知識(用語の一覧)

ホームページをより良く・より便利にする知識もあると望ましい

ホームページをより良く・より便利にする知識もあると望ましい

ホームページを多くの人々に見て欲しいなら、どんな環境で閲覧されても崩れずに意図通りの内容が見えるように気をつけて作成しておく必要があります。PCとスマホとでは画面サイズが大きく異なりますから、モバイル対応を気にすることも重要です。

また、使いやすいようにデザインやナビゲーション機能を改善したり、検索サイトからのアクセス数を増やせるように工夫する施策も実践できると役に立ちます。

 
  • アクセシビリティ・ユーザビリティ:どんな人や環境でも問題なく閲覧できるように作成する方法や、迷わず操作できるように分かりやすさや使いやすさを重視して作る方法があります。
  • モバイル対応:スマートフォンからのアクセス者を逃さないように、スマホやタブレットなどの小型端末からでも閲覧できるようにデザインする方法は必須と言えるでしょう。
  • レスポンシブ・ウェブデザイン:デバイスの種類別にホームページを分けることなく、単一のページであらゆる閲覧環境に対応できるようデザインを作成するテクニックが便利です。
  • SEO(検索エンジン最適化):検索サイトからのアクセス数を増やす方法です。解析サービスも活用して、想定した検索語で自サイトが上位にヒットできているかを確認しましょう。
  • RSSフィード:自サイトの新着情報を効率よく把握してもらうための仕組みです。自動生成サービスやツールを活用すると手間なく提供できて便利です。

 

4. ホームページの公開・運営に関する知識(用語の一覧)

ホームページの公開方法や運営方法に関する知識もあると役に立つ

ホームページの公開方法や運営方法に関する知識もあると役に立つ

ホームページを公開する方法には、住所に相当するドメインや、建物に相当するウェブサーバを用意する必要があり、様々なサービス会社による多数の選択肢があります。ドメインやサーバに関する知識があれば、最も望ましい方法を選択できるでしょう。

閲覧者がどれくらいページを読んでくれているかなどの現状を把握するアクセス解析サービスも使うと運営に役立ちます。また、通信を暗号化するセキュリティ対策にも気を遣いましょう。

 
  • ドメイン:多少の費用をかけても、「allabout.co.jp」のような自分専用のドメイン(独自ドメイン)を取得する方が、分かりやすいURLでホームページを運営できておすすめです。
  • ウェブサーバ:ホームページの公開場所であるウェブサーバには、無料スペースからレンタルサーバまで様々あります。それぞれのメリット・デメリットを知っておくと役に立ちます。
  • SSL証明書:通信を暗号化して(HTTPではなく)HTTPSでホームページにアクセスできるようにしたい際に必要です。無料で取得できるSSL証明書もあります。
  • アクセス解析:どのページを何人がどれくらい閲覧してくれているのかを知るツールやサービスです。「Google Analytics」は、無料のアクセス解析サービスの代表格です。
  • セキュリティ:CMSツールなどのシステムを使う際や、CGIやPHPのような動的にページを生成する手段を使う際は、脆弱性を放置してしまわないように気をつける必要があります。

 
それでは次のページで、上記に挙げた各項目について詳しくご紹介いたします。
  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます