【WP Webサイト そのＸ】シリーズで書いてきた記事も第3弾となりました。今回は、Webサイトを作り上げるときにすること について書こうと思います。
サイトを作るにはどんなサイトを作るのかというWeb構成と、デザイン全体を決定するテーマの選択が必要になってきます。まず、それを決めてからコンテンツを入力していくと良いと思います。それらの方法と私のお勧めテーマ！について書きます。
Webの構成とどんなデザインにしたいのかを決めておく
作ろうとしているWebの構成やデザインについて自分なりに考えてある程度決めておきます。
Webの構成を考える
Webの構成とは、たとえば本を書くとしたら目次みたいなものだと考えてもらえれば良いかと思います。
ミニマムなサイトだとすると、ざっくりと
・○○○○とは？
・サービス案内（サービス内容や料金など）
・お問い合わせ
・blog
こんな感じの構成になると思います。自分のWebサイトではどうなるか書き出しておきましょう。
ここでたくさん目次があれば、どれをメニューに載せるのかなどを考えておくといいと思います。
メニューをどうするか？
メニューをどうするか、について考えます。以下のような選択肢があると思われます
1． Webサイトの上部と、左右どちらかに表示
2． Webサイトの上部だけに表示
3． Webサイトの右または左のブロックだけに表示
4． その他の方法で表示
5. 表示しない
既存のテーマでよくあるものは1．の上部と左右に表示するもので、このRYUS blogもその形です。自分のサイトではどのようにしたいのかを決めておきます。
メニューに載せたい項目がたくさんあれば 1.の上部と左右どちらかに分けてメニューを載せることになるのでどの項目をどちらに載せるか、も考えておくといいと思います。
トップページをどうするか？
WordPressのトップページのパターンとしては
・blog記事の最新数記事の概要を表示する
・固定ページを表示してそのWebサイトの説明をする
の2パターンとなります。テーマによってはこれに加えて、サイトの説明文章を入れたりすることもできますし、テーマにその機能がなくても説明文章を追加することは可能です（記事参照）。
トップページだけに表示する画像があった方がいいか？
トップページだけに表示する画像はスライダー（複数枚の画像が時間経過によって順次表示される）にするか？
の、あたりを考えておくといいと思います。
全体的なデザインのイメージ
デザインが好きなサイトがあって、それに似たような雰囲気にしたいということであればそのサイトに似たテーマを選ぶと近づくので自分はどんなサイトが好きなのかということで作成するサイトのテーマを選ぶ際の参考にするのもいいかと思います。
あるいはどんな色をメインとして使っていきたい、などを考えたりしておくことも大事なので決めておきます。
無料で提供されているテーマを見て、合うものを探す
WordPressのテーマは多くのものが無料で提供されています。今まで考えたWebサイトの構成、メニューの部分はどうか？、色合いはどうか、デザインのイメージに合うかどうかを考慮してテーマを選んでいきます。
WordPressのテーマ＞新規追加から探してみる
WordPressではインストール時には、
このように３つしかテーマがありませんが、無料で多くのテーマから好きなテーマを選ぶことができます。
ダッシュボード 外観＞テーマ をクリックして、
新規追加 をクリックして、
注目
や、
人気、最新 などをクリックすると、いくつもテーマが表示されるので、先ほど自分のWebサイトについて考えた内容に合いそうな(メニューの位置や色、考えているWebサイトのイメージに近いかどうか）テーマを選びます。
あるいは
特徴フィルター を使って自分のイメージに合ったテーマを選ぶこともできます。
気に入ったテーマがあればインストールして、ライブプレビューしてみる
気に入ったテーマがあれば
インストール をクリックして
ライブプレビュー をクリックすれば、自分のサイトのコンテンツだとどう見えるのかを確認できます
インストールしたばかりで何もコンテンツが入っていなければ、
こんな感じになって、インストールする前に見た写真と違って、がっかり、ということになります。しかし、このテーマもちゃんと設定をして、写真が多めのコンテンツをたくさん掲載すればテーマをインストールしたときのイメージ画像に近いサイトが作れるはずです。
ポイントは自分のサイトがそのテーマに合ったコンテンツになるかどうかとういうことです。このテーマでは写真画像付きの投稿を多めにするようなサイトでないと合わないと思います。もしも、文章が中心のWebサイトででこのテーマを選んでも、イメージが全く違ってしまうからです。
もう一つのチェックポイントはブラウザの幅を縮めたときに、
こんな感じにちゃんと幅に合わせたレイアウトに変わるかどうかを見ておくことです。このようなデザインをレスポンシブデザインといいます。
Googleはモバイルフレンドリー（モバイル端末でも問題なくサイトが利用できる）かどうかを携帯端末での検索の掲載順位に影響を与えるといっていますので、テーマ自体がモバイルフレンドリーであるかどうかはチェックしておきたいと思います。
お勧めのテーマ Simplicity2 をご紹介します
↓Simplicity2をデフォルト使用した例
今作っているサイトの ほとんど でこの Simplicity2（あるいはSimplicity) を使っています。何がいいかといいますとその名の通り「シンプル」であること。微妙な文字の大きさや行間がとてもいい感じだということなどなどたくさんあります。Webサイトには特徴として、
シンプル
内部SEO施策済み
拡散のための仕掛けが施されている
端末に合わせた4つのレスポンシブスタイル
手軽に収益化
ブログの主役はあくまで本文
カスタマイズがしやすい
このようにSEO効果も高いということが書いてあります。このテーマを使っている方も多いため、カスタマイズの方法を検索しても結果がたくさんあり、知りたいことを探すことが容易です。
カスタマイザ-から色を変更したり、ヘッダに画像を入れることもできますが、スキンという機能を使うと、
このように全然違う感じのデザインにすることも可能です。このスキンはFlower Popというものです。
Simplicityには1と2があるのですが、今から入れるならばSimplicity2 を使うことをお勧めします。このテーマは管理画面からはインストールできませんので、
このページからダウンロードします。詳しいことについては
[ryus_blogcard url=”https://usortblog.com//simplicity/”]
こちらを参照してください。注意点として、この時点ではSimplicity1の説明となっていますのでダウンロードする際にSimplicity2 をダウンロードするようにしてください。
まとめ：Webサイトの構成を決めてテーマを決められましたか？
ここで「ある程度の」Webサイトの構成と、利用する予定の「テーマ」を決められましたか？もしテーマで特にこれといったものがなければ、私はSimplicity2を使うことをお勧めします。
長々と書きましたが、内容が決まっていてある程度イメージが固まっている方の場合はこの回はあっという間に決められる事項だと思います。
[amazon_searchlink search=”Webデザイン”]
コメント