サルでき流 WordPressではじめる企業サイトの作り方

第43回 中小企業経営者さんのための企業サイト作り 実践編その③「イマドキのスライダーを使いこなす:Slider Revolution」

この記事を読むのに必要な時間:およそ 5.5 分

イマドキの企業サイト作りの進捗状況

さてさて。

全国400万人の中小企業経営者のみなさま,こんにちは。

イマドキの企業サイト作り,少しずつ慣れてきましたか? 今回も毎度お馴染み,現在の進捗状況の確認から入りましょう。⁠一日のはじまりは進捗確認から」です。せっかくですから,プロジェクトワークにも慣れちゃいましょう。

では行きますよ~。前々回からはじまった「イマドキの企業サイト作り(要は実践編⁠⁠,みなさん現在こんな感じのトコロを進んでいます。

  • ワタシに洗脳されて,イマドキの企業サイトを作ろうかしらと思う
  • ワタシにそそのかされて,テーマの購入,ダウンロード,導入を行う
  • Visual Composerというエディタのパワーを見て驚愕する
  • イマドキの会社情報ページがカンタンに作れてご満悦

おお,まさに「サイト作りの本番がはじまった」というところですね。

あまり馴染みがないWordPressの,しかもその最先端のテーマやエディタを使っていますので,導入時はちょっとドキドキしましたが……使ってみると意外とカンタンでしょう?

え?そうでもないですか?あれれ?

いえでもね。⁠プログラミングをまったくしないで,カッコイイレイアウトのページを自由自在に組み立てられる」なんてこと,一昔前には考えられなかったことなんですよ。

今まではHTMLを書く技術と,文章を書く熱意のどちらも無いと,良いWebサイトは作れませんでした。それが,文章を書く熱意さえあれば良いWebサイトを作れるようになったわけですから,敷居は確実に低くなってきています。

ということは,逆に言うと,⁠HTMLが書けないからステキなWebサイトを作れないんだよね~」という言い訳が……できなくなってきていたりいなかったり。

……余計なこと言っちゃいましたかね,ワタシ。

……が,頑張りましょうね!熱意を持って文章を書いていきましょう!

ではでは!今回は「イマドキのスライダー」のお話です。

Webサイトを普段あんまり見ない方の場合,⁠スライダー」という言葉がそもそもピンと来ないかもしれませんね。

ですので,いつもの様にまずは「スライダー入門」からはじめます。

スライダーって何だろう?

まずはウィキペディア様にお伺いを立ててみましょうか。スライダーって何でしょう?教えてくださいな,と。

⁠スライダーとは,人差し指と中指でボールに回転を掛けることにより利き腕と反対方向,または下方に変化する,野球における球種の1つである。⁠

そうそう,伊藤智仁。

みなさまは覚えていますか?元ヤクルトのエース,肘壊さなきゃ間違いなく歴史的な名投手になっていたハズの,伊藤智仁を。物理法則を無視して真横に滑る,天下無双の高速スライダー。あの高速スライダーを現役時代にもう一度見たかったのはワタシだけではありますまい。あの古田でさえ「自分が打者だったら絶対に打てない」と言ってましたもんね。古田がですよ?やっぱりさ~⁠以下,小一時間続く⁠

……えーと,何の話でしたっけ?

意外なことに,Webサイトで言うところの「スライダー」について,ウィキペディアには載っていませんでした。あれー?

仕方がないのでサルできペディアで言いますとね。

「スライダーとは,同じようなサイズの複数の画像を,紙芝居のように入れ替えながら表示する,Webサイト上の仕組みのことを言います。スライドショーやカルーセルと呼ぶこともあります。」

こんな機能,よく見ますよね。

ナイキのホームページ。魅力的な商品が次から次へと表示されます

ナイキのホームページ。魅力的な商品が次から次へと表示されます

以前,Webサイトの中で,ユーザーの視線をぐっと集める画像のことを,⁠アイキャッチ」と呼ぶ,なんてお話をしました第13回あたりでサラ~ッと触れていますので,気分転換にどうぞ⁠⁠。

このアイキャッチ。Webサイトの中で,まさに「顔」として非常に大きな役割を持っていまして。あるとないとじゃ印象が大違いになりますので,ちゃんとアイキャッチは入れていきましょうね。ということなのですが。

実はアイキャッチには1点だけ問題がありまして。

何かというと,設置するのに広い場所を必要とするのです。

アイキャッチの目的は「ユーザーの視線を集めること」ですので,⁠目立つ画像」を設置しないといけません。となると必然的に,⁠画像が大きくなる」のです。

その結果,アイキャッチが「邪魔」になるわけです。

いや確かに,目立っていて良いんですけどね。

⁠便利と邪魔は紙一重」というヤツでして,初めてその画像を見た人にとっては「プラスの効果」があるのですが,同じ画像を何度も見て,飽き飽きしている人にとっては「マイナスの効果」しか無かったりするのです。

困りましたね。何か解決策は無いのでしょうか?

解決策①:アイキャッチを小さくする

→問題点:邪魔ではなくなるものの,目立たなくなってしまう

解決策②:何枚もアイキャッチを並べる

→問題点:少しだけ飽きなくなるものの,邪魔感が倍増する

どっちもダメでした。うーむ,これはマズイです。

解決策③:ひとつのアイキャッチの場所に,複数の画像を手品のように切り替えながら表示する

⁠おお!それが正解だ!すごいアイデアじゃないかジョージ!⁠

……と,いうことで考えられたのが,⁠スライダー」という仕組みです。⁠注:一部創作が含まれている可能性があります⁠

ただこの解決策,ひとつ問題があるとすると。

そんな手品のような仕組みを作るためには,当然何らかのプログラミングが必要になります。

しかも残念なことに,HTMLの基本機能にはこんな便利な機能はありませんので,⁠Flash」「JavaScript」と言った,もうすこし複雑な処理ができる,⁠もうかなり難易度が高い」プログラミングが必要になってしまうのです。

うーむ,やっぱりそうなりますか。

これはどうしたものかしら。

そう!もうお気付きですね!

それを解決するのが,今回の「Slider Revolution」なのです。

著者プロフィール

カワサキタカシ(かわさきたかし)

元アイ・ビー・エムERPコンサルタント,元アップル教育ソリューション開発者兼営業,他にも様々な経験を経て,人材育成会社『株式会社マイウェイ』を夫婦で起業。現在,同社の取締役兼なんでも担当。

「Webサイト」から「iPhoneアプリ」,「ビジネスサービス」から「会社」まで,『作ること』が好き。そして作る楽しさを誰かに『教えること』も好き。楽しく作る技術を学ぶコミュニティ,『サルでき.jp』をぐーたら管理中。

著書に『iPhoneアプリ開発塾』(技術評論社),『サルにもできるiPhone同人誌の創り方』(飛鳥新社)がある。

株式会社マイウェイ Webサイト
株式会社マイウェイ Facebook
カワサキタカシ Facebook
サルでき.jp


企業サイト作り(運用)にお困りの経営者さま・Webご担当者さま。ワタシ,『企業サイトを楽しく作る(育てる)ためのサポートサービス』もやっております。困り果てて現実逃避の小旅行に出かける前に,是非一度弊社Webサイトまでお気軽にご相談くださいませ。