タグ別アーカイブ: コーポレートサイト

WordPressで構築する製品情報システム(製品情報CMS)

drw-0

多品種多品目を扱う企業WEBサイトでは、製品や商品、サービスを紹介するための「製品(商品)情報システム」が組み込まれているケースが多い。
「製品情報システム」と聞くと、一から手作りする「スクラッチ開発」で構築する傾向にあるが、当社では、WordPressを「製品情報CMS」に仕立て、比較的短かい納期で、質の高い製品情報システムを数多く提供してきた。
ここでは、過去の導入事例から「製品情報CMS」で実現した要件や解決できた課題を紹介しよう。

WordPressベースの製品情報CMSとスクラッチ開発

drw-1

当社では、WordPressを製品情報システムのベースとすることで、スクラッチ開発では避けて通れない開発工程の一部を省いてきた。いや、「省いた」のではなく実際には「意識しなくてもよくなった」と表現する方が正しいかもしれない。

その工程とは、
・データベース(テーブル)設計/構築
・管理画面の設計/プログラミング
である。

データベースについてはWordPressの構造をそのまま利用するため、開発の段階においては、データベースの存在を意識することはなく、WordPressに標準装備されている機能を呼び出したり、足らずはプラグインをインストールし、そのプラグインが持つ機能を通じてデータベースを呼び出す形になる。
管理画面についても同様に、ログインユーザー管理はもちろん、プラグインが自動生成する入力フォームを利用し、製品情報の入力画面としている。管理画面については、ほぼノンプログラミングに近い。
これらの工程が省かれることが、工数の削減と、この工程で入り込む不具合の排除に寄与しているといえるだろう。

以降では、WordPressベースで製品情報CMSを構築した過去の事例を紹介しよう。
いずれの事例もWordPress標準のカテゴリーと「Advanced Custom Fields」プラグインを駆使して実現したものだ。

製品ごとに仕様項目が異なる製品情報システム

このクライアントは、特定の業界に対応した製品群を製造販売している企業ではあるものの、製品のカテゴリーごとに全く異なるスペック項目を有している。それらの込み入った内容をHTMLに触れることなく誰でも編集したいというのがクライアントから提示された要件であった。

スペック表のような細かなテーブルは、いろいろな方法でWEBサイトに掲載する方法がある。
例えば、
  ・スペック表の部分だけを抜き出してHTMLファイルで記述し、表示処理で組み込んで掲載する。
  ・テキスト入力欄を1つ設けて、そこにHTMLでテーブルを入力する。
  ・リッチテキストエディタの入力欄を1つ設けて、そこにExcel上で作ったテーブルを張り付ける。
  ・スペック表に則した入力項目を準備し、スペック内容だけを入力する。
などが挙げられる。
いずれの方法も、当社で過去に構築したことのある方法であるが、クライアントのWEBサイト運用スキル(HTML知識の有無など)とコストを鑑みてどの方法を採用するかを決定している。
今回のクライアントは、4つ目の「スペック表に則した入力項目を準備し、スペック内容だけを入力する」方法を採用した。

実はこの製品情報CMSに関するコラムは、既に執筆済みなので、詳しくは以下のページを参照されたい。
WordPressでCMS:仕様項目まで更新可能、運用コストを低減

詳細ページに関連情報を集約する製品情報システム

せっかく製品情報システムを作るのだから、できるだけ多くの情報を掲載したい。
たいていのクライアントが異口同音に発するフレーズだ。
我々もそれに応えるべく知恵を絞り、構築作業に勤しむが、忘れてはいけないことがある。
それは、「初期はもちろん、日々の運用でもそれだけ多くの情報を入力しなければならない」ということだ。

クライアントからも、日々の運用負担を考慮し、以下のような要件が提示された。
  ・Q&A1つを、複数の製品および複数の製品カテゴリーに割り当てたい。
  ・アクセサリー1つを、複数の製品および複数の製品カテゴリーに割り当てたい。
  ・既登録の製品を選択するだけで関連製品を登録したい。

Q&Aとアクセサリーは、ほぼ同じ画面構成で以下のようなイメージで管理画面を準備した。
これによって、同じ内容のQ&Aやアクセサリーの情報を製品ごとに登録する手間が省けてクライアントには好評を得た。

drw-2

関連製品の登録は、以下のようなイメージで管理画面を準備した。
「行を追加する」を押下すれば、ひとつの製品に複数の製品を関連付けが可能だ。

drw-3

複数の切り口から製品にたどり着ける製品情報システム

製品情報システムでありがちなのが、「製品カテゴリー(分類)」に従って製品詳細までたどらせる方法。
この「製品カテゴリー」は、製品を提供する側の都合で体系付けされていて、サイト訪問者にとってはピンとこない場合が多い。
サイト訪問者は往々にして、何かの目的を果たしたい、ある課題を解決したい、などいったニーズをもってWEBサイトにやってくるが、そのとき示される入口の情報が「製品カテゴリー」だけでは、自分のニーズがどの製品で満足されるのか頭の中で変換しながら試行錯誤し、製品を探すことになる。

そこで、このクライアントでは、「製品カテゴリー」とは別に「製品用途」と「対応業種」を追加し、3系統の製品体系を準備し、利便性の向上を図った。

以下のようなイメージで複数体系を登録する管理画面を準備した。
この例では1つの製品情報の中で、製品カテゴリーは1つ、用途と業種は複数を設定可能にしている。

drw-4

WordPressでCMSを構築する際の注意点

drw-5

以上、いろいろとWordPressで構築するCMSの利点や管理画面の作りを紹介してきたが、WordPressが万能だとは決して言っていない。例えば製品情報システムの機能としてありがちな「キーワード全文検索」や「複数条件を組み合わせた絞り込み検索」などは、当社でもスクラッチによる開発で実現し、WordPressを用いたCMSでは構築していない。なぜなら、これらの機能はWordPressでも実現できなくはないが、得意ではないからだ。その理由は、データベースのデータの持ち方に起因する。

スクラッチで開発するような製品情報システムの場合、基本は1製品で1レコードの情報を持つことになるが、WordPressの場合、データ構造に柔軟性を持たせるため、1製品で複数レコードを持つことになってしまう。例えば製品情報の項目が20項目あった場合、20レコード以上のレコードが生成されてしまうことになる。また、他にも付属の情報があった場合、それらは1つのテーブルの中に詰め込まれてしまう。
なぜ1製品の情報を複数レコードに持つことが良くないのか?
データベースを用いてシステムを開発することのある読者ならわかると思うが、製品検索の絞り込みで3つの条件を設定して絞り込む場合、少なくとも3回は、データが格納されているテーブルをフルスキャンすることになる。その上、フルスキャンするテーブルには、製品数の項目数倍のレコード数がある(実際は、さらにその2,3倍は格納されている)。否応なく、検索に時間がかかるし、サーバーにも負荷をかけてしまう。そのため、複数の訪問者が同時に検索をかけた場合、相応に待たせてしまうことにもなる。

したがって、WordPressを製品数が数千点以上になるような製品情報システムのCMSとして用いるには無理がある。せいぜい500点以下に留める方がよいだろう。

WordPressは使いよう

drw-6

人に得手不得手があるように、WordPressにも不得手がある。人と同じようにWordPressの得手をほめて伸ばしてあげるように利用すれば、WordPressはその真価を発揮してくれるのではないだろうか。

筆者が最近構想することに、「WordPressとスクラッチ開発のハイブリッドシステム」がある。
製品情報の管理機能であるバックエンドの部分はWordPressで構築し、WEBサイトから直接アクセスされるフロントエンドの部分はスクラッチ開発で検索機能を構築するのである。そして、WordPressのデータベースとスクラッチ開発のデータベースの間に「本番公開機能」を設けてWEBサイトの情報を更新するのだ。なかなかいいアイデアだと思うが、まだ実現には至っていない。

初心者が、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サイトを巡回してくれる日は近い。

コーポレートサイト「先輩の声」で応募を増やす3施策

コーポレートサイト「先輩の声」で応募を増やす3施策

コーポレートサイトの採用情報でキラーコンテンツとなるのが「先輩の声」「先輩インタビュー」だ。就活者は、先輩たちと自分の姿を重ね合わせ、あなたの企業で働く姿をイメージする。このコンテンツがエントリー数を左右すると断言してもいいほど重要なものなのだ。

就活者たちが「入社したい!」と感じてくれる、はつらつとした先輩たちの姿を描くための3つのポイントを洗い出した。ぜひ、次回の採用活動に合せて「先輩の声」コンテンツを見直してほしい。

1.質問票による「先輩の声」は響かない

質問票による「先輩の声」は響かない

採用市場が売り手市場となり、コーポレートサイトは採用活動においてますます重要度を増している。
さらに、求職者は企業の事業内容よりも福利厚生を真っ先にチェックするという時代になってしまった。就活者たちは、自分たちがその企業で楽しく働けるか、居場所があるのか、充実したプライベートを過ごせるのかが最大の関心事なのだ。

とすれば、企業側は社員たちがはつらつと働く姿をアピールすれば、就活者に良い印象を抱いてもらえるかもしれないと考える。しかし現実はどうだ。おざなりの先輩インタビューの多いこと。人事総務から回ってきた質問票に、業務の合間を見て面倒くさそうに書き込む社員。結果回収したアンケートは金太郎飴のようなコンテンツになってしまう。顔写真と部署名を間違えても、誰も気づかない。

そんな価値のないコンテンツを公開している企業に、就活者は「入社したい!」と感じてくれるだろうか。あちこちの企業を落ちて、どこでもいいからと応募してきた就活者と、あなたは面接してはいないだろうか。

1-2.質問(見出し)はそれぞれ異なるものでもいい

質問(見出し)はそれぞれ異なるものでもいい

先輩の声でありがちなのは、どの先輩も同じ質問が並べられていることだ。
「一日のスケジュールを教えてください」といった質問は、それぞれ部署が違うし、担当も異なるので質問に対する回答もそれぞれ違うものになる。

しかし、「部署の雰囲気はどうですか」「なぜこの会社を選んだのですか」などという質問は、ほぼステレオタイプの優等生な回答に落ち着いてしまう。人事部や上司の目があるにも関わらず、「のんびりした雰囲気です」「どうにでもなれと思って受験したのですが、何とか入れたので」などという答えができるはずがない。本来の業務ではないタスクでマイナス評価になりたいなどと誰も思わないからだ。

人事部が期待し、就活者誰もが「ほぉ~」と感じる立派な回答は残してもいいが、「とりあえず」感が匂う回答は割愛した方がいい。

1-3.先輩のキャラクターに重きを置くと会社が見えてくる

先輩のキャラクターに重きを置くと会社が見えてくる

就活者は先輩の声を通して、自分が入社したあと、どのような仕事をするか、どのような精神状態になるのかを感じようとしている。
先輩社員は担当の異なる社員であるはずで、それぞれの個性が生きる部署で働いているはずだ。であれば、先輩のコメントは、そのキャラクターが感じられるものにすべきなのだ。

こうしてしまうと、社員それぞれに異なる視点でコメントがなされ、質問も異なってくるので、統一性がないように感じるかもしれない。しかしもういちど、コンテンツをつくる意味を思い返してみよう。それは、先輩のはつらつとした働きぶりを就活者に伝えるためであったはずだ。それなら、彼らが生き生きしている姿を見せるための手段は個性を表現してあげることが最善策であることが理解できるだろう。

さらに、異なるキャラクターの集まりが会社だ。しかしそこには、ある統一性がある。「社風」だ。
どうあがいても、社風は異なるキャラクターが集まっても、かんたんに変わるものではない。異なるキャラクター、異なるコメントで「先輩の声」が構成されていたとしても、全体を俯瞰すれば、あなたの会社の個性がより強烈に感じられるようになってくる。

2.生き生きとした表情の写真を使う

生き生きとした表情の写真を使う

就活者は、基本的に先輩の声も企業の「作りごと」なのではないかと疑いながらコンテンツをチェックしている。そのような彼らの目に映る先輩の写真が、緊張した証明写真のようなものだったら、どうだろう。瞬間的に「このコメントは、言わされたものではないか?」とさらなる疑念を抱かせてしまうことになる。

せっかく良いコメントがとれたのにも関わらず、写真でミソをつけてしまってはもったいない。

カメラマンに依頼する予算もないのに、どうするんだ?
ビジュアル系の社員ではないのに、見栄えなんてしないだろう。

すぐに「できない理由」を並べるのは、今すぐやめよう。素人にでもいい表情をおさえることができるし、ビジュアル系でなくても、いい表情はしてくれるものだからだ。
必ずできる。筆者は採用コンテンツで多くのビジュアル系ではない社員さんたち(これまでに撮影させてもらった方、失礼!)を撮影しているが、100%その人のいい表情をおさえられていると自負している。

では、素人でも「いい表情を切り取るためのテクニック」をお話していこう。

2-2.先輩たちのいい表情を切り取るコツ

先輩たちのいい表情を切り取るコツ

アングル

どんな角度で、どの程度の見え方で撮影するかだ。
トリミング(写真の切り取り範囲)は、あとで加工ツールを使えばどうにでもなるが、角度や見える範囲はあらかじめ決めておかないと、どうにもならない。

まず、「先輩社員 メッセージ」などと画像検索してみよう。格好いい社員たちの写真が表示されるはずだ。その中から、あなたが気に入った写真をストックしておき、どんな角度で撮ればそうなるのかをシミュレーションしておく。あとは現場で試行錯誤するだけだ。

会話しながら撮影する

次に大切なことは、撮影は先輩社員と話をする人と撮影者の2人セットで臨むこと。1対1だと相手は緊張が解けない。話をする役割の人は、先輩社員と仕事以外の話をしよう。近くにできたイタリアンレストランの話でもいいし、昨日のテレビドラマの話でもいい。必ず仕事以外の雑談に限る。
仕事の話になると、今抱えている案件の心配ごとだったり今月の売り上げが達成するかどうかを考えはじめてしまい、表情が曇ってしまう。

100枚撮ろう

もっとも大切なこと。
1人につき、100枚くらいはシャッターを切ろう。相手もモデルではない。こちらも素人カメラマンなのだから、いい表情をおさえるためには、「下手な鉄砲も数打ちゃ当たる」という考え方が必要なのだ。

3.先輩たちが活躍する、現場を伝えよう

先輩たちが活躍する、現場を伝えよう

冒頭でも書いた通り、就活者は「この会社に入ったら、自分はどんな環境でどんな仕事をするのか」を先輩の声を通して見ようとしている。

就活者のニーズに応え、一人でも多くの優秀な人材を採用したいと考えるならば、先輩たちが働く現場に足を運ぶべきだ。そこで彼らが見せる表情をとらえ、働く姿を写真としておさめ、コンテンツに反映させるのだ。
もしその現実の姿を見て、こういう仕事は無理だと考える就活者なら、こちらから願い下げればいい。どうせ入社したところで長く続くはずはないのだから。

むしろ、こういう仕事をしたい、と感じてくれる就活者が現れてくれることを待とうではないか。もしそういった人がいるならば、その人はしっかりした意志を持っているはずだから、あなたにとっても会社にとっても良い出会いになるに違いない。

WordPressのフックを利用し、記事保存時に処理を追加

WordPressのフックを利用し、記事保存時に処理を追加

WordPressでCMSを構築する際、投稿(記事)の保存のタイミングで何らかの処理を実行させたいときがある。
そういったときのためにWordPressには「フック」とよばれる機能が備わっている。
「フック」とは、日常用語からも想像できるように「引っ掛ける」という意味で、WordPressの処理のタイミングにオリジナルの処理を引っ掛けておき、同時に実行してもらう仕組みのことをいう。

WordPressが備えているフックは、投稿(記事)の保存のタイミングだけでなく、管理画面にログインした際、ログアウトした際など、多くのタイミングで「フック」が準備されている。

プラグイン API/アクションフック一覧

今回は、そのなかでも「投稿(記事)の保存のタイミング」にオリジナルの処理を「フックする」ことにフォーカスする。

1. 当社の事例

当社の事例

いきなり技術的な説明に入っても、WordPressのカスタマイズ作業に携わる人以外はピンとこないはずなので、過去に当社が実装した事例を先に紹介しておこう。

1-1. 投稿保存と同時にアップロードしたExcelの内容をインポートする

せっかくCMSを導入しても、情報入力に手間がかかるようであれば、日々の運用の効率化には寄与しない。とくに一覧表で表現されるような情報をブラウザ上で入力するのは、骨の折れる作業の代表である。
そこで当社がよく採用する手法が、Excelの定形フォーマットに事前に情報を記載してもらい、その情報を投稿(記事)の保存のタイミングでインポートする方法である。

以下は、この手法で情報を登録した例だ。

  • メーカーコーポレートサイトの製品スペックの登録
  • 不動産物件検索サイトの物件詳細の登録

ここでは、「製品スペックの登録」についてもう少し詳しく紹介しておこう。

1-2. 製品スペックの登録

当社のクライアントにはメーカー企業が多い。そのため、WEBサイト制作において必然的に製品検索機能を実装することになる。常に課題となるのは、一つ一つの製品スペックをどのようにCMSで登録させるか。扱う製品によっては、スペック項目が20~30項目にもおよび、そのうえ、製品のカテゴリーごとにスペック項目が異なるのが常である。
もちろん管理画面には、それらを加味してカスタムフィールドを駆使したカスタマイズを施すが、これだけの項目数を全製品について管理画面上から入力するには相当な労力が予想されるため、以下のように実装している。

  • スペックの項目と内容をExcel上に記載してもらう
  • CMSの管理画面上でそのExcelをアップしてもらう
  • 製品情報を保存するタイミングでその内容をカスタムフィールドにインポートする
  • サイトの表示には、カスタムフィールドにインポートされた情報をもとにレンダリングする

この機能の実装によって、とくに初期データ入力が格段に楽になった。もちろん、インポートされたスペックの内容は、管理画面上で再編集することも可能だ。

インポートするスペックExcelシートのイメージ

(インポートするスペックExcelシートのイメージ)

WEBサイト上に表示された状態

(WEBサイト上に表示された状態) ※値が未入力の項目は非表示としている。

2. 実装方法

実装方法

「投稿(記事)の保存のタイミング」には、もう少し細かなタイミングでいくつかのフックが準備されている。例えば、更新時に呼び出されるフック(pre_post_update、edit_post、post_updated)や、新規保存時に呼び出されるフック(wp_insert_post)、全ての保存時に必ず呼び出されるフック(save_post)などが存在する。

いずれのフックも実装する要領は同じである。フックはテーマフォルダーのなかにある「functions.php」に記載すればいい。以下に、何かしら記事が保存されれば、ある特定のメールアドレスにメールを送信する例を紹介しておく。

add_action( 'save_post', 'savepost_mailsend' );
function savepost_mailsend($post_ID){

    mail('dummy@dummydomain', '記事が更新されました', 'WordPressで記事の内容が更新されました。');

}

「add_action」関数が、WordPressの処理にアクションを追加(フック)する関数である。第一引数にある「save_post」が独自の処理を実行するタイミングで、さらに第二引数にある「savepost_mailsend」が独自処理が記載されている関数名。第一引数は、WordPressで決められているフックの名前(文字列)を記述し、第二引数の関数名は自由に決定すればよい。
上記の例を簡単に説明すると「記事が保存される save_post のタイミングに独自処理 savepost_mailsend をフックするので呼び出してね」とWordPressにお願いしているということだ。

「function」以降に続く記述が独自処理の内容になる。ここでは、単純にメールを発信しているだけだが、要件によってはもっと複雑な処理を記述することになる。引数には「$post_ID」が渡されるので、更新のあった記事の内容を呼び出してその内容に沿った処理を記述することも可能だ。

3. WordPressは、フックの活用で機能拡張も自由自在

WordPressは、フックの活用で機能拡張も自由自在

WordPressには、WEBサイトの開発者が欲しい関数やフック、フィルターとよばれる機能がふんだんに準備されていて、機能拡張が比較的しやすい。もちろん、WEBサイトの開発者の希望をもれなくカバーしてくれているわけではないが、バージョンアップを重ねるたびにその充実が図られている。

WEBサイトのすべてのシステム要件がWordPress上で実現可能とはいわない。当社でもスクラッチでデータベースの設計から手がけるシステムも存在する。しかし筆者は、WordPressに準備されている関数やフック、フィルターを利用することで十分にWEBサイトのCMSとしてクライアントの要望に応えられる可能性が高いと感じている。
読者のなかには、クライアントの要求仕様を見ただけで、WordPressの採用をあきらめた経験を持つ方もいると思うが、今いちどその要件をWordPressのフックと照らし合わせて考え直してみてはどうだろう。いいアイデアが浮かぶ可能性があるはずだ。

コーポレートサイトで機能する、退職者ポータルの役割

コーポレートサイトで機能する、退職者ポータルの役割

永年まじめに勤めてもらった退職者に、まだまだ活躍してもらえる方法がある。
上場企業であれば、元社員持ち株会の会員である退職者が一定の手続きを経て、個人株主になっていることも多い。毎月の給料から少しずつ積み立てていたわけだから、持ち株数は少なく、一人で経営に影響を及ぼすようなことはない。しかしそれがまとまれば、大きな影響力を持つようになる。株式のことだけでなく、会社にとって外部の人たちからの意見を上手く吸い上げるしくみ(外部とはいえ、退職者から意見を吸い上げるのは一般の人たちから意見を求めるより容易)を持つことも「社会の公器」としての企業には必要なことであるはずだ。

直接公開はしないまでもコーポレートサイトの1機能として、退職者とのコミュニケーションを活発にする手段に「退職者ポータル」の開設・運営がある。今回は、退職者ポータルの果たすべき役割と機能についてご紹介していこう。

退職者ポータルの機能1:訃報連絡

訃報連絡

いきなり縁起でもない話だが、退職者ポータルで発信する情報として、訃報連絡は非常に大切だ。
退職後、密にコミュニケーションをとっている仲であれば、何かあればすぐにご家族や知人から情報が入るだろうが、在職中に関係のあった人すべてといつまでも連絡を取り合っていることは少ない。連絡が来ず、お別れができなかったなどということがあれば、世話になった人に申し訳が立たないと感じてしまうだろう。

遠く離れていて退職後疎遠になってしまったとしても、退職者ポータルから○○年退職の○○さんが・・・と連絡がもらえれば、何らかの行動を起こせる。通夜のあと、故人の功績を仲間たちと語り合う機会ができるかもしれない。そういった場ができれば、退職者ポータルとの関係性もいっそう高まるということにもつながる。

ここで課題となるのは連絡方法だ。
携帯であれ、PCであれ、メールを受け取れる環境にあるのなら、完璧だ。情報配信は、ほぼ無料で行える。
その手段がない退職者にはファックスで伝えたい。自動音声による電話もあるが、夜中は連絡ができないなど面倒なことがつきまとう。筆者のおすすめは、メール、ファックスによる自動配信だ。メール、ファックスともにPDFファイルを登録すれば、名簿に基づいて自動で配信してくれるサービスもあるので、ぜひ活用したい。

退職者ポータルの機能2:人事異動ニュース

人事異動ニュース

在職者の人事異動を退職者にも知らせる機能だ。告知の方法は、HTMLページ、PDFファイルなど、どんなものでもかまわない。
人事は組織に属するものにとって、週刊誌のゴシップ記事みたいなもの。退職しても、その関心度が簡単に薄れることはない。

  • ○○事業部の製造部長に○○がなった・・・「おぉ、私が見込んで育てただけのことはある」
  • ○○センターの部長付けとして○○が異動・・・「明らかに左遷だ。あいつ、とうとう化けの皮がはがれたか」

といった具合に、勝手な想像をめぐらせながら食い入るようにデータをのぞき込む。
いつの時代も、社内報の人事異動ページは在職者にとってキラーコンテンツであり、それは退職者にとっても同じこと。この情報は、退職者と会社との関わりを唯一感じさせる貴重な情報源でもあるのだ。

退職者ポータルの機能3:社内報

社内報

人事異動と同じく、退職者の関心は卒業した会社で何が起こっているかだ。
社内報で語られる内容など表面的なことばかりだが、それでも会社から離れ、社会との接点が希薄になりがちな退職者にとっては、ほんの少しの情報でも非常に楽しめる。
ほんの少しの情報でも喜々としてくれる退職者は、ある意味まじめな読者だ。もしかすると、端から端まで一言一句読み飛ばすことなく精読してくれているかもしれない。社内報の編集者は、感謝の思いとともに、在職者と同等レベルでその存在を意識しておきたい。

在職者にとっても大切なことではあるが、経営陣からのメッセージは退職者にとっても貴重なものだ。
私たちは近い将来、会社をこうしようと考えている、最近会社を取り巻く状況はこのように厳しいが、そんなことに負けずリードしていくぞ、などなど。退職者はきっと熱い思いとともに、熱烈なエールを送ってくれるはずだ。

退職者ポータルの機能4:会員住所変更

会員住所変更

退職後数年はそのままの住所で居続ける人が多いだろうが、そのうち家族の事情や健康上の理由から転居する退職者は多い。定期的に開催するOB会の連絡など、退職者の居所を把握しておくことは非常に重要だ。
個人情報を多く扱うことにはなるが、セキュリティには十分留意すれば、退職者たちは自主的に名簿を更新してくれるのだから、担当部署の事務量低減にも貢献してくれる。

退職者には、お客様レベルで対応しよう

退職者には、お客様レベルで対応しよう

退職者は、あなたの会社にとって大切な人であるはずだ。真摯に仕事に向き合い、会社の礎(いしづえ)を作り、大きく成長させてきた。直接影響のない社外のひと、うるさいだけ、などと思わず、彼らをリスペクトし、退職者ポータルを立ち上げ、十分な手間をかけてもてなそうではないか。

冒頭で挙げたように、彼らが果たしてくれるかもしれない役割は多いのだ。打算的に考えても、とまでは言わないが、退職者が自分の意思で会社に貢献してくれるかどうかは、退職者ポータルといったツールをはじめとする会社の考え方にかかっている。無償でうごいてくれるかもしれない退職者たちが会社の意気を感じてくれる「退職者ポータル」を立ち上げ、彼らと一緒に会社を良くする取り組みをまずひとつ、はじめようではないか。

スマホ対応は急務か?上場企業コーポレートサイトのスマホ対応率調査結果

スマホ対応は急務か?上場企業コーポレートサイトのスマホ対応率調査結果

コーポレートサイトをスマホ対応するべきか、否か?WEBサイト担当者の方々にとって、最もホッとな話題と言ってよいかもしれない。

当社のクライアントのなかでも、リニューアルするならついでに対応しておこう、という流れが多いようだが、実際にはどうなのか?調査第一弾として、日経平均225採用銘柄一覧より無作為に113社を抽出し、対応状況を調べてみた。

スマホ対応が47.8%、そのうちレスポンシブデザインは48%

調査を実施したのは、2015年10月30日。あいうえお順に並んでいる日経平均225社を一つ飛ばしで抽出し、コーポレートサイトのHOMEページを閲覧して確認した。
結果は以下の表のとおり(○が採用、×が不採用)。113社中、54社がスマホ対応していた。レスポンシブ対応はそのうち26社だった。

日経採用銘柄企業のスマホ対応調査

上記の全データをご提供しています。
ご希望の方は、お問い合わせフォームで「日経採用企業スマホ調査希望」とご入力のうえ、ご請求ください。

この結果をどう捉えるか。調査対象となった企業は、日本を代表する大手企業ばかり。業界を牽引する立場として公的な意味でも、実施に踏み切った企業も少なくないだろう。ただ、アクセスが少ない中小企業ならまだ必要ないかというと、そうとも言えない。要は、自社サイトの訪問者がどんな環境からアクセスしているか、アクセスしてほしいかで考慮するべきだろう。
ご参考までに、スマホ対応を検討するときに考慮すべき視点を、以下にご紹介する。

BtoCはほぼ必須。BtoBでも、コンテンツ別に使用環境を想定する

一般消費者がメインターゲットであるなら、スマホ対応に迷う必要はない。総務省の平成26年度版情報白書によると、スマートフォンの国内普及率は個人保有だけでも5割を超えている。実際にビジネスユーザーも加えるとかなりの数になるであろうし、その割合は今後も増えていくと想像できる。

また、BtoBをメインとするコーポレートサイトでも、採用情報に関しては圧倒的にスマホからの閲覧が多いはず。最近では、社内ミーティングの際にも、個々にスマホを覗きながらという光景もめずらしくない。コーポレートサイトであっても、どのコンテンツに重きをおくかによって、慎重に検討するべきだろう。

SEO対策から考えるとスマホ対応は○。ただし、メインターゲットも考慮すべき

一方、SEO対策として考えたときにどうなのか。Googleは、今年の4 月 21 日から「WEBサイトがモバイルフレンドリーかどうかをランキング要素として使用し始める」と発表した。その結果、PCでの検索順位に大きな変化は見られないが、スマホで検索した時には順位に差が出るようになってきたのだ。試しに、スマホで何かを検索すると、上位に表示されるWEBサイトはすべて「スマホ対応」と書かれている。メインターゲットがスマホで閲覧する確率が高いなら、迷っている場合ではない。

では、スマホ専用サイトか、レスポンシブWEBデザインか

スマホ対応するとして、スマホ専用のサイトを別に作るか、レスポンシブWEBデザイン(一つのファイルで管理し、閲覧環境によってデザインを変化させる)か。

それぞれにメリットデメリットはあるが、運営上のメリットを考えるとレスポンシブに軍配が上がる。逆に、スマホでの操作性を追求したいなら、スマホ専用サイトにするか、レスポンシブであってもスマホでの見え方を優先したデザイン(スマホファーストなデザイン)を採用するべきだろう。

レスポンシブWEBデザインが、担当者の心をとらえる理由

WEB戦略の一つとして、スマホ対応は注視していくべき

すぐに導入するかどうかは別として、スマホ対応は間違いなく優先順位が高いといえる。WEB担当者としてやりたいことは数多くあるだろうが、限られた予算のなかで、今どこに力を注ぐべきかを検討するべきだ。そのためには、広報や人事、営業といった企業全体の動きのなかで、WEBサイトが果たすべき役割を3年先まで見越して計画を立て、その中で戦略的に選択していくことをお薦めする。

デザインが飽きてきたからWEBサイトをリニューアルするというのは、もう過去のこと。実益につながるメディアとして考え、その中でのスマホ戦略と捉えるべきだろう。

WEB担当を初めて任された人に、楽しく分かる用語集(基本編1)

WEB担当を初めて任された人に、楽しく分かる用語集(基本編1)

WEBサイトの担当者になって「なんでこんなにアルファベットやカタカナ言葉ばっかり出てくるんだ!日本人なら日本語で話さんかい!」と心の中で思ったことはありませんか?その気持ち、実はWEB業界で働く人たちも思っていることです。

正確な知識については、他のWEB用語の専門サイトで勉強していただくとして、ここでは感覚的に理解できる用語集をご紹介します。ちょっといい加減に楽しみながら読んでいただければ幸いです。

HTML

HTML

たとえば、ハンコ屋さんをイメージしてください。名前の書体をえらんでハンコのデザインが完成したら、それをもとに印材を彫ってハンコを作りますよね。

HTMLは、印材を彫る工程のようなもの。ページに入れる文言や写真などをきれいにレイアウトしたら、それをインターネット上で見ることができるようにプログラムの言語(HTML言語)で組んでいく作業のことです。

メタタグ(タイトル、ディスクリプション)

ページタイトル

ページタイトル

WEBサイトの各ページにつけるタイトルのこと。これは、検索エンジン対策にとても重要なので必ず個別のものを入力しましょう。

たとえて言うなら、本屋さんで本をさがすあなた=検索エンジン。ずらりと列ぶ本の背表紙=ページタイトル。もし、すべての本のタイトルが「海山商事株式会社のホームページ」だったとしたら、あなたはどの本を選んでよいか分からず帰ってしまいますよね?

Googleの検索エンジンも同じこと。だから、「弁当忘れてもページタイトルは忘れるな」。それほど重要なのです。

ディスクリプション

本でいえば、帯の部分に書かれている説明コピー。限られたスペースながら、こんな内容の本ですよ、おもしろいですよ、と語ることで読みたい気持ちを盛り上げます。

ディスクリプションとは、検索エンジンの結果表示に引用されることも多い。クリックしてもらえるかどうかは、この説明文で決まります。だから、「歯磨き忘れてもディスクリプション忘れるな」、もういいですね。

メタタグ

メタタグとは、上記のページタイトル、ディスクリプション、キーワード、著作表示といった、必ず入れておくべき情報をまとめてそう呼びます。

検索エンジン対策(SEO)

検索エンジン対策(SEO)

今は、何か知りたいことがあればすぐにネットで検索する時代。でも、検索結果からクリックして見るのは、せいぜい2~3つ、多くても1ページ目以内ではないでしょうか?そして、最初に表示される2~3の記事を読めば、大抵の疑問は解決されていませんか?

これは、2つのことを示しています。

1.検索エンジン(Google)の結果表示では、少なくとも1ページ目に表示されないと見てもらえる可能性は低い。

2.Googleは、検索した人が欲しい情報を上手いこと見つけ出し、上位に表示している。

つまり、Googleに評価されるようなサイトを用意しなければいけない。
Yahoo!で検索するときも、結果表示はGoogleの検索エンジン。だから、Googleが何を考えて、どんな評価をしているかを探ることがとても大切なのです。

ヘッダ、フッタ

「ヘッダです。フッタです。今日はちょっと寒いね~」って、漫才コンビの芸名ではありません。ページの頭(head)の部分(会社のロゴマークや各セクションにリンクするボタンが並ぶ部分)がヘッダ。ページの一番下(foot)の部分(サイトマップがあったり、著作権表示があったりする部分)のことです。

CSS(カスケードスタイルシート)

HTMLで書かれたページはそのままでも完成させることができますが、最近はCSSという言語と役割分担をするようになってきました。
ページの基本要素はHTMLで、見た目の調整(文字の大きさや色、写真の配置など)はCSSでと分けて作ることで、作り方がシンプルになったり、メンテナンスがしやすかったりするからです。

大胆にたとえると、のり弁をそのままの器で食卓に出すか、一つひとつの具をお皿に盛り付けて出すか、といった違いでしょうか。

CSS(カスケードスタイルシート)

言葉の意味より効果で覚えよう

言葉の意味より効果で覚えよう

WEBの用語は、数え出すと切りがないほどですが、単に意味だけを覚えようとしても、CSS?CMS?どっちだっけ?となってしまいます。
何事もそうだと思いますが、言葉だけで憶えるより意味で、意味で憶えるよりも効果で、頭に入れた方が残りやすいもの。

たとえば、CSS(Cascading Style Sheets:カスケーディング スタイル シート)は、見た目の調整(スタイルシート)が連鎖的に伝わる(カスケード)ように設定するという意味。

CSSの効果は、何層にも設定した命令があるなかで、上流から下流に引き継がれるものなのでカスケードと呼ばれているのです。今後、HTMLを触る機会かがあって「CSSの設定を部分的に変えても変わらないな?」ということがあれば、この言葉の意味を思い出してみるとよいかもしれませんね。