タグ別アーカイブ: 初心者

初心者が、WordPressでコーポレートサイトを作る全手順-1

初心者が、WordPressでコーポレートサイトを作る全手順

WordPressは、初心者でも十分に扱える優秀なCMSツールだ。
一般的にはブログソフトと認知されているが、カスタマイズ次第で、社長を納得させるだけのコーポレートサイトを構築できるほどの能力を持っている。

筆者がWordPressを採用する理由は、かんたんにコーポレートサイトを作れるからというだけではない。
WEBサイトは作ることを目的とすべきではなく、運用し、ビジネスに貢献させることこそ、企業が行うべきことだという信念があるからだ。

WEB制作プロダクションの筆者が言うのもおかしな話だが、多額な費用をかけ、きらびやかなWEBサイトを作っただけでは、ビジネスに貢献することなどあり得ない。
自社製品やサービスを紹介するコンテンツを作り、修正し、また加えていく。その繰り返しをねばり強く重ねていく企業だけがネットで強くなっていく。

このコーポレートサイトの運用に、最適といえるツールがWordPressなのだ。
WordPressは検索エンジンとの親和性が高い。これは世界的に証明されている。すなわち、集客を行ううえで有利だということだ。

社長から突然自社サイトを作れと命じられた。自社サイトにあまりコストをかけられない。あなたが、こんな事情を持つ担当者なら、この記事を参考にしながら、自社サイトの構築に取り組んでほしい。半年後、なるほど!と思えることが起こるはずだ。

WordPressを企業WEBサイトに仕上げるための作業ポイント

残念ながら、いくらWordPressがすごいと言っても、インストールしただけで企業WEBサイトとしての体裁は整わない。最低限の見栄えと構成を備えるべきだ。

この記事では、プログラミングはもちろん、HTMLやCSSを編集することなく、WordPressの管理画面だけを操作して企業WEBサイトへ仕上げていく手順を紹介することがテーマだ。

  • WEBサイトの構成を考える
  • コーポレートサイトに適したテーマを選ぶ
  • コーポレートサイトには不要なWordPressの機能や表示を削除する
  • WordPressでグローバルナビゲーション(サイトメニュー)を作る
  • WordPressでTOPページ(HOME)を作る
  • WordPressで会社案内ページを作る
  • WordPressで事業内容ページを作る
  • WordPressでお問い合わせページを作る
  • WordPressで最新のお知らせページを作る
  • ヘッダー画像を差し替える

WEBサイトの構成を考える

WordPressに手を加える前にやるべきは、サイトの構成を考えること。「周到な準備があれば、レースはスタートする前に決まっている」多くのスポーツ選手が口にする言葉だ。
企業WEBサイトのミニマム構成は、おおよそ以下のようなサイトマップになる。

コーポレートサイトのミニマム・サイトマップ

WordPressには、「固定ページ」という文字通り更新を行わない定型ページと、随時更新を行っていく「投稿ページ」という概念がある。上記のサイトマップを2つの概念を使って構築していく。

青枠で囲われている

  • TOPページ(HOME)
  • 会社案内
  • 事業内容
  • お問い合せ

については、WordPressの「固定ページ」を用いて制作。

赤枠で囲われている

  • お知らせ
  • お知らせ詳細

については、更新を重ねていくコンテンツなので、WordPressの「投稿ページ」を用いて制作する。

コーポレートサイトに適した「テーマ(フォーマット)」を選ぶ

WordPressの初期状態

WordPress4.1.1(2015年4月6日現在)のインストールが完了した直後は、次のようなページが表示される。
なんだこりゃ?と感じるほど、何の趣向もないページだ。

WordPressのインストールは、先に優秀なコンテンツが存在するので、そちらを参考にされたい。
「WordPress インストール」と検索するだけで、詳細な記事がいくつも見つかるのは、最も普及しているCMSツールである証拠でもある。あなたがWordPressに関して、分からないことが出てきても、いくらでも助けてくれる人たちがいるのは何とも心強い。これも筆者がWordPressをおすすめする理由のひとつだ。

「WordPress インストール」でGoogle検索してみる

WordPressの初期状態画面

WordPressの「テーマ」を選択しよう

本格的な作業に着手する前に、WordPressのテーマを選び直す。テーマとは、デザインフォーマットのことだ。
先ほど画面キャプチャで示したテーマは、WordPressのバージョン4.1.1の初期設定で選択されているテーマだが、ページの左側に機能が集中しており企業WEBサイトとしては、なじみのないものだ。思い切って、「コーポレートサイト」っぽくなりそうな、他のテーマに切り替えよう。

管理画面にログインし、[外観]-[テーマ]を選択すると、標準でインストールされているテーマが表示される。
今回は、この中から「Twenty Thirteen」を使用する。
自分好みのテーマをネットで探し、インストールすることも可能だが、ひとまず「Twenty Thirteen」を選択してみよう。

テーマを切り替えるのは、デザインキャプチャの下に表示されている「有効化」ボタンを押すだけだ。

WordPressのテーマ一覧画面

「Twenty Thirteen」を有効にした後、サイトのTOPページ(HOME)を表示した状態。

テーマ変更後のTOPページ(HOME)

初心者が、WordPressでコーポレートサイトを作る全手順-1、後半は

次ページは「WordPressから、コーポレートサイトには不要な機能や表示を削除する」

初心者が、WordPressでコーポレートサイトを作る全手順-2

初心者が、WordPressで企業サイトを作る全手順-2

初回の「初心者が、WordPressで企業サイトを作る全手順-1」では、企業サイトの体裁をおおよそ完成させた。

第2回目となる今回は、各セクションの体裁をどうするか、どうやって更新していくかについて紐解いていこうと思う。

数あるCMSツールのなかでも、WordPressは実は初心者にとっても扱いやすいもので、なおかつ極めようと思えば、その意思に応えてくれる奥深さも備えている。

「初心者が」のキモは、あらかじめテンプレートが準備されているCMSツールを活用することによって、HTMLやCSSといった、いわゆるWEB制作の知識がなくても、WEBサイトとしてある程度の体裁を整えられることだ。

少し馴れてきたら、WordPressを使って、試行錯誤しながらでもWEBサイトにあなたのオリジナリティを組み入れていくことにもチャレンジしてほしい。

最新のお知らせを掲載する

お知らせの最新5件をページの右側(サイドバー)に表示する。
管理画面の[外観]-[ウィジェット]の「副ウィジェットエリア」に「最近の投稿」を設定すればよい。
「最近の投稿」をクリックし、「副ウィジェットエリア」をチェック、「ウィジェットを追加」をクリックする。

最新のお知らせ1 ウィジェット追加

続いて「副ウィジェットエリア」に追加された「最近の投稿」のサイト上の表示文字を変更する。
「副ウィジェットエリア」の「タイトル」欄に、表示したい文字を入力すれば変更できる。ここでは「最新のお知らせ」とした。
最新の表示件数を増やしたいのであれば、「表示する投稿数」を希望する件数に変更しておこう。

最新のお知らせ2 ウィジェット編集

ここまでの作業で、ページの右サイドバーに「最新のお知らせ」欄が追加された。

最新のお知らせ3 TOPページ

サイトのTOPページ(HOME)を作る

ここから固定ページの内容の入力を進めていく。
まずは、サイトTOP(HOME)だ。

現状は、サイトTOPには、投稿ページで入力されている最新の記事が表示される設定になっている。
ページの内容を入力する前に、サイトTOPに固定ページで作った「サイトTOP(HOME)」が表示されるように変更する。
操作は、管理画面の[設定]-[表示設定]の「フロントページの表示」を変更すればよい。
「固定ページ」をチェックし、「フロントページ」から「TOPページ」を選び保存する。

TOPページ TOPを固定ページに設定

ここまでの作業でサイトのTOP(HOME)には固定ページで作成した「TOPページ」が表示されるようになった。ここで、1点気になることが・・・。それは「TOPページ」と固定ページのタイトルが表示されていることだ。
会社案内や事業内容であればこれでいいが、サイトのTOPに「TOPページ」とは、なんともセンスがない。

TOPページ タイトル不恰好

これを解消するには、テーマを改造する方法もあるが、ここでは固定ページのタイトルをHTMLのコメント化(コメントアウト)し、表示させなくすることで回避しておく。
操作は、管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「TOPページ」を編集で開く。
そして、タイトルをHTMLのコメント記述ルールに従って修正する。HTMLのコメントは、表示したくない文字列を「<!ーー」と「ーー>」で囲めばよい。
今タイトルに入力されている「TOPページ」を「<!ーーTOPページーー>※」と修正し、更新する。

※本来は半角で記述すべき。

TOPページ タイトルコメント化

サイトのTOPページを確認すると、固定ページのタイトルは表示されなくなった。

HOME

次にTOPページの内容を入力していこう。
まずTOPページに何を掲載するかを考える。
無難なところで、

  • 事業内容をイメージできるビジュアル画像
  • 企業メッセージ

で構成する。

まず、ビジュアル画像を準備する。WordPressの管理画面の中で画像のリサイズや切り出しなどの編集も可能だが、今回は幅600px高さ200pxの画像を事前に準備した。
操作としては、先ほどと同様に管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「TOPページ」を編集で開く。そして、仮の入力内容を消去後、「メディアを追加」から準備したビジュアル画像を選択する。

TOPページの内容を入力

「メディアを追加」をクリックすると「メディアを追加」画面がポップアップするので、「ファイルを選択」から表示されるダイアログで準備しておいたビジュアル画像ファイルを選択する。

TOPページ

選択したビジュアル画像を開くと、画像をアップロードの後、以下のような画面になる。
「添付ファイルの表示設定」の中の「サイズ」をフルサイズにして「固定ページに挿入」をクリックすれば、固定ページの入力画面に組み込まれる。

TOPページ メディアを追加

以下が固定ページの入力画面に組み込まれた状態だ。

TOPページ ファイル選択

次にビジュアル画像の下に企業メッセージを掲載する。
ビジュアル画像の下あたりをクリックし、Enterキーを押すとカーソルが表示されるので、メッセージを入力して、更新する。

TOPページ ファイル挿入

TOPページを見てみよう。

TOPページ 挿入後

会社案内ページを作る

次に会社案内のページを制作する。
会社案内に関しては、次の手順で制作する。

  • MS-Excelで内容を入力
  • MS-Excelのセルをコピー、WordPressの固定ページ入力画面にペースト

この方法を用いると、HTMLを知らなくても表組みで内容の掲載が可能になる。

まず、MS-Excel上で会社案内の内容を入力する。おおよそ以下のような内容だろう。

会社案内ページ Excel

次に管理画面の[固定ページ]-[固定ページ一覧]から以前に作成した「会社案内」を編集で開く。
そして、先ほどのMS-Excelに入力した内容を範囲選択してクリップボードへコピーし、「会社案内」の編集画面でペーストすれば完了だ。

会社案内ページ ペースト

会社案内ページを見てみよう。
表組みされているので項目名と内容がきれいに面一で揃っている。
画像では見難いが罫線も入っている。

会社案内ページ

初心者が、WordPressでコーポレートサイトを作る全手順-2、後半は

「事業内容ページを作る」へ

初心者が、WordPressでコーポレートサイトを作る全手順-3

初心者が、WordPressで企業サイトを作る全手順-3

初心者でも、WordPressなら企業サイトを構築できる。前回の記事では、この命題を実現できることを証明した。

全3回でお届けする、「初心者でも企業サイトを」の最終回の今回は、もう少しWEBサイトの内容をそれっぽいものにできるような工夫を凝らしていく。

Googleがスマホサイトに対応していないWEBサイトの検索順位を下げると宣言し、戦々恐々としている担当者も多いかもしれない。しかし、もう少しだけ努力すれば、レスポンシブデザインさえカバーすることができる。もうスマホ化の心配など無用になるのだ。

前回の記事では、企業サイトのおおよその体裁を整えることに注力した。各セクションのページを作ってきたわけだが、企業サイトのツールとして必要なのは、情報の更新「お知らせページ」を設けることだ。WordPressをCMSとして使う大きな理由でもある。

WordPressで最新のお知らせページを作る

お知らせの掲載はWordPressの機能「投稿ページ」で制作する。
初期状態では「Hello World!」が1件登録されているので、「Hello World!」を削除してから新たに「コーポレートサイトをリニューアルしました。」記事を登録しておこう。

管理画面の[投稿]で投稿ページの一覧が表示されるので、タイトルが「Hello World!」のページを「ゴミ箱」へ送る。

Hello World削除

続いて「新規追加」で「コーポレートサイトをリニューアルしました」ページを作成する。
要領は、固定ページの作成と同じなので、前回の記事を参考にしてほしい。

記事入力

作成した「コーポレートサイトをリニューアルしました」ページをチェックしてみよう。
少しタイトルが大きいので、スタイルシート(CSS)に修正を加える必要がある。ただし、細かな調整はもう少し後にして、今はこのままにしておこう。

「コーポレートサイトをリニューアルしました」ページ

お知らせの一覧を見てみよう。
「未分類」と表示されるのが気になる。
「未分類」を「お知らせ」に変更しよう。

未分類気になる

管理画面の[投稿]-「カテゴリー」で現在登録されている投稿ページのカテゴリーの一覧が、ページの右側に表示される。
初期状態では、「未分類」1つが登録されている状態だ。
「編集」をクリックし、名前を「お知らせ」、スラッグを「news」に修正しておこう。

カテゴリー
カテゴリー編集

お知らせの一覧をチェックすると、「未分類」が「お知らせ」変更されている。

お知らせになった

ヘッダー画像を差し替える

企業サイト作りも、ようやく終盤にさしかかっている。こんどは、ヘッダーの背景画像とタグライン(メッセージ)を変更しよう。

管理画面の[外観]-「ヘッダー」でヘッダーのデザインなどが編集できるようになる。そのなかの「ヘッダー画像」でヘッダーの背景画像を変更する。「新規画像を追加」から任意の画像を選んで設定する。

ヘッダー画像差し替え

「ファイルをアップロード」で新たな画像ファイルをアップロードして使用する。
「ファイルを選択」から表示されるダイアログで

アップロード

ファイルのアップロードが正常に終わると「選択して切り抜く」から、ヘッダーのサイズに合った部分を指定し「画像切り抜き」で切り抜く。

切り抜き

「保存して公開」でヘッダー画像の変更は完了だ。

保存

トップページをチェックすると、ヘッダー背景が変更されている。

TOPページ

次にタグライン(メッセージ)を変更し、文字色も同時に調整しておこう。

管理画面の[外観]-「ヘッダー」でヘッダーのデザインなどが編集できるようにする。そのなかの「サイトタイトルとキャッチフレーズ」でタグライン(メッセージ)を修正する。

メッセージ変更

同様に、「色」でテキストの表示色を変更する。
「保存して公開」をクリックすれば完了だ。

文字色変更

完成したサイトを見てみよう

ここまでの作業で制作したページを見てみよう。

TOPページ

会社案内

事業内容

お問い合せ

お知らせ

スマホサイトを見てみよう

ちなみに、今回のサイト構築で利用したWordPressのテーマ(フォーマット)は、レスポンシブにも対応しており、実は、裏側ではすでにスマホサイトができあがっている。
以下にスマホページのキャプチャをいくつか紹介する。

スマホサイト・トップページ

スマホサイト・会社案内

スマホサイトのグローバルナビ

WordPressがあれば、初心者でも十分に企業サイトを構築できる

ここまでの作業でようやく企業WEBサイトを完成させることができた。ミニマムな構成であれば初心者でも企業WEBサイトが作れることが理解していただけたと思う。

もちろん、この仕上がりが最善だとは筆者は考えてはいない。しかし、企業サイトにとってほんとうに大切なことは、訪問者に対して有益な情報を提供し、それによって実現する「集客」であるはずだ。

たったこれだけのサイトであっても、訪問者が「助かった」と感じてくれるほどの有益な情報が掲載されているサイトであれば、検索エンジンも高い順位を差し出してくれる。

これを実現するためには、WordPressで構築したWEBサイトの強みを活かし、更新を怠らず、あなたの顧客候補が何を求めているかを模索し続けよう。検索エンジンのクローラーがあなたの新しいWEBサイトを巡回してくれる日は近い。

ライティング初心者のための、想いが伝わる文章の書き方

ライティング初心者のための、想いが伝わる文章の書き方

心に響く文章は、読み手の行動を変える力を持っている。たった一行の文章で、読み手に商品を買わせることも、自社に対して良いイメージを持たせることも可能になる。

そんなことできるのは、ほんの一握りのプロくらいでしょ、とあなたは思っているかもしれない。しかし文章の素人でも、やり方しだいで言葉の力を引き出すことは可能なのだ。

ただし、それにはコツがある。言葉を通じて想いを伝え、読み手のアクションを引き出すためには、どんなことに気をつければよいのか。ライティング初心者の視点に立ってひとつずつ解説していこう。

想いが伝わる文章のための大前提

想いが伝わる文章のための大前提

伝わる文章を書くために最も大切なこと―それは、「伝えたい想い」をどれだけ強く、明確に持っているか。
想いが強ければ強いほど、良い文章になる可能性を秘めている。逆にそこがあやふやであったり、そもそもない、そんな状態ではどんな優れた書き手でも良いものは書けない。

文章を書くということは、想いを言葉化して表現するということ。表現すべき元の何かがなければ、書けるわけがないのだ。まずはしっかりと、自分が発信したいメッセージを確認してほしい。

文章は現場から生まれる

文章は現場から生まれる

何が語りたいのかわからない、語りたいことがないという人は、まずはそれを探すことから始めよう。
はじめにすべきことは、パソコンの前から一度離れ、現場へ行ってみることだ。文章は「想い」から生まれる。そしてその「想い」を生み出しているのは人間だ。ならば人間がいる現場へ行くのが、「想い」を見つける一番手っ取り早い方法、というわけだ。

たとえば、自社商品のよさを語りたいならば、その商品を使ってみよう。食べ物ならば食べ、着るものなら着てみよう。商品が生まれた現場へ行き、商品を生み出した人たちの顔を見、声を聞くのもいい。現物を手に取り、においをかぎ、あらゆる角度からじっくりと観察すること。五感を総動員して、気づいたことを書き留めれば、それが語りたいことの種となる。

伝えたいこと、語りたいことさえ見つかれば、ほぼ8割は書けたようなもの。だからこのプロセスは時間をかけて、自分が本当に語りたいと思えるネタを見つけてほしい。

自分の言葉で語る

自分の言葉で語る

「想い」が見つかったら、いよいよ文章にしていこう。このとき、気をつけるべきことは「自分の言葉で語る」こと。どこかで見つけた小洒落たフレーズや、何にでもあてはまりそうな抽象的な言葉を使ってはいけない。

安易に使えば、文章の鮮度がぐっと下がってしまう。あなたが自分の目で見、心で感じたことをできるだけ具体的に…そんなもぎたての言葉だけが、人の心を動かすことができる鮮度を持っている。

スマートじゃなくても、つたなくても、想いが真っすぐに表現された文章に人は好感を持つもの。自信を持ってオリジナルの言葉で語ってほしい。

読み手への思いやりを忘れない

読み手への思いやりを忘れない

もうひとつ、気をつけてほしいことが読み手を思いやること、“おいてけぼり”にしない、ということだ。具体的に4つ、ポイントをあげてみよう。

  • 話はぼやかさず、核心から入る
  • 重複しているところ、無駄なところをチェックし、削れるところは徹底的に削る
  • まわりくどい表現、分かりにくい比喩などはしない
  • 自分の気持ちを押し付けない

読者に共感を持って読み進めてもらうには、分かりやすさが第一だ。自分の文章に分かりにくいところがないか、くどいところはないか、チェックしてみよう。

忙しい現代人は、早く情報を得たいと思っている。ビジネス文書でもSNSでも、明快で分かりやすいほうが喜ばれるもの。逆に言わなくてもいいことをいちいちくどくどと書いていては共感は得られない。

また、自分の感情を押し付けるような文章は嫌われる。感動を伝えたければ、事実や具体的なエピソードに語らせることで、読者の自然な感動を引き出そう。「とても」や「本当に」などの強調する言葉も使いすぎれば逆効果。極力控えめに使うようにしよう。

書き終えたら間をあけて読み返す

書き終えたら間をあけて読み返す

文章力に自信がない、という人は、ぜひこの点を徹底してほしい。当然すぎるほど当然のことなのだが、できていない人が多い。言うまでもないことだが、誤字脱字は読み手の信頼を損なうのでしっかりチェックを。

そして、できれば一晩ねかせてから、もう一度読み返すことをお勧めする。少し間を空けることで、第三者の視点で読むことができるからだ。書いていた時は見えなかった重複や回りくどさ、分かりにくさを見つけられるかもしれない。粗削りだったところをシャープに研ぎすますイメージだ。このひと手間で、文章がワンランクアップすることを請け合おう。

今すぐ使える、まとまりのない文章をサクッとまとめる技

今すぐ使える、まとまりのない文章をサクッとまとめる技

書きたいことがありすぎて、ぜんぜんまとまらない!そんなライティング初心者にお勧めしたい現実的な方法がある。

まず、小さめのメモ紙を10~20枚ほど用意し、1枚に1文、言いたいことを書く。あくまで1枚に1文、このルールは守ってほしい。
これを机の上に並べてグループ分けをする。似たようなことを言っているメモ紙や、内容がつながっているメモ紙は同じグループに。違う内容のメモ紙は違うグループに。机の上にはいくつかのグループができるだろう。
そのグループを、起承転結の順に並べ変える。あとはつなげてひとつの文章にするだけだ。

この作業をすると、結局同じことを言っているだけのメモ紙が数枚重複していたり、起承転結の「結」にあたるグループがない、などという問題が一目瞭然になる。重複しているメモ紙は、一番大事な1枚を残してあとはポイしてしまおう。そして「結」にあたる一行を書いたメモ紙を1枚作ればよいのだ。

まとまらない、というときは、たいてい同じようなことを何度も繰り返していたり、起承転結のどれにもあてはまらない、脱線したトピックが混じっていたりするものだ。もちろん、脱線トピックは、クシャクシャポイしてほしい。
その想いは、また別の機会に語ろう。余計な飾りをばっさりと切り捨てることで大切な一文に力が集中し、ズドンと伝わることもあるのだから。