ブログ内検索

Wordpress ブログ運営

Webデザインの基礎的な考え方とおすすめテーマ&インストール方法【WordPressでWebサイトを制作する③】

更新日:

スポンサードリンク

Wordpress site 3 eyecatch

今回はWordpressを使ったサイト作りにおいて重要な、【サイトのデザイン】についてと【テーマのインストール方法及びおすすめのテーマ】について解説しています。

Webサイトのデザインについて知っておきたいこと

前回までの2ステップですでに、基本的なWebサイト及びブログを作ることができました。

今回は、個性的なWebサイトにするためのデザインの編集について紹介していきますが、まずはWebデザインについて知っておきたい基本的な要素について紹介します。

デザインはサイトや管理人のイメージを左右する

Webのデザインというのは、そのサイトやブログ、サービスやそれを運営する人間のイメージを左右するのものです。

最も大事にしなくてはいけないのは、このサイトに足を運んでくれる人にどのようなイメージをもってもらいたいのか、ということ。

アクセスをたくさん増やしたいのか、商品を売りたいのか、自分自身のブランディングに使いたいのか。

目的によって、選択するデザインやレイアウトは変わってきます。

使いにくい、は最低

Webサイト作りで初心者が最も引っかかってしまいがちなのが、「美意識」

自分の中での「おしゃれ」を追求するあまり、ユーザビリティ(利便性)を無視してしまい、訪問者にとって非常に使いづらいサイトになってしまっていることがよくあります。

もちろん、ある程度のビジュアルのカッコよさ、おしゃれさを求めたい気持ちは理解できますが、それによって訪問者から「使いにくい」というレッテルを貼られてしまっては本末転倒です。

使いやすい「型」は存在する

Webサイトには、色んなパターンがありますが、現在主流のWebサイトの構造は大きく分けて3つに分類出来ます。

1カラム型

カラムというのは柱のことで、1カラムというのはサイトが一本柱で出来ているということ。

サイドにメニューなどがなく、メインページのみでそのサイトの概要や伝えたい情報がわかるようになっています。

Wordpress layout 01

最初の印象をシンプルかつおしゃれにできる反面、サイドメニューがない分、サイトの内容量次第では訪問者にスクロールを要するのが難点です。

2カラム型(ヘッダーあり)

2カラム型はその名の通り、二本柱になっているサイト。

メインコンテンツのカラム以外に、横にメニューなどがあるカラムを作ることが出来ます。ブログ型のサイトでは定番ですね。

[colwrap] [col2]Wordpress layout 02[/col2] [col2]Wordpress layout 04
[/col2] [/colwrap]

ヘッダーというのは、サイトの最上部にある部分のことで、サイトの他のページに遷移するメニューだったりカテゴリページへ飛ばすのが主流です。

サイドバーがヘッダーを突き抜けてるパターンも、まれですが見かけますね。

Wordpress layout 03

2カラム型(ヘッダーなし)

同じ2カラム型でヘッダーがないタイプのサイト。

上記2つに比べると数は減りますが、ブランドや店舗などのサイトによく使われている印象があります。

Wordpress layout 05

写真を多く使うサイトだと、サイドバーを固定してメインにギャラリー的にコンテンツを配置するパターンもよく見られます。

最適なレイアウト=コンテンツの見せ方×視線の動き

研究によって、Webサイトを見る人の視線の動きには、「Z型」と「F型」という法則性があることが認められています。

[colwrap] [col2]Z F 01[/col2] [col2]Z F 02[/col2] [/colwrap]

人は、Webサイトを見る時はZかFの形で視線を動かしていることが殆どで、Webサイトの構造がある程度決まっているのは、この2つの型にのっとっているからなんです。

ただし、サイト内のコンテンツの色や大きさを意図的に変えることで、この視線をある程度誘導することもできます。

例えば、周りをシンプルな色使いにしておきつつ、一箇所に派手な色を入れるとか、一番見せたい部分に大きな画像を使うなど。

フリーランス 独学でWebデザインを学び 仕事を得るまでの道のり | metroglyph メトログリフ 2017 08 24 22 20 41

上のレイアウトだと、大きい写真からサイドバーのプロフィール写真に目が引っ張られた後、本文に目がいきます。(これがいいのか悪いのかは検討の余地があります)

人は目立つところに自然と目線が引っ張られるので、こういった要素を使うことで見せたい部分を強調することも出来るのです。

WordPressにおけるWebデザイン

これらの前提を踏まえてWebデザインを行っていくわけですが、Wordpressにおけるデザインとは基本的に「テーマ」を用いて行います。

テーマというのは言わば、デザインの雛形のようなもので、既存のテーマを使うことである程度の見た目にすることができます。

これは言わば、カタログ通りのデザインにするのか、それとも自分でゼロからコーディネートするのか、というような違いになります。

すでにある雛形を利用するので他人とデザインが被る可能性がでてきますが、画像や色を変えることで元のビジュアルから大きく変えることが出来るので、あまり心配する必要はありません。

もちろん、自分自身で「テーマ」を自作することも出来ますが、これにはHTMLやCSSに加えPHPの知識が必須となり、初心者にはとてもむずかしいのでおすすめはできません。

WordPressテーマは無料or有料?国産or外国産?

WordPressの利用そのものは無料ですが、テーマはものによっては有料のものがあります。

有料のテーマには多くの場合、以下のようなメリットがあります。(販売元によって異なるのであくまでも例)

有料テーマのメリット

  • 初心者でもカスタマイズが簡単
  • カスタマイズ出来る幅が広い
  • 質問などのサポートがある
  • デザインがよりおしゃれ
  • 他人とかぶりにくい

無料版の場合は、程度の差はあれど上記の反対だと思っていただければいいでしょう。

またWordpressは世界中で利用されているソフトウェアなので、テーマも国内外で様々なものが作られています。

ただし個人的には、以下の理由から国産のテーマの利用をおすすめします。

海外テーマのデメリット

  • ほとんどが日本語に対応していない
  • Webにおける常識が違う(画像のサイズやレイアウトの基準)
  • 日本語フォントに適応していない(デザインがおかしくなる)
  • カスタマイズしようにも情報が少ない

これらは、ぼくがこれまで海外テーマを実際に使ってみて感じたこと。

これらのデメリットのほとんどは、英語がわかってHTML/CSS/PHP及びWordpressの内部構造に関する知識があれば大半は解決出来ますが、初心者にとっては非常にハードルが高いでしょう。

というわけでここから、ぼくがWeb制作/デザインの現場で実際に利用してきた、おすすめの国産無料/有料テーマを紹介します。

おすすめ無料Wordpressテーマ

おすすめ無料テーマ

Stinger8 - ご自身もブロガーであるENJI氏により開発された、無料とは思えぬ高機能を備えた定番シリーズ。

Xeory - 有名サイト「バズ部」のノウハウをそのまま生かして制作されたテーマ。ブログ対応に特化した「Xeory Base」と、企業サイトの制作まで可能な「Xeory Extension」の2種類があります。

Simplicity - シンプルなデザインのブログを作りたい方向けにおすすめのテーマ。カスタマイズも簡単。

Habakiri - ヘッダーの大きな写真が印象的なシンプルかつおしゃれなテーマです。追加機能は有料です。

gush2 - カスタマイズを前提としたシンプルなテーマ。利用者が質問できるフォーラムまで用意されているなど、徹底的なサポートが魅力。

ただし、これらの無料で品質の高いテーマはどれも人気なので、他のブログと被ってしまうことも多く、しかもカスタマイズの自由度がそれほど高くないので、差別化が難しくなります。

自分でデザインをいじれるのであればHTMLやCSSで見た目を自由に変えていくこともできますが、わからない人が(かつての僕のように)無理やりカスタマイズに時間をかけてしまうくらいなら、高品質な有料テーマを購入することをおすすめします。

おすすめ有料Wordpressテーマ

高品質な有料テーマを購入するといとも簡単に、オリジナリティ溢れるスタイリッシュなサイトを構築することができます。

あまりに便利なので、ぼく自身、仕事でもプライベートでもこれら有料テーマを使うことが多くなりました。

実際にこれまで使った有料テーマの中でも、特におすすめなのがTCDテーマシリーズ

TCDには高品質なテーマが揃っており、個人サイトだけでなく企業やサービスのWebサイトにも使うことができます。

例えば「SKIN」は美容系のサービスや店舗におすすめとされていますが、編集次第では企業サイトであったり、専門ブログなどに応用することもできます。

WordPressテーマ SKIN  tcd046 | WordPressテーマ SKIN  tcd046 デモサイト 2017 08 24 22 38 57

トップのヘッダーは画像だけでなく動画を使うことも出来るので、かなりアクティブなサイトを作ることができますね。

「SOURCE」は、デフォルトで料金表や比較表を挿入できるテーマで、Webサービスや施設のサイトに向いています。

SOURCE tcd045 | WordPressテーマ SOURCE  TCD045 のデモサイトです 2017 08 24 22 51 20

複数のプランを展開しているサービスなどを紹介したいサイトを作る時はうってつけです。

「AMORE」はレストランやサービスの紹介サイトに適した作りになっています。

AMORE  tcd028 | WordPressテーマ AMORE  tcd028 デモサイト 2017 08 24 22 59 27

コンセプトやメニューの見せ方が素晴らしいので、ゲストハウスやホテルなど施設紹介にも使えるでしょう。

ハイレベルなブログを作りたい人にとっては「MAG」がおすすめ。

MAG tcd036 | ワークスタイルを満喫するためのブログ 日々のあれこれ備忘録を綴る 2017 08 24 22 55 05

様々な人気ブログのデザインを踏襲して作り上げられたテーマで、初心者には贅沢すぎるくらい機能が揃っています。

仕事で一度カスタマイズを行いましたが、あまりに良すぎて乗り換えを考えたほどでした。(現行のテーマを購入したばかりだったのでやめましたが!)

ブログ系のサイトであればOPENCAGE(オープンケージ)
の販売しているテーマはかなりおすすめ。

中でもWordPressテーマ「ストーク」
はこのブログでも実際に使っていて、使いやすさは折り紙付き。

シェアボタンや広告、その他ソースコードを触らないと編集できない項目が簡単に編集でき、デザイン変更の自由度も高めです。

かなり使い勝手が良いので利用者も多いですが、カスタマイズ次第ではかなりオリジナリティのあるデザインにすることができます。

Affinger Proは、先に紹介したStinger8のENJI氏によるアフィリエイトサイト専用テーマ。

稼ぐサイトの設計図~ 付録 WordPressテンプレート AFFINGER4 付き販売ページ  アフィリエイトのAFFINGER 2017 08 25 00 07 36

「稼ぐサイトの設計図」という非常に優れたサイト制作指南書の付録としてAFFINGER 4がついている、という設定ですが、おまけにしては優秀すぎるテーマです。

ちなみにぼくの別サイトである「BASIK NEW YORK」はこちらのテーマを使用して作成しています。

アフィリエイトによる収益化に特化したブログ制作をするのであれば、まず間違いない一品。

購入はこちら>稼ぐサイトの設計図-AFFINGER4公式ガイド

また、よりブログ的なデザインを目指す場合は、ブロガーStinger Proもおすすめ。

STINGER PRO +稼ぐサイトの設計図マニュアル  アフィリエイトのAFFINGER 2017 08 25 00 03 36

広告に特化していない分より自由度が高く、もっと幅広い用途に使用できるテーマとなっています。

こちらもAFFINGERと同じく「稼ぐサイトの設計図」が付属しています。

購入はこちら>稼ぐサイトの設計図-STINGER公式ガイド

その他のテーマの探し方

これ以外のテーマを探してみたい、という人は個別で検索していただく他、Wordpressのダッシュボードから検索をすることも可能です。

ダッシュボードのメニューから外観>テーマへとアクセスし、上部の新規追加もしくは下部のプラスマークをクリックします。

テーマの管理  サンプルサイト  WordPress 2017 08 24 18 52 20

すると、Wordpress上にある無料のテーマの検索ページに行くことができるので、ここから気に入ったテンプレートを探して、直接インストールすることも可能です。

テーマを追加  サンプルサイト  WordPress 2017 08 24 18 50 27

好みのテーマを見つけたら、その場でインストールボタンを押すだけでそのテーマをサイトに適用させることができます。

テーマを追加  サンプルサイト  WordPress 2017 08 24 18 57 27

プレビューでは、現在のサイトにそのテーマをあてるとどのように見えるかを確認することもできます。

ただしここで表示される大半のテーマは海外のものなので、国産のテーマを探している人は要注意です。

WordPressへテーマをインストールする方法

WordPress上でのテーマ検索&インストール方法は上の通りですが、外部で手に入れた無料&有料テーマのインストールは別の方法が必要になります。

先程のテーマ検索画面の上部、テーマのアップロードをクリック。

テーマを追加  サンプルサイト  WordPress 2017 08 24 18 55 35

すると、以下のような項目が現れるので、こちらにダウンロードしたテーマのZIPファイルを放り込みます。

テーマを追加  サンプルサイト  WordPress 2017 08 24 18 56 07

放り込んだら、今すぐインストールをクリック。すると、インストールが開始されます。

無事にインストールが終わったら以下の画面。ここで有効化をクリックしないと、テーマが適用されないので要注意です。

テーマのアップロード  サンプルサイト  WordPress 2017 08 24 19 10 01

有効化が終わると自動で画面が変わり、インストール済みのテーマ一覧になります。

無事にSTORKがインストールされているので成功です。

テーマの管理  サンプルサイト  WordPress 2017 08 24 19 11 48

サイトを表示もしくはカスタマイズを押すと、適用されたサイトの状態を確認することが出来ます。

テーマ変更前後を見比べて見て下さい。

テーマ変更前↓

Samplesite  1

テーマ変更後↓

FireShot Capture 29  サンプルサイト I Just another WordPress site  http moto daigakusei com

大幅に見た目が変わりましたね。

後は、サイトに画像を差し込んだり、ウィジェット(パーツ)を出し入れしたり、コンテンツを入れたりしてサイトを構築していくのみです。

まとめ

今回はWordpressを使ったサイト作りにおける「Webデザインの基本的な考え方」と「Wordpressのおすすめテーマ&インストール方法」について解説しました。

改めて今回の内容をまとめておきます。

    basik

  • Webサイトのデザインはユーザビリティが第一!
  • WordPressのWebデザインはテーマ次第
  • おすすめは国産の有料テーマ
  • テーマのインストールはダッシュボードから

次回は、Wordpressで作るサイトにおすすめのプラグインについて紹介していきます。

プラグインのインストール方法とタイプ別おすすめプラグインまとめ【WordpressでWebサイトを制作する④】

以下の記事もおすすめです

ブログで月20万円稼ぐぼくが使っているアフィリエイトサイト(ASP)一覧

これからブログを始めたい人にWordpressを使ったブログの作り方

関連記事

ブログ内検索

-Wordpress, ブログ運営
-,

Copyright© metroglyph メトログリフ , 2018 All Rights Reserved.