美しいデザインと機能性が魅力!WordPressで作ったwebサイト16選

美しいデザインと機能性が魅力!WordPressで作ったwebサイト16選

更新日:2017年12月12日 | 公開日:2017年08月30日

WordPressは、CMS(コンテンツ・マネジメント・システム)と呼ばれるソフトウェアの1つです。

CMSは、デザインテンプレートや機能を追加するプラグインなどと呼ばれる補助的なソフトを使うことで、プログラミングなどの専門知識がなくてもwebサイト構築ができるだけなく、コンテンツの入力や更新も容易にできます。
柔軟にカスタマイズができることや、構築方法が比較的安易なことなどから、現在では主要なwebサイト構築ツールとして使われています。

WordPressは世界で最もシェアを誇るCMSで、世界中のwebサイトの約3割が制作に使われていると言われています。

この記事では大手有名会社から中小企業、病院・公共施設まで、WordPressで作られたさまざまタイプのwebサイトを厳選して紹介します。

コンシェルジュ紹介

1.WordPressがCMSでトップシェアを誇る理由

サイト紹介の前に、数あるCMSのなかで、なぜWordPressが高い人気を集めているのでしょうか?
その理由には、簡単なブログからECサイトやポータルサイトまで幅広くwebサイトを制作できたり、個人・商用に関係なく無料で使えるなど、さまざまな理由が考えられます。
なかでも最も人気を集める要因は、デザイン性の高いテンプレート(テーマ)の種類が豊富なことと、機能性の高いプラグインが使えることではないでしょうか。

WordPressでは、無料でも機能性が高く本格的なテンプレートを使うことができ、有料ではさらに高品質なものが使えて、どんなwebサイトの制作にも適したテンプレートがあります。
さらに標準のWordPressにはない機能をプラグインという形で配布されているので、それらを追加することによって、webサイトにさまざまな機能を持たせられるのも人気の要因と考えられます。

2.WordPressで作ったサイトを見分ける3つの方法

世界中のwebサイトの約3割がWordPressを使って制作されていると言われていますが、表示されたサイトをパッと見ただけでは、WordPressを使っているかどうかはわかりません。
デザインや機能を参考にしたいサイトを見つけたときに、WordPressで作られたのかどうか、しかも使っているテーマやプラグインまで分かれば、サイト作りの参考サイトになって大変便利ですよね。
そこでWordPressを使って制作されたサイトかどうかを判別する3つの方法を紹介しておきます。

2-1.「IS IT WordPress?」を使う

サイトのURLを入力し、LOOK UPをクリックするだけですぐに調べることができます。
英語のページですが、WordPressの場合「Good news everyone, this website is on WordPress.」と表示され、WordPressじゃない場合「Bad news everyone, This website is not using WordPress」と表示されます。
さらにWordPressであれば、使っているテーマとプラグイン名やダウンロードできるリンクも表示されるので、非常に使いやすいサイトです。

2-2.ページのソースを見る

ページのソースを見る方法は、webサイトを開きマウスを右クリックすると、メニューが表示されます。
メニューの内容は、使用しているブラウザによって異なりますが、「ソースの表示」や「ページのソースを表示」と表示されているものがあるのでクリックすると、ソースが表示されます。
ソースの中に、以下のような文字があれば、WordPressを使って作られたサイトということになります。

WordPressを使って作られたサイトに表示されるソースの例
  • wordpress
  • wp
  • wp-content
  • wp-includes

2-3.拡張機能「Wappalyzer」を使う

Wappalyzerという拡張機能をブラウザに追加すると、ページを開いたときにURL欄の右端にアイコンが表示されます。
それ以降は特に設定を変更する必要はなく、WordPressのロゴが表示されれば、WordPressで作られたサイトということになります。
アイコンをクリックしてみると、どのバージョンが使われているかも調べることができます。

3.WordPressで制作された参考になるwebサイト16選

3-1.メーカー

3-1-1.ヤマサ醤油株式会社

ヤマサ醤油は1645年(正保2年)創業の醤油をはじめ、ぽん酢、白だしなど調味料を中心にした食品メーカーで、サイトはロゴマークにも使用している赤色が印象的です。
囲み枠をうまく使ったデザインで、豊富なコンテンツもスッキリと見やすくなっています。
醤油は今や「soy sauce」として世界的な調味料になっており、サイトの右上に設置した「English」のボタンをクリックすると英語のページに切り替えられます。
この機能には、最先端の翻訳機能が備わっている「Sitepress Multilingual Cms」というプラグインが使われています。

企業情報
  • 住所:千葉県銚子市新生町2-10-1
  • 設立年:1645年
  • 事業内容:醤油、各種調味料、医薬品類の製造・販売など
  • 公式HP:http://www.yamasa.com/

3-1-2.ナブコ自動ドア

ナブコ自動ドアは、日本で初めて自動ドアを世に送り出した企業で、自動ドア国内シェアNo.1を誇っています。
トップページは、スクロールなしですべてのメニューやコンテンツがどこにあるかひと目で分かるデザインです。
自動ドアだけでなくさまざまな製品を扱っており、トップページの下には「種類からさがす」「シーンからさがす」「キーワードからさがす」というメニューが設けられています。
この検索機能には、検索範囲を細かく設定できる「Search Everything」というプラグインが使われており、マウスの操作だけで迷うことなく求める商品の情報までたどり着けるようになっています。

企業情報
  • 住所:東京都千代田区平河町2丁目7番9号 JA共済ビル
  • 設立年:2003年9月29日
  • 事業内容:自動ドア、自動回転ドア、ステンレス建具などの販売、設置など
  • 公式HP:https://nabco.nabtesco.com/

3-2.商社

3-2-1.新光商事株式会社

新光商事は、半導体・電子部品・表示デバイスなどを取り扱うエレクトロニクス専門商社です。
デザインはオリジナルのテーマを作成したもので、トップページでは製品をアイコンと色分けで分かりやすく紹介しています。
また豊富な情報を掲載しているサイトですが、「WP-PageNavi」というプラグインを利用することで、右上に表示されているサイトマップで、ユーザーは今どのメニューやコンテンツを読んでいるのか分かるとともに、サイト内を回遊しやすくしています。

企業情報
  • 住所:東京都品川区大崎1-2-2 アートヴィレッジ大崎セントラルタワー13F
  • 設立年:1953年11月
  • 事業内容:集積回路・半導体素子等の電子部品等の販売など
  • 公式HP:https://www.shinko-sj.co.jp/

3-2-2.OHSサプライ合同会社

OHSサプライ合同会社は2011年創業と会社の歴史は浅いですが、世界中で定番のゲームやおもちゃ、アウトドアグッズやスポーツ用品など、海外で高評価を得ている商品ばかりを取り扱っています。
それぞれのコンテンツが大きく表示されたデザインで、目当ての商品を見つけやすい作りになっています。
トップページにある「お知らせ」の下や「会社案内」「お問い合わせ」のページにも、Facebookの「いいね!」やTwitterの「ツイート」といったボタンがありますが、これはソーシャルボタンを介して、多くの人に拡散してもらいアクセスを集めるという狙いがあり、「WP Social Bookmarking Light」というプラグインで追加された機能です。

企業情報
  • 住所:神奈川県横浜市神奈川区沢渡45-1 ルピナス横浜2F
  • 設立年:2011年4月
  • 事業内容:生活商品の輸入、卸業
  • 公式HP:http://ohssupply.jp/

3-3.小売

3-3-1.TAKE OFF

出典TAKE OFF

TAKE OFF ONLINE SHOPは、長崎県に4店舗を構えるセレクトショップのECサイトです。
スライドショーで流れる商品や、それらを着用しているモデルの写真が目を引き、全体的におしゃれなデザインで購買意欲のわくサイトになっています。
ECサイトでは、新商品があればその都度商品の追加を行いますが、WordPressの投稿機能にはビジュアルエディタという機能が用意されているので簡単に行えます。
ビジュアルエディタは非常に便利な機能ではありますが、初期設定のままでは不要なボタンが配置されていたり、表を作成するボタンがないなどの弱みがあるため、このサイトでは「TinyMCE Advanced」というプラグインを導入し、必要なボタンを設置するなどして、ビジュアルエディタの機能をさらに高め、商品の追加しやすい工夫がなされています。

企業情報
  • 住所:長崎県大村市東本町104-4
  • 設立年:1982年
  • 事業内容:衣類販売、卸
  • 公式HP:http://ohssupply.jp/

3-3-2.3COINS

出典3COINS

3COINSは、300円を中心とした雑貨からちょっとした家具まで幅広く取り揃えたショップです。
あなたの"ちょっとした幸せ"をお手伝いする雑貨店」というコンセプトに基づき、サイト上に並んでいる商品を、たった300円で購入し日常生活に商品を取り入れるイメージができるので、小さな幸せを感じながら閲覧できるサイトになっています。
トップページに、「RECOMMEND」「NEWS」「NEW ITEM」「BLOG」といった更新頻度の高いコンテンツをまとめているため、サイトを見たユーザーがすぐに新しい情報を入手でき、ユーザービリティの高さを感じます。
また「RECOMMEND」「NEW ITEM」「BLOG」のところで商品の写真にカーソルを合わせてみると、マウスオーバーの機能で商品の写真がズームされるのもユニークで真似したいポイントです。

企業情報
  • 住所:大阪府大阪市中央区北浜3-5-29 日本生命淀屋橋ビル4F
  • 設立年:2016年4月
  • 事業内容:雑貨等の企画・製造及び卸・小売
  • 公式HP:http://www.3coins.jp/

3-4.不動産・建築

3-4-1.相鉄不動産株式会社

相鉄不動産は、相鉄グループの不動産分譲会社で、横浜・神奈川・東京エリアの新築マンション・新築一戸建て開発事業や賃貸マンション事業、リゾート事業などを行っています。
サイトの左側に縦並びでメニューが配置されていて、上部がスッキリしたオリジナルテーマのデザインを使ったサイトです。
トップページに数多くのコンテンツがありますが、大小のカード型をうまく組わせて整然と配置していることに加え、各コンテンツにマウスカーソルを合わせると、それぞれの内容を見られるので迷わずサイトを回遊できます。
また「Wordfence Security」というプラグインを追加し、セキュリティ対策も万全のサイトです。

企業情報
  • 住所:神奈川県横浜市西区北幸2-9-14
  • 設立年:2009年4月10日
  • 事業内容:マンション・一戸建て開発、賃貸マンション、リゾート事業など
  • 公式HP:http://www.sotetsufudosan.co.jp/

3-4-2.浅井良工務店

和歌山県和歌山市にある浅井良工務店は、約40年にわたり和歌山の気候・風土に合った家づくりに取り組んでいる企業です。
トップページはいろいろなタイプの住宅のリビングやキッチンのスライドショーになっており、家族が楽しそうに話をしている様子から、浅井良工務店が考えているコンセプトが伝わる構成になっています。
トップページにある「Service」のコンテンツの「パッシブデザイン」や「耐震性」にカーソルを合わせると色が変わ機能は「Easy FancyBox」というプラグインを利用したものです。
色が変わったり、ポップアップ表示をさせることで、ユーザーがクリックできるという認識を持つだけでなく、サイトの見映えを良くすることもできる使い勝手のいいプラグインです。

企業情報
  • 住所:和歌山県和歌山市築港3-29-4
  • 設立年:1973年4月
  • 事業内容:建築事業、リフォーム事業
  • 公式HP:http://www.asairyo.com/

3-5.人材・教育

3-5-1.株式会社コアポテンシャル

コア・ポテンシャルは、セールスプロモーション人材派遣、コールセンター人材派遣、エンジニア派遣などを手がける人材派遣・人材紹介会社です。
各コンテンツが大きな写真と文字を使って構成されており、企業の担当者も求職者が見ても、すぐに自分の探しているコンテンツを見つけられるデザインになっています。
メニューにある「就業中の方」をクリックすると、「WP-Members」というプラグインを利用した会員専用ページに飛びます。
このプラグインは、簡単に会員制サイトを構築できるため多くのサイトで使われています。

企業情報
  • 住所:東京都新宿区西新宿3-2-11 新宿三井ビルディング二号館 7F
  • 設立年:2006年1月27日
  • 事業内容:人材派遣事業、セールスプロモーションスタッフ派遣など
  • 公式HP:https://core-potential.co.jp/

3-5-2.キッズイノベーション

キッズイノベーションは、日本で最初に子ども向けのキャリア教育スクール運営を始めた会社で、女性が自分らしく生きるためのカウンセリング・コンサルティングも行っています。
最も印象的なのは、子どもたちが笑顔や真剣な表情の写真ですが、サイトのところどころ吹き出しやイラストを使い、子どもたちの気持ちを代弁しているのも、遊び心があって真似したいポイントです。
このサイトには「All in One SEO Pack」という、Googleなどの検索エンジンのSEO対策の設定を管理できるほか、XMLサイトマップ、Google Analytics、ソーシャルメディアの設定も可能なプラグインが追加されています。

企業情報
  • 住所:東京都世田谷区代田 3-42-7
  • 設立年:非公開(HP)
  • 事業内容:子供向けキャリア教育スクール運営、女性向けカウンセリングなど
  • 公式HP:http://kidsinnovation.net/

3-6.IT・通信

3-6-1.株式会社カカクコム

「価格.com」や「食べログ」など、生活者の購買行動に最も近いインターネットサービスを提供している
カカクコム
のコーポレートサイトです。
プラスリリース、IRメニュー、グループニュースといった更新頻度の高いコンテンツがトップページに設置されているので、すぐに最新情報を見れるサイト設計になっています。
膨大な情報量を掲載しているサイトですが、サイトマップやメニューバーをわかりやすく構築しているので、ユーザーは迷うことなくサイト内を回遊できます。

企業情報
  • 住所:東京都渋谷区恵比寿南3-5-7 デジタルゲートビル
  • 設立年:1997年12月
  • 事業内容:「価格.com」「食べログ」等のWebメディア運営
  • 公式HP:http://corporate.kakaku.com/

3-6-2.株式会社LIG

LIGは東京都台東区上野にあるweb制作会社で、一見ブログのようなデザインのサイトですが、「会社案内」や「採用情報」のコンテンツもあるれっきとしたコーポレートサイトです。
ほぼ毎日新しい記事が更新されていて、いわゆる「バズ記事」などもアップされており、多くのユーザーがアクセスするサイトになっていますが、ある程度のページビューに達するとやはり増えてくるのは、スパムコメントやスパムメッセージではないでしょうか。
そんな迷惑なコメントやメッセージを自動的に判定して振り分けしてくれるのが「Akismet」というプラグインです。
多くのユーザーが集まるwebサイトほど、スパム行為があることは珍しくないため、このようなプラグインはwebサイトを運用する人にとって手助けになります。

企業情報
  • 住所:東京都台東区東上野2-18-7 共同ビル 10F
  • 設立年:2007年6月
  • 事業内容:webサイト制作、自社メディア運営、コンテンツ企画制作事業など
  • 公式HP:https://liginc.co.jp/

3-7.広告・出版・マスコミ

3-7-1.白泉社

出典白泉社

白泉社はまんが雑誌を中心にした出版社です。
トップページに「新着ニュース」や「イベント・特典情報」などの最新情報が並び、雑誌やコミックの表紙を見ながら選択できる書店で選んでいるような感覚になるデザインになっています。
また、「問い合わせフォーム」は今やwebサイトに必須と言える機能ですが、サンクスページや自動返信メールなど充実した仕組みとするには専門知識が必要になってきます。
このサイトでは「Contact Form 7」というWordPressでは定番のプラグインを追加し、各種問い合わせに対してスムーズな対応を実現しています。

企業情報
  • 住所:東京都千代田区神田淡路町2-2
  • 設立年:1973年12月1日
  • 事業内容:雑誌・書籍・コミックス・文庫・絵本の企画、制作、販売
  • 公式HP:http://www.hakusensha.co.jp/

3-7-2.株式会社エポックコミュニケーションズ

エポックコミュニケーションズは、秋田県を拠点にイベントプロデュースや市場調査、販売促進など幅広いサービスを提供している広告会社で、地元秋田市の高尾山から見た、雲海の上に浮かぶ朝日の神秘的な写真が印象に残るサイトです。
スクロールしてみると、「OUR PROJECT」というコンテンツがあり、制作事例やイベント情報を見られるようになっています。
メニューにある「私たちにできること」を選択しても同じ内容を見ることができ、特に実績を見てほしいという企業の思いが伝わってきます。
このサイトの問い合わせフォームも「Contact Form 7」のプラグインが使っています。

企業情報
  • 住所:秋田県秋田市川尻大川町4-7
  • 設立年:1983年3月
  • 事業内容:販売促進計画、ブランド構築・CI計画・商品開発など
  • 公式HP:http://www.epochcom.co.jp/

3-8.施設・病院

3-8-1.さいたまスーパーアリーナ

音楽やスポーツなどのイベントが日々行われているさいたまスーパーアリーナの公式サイトです。
イベント情報やチケット販売に関する情報が、白い背景に写真やイラストを使ってまとめられカラフルなデザインになっています。
イベントなどの情報だけでなく、レストランやショップの情報やイベントスペースの「TOIRO」、そしてイベント主催者向けなどさまざまなコンテンツを盛り込んだサイトになっていますが、それらを「WP-PageNavi」というプラグインを利用し、使いやすいサイトマップを構築することで、複数のページ間の移動をスムーズに行えるようにしています。

企業情報
  • 住所:埼玉県さいたま市中央区新都心8
  • 設立年:1997年3月27日
  • 事業内容:スポーツなどのイベントの企画・実施、テナント管理など
  • 公式HP:https://www.saitama-arena.co.jp/

3-8-2.京都市立病院

トップページのスライドショーの写真には、大きな文字で交通アクセスや最新の資料情報などの分かりやすい説明があり、高齢者などに配慮したものになっています。
メニューは「患者さんへ」「医療関係者のみなさんへ」「地域のみなさんへ」と対象者が分かる形で構成されているため、必要な情報にすぐにアクセスすることができます。
また、サイトの一番下には市内の医療機関や老人ホームへのリンクがありますが、これには「Image Widget」というプラグインが使われています。
画像を表示するだけのシンプルな機能のプラグインですが、表示する画像にリンクや説明文を設定できるので、サイドバーやフッターに他のwebサイトの紹介をしたい場合にはオススメです。

企業情報
  • 住所:京都市中京区壬生東高田町1-2
  • 設立年:1965年12月1日
  • 事業内容:内科、外科、循環器内科等の一般医療事業
  • 公式HP:http://www.kch-org.jp/

【まとめ】便利だからこそ効果的な使い方を考えよう!

いかがでしたか?WordPressはデザインテンプレートである「テーマ」と機能を追加する「プラグイン」が豊富に揃っているため、この記事で紹介したように企業の業種や業態、規模に関わらずどのようなサイト作成に対応しています。
ただし、利用するのは簡単ですが、テーマにしてもプラグインにしても種類が豊富な分、選択に迷うことが多いでしょうし、デザインや機能を十分に活用したサイトを作るとなるとやはりそれなりの知識や経験が必要になります。
WordPressのもう1つの特徴であるCMSとしてのコンテンツの入力・追加・更新のしやすさという部分をうまく活用したいのであれば、基本的なサイトの構築は外部の制作会社に依頼し、運用を自分たちで行うという方法も考えられます。
そのような場合には、ぜひ「アイミツ」までお問い合わせいただければと思います。
「アイミツ」では、WordPressのことはもちろん、webサイト制作の専門知識を持った、経験豊富なコンシェルジュがお客様のご要望をお伺いした上で、最適な制作会社を紹介いたしますのでお気軽にお問い合わせください。

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
5万社以上が利用している無料の相談サービスです。

コンシェルジュ