誰かに見てもらうための、簡単なデザイン

これからホームページ制作に携わりたい人向きのWordPressの説明(導入の検討編)

先日、兵庫県宍粟市の「e-みらっそ」という「エコな未来を創造する宍粟市民の会」の方々と、「楽しそうネットワーク」という「宍粟市中心の情報活用勉強会」の方々との合同勉強会があり、そこでWordPressとはなんぞや?というお話をさせて頂きました。

ホームページを運営したいけど、どうやって作ってるの?どうやったら効率よく運営できるの?ということは、Web制作に詳しくない方が一様に持つ疑問だと思います。特に、今まで興味なかったけどホームページを作ってみたいと思う方や、急に運営する立場になってしまったという方、ホームページが古いのでリニューアルしたいけど、今の技術がどうなっているのか分からない、という方も多いと思います。「e-みらっそ」の皆様もそこを気にされていたようで、今回の勉強会に至ったわけです。

今回のお話は、そういった「知識はないけどホームページ制作に携わりたい方」向けに、ホームページ制作や管理ツールとして便利に使用できる「WordPress」というシステムを紹介する内容です。
といってもWeb制作初心者でゆるゆるマイペースに勉強している私が書く記事ですので、至らぬ点も多いかと思います(´;ω;`)。
まとめてたら長くなってしまったので、2部構成でいきます。まずは導入の検討編です。次は構築の流れ編です。

とりあえずやってみます!

10_wordpressintro_02

わーどぷれす、ってなんですか?

  • ・WordPressはCMS(コンテンツマネジメントシステム)です。ホームページやブログ(コンテンツ)を管理(マネジメント)できるシステムです。元々はブログツールです。
  • ・利用は無料です。WordPressは世界で一番使われているCMSで、そのシェアは半数以上になります。
  • ・PHPという言語で作られています。ページの構成にはHTML、CSSも使われています(普通のホームページと同じです)。他に、サーバーのデータベースというものも使われています。
  • ・無料ブログのように、登録すればすぐに始められるのではなく、サーバーを借りて、そこにWordPressをインストールして始めます。
  • ・使い方さえ分かれば、自分の好きなデザインでホームページやブログが作れます。

とりあえず無料で利用できるホームページ制作システム、ってことですね。そして、自分の好きなようにホームページを構成することもできます。スマホや携帯用に表示を最適化したりすることもできます。

PHP、HTML、CSSって出てきたけど…

早速専門用語っぽいものがでてきたわけですが…。 HTML、CSSというのは、マークアップ言語というものです。聞きなれない言葉かもしれませんが、コンピューターで処理される言語で、ホームページはこれらの言語の記述によって構成されています。
マークアップ言語はそんなに難しく考える必要はありません。というのも、英語がベースになっている言語なので、中学レベルくらいの英語が理解出来れば何となく意味が察せます。
そしてPHPはスクリプト言語というもので、簡単なプログラミング言語です。HTMLと一緒に使われるのですが、HTMLとはまた違った働きをします。
とりあえず一番に知っておいてほしいのはHTML。これがホームページの基本です☆

HTMLとは?

HTMLはHyper Text Markup Languageはいぱーてきすとまーくあっぷらんげーじ…長っ!の略です。
HTMLは文書です。決まった構文(タグ、と呼ばれています)があり、構文(タグ)をワープロソフトで打った文書のように、つらつらと文字だけで書き連ねていきます。タグは英語に似たような感じです。HTML文書は.htmlという拡張子をつけて保存します。
これがホームページの基盤です。
タグは<>←このカッコでくくられています。どんなタグがあるのか、頻繁に使って分かりやすそうなものを紹介します。

<h1>   </h1>

h1、というのは「見出し」を意味します。h1のhはHeading(見出し)のh、だそうです。そして<h1> </h1>のカッコの間に挟まれた言葉を、見出しとして大きく太く表示する、という効果があります。 つまり、<h1> </h1>で囲まれた文字は、自動的に太く大きくなり、ホームページ上ではこうなります。

10_wordpressintro_05

</h1>という風に、前に/(スラッシュ)のついたタグは「閉じタグ」といって、<h1>の効果をここで終了しますよ、という意味があります。なので、HTMLのタグは<h1> </h1>のように開始タグと閉じタグがワンセットになったものが多いです。

<p>   </p>

これはかなり頻繁に出てくるタグです。p は Paragraph(段落)の略で、<p> </p>のカッコの間に挟まれた言葉を1つの段落として、通常の文字として表示させます。通常の文字、ていうとなんか変ですが、見出しでもない普通の文章ってことです。<p> </p>の間に書きます。

10_wordpressintro_09

なんてことない、普通の文章。ブログなどだと、普通の文章の割合は高いですよね。なので<p> </p>は頻繁に出てくるのですね!

<img src=” “>

これもよく出てくるタグです。=(イコール)の後ろの ” ” ←この点々の中に画像のファイル名を指定してやることで、画像を読み込んで表示させることができます。

10_wordpressintro_12

ポイントはファイル名だけではなく、拡張子(.jpgとか.pngとか)もちゃんとつけないと表示できないってことですかね。あと、画像ファイルがHTML文書が保存されているフォルダと違うフォルダにある場合は、ファイル名以外にもフォルダ名も書いて、画像の場所とファイル名を指定してやらないと、正しく画像が表示できないので注意が必要です。その書き方は少しややこしいので、ここでは割愛します。

つまりまとめると…?

今まで出てきた<h1> </h1>、<p> </p>、<img src=” ”>をまとめると…

10_wordpressintro_16

こうなります。
ここで紹介したタグはほんの一例で、本当はもっと色んなことをHTML文書に書き込まないと、ホームページは正しく表示できません。
ですが、基本的にホームページのページの構成はこういった要素が繰り返し使われて出来ているので、HTMLの基本として思ってもらえるといいいかな、と思います。

CSSとは?

CSSはCascading Style Sheetsカスケーディングスタイルシートの略で、先ほどのHTML文書を装飾(スタイル)するための文書です。これも同じく英語のような言葉が連なって出来た文書です。CSS文書はHTMLのようなタグはありませんが、HTMLと同じように決まった構文と書き方があります。CSS文書に、色、文字サイズ、位置などを指定する命令文を書き込み、HTML文書とCSS文書を関連付けることによって、その命令がHTML文書に反映されます。CSS文書は単品だけでは表示できません。CSS文書は、拡張子.cssをつけて保存します。

実際どんな文書なのか見ていきます。
10_wordpressintro_20

はてはてふむー。ぱっと見は英語のような感じがします。上から順番に見ていきます。

h1の記述の隣の{ } の中にcolor : red、と書かれています。これは見たまんまなのですが、h1…つまり先ほどのHTMLで出てきたh1の内容を赤色で表示しますよ、ってことです。
このように、CSSには英語で割と見たまんまのことが書かれています。

次にpの段。これも見たら大体想像がつくと思いますが、font-size…これもフォントサイズ、そのまんまです。これを14ピクセルで表示して下さい、ってことですね。Web関係では、単位はpx(ピクセル)が使われることが多いです。その下のcolor:greyは、さっきも出てきたように色の指定。グレーにします。

次にimgの段。margin-left…マージンは余白のことでleftは左ですね、つまり左側に余白を20px設けてください、ということです。
このように、CSSでは、{ }の前に効果を適用するHTMLタグ(要素)を書き、{ }内に効果の内容を書きます。

これを先ほどのHTML文書に関連付けると…。

10_wordpressintro_23

こうなります。h1は赤色に、pは14pxのグレー文字に、写真は左側に20pxの余白を空けて配置されます。
HTML文書はCSSによって、こうやって飾り付けられていくわけですね。
HTMLとCSSを関連付けるには、HTMLに関連付け用のタグを書き込めばOKです。それはここでは割愛します…。

PHPとは?

PHP…私も全く分かっていないPHP…。
分かってないなりのあやふやな説明なので、突っ込まれること請け合いの説明となっております。
まぁ、簡単にさらっと説明します。
PHPは、HTML文書の中に直接書き込める言語です。HTMLタグにはできない複雑な処理をしてくれます。
HTML文書の中にPHPの構文を入れると、拡張子は.htmlではなく.phpとなり、PHP文書として保存されます。

10_wordpressintro_27

なんかややこしい文章!でも表示されるのは一番最初にhtmlの<h1> </h1>で紹介したのと一緒です…。

なんで?…っていうのを解説していきます。

まず一番上の文から。
<?php ←この部分で、phpの構文を書きますよ、ということを宣言します。

その次。 $a=”一言” ←これは「$aと書かれている部分には、一言、と入れて下さい、という命令文です。一言の部分は、好きな文字に変えることができます。 そして ;?>← この記述で、PHP構文が終わりですよ、ということを表します。

<h1>は先ほど説明したHTMLタグで、効果は一緒です。

<h1>の中身…「今日の」は通常の文章ですが、その後の<?php echo $a;?>、これは$aの文字をここに書きだして下さい、という命令文です。
echoというのは、PHPの命令文で「出力する」という意味があります。なので、$aに入れた「一言」という文字が出力されて、<h1> </h1>が働いて「今日の一言」と太字で表示されるわけです。

ややこしい…!!

こうやってPHP構文を使う意味ってなんなの?普通に書いちゃだめなの?ってことですが…。

例えばホームページ内によく出てくる一文があるとします。そうだな…会社名とか。会社名を上の$a=” “のPHP構文でで書いておくと、もし「会社が統合して社名が変わった!」という時に、$a=” “…この部分の” “内の文字を新しい社名に書き換えるだけで、全ページに変更が適用されます。HTMLだけだと、全ページの会社名を探しだして書き換えなきゃいけません。それって労力も使いますし、変更漏れなども起こりやすいです。
PHPはこういう風に、その時のライブな情報を反映してページを構成します。日付や年号なども自動で取ってこれるので、文章中に2013と年号を入れるところも、PHPで表記しておくと、2014年になったら自動的に2014と表示してくれたりとかいったこともできます。
WordPressは、このような変更や現在の情報の反映に強いPHPで出来たシステムです。
なので、ブログや頻繁に更新するホームページ制作に向いています。

PHPを使うためのサーバー

ホームページは、インターネットに接続しているサーバー(データ格納庫)に保存されているHTML文書やPHP文書、画像などにアクセスして(アクセスするために、http://www.xxxxx.com/などといったアドレスを使います)その情報をブラウザ(InternetExplorerやGoogleChrome、Firefoxなど)で表示させて閲覧します。

PHPは「サーバーサイドスクリプト言語」というもので、PHP言語の処理は全てサーバーで行われます。

つまり、先ほど書いたPHPの機能…特定の文字を入れるとか日付を取ってくるとかというのは、アクセスがある度にサーバー側が処理してくれて、その情報をパソコンやスマホに流してくれているわけです。なので、PHPの処理をするためにはPHPに対応したサーバーを使わないときちんと動作してくれません。
WordPressを使う際は、PHPに対応したサーバーを選んでください。

最近のPHP対応サーバーは、WordPressを簡単にインストールできる機能を備えているところもありますので、そういったところを使うのも良いかもしれません。

ややこしそう…それでもWordPressを使うメリットって?

インストールとかPHPとかなんかややこしそう、でも、最初さえやっちゃえば後は簡単に管理出来ます。
WordPressでホームページを作るメリットとしては…

無料

無料です。サーバーさえ用意すれば、誰でもすぐに始めることができます。サーバー借りるのにお金はかかってきちゃいますが…。

「テーマ」と呼ばれるデザインテンプレートが豊富

themekanri

「テーマ」というものを使うことによって、ブログのデザインを色々変更することができます。また、デザインのカスタマイズもできます。
テーマはWordPressの公式システムから探したり、また国内・海外のネット上で無料・有料共に配布されています。
ただ、公式から配布されていないものは、ウイルスを含むものもあるので、使用には注意が必要です。

プラグインで色んな機能が付けられる

これぞWordPressの醍醐味、といいますか…「プラグイン機能」というものがあります。プラグインは入れたり停止したりが自由にできます。便利なプラグインがいっぱいあります!

  • ・商品の販売
  • ・SNSサイトの運営
  • ・スライドショーや写真ギャラリーサイト等の運営
  • ・イベントカレンダーの作成
  • ・SEO対策
  • ・SNSへのシェアボタン、いいねボタンをまとめて設置
  • ・お問い合わせフォーム、アンケートフォームなどの設置

他にも色々あります!SNSを作っちゃうという壮大なものから、バックアップを取るといった日常お役立ちツールまで。難しい知識がなくてもプラグインで好きなように機能が追加できます!

HTML、CSSが分かればデザインが自由にできる

WordPressはPHP構文がふんだんに使われたシステムですが、決まったPHP構文を使うので、PHP構文は自分で考えて書くのではなく、予め用意されているPHP構文をコピペして使用すればOKです。PHPが分かる人だったら、PHP構文をカスタマイズしたり…ともっと自由にすることができます。

つまり、HTMLとCSSで作ったホームページのHTMLに、決まったPHP構文をコピペすることで、簡単にWordPressの機能を取り入れることができます。そしてCSSでデザインを自由にすることができます。

しかしデメリットもあります

メリットもあればデメリットもあるよ!人生いろいろあるよ!というわけで思いついたデメリットを記述します。

自分でサーバーを借りて設定しないといけない

当然っちゃ当然なんですが…。ブログやホームページ作成サービスとは違って、アカウント取ったらすぐに始められるというものではなくて、自分で設定していかないといけません。不慣れな人にとっては「何それ!?」ってなりますよね…私もまだよく分かっていません…。

基本英語。でも日本語化は進んでいる

WordPressはアメリカ発祥のシステムです。よって、システムやプラグインの設定画面でたまに英語が出てきます。日本語化はだいぶ進んでいるんですが、テーマやプラグインなどは海外製のものが多く、英語を読み解いて設定しないといけない場面もちらほら。もちろん日本製テーマ、プラグインもあります。

専門用語があります

どんなシステムでもそうだと思うんですが、そのシステム独自の呼称などがあります。テーマ、プラグインもそうですが、2部目で書く予定のテンプレートタグ、パーツテンプレートなど…。慣れてくれば自然に覚えられますが、最初は意味が分からなくなるかもしれません。

無料で配布されています。では保証は?

WordPressは無料で配布されています。配布元の会社はきちっとあるのですが、無料で配布されていて誰でも始められ、システムのカスタマイズもできるので、カスタマイズして、もしシステムが動かなくなってしまったり、重大な損害が出てしまったら…そんな時は自己責任になっちゃいます。そんな大きな被害があったということはあまり聞かないのですが、使用は自己責任でお願いしますってことですね。

アップデートがあります

WordPressのシステム、テーマ、プラグインなどは数ヶ月に1回くらいの頻度で、それぞれアップデートがあります。テーマやプラグインによって頻度はまちまちですが、アップデートがあるときちんと通知してくれます。アップデートをして常に最新の状態を保っておかないと、何か不具合が出る可能性もあります。

無料ブログや普通のホームページと比べてどうなの?

WordPressは元々ブログツールで、ブログ制作に強い機能を備えています。しかしあまりにも高機能なので、通常のホームページ制作にも幅広く使われています。ではよくあるブログサービスと比べてどうなのでしょうか?日本でトップクラスの人気ブログサービスのアメーバと、普通にホームページを作った時と比べてみます(2013年4月現在)。

10_wordpressintro_31

  • ・設定が超簡単(登録すれば誰でもすぐ開始できる)
  • ・HTMLやCSSの知識は不要
  • ・アメーバピグ、ぐるっぽ、ゲームなどの付属サービスが使え、他のユーザーと手軽に交流もできる
  • ・デザインは選択制、広告付き
  • ・アドレスにameblo.jpが必ずつく

amebadesign

アメーバブログはメールアドレスを登録するだけですぐに始めることができます。設定も超簡単で、見た目も分かりやすいものばかり。HTMLやCSSを記述する必要はありません。
そして、アメーバピグというアバターを設定できたり、グルっぽというサークルで交流したり、部屋を作ったり釣りやカジノができるなどというゲームも満載!アクセス解析などブログに必要なツールも最初からついています。
しかしデザインは選択制で、種類は多いですが、自分の好きなようにはできません。また、必ず広告がついてきます。
そしてブログのアドレスは必ずameblo.jpがつきます。自分の好きな単語をameblo.jpの後ろにつけることはできますが、全て自分の好きなアドレスに、ということはできません。

手軽にブログを始めたい、交流したい、デザインなどには拘らない人はアメーバ向きかもしれません。

10_wordpressintro_35

  • ・HTML、CSS、PHP、JavaScriptなどから出来ていて、知識がないと作れないし更新もできない
  • ・自分で1から作るので、デザインやつけたい機能なども自由にできるが、その分知識も必要
  • ・変更などがあった場合、Dreamweaverやホームページビルダーなどを使って、手作業でする。量が多いとなかなか対応しきれない。
  • ・好きなアドレスが使える
  • ・普通のホームページはすぐに作れても、ブログのシステムを作るのは結構難しい
  • ・一度作ってしまえば、放置していてもあまり問題ない(定期的なメンテナンスは必要だと思いますが…)

dwgamen

Web制作アプリ作成 | Adobe Dreamweaver CS6

特別なシステムを使わないので、作業はほとんど手作業でします。何かシステムを追加したいなと思った時は自作します。簡単なページだと手軽に作れますが、複雑なページだと、かなりの知識がないとちゃんとしたページができません。
アップデートとかはないので、ホームページを作ったら放っておいても大丈夫ですが、Web制作技術は新しいものがドンドン出てきます。メンテナンスは定期的にした方が良いとは思います。
また、制作や更新にはDreamweaverやホームページビルダーといった、ホームページ作成ソフトが欠かせません。

ホームページ制作についてかなりの上級者か、もしくは初心者であまり難しいことは考えたくない人、更新頻度の低いページを作る時などは普通のホームページ制作で良いと思います。

wordpress-logo-hoz-rgb

  • ・HTML、CSSの知識があれば好きなデザインのページが作れる。また、知識がなくても始めることができる
  • ・修正箇所があっても、専用のエディタで簡単に修正できる
  • ・特別な機能はプラグインでつけられるので、難しい知識は必要ない
  • ・アドレスは好きなものが使える
  • ・同じホームページで通常ページとブログの両方を簡単に設置することができる。
  • ・アップデートがあるので、たまに更新をしないといけない

editorsample

WordPressはシステム化されているので、上画像のような管理画面とエディタを使って制作や更新は比較的簡単にできます。HTMLやCSSが分かる人であれば、デザインを自由にして、なおかつ本来JavaScriptなどで実装しないといけない複雑な機能も、ワンクリックでできます。
カスタムや自由なデザイン制作をするのであれば、通常のホームページと同様、Dreamweaverやホームページビルダーといったホームページ制作用のソフトは必要があります。が、予め用意されたテーマを使用するなら、そういったホームページ制作ソフトは要りません。カスタムする場合も、最初さえ作ってしまえば後の更新は管理画面からできます。
つまり「このパソコンにはDreamweaver入ってないから、更新ができない!」なんてことはあまりないです。インターネットに繋がったパソコンからなら管理画面にアクセスすることができます。

HTMLやCSSは分かるけど、そこから更に一歩進みたい人や、あまり知識はないけど高機能なホームページを作りたい人、構築は業者に任せるけどちょっとした変更などは自分でやりたいという人に向いていると思います。

HTMLやCSSが分からない人でも触れるWordPressの機能

説明に「HTML」と「CSS」という言葉が頻発しましたが、そもそもそれが分からないから不安、という人でもWordPressの機能をいじれる部分があります。
どういった部分がいじれるのか、簡単に紹介します。

dashboardimg

WordPressをインストールしてログインすると、こんな画面が出てきます。インストールはサーバーにするので、インターネットに繋がっているパソコンからならどこでもアクセスできます。
左に項目が色々並んでいるのですが、ここから設定をしていきます。

themekanri

まずはテーマの変更。ホームページ全体のデザインの変更ですね!使いたいテーマを選ぶだけで変更が反映されます。色や画像の変更ができるテーマもあり、その変更もここの画面からできます。
自分の好みにあったテーマを探してインストールするのも簡単にできます。

ippansetteiimg

一般設定。これも重要なところ。ホームページのタイトルやキャッチフレーズを変更したりなど、基本的な設定をします。変更したら、すぐにページに変更が反映されます!

menukanri

メニュー変更。よくホームページの上側にある「トップページへ」とか「商品一覧」「お問い合わせ」などのナビゲーションメニューを設定することができます。メニューに表示させたいページを登録したり、表示名を変えたりということができます。

他にも、ページを追加、プラグインの追加、停止、設定など、ブログだったらカテゴリーやタグ分けの変更等も行えます。また、ユーザーによって権限を分けることもできるので、閲覧専用のユーザー、変更用のユーザー…などと用途毎にユーザーを作ってログインすることも可能です。

こんな感じで、WordPressでできることやメリット、デメリットなどを説明していきました。ここに書いたことはほんの一部で、WordPressはもっと色々な機能があると思うんですが、私もあまり分かっていません…。
そんな人でもWordPressでブログが運営できます(このブログはWordPressで作られています)。
次回は実際の構築編をやろうと思います。といっても、さらっとした内容になると思います…。

それでは!Have a nice design!