自社ホームページ作成に便利なテンプレートとは

自社ホームページをご自身で作成するためには、Webサーバ、ドメインなどの環境が必須です。
また、ページそのものを作っていくための土台としてCMSを導入すると制作だけでなくその後の運用も非常に楽になります。

HTML・CSSを記述してページを作成していく場合にも、CMSを使って制作を進めていく場合にも、デザインテンプレートを入手すると制作のスピードを加速することができるでしょう。

HTML・CSSを記述する場合と、CMSを使用する場合、さらにCMSもその種類によって変わってきますが、それぞれの場合での「デザインテンプレート」とは何なのか、どう言ったものがおすすめなのかについてこの記事でご紹介していきます。

ホームページのデザインテンプレートとはどんなもの？

ホームページの「デザイン」とは何かと聞かれてどんなものを想像されるでしょうか？

ホームページ・ウェブサイトには、ページ全体を構成するいくつかのパーツがあります。

まずはこれらのパーツとそれぞれの中身のレイアウト、大きさ、色味など、ページ全体の構成が「デザイン」の主要な要素になります。
一番目につく部分でしょう。

ホームページのデザイン要素は、これだけではありません。
HTMLでは、ページ内に配置する要素は「タグ」というもので記述します。
それぞれのタグには、意味・役割が持たされています。

Webページの大きな特徴である「リンク（アンカー）」と言うものがあります。
ページ内の文字や画像にリンクを設置し、指定したページにジャンプする機能を持たせることができます。
このリンクは<a>というタグを使用して記述します。

他に、見出し、段落、テーブル（表）、リスト、ボタンなどの要素でWebページは記述されています。

こういったページ内容を構成する要素にも「デザイン」が必要です。
見出しならば、上下の余白はどれくらい取るのか、左寄せなのか中央寄せなのか、見出しの下に下線を引く、見出しの左に太めで短い縦線を引く、などといったレイアウトから色味、装飾が施されます。

テーブル（表）の場合にも、奇数列と偶数列で背景色を塗り分けて見やすくしたりします。

リストでは通常、リスト要素の左端に黒丸がつきます。
その内容によって、リスト要素の左端に黒丸ではなく、チェックマークやアスタリスク、PDFなどのファイルの種類を示すアイコンを付けることで、よりそのリストが何を言いたいのかが分かりやすくなるでしょう。

こういったコンテンツ内で使用するデザイン要素については、別記事でもご紹介しています。
ご興味のある方はご一読ください。

ホームページの「デザイン」とは、ページ全体を構成するパーツのデザインと、本文などの要素のデザインの大きく二種類があります。
「デザインテンプレート」とは、これらがセットになったファイルのことを指す、と理解すればよいでしょう。

ところで、ホームページ・Webサイトを作成する際に重要なのは、デザインよりもその中身の文章などです。

SEO（Search Engine Optimization）はGoogle検索などの検索ページで、自分のページが上位表示されることにより、自分のページへのアクセスを増やすための施策です。
そのためには、あるキーワードで検索したユーザが求めている内容を充実させる必要があります。
実際にご自身がGoogleで検索する際に、求める結果や知りたい情報というものがあるはずです。
Googleは、そういった検索エンジンユーザがより便利になるように日々プログラムをアップデートさせ続けています。

ですから、まずは見てもらうためにページの内容に注力する必要があります。
どんなにデザインが良くても、そもそもアクセスがなければ全く意味がありません。
真っ暗闇の中に置かれた誰も見ることのできない宝石のようなものでしょう。

デザインテンプレートを使うことは、内容に注力するためにとても良い方法だと言えるでしょう。

HTML・CSSのテンプレート

それではここからは、ページを作成していく方法ごとに、デザインテンプレートがどんなものなのかを見ていくことにしましょう。
まずはHTML・CSSでコーディングしていく場合です。

基本的に、ダミーの文章や画像を使った内容でコーディングされたファイルになります。
HTML、CSS、Javascript、各種画像データで構成された、テキストファイルや画像ファイルの集まりです。

テンプレートをダウンロードしてzipを解凍すると、上記の各種データがセットになったファイルが展開されます。
それぞれのページから、CSSや画像などにリンクが貼られていて連携が取れた状態になっています。
そのため、リンクを無視してCSSや画像ファイルやそれらを含むフォルダをバラバラに移動させると、ページが正しく表示できなくなります。

ファイルの階層構造を崩さないようにそのまま、Webサーバの公開ディレクトリに配置すると、まずは「テンプレート状態」のページを公開することができます。

ちなみに、単純にHTML、CSSなどで構築されたWebページの場合で、データベースやPHPなどのプログラムが使われていない場合、パソコンにダウンロードして展開したデータを、そのままブラウザで閲覧することができてしまいます。
とりあえず確認したり、パソコン上で編集作業をする場合にはとても便利です。
WordPressなどのCMSを使用する場合には、PHP、データベースの設置も必要になるため、こんなに簡単にはいきません。

ロゴ画像、ダミー画像、本文を書き換えてあげることで、ご自身のページを作成することができます。

HTML・CSSでコーディングするメリット

ここで少し、HTML・CSSでコーディングするメリットについて考えてみましょう。
いくつかのメリットがあります。

軽量性

まずは軽量性でしょう。
CMSではより確実便利にその内容を管理していくために、テンプレートや本文の内容、さらには追加機能など様々なパーツを、サイト内にバラバラに保管している状態になります。
そのためページを表示する際に、プログラムが稼働してそれら必要なデータを集め再構築・表示する処理が走ることになります。
これに対してHTML・CSSでコーディングされたページは、そういった前処理がない分はるかに早いスピードでページを表示することが可能になります。

コストパフォーマンス

ひょっとしたら、コストパフォーマンスを挙げる方もいらっしゃるかもしれません。
CMSのでWordPressはオープンソースのプログラムで、使用するために費用はかかりません。
しかし中には有料で販売・管理されているCMSも存在します。
オープンソースであることを理由にWordPressを選択できない場合には、コストのかからないHTML・CSSでのコーディングにメリットを見出せる場合もあることでしょう。

HTML・CSSでコーディングするデメリット

当然ながら、HTML・CSSでコーディングするデメリットも存在します。
メリットよりも数は多いかもしれません。

構築と運用のコスト

まずは構築と運用のコストです。
HTML、CSSで構築するためには専門的な知識が必要になります。
これは社内にHTML・CSSを扱える人材がいないという設定です。
そのため、費用をかけてHTML・CSSでウェブページを制作してもらったさらにその後運用の段階において、情報をアップしたり、ページの内容を修正したりする際に、簡単な記事をアップするにも費用を払って専門業者に更新を依頼しなければならなくなることでしょう。

学習コスト

学習コストも挙げられるでしょう。
社内でホームページ開発プロジェクトを立ち上げる際、コーディングを担当するメンバーに専門知識がない場合、一から学習する必要があります。
Webサーバなど環境についての学習にも時間がかかることでしょうが、HTML、CSSのコーディングについて学習するにはさらに時間がかかることでしょう。
さらに後任のメンバーに指導していくのも簡単なことではありません。

共通パーツ管理

Webサイト内では、それぞれのページで共通パーツと言うものが存在します。
この記事の冒頭で述べたように、ヘッダー、サイドカラム、フッターなどはサイト全体での共通パーツです。
ところが、単純にHTML・CSSでページを記述した場合、それぞれのヘッダー、フッターなど共通パーツの記述はそれぞれのファイルに独立して存在することになります。
そのため、ヘッダー内に項目を追加しよう、またはグローバルナビゲーション（メインメニュー）の構成を変更しよう、などといった場合、全てのページファイルのヘッダー部分をひとつひとつ書き換えなければいけなくなってしまいます。

コーディングミス

コーディングに失敗することもあります。
HTMLはタグを使って記述していきます。
ほとんどのタグには開始タグと終了タグがあります。
タグが入れ子になった状態で記述されるのが通常で、よくあるコーディングのミスでは、どこかの終了タグを間違えて消してしまった、などの事例です。
コーディングをサポートしてくれるソフトウェア適切に使ったり、入れ子になっているタグの行の先頭には入れ子に応じた空白やタブを入れることで、ソースコードの見た目から階層構造を管理しやすいようにコーディングする、など様々な工夫が必要になります。
こういったコーディングミスは、ページの更新などに発生しやすくなります。

事前の適切な画像編集

画像を使用する際に、常に手作業で適切なサイズ（解像度）に設定しておく必要があります。
例えば私が通常使用するPCの画面サイズは幅1400px程度で、実際PCで閲覧される際にも比較的スタンダードな画面でしょう。
これ以上のサイズ、極端な例では幅4,000pxなどの画像は、ほとんどの場合で無駄に大きすぎると言えるでしょう。
Webページでは、ページを閲覧する都度、Webサーバからページのデータをダウンロードした上で表示させる仕組みです。
無駄に大きな画像を配置すると、無駄に大きなデータをダウンロードさせることになり、その分ページの表示速度が圧倒的に落ちてしまいます。
CMSを使用する場合には、CMS内のプログラムによってアップロード時に適切な解像度や画像フォーマットに自動で変換させることができるため、HTML・CSSでページ制作する際には、その分手間がかかると言えるでしょう。

ページファイルの管理

ページのデータがどこにあるのかわかりにくくなることもあるかもしれません。
先ほどHTMLテンプレートのファイル構造を例示しましたが、実際にHTML・CSSでコーディングされたサイトはこれがさらにファイル数が多くなった状態となり、また個別の記事が増えるほどにファイル数はさらに多くなっていきます。
また、ファイル名がそのままページのURLに使用されるため、基本的にファイル名に日本語は使用しません。
そのため、アルファベットで記述されたファイル名のファイルが並ぶことになるため、どれがどのページだったか…と迷う場面も出てきてしまうかもしれません。

HTML・CSSでコーディングするメリットデメリットのまとめ

このように書くと、HTML・CSSでコーディングすることはデメリットが圧倒的に大きいように思われるかもしれませんが、決してそうではありません。
メリットの項目で述べたとおり、ページの表示速度のメリットが非常に大きいのです。
表示速度は、ユーザビリティ（使いやすさ）の一項目としてGoogleなど検索エンジンの評価の一つにもなっているようです。

そのため、ホームページ制作業者によっては、そのメリットを最大限に活かすため、普段あまり更新しないページについてはHTML・CSSでコーディングし、新着情報、お知らせ、ブログなど頻繁に更新する内容について飲み部分的にCMSを導入する、という合わせ技を使用する場合もあります。

それぞれの長所を活かしてコーディングすることができれば、より多くのユーザの役に立ち、事業にも貢献するサイトを構築することができることでしょう。

HTML・CSSのデザインテンプレート入手方法

それでは肝心要、HTML・CSSのデザインテンプレート入手方法についてご紹介します。

HTML・CSSのデザインテンプレートを公開しているサイトが数多く存在しています。
有料のサイトもありますが、無料で配布しているサイトも多く存在しています。
ここでは、その中でも独断と偏見により使いやすいと感じたサイトをご紹介していきます。

WordPressのデザインテンプレート

最後に、世界で最も多く利用されているCMSであるWordPressのデザインテンプレートについてご紹介します。

WordPressのデザインテンプレートは「WordPress Theme（テーマ）」ないし「Theme（テーマ）」と呼ばれています。
Themeの基本的な機能として、HTML・CSSのテンプレートのようにページ全体のレイアウトなどのデザインを提供する機能と、CSSによってページ内で使用する要素（タグ）のデザインを提供します。

WordPressテーマは、WordPress Theme Directoryというページで検索・入手することができます。
また、自身のWordPressの管理画面内「外観」メニューからも直接Theme Directoryを検索・インストールすることができます。

ページ全体の共通パーツや要素のデザインを提供するのがWordPressテーマですが、トップページの構成テンプレートを持つテーマも存在します。
例えば、トップページの始めにアイキャッチとしてスライド機能があり、次にお知らせのリストがあり、サイトのキャッチコピーや特徴を記述するパートがあり、ブログの一覧があり…と言った具合です。
高度なものになると、パーツごとに表示・非表示を切り替えたり、あるいはパーツの順番を入れ替えたり、と言ったことができるものもあります。

従来のWordPressテーマ

従来のWordPressの場合、高度な編集機能を持っていて、例えばヘッダーやサイドカラム、フッターなどのエリアに、テキストや画像、その他カテゴリーリンクや月別アーカイブへのリンクなど高度なパーツを配置できる機能（ウィジェットと呼ばれる）を持っていました。

また、「外観 > カスタマイズ」メニューから、テーマ独自の変更設定が可能なテーマも存在します。
例えば基本的なカラーパターンを設定する機能や、ページ内の特定の箇所の表示方法を切り替える機能など、テーマによって様々です。
「外観 > カスタマイズ」はWordPressテーマの設定を変更する基本的なメニューですが、それ以外にも独自の管理メニューを持ち、より高度な設定変更機能を提供しているテーマも存在しています。
テーマが設定機能を提供していない部分があれば、テーマファイル（PHP、Javascriptなどで構成される）そのものをカスタマイズ（コーディングまたはプログラミング）する必要があります。

その場合には、HTML、CSSの知識はもちろんのことPHPの知識も必要になってきます。
PHPはWebサーバ上で動くプログラミング言語で、WordPressのプログラムもPHPで記述されています。
プログラムでは、様々な処理を記述した「関数」というものが使用されます。
PHP自身が持つ関数もありますが、WordPress内ではWordPress独自の関数も使用されています。
テーマを大元からカスタマイズする場合、HTML、CSS、Javascript、PHP、WordPress関数をフル活用することになります。
ちなみに、データのほとんどはMySQLというデータベースに格納されていますが、データベースとのデータのやり取りについてはWordPress関数でパッケージされた処理を使いまわすことがほとんどのため、独自にSQLを記述してMySQLにコマンドを発行することは少ないかと思います。

ブロックテーマの登場

WordPress 5.9からは、さらに発展して「ブロックテーマ」と呼ばれる、ヘッダー・フッターなどを含むサイト全体を自由に編集することができるテーマが登場しました。
WordPressには公式テーマと呼ばれる、西暦の名前を持つテーマがありますが、「Twenty Twenty-Two」から採用されました。
これによって、ページ全体のデザインを用意・制作済みであれば、それを元にほぼノーコードでテーマを作成することもできるようになりました。
CSSの追加・変更などは必要ですが、ヘッダー・フッターなど共通パーツの構成を変える場合にテーマそのものをいじる必要がなくなりました。

「ブロックテーマ」に先んじて、「ブロックエディタ」と呼ばれるページの編集エディタ機能が開発・公開されていました。
それまでは、ページ本文についてはやはりHTML、CSSを最低限使って記述する必要がありました。
そのため、横2列（カラム）レイアウトなどを実現しようとすると、HTMLとCSSの記述が必須でした。
ブロックエディタは、2カラム、3カラムなどレイアウトや、ページ内の構成パーツである、見出し、段落、画像、ファイルなど全てブロックパーツとして使用して配置していくことで、ほとんどあらゆるレイアウト・デザインを簡単に実現できるようにした編集機能です。
このブロックエディタが発展する形でブロックテーマが開発されました。

先ほど、トップページの構成テンプレートを持っているテーマも存在することをご紹介しましたが、ブロックエディタがより使いやすくなっていったことで、それまでは構成テンプレートがないと難しかったページ内のレイアウトも簡単に制作することができるようになりました。

Theme Directory以外で配布されているテーマ

先ほどご紹介したテーマディレクトリ以外で配布ないし販売されているWordPressテーマも存在します。
近年、日本国内の企業や個人が手がけた秀逸なテーマも多く見られるようになりました。

ここではその中から、やはり独断と偏見によりおすすめのテーマまたはテーマ開発会社をご紹介していきます。

まとめ

HTML・CSSでコーディングするCMSを使わないホームページ構築と、CMSの中でも特にシェア率の高いWordPressのテンプレートについてご紹介してきました。

いずれの場合でも日本国内で制作されたものの中に特に優秀で使いやすいものが多く見受けられるようです。
やはり日本語メインのページには日本語向けのテンプレート、ということでしょうか。

ホームページのテンプレートは、サイト全体のレイアウトと装飾（ヘッダー、コンテンツ、サイドカラム、フッターなど）とコンテンツに使用する部品のデザイン（主にCSSが使用される）ものでした。
ひょっとしたら、「文章のテンプレート」のようにコンテンツそのもののテンプレートをお探しの方もいらっしゃったかもしれません。

ホームページの内容そのものの作り方、考え方についてはまた別途ご紹介できればと思いますが、まずは下記のようにトップページ以外の内容を先に考えてみるのも良いかもしれません。

お分かりになりますでしょうか？
トップページはその他のページの索引（インデックス）としての役割が強いのです。
ホームページのトップページのファイル名はindex.html、index.phpとなっていてWebサーバの基本設定になっています。

より重要なページへの導線・紹介を先に持ってくることも重要です。
これはそれぞれのページの中でも同様です。

ホームページ・Webサイトにとって何よりも重要なのはその内容です。
何より重要な内容の制作に注力できるよう、デザインテンプレートを上手に利用して自社ホームページの制作・開発を進めていきましょう。

本記事が事業者の皆様のお役に立ちますように。