Webサイトを作成する際、ブログ形式なのか、ホームページ形式なのか、html、cssで静的サイトを作成するのか、WordpressなどのCMSを使って作成するのかという選択があります。
その次の選択は、Webサイトのデザイン・レイアウトです。
ホームページやブログのページのほとんどは、基本的な構造は同じです。部分的に、内容を変更して、それぞれのページを作成しています。変更しない同じ部分をテンプレートとして用意しておき、文章や画像を挿入し、他のページへのリンクを設定してそれぞれのページを作成するとブログやホームページ全体でデザインが統一されます。また、デザインを気にせず、記事の作成に注力できるのでサイトの作成が効率的になります。デザインの細かなところまでこだわらなければ、文章や画像の作成に注力できます。
特に、Web制作が本業ではない企業で、ホームページを作成する状況に追い込まれた時には、Web制作企業に発注するより早い納期での作成が要求される場合が多いので、htmlやcssの学習には時間が使えません。できるだけ変更せずにそのまま使えるテンプレートを探して、それをもとに、ホームページを作成することは、とても大切になります。
テンプレートは、いろいろな人が長期間サイトを運営してきた試行錯誤の成果です。 そのため、サイト作成に不慣れな初心者が作ろうとすると何もできないまま時間が過ぎていきます。 まずは、ホームページやブログを運営しようと思った場合、まずは、サイトとして公開することが大切です。テンプレートを活用して、速やかにあなたのサイトを公開するところまで達成しましょう。
Webサイトのデザイン・レイアウトに時間を使うのは間違っている
初めて、ホームページやブログなどのサイトを作成する際、新たに必要な知識や情報は膨大です。それらを調べて理解しながら、更に、文章を考え、写真を撮影、加工し、画像を作成する必要があります。
Webサイトの価値は、それぞれのページを構成する記事であり、Webサイトが発信する情報そのものです。Webサイトのデザイン・レイアウトは、情報を見やすく、探しやすくする手助けをするだけです。
それにも関わらず、Webサイトを作成する際は、Webサイトのデザイン・レイアウトの優劣が、Webサイトの存在価値を決定するような気持ちになり、デザイン・レイアウトを選択したり、作成するために、多くの時間を使ってしまう傾向があります。
きちんと優先順位を判断すれば、デザイン・レイアウトを選択したり、作成する時間を削減し、コンテンツとなる記事の作成に注力したほうが良いのは明らかです。
まずは、テンプレートを活用し、画像と文章のみを差し替えて自分のサイトを作成し、公開してしまい、公開した後、ページを追加しながら、必要な知識や情報を調べて理解していくことをお勧めします。
サイトの成長とともに、あなたのサイト作成技能も成長していきます。個人で運営する場合は、初めから、完全なサイトを作成する事を目指すのは、サイトを公開する前に諦める原因になります。
既に出来上がったテンプレートが、有料・無料で、配布されています。既に出来上がったテンプレートを使用することで、サイトの作成時間を大幅に短縮することができます。テンプレートを作成する事で、サイトのデザインの作成に時間をかけることなく、サイトのそれぞれのページのコンテンツや記事の作成、そのための情報の収集に時間をかけることができます。
素早くWebサイトを公開する
Webサイトを作成することに決めたら、できるだけ素早くコンテンツ記事を作成し、公開すべきです。
既に出来上がったテンプレートを使用することで、サイトの作成時間を大幅に短縮することができます。テンプレートを作成する事で、サイトのデザインの作成に時間をかけることなく、サイトのそれぞれのページのコンテンツや記事の作成、そのための情報の収集に時間をかけることができます。
大まかなWebサイトのスタイル
- 企業サイトなど、業務サイトの場合、通常、ホームページは、全体が完成してから公開し、公開後は、ほとんどコンテンツの変更も追加も行いません。
- ブログ形式では、1記事、1記事ページを追加していきます。「続きは次回」と小出しにすることにより、定期的にWebサイトに訪問を促す仕組みです。CMSまたは、CGIで動作します。Wordpressが使われていることが多いです。
- 物販サイトでは、カートシステムを利用したり、ショッピングモールサービスを使用することが多いです。
既存のテンプレートを使用する
既存のテンプレートを使用することで、Webサイトを作ろうと思い立ったときから、Webサイトを公開するまでの時間を短縮できます。自分でテンプレートを作成しようとすると、テンプレートを作成できるまで、html、cssに関する知識が身につくまで、Webサイトを作成できないことになります。
こだわったデザインの使いやすいWebサイトを作成したいと考えていても、最初に立ち上げるWebサイトでは、おそかれ、はやかれ、コンテンツを追加するうちにまとまりが無くなったり、Webサイト内のコンテンツが、バラバラな場所に配置され、目的の情報に辿り着けない状態になります。
また、Webサイトを運営する過程で、Webサイトの技能向上が望めます。
このような理由から、最初のWebサイトは、デザインにこだわらずに、既存のテンプレートを使用して、素早く公開を始めることをお勧めします。
コンテンツ記事がたくさん詰まったごちゃごちゃしたサイトに育ってから、完全に作り直しになりますが、コンテンツ記事やリンク構造を整理して、デザインにこだわったサイトに変更すればよいのです。
テンプレートを手に入れる
既に出来上がったテンプレートが、有料・無料で、配布されています。既に出来上がったテンプレートを使用することで、サイトの作成時間を大幅に短縮することができます。テンプレートを作成する事で、サイトのデザインの作成に時間をかけることなく、サイトのそれぞれのページのコンテンツや記事の作成、そのための情報の収集に時間をかけることができます。
特に、自分のhtml、cssの知識がテンプレートを作成する段階に無い場合は、既存のテンプレートを利用してWebサイトを作成しないと、Webを公開するためには、html、cssを使って、テンプレートが作れるようになってからでないと公開できません。
既に述べたように、Webサイトの価値は、デザインではなく、コンテンツ記事です。テンプレートを使用して、速やかにWebサイトを公開し、コンテンツを増やしながら、html、cssなど、Webサイトを構築、運営するための知識を増やしていきましょう。
配布されている既存のテンプレートは、大まかに４つに分類できます。
- Web作成ツールに添付されているテンプレート
- Webデザインの書籍のサンプル例
- 無料で配布されているテンプレート
- 有料で販売されているテンプレート
- フレームワークのサンプル・サイト
Web作成ツールに添付されているテンプレート
html、cssを扱いなれていなければ、テンプレートを渡されてもどうやって使用したら良いのか理解できません。Web作成ツールに添付されているテンプレートであれば、Web作成ツールで、コンテンツを作成できるので、用意された機能の範囲で作成する限りは、html、cssの知識は必要ありません。しかし逆に、作成ツールの使い方を覚える必要があります。
利点は、一貫した規則で作成されているため、作成したコンテンツに適用するテンプレートを変更すると、デザインが大きく崩れることなくテンプレートを変更できます。
販売されているWeb作成ツールには、テンプレートの他に、写真やイラストなどの素材集も付属していることが多いので、Webサイトを作成する際、購入すれば、有効に利用できると思います。
もちろん、ツールの使い方がわからずに、購入しただけで使わずに放置することもありえます。
市販のホームページ作成ツールには、そのツールに適したテンプレートが用意されています。これらのツールを購入する際は、予め自分が使いたいと思うテンプレートが存在するか、確認して下さい。また、無料で利用できるBlueGriffonでも、有料のライセンスを取得するとテンプレートが利用できます。BlueGriffonは、サイトの管理機能がありませんが、テンプレートを用いてそれぞれのhtmlページを作成する際に便利です。
そのため、購入前に、付属するテンプレートに自分の好みのものが存在するかを確認してから購入することをお勧めします。
製品として販売されているWebサイト作成ツールは、Webサイト作成ツールだけでなく、テンプレートや素材が、製品に含まれているので、考え方によってはお得です。
問題点は、html、cssについては、知らなくてもWebサイトを作成できますが、Webサイト作成ツールの使い方を覚える必要があります。また、ツールに用意されていない部分を実現するためには、html、cssの知識が必要になります。
Webサイト上のツールを使用して、Websサイトを作成するサービスは、Webサイト作成ツール、テンプレートや素材だけでなく、サーバーも用意されているのでそのサービスだけで作業が完結します。
問題点は、アクセスを大量に集めることができるサイトを作成した場合、そのアクセスにより、サーバーが対応できずに、サーバーがダウン、あるいは、Webサイトの応答が遅くなっても、利用者側は対応できない問題があります。
検討すべき状況は、ショッピングサイトを作成、運営するときです。
ショッピングサイトを作成、運営する場合、販売システムを構築することは無いので、ショッピングカートやショッピングモールのサービスを利用することになります。
利用するサービスによって、基本料が高く、販売ごとの手数料が低いもの、基本料がなく、販売手数料が高いものがさまざま存在します。 それらのサービスを利用すると、どのみち利用費用が発生するので、ショッピングサイトを作成できるWebサイト作成ツールを利用すると総合的に考えると費用が安くなる場合があるということです。
Webデザインの書籍のサンプル例
html、cssを扱いなれていなければ、テンプレートを渡されてもどうやって使用したら良いのか理解できません。Webデザインの書籍のサンプル例であれば、html、cssのコードについても説明されているので、コードがどういった考えで、使われているかを理解することができます。
利点は、コードの内容を理解できることです。
欠点は、デザインが、少しもっさりしていることが多いことです。
現実的な使い方は、サンプル例の画像と文章を差し替えて、そのまま自分のWebサイトを作成してしまうことです。
無料で配布されている、あるいは、市販のテンプレートを使用する場合でも、html、cssが理解出来なければ、Webデザインの書籍を参考にする必要があります。
この目的のためには、レスポンシブWebデザインの説明をしている書籍やレイアウトグリッドの実装の仕方を説明している書籍などが使いやすいと思います。
テンプレートを無料で配布、有料で販売しているサイト
有料でテンプレートを配布しているサイトでは、一部のテンプレートを無料で販売していることがあります。また、善意で、自分の作成したテンプレートを配布している人もいます。無料のテンプレートにこだわるより、好みのテンプレートを使用したほうが満足出来ると思います。
コードの説明は、ほぼありませんので、自分でコードを読み解いて行く必要があります。
メニュー部分の文字列とリンク、記事本体の文章と画像を差し替えるだけなので、基本的は、試行錯誤でなんとかなります。言い換えると、大きくデザインを変更するのであれば、テンプレートを使うメリットはほとんどありません。
- Free Website Templates Built with Bootstrap – KEEN THEMES
- web templates - envato elements
- HTML5 UP
- Free Website & Email HTML Templates - Pixelbuddha
- free web template
- Free Bootstrap HTML5 CSS3 Website Templates | High Quality Web Templates
フレームワークのサンプル・サイト
Webサイトを作成するために使用するフレームワークでは、その使い方の例として、Webサイトのテンプレートを提示してることが多いです。有効に利用しましょう。
- Initializr
- Easily build user first websites with our templates
AMPのサンプルサイト
- Bootstrap Exanple
Bootstrapのサンプルサイト
HTML5 Boilerplate
Bootstrapを利用して、テンプレートを作成する方法もよく利用されているようです。
cssフレームワークは、Bootstrapが有名ですが、有名なものだけでもいくつか存在します。
cssフレームワーク本来の意図は、複数人でWebサイトを作成するとき、それぞれが、css定義を作成すると、デザインの統一性が保てなくなると同時に、同じような別のクラスが複数存在することになります。それを防ぐために、予め用意されたcss定義を使用することで、css定義が複雑になるのを防ぐ仕組みです。
フレームワークをそのまま使っても良いし、フレームワークに使われているhtmlとcssの使いかたを参考にすることもできます。
自分でテンプレートを作成する
html、cssについてある程度知識が増えると、自分で、テンプレートを作成したくなります。実際に作成してみると、新たな気付きがあります。ただし、短時間でWebサイトを作成する必要があることは、避けたほうが無難です。
利用できる形で配布されているテンプレートは、html,cssで作成されたテンプレートと、Wordpress用のテンプレートが両方用意され散ることが多いです。Wordpressは、CMSの中で、多くの人が利用している人気のCMSです。最近では、html,cssでホームページを作成する場面は少なく、多くのサイトがCMSを使用して、サイトを作成、運営しています。
HTML5 レスポンシブ・デザイン・テンプレートは、いろいろなものが提供されています。
CMSのWordpressのテンプレート
現在、サイトを作成する場合、CMSの1種、Wordpressを使用してブログスタイルで運営する例が多いです。そのため、Wordpress向けのテーマと呼ばれる、Wordpressテンプレートは、多くのものが公開されています。
- Wordpress themes and plugins - envato elements
- 【賢威】
- STINGER
- Simplicity
- Affinger
スタイル表示を確認するテンプレート
cssで指定したスタイルが、意図したスタイルで表示されているか確認するための単純なテンプレートがあると便利だと思い作成しました。
