Webサイト作成時の参考に!WordPressで作られた魅力的なサイト50選



Webサイト作成時の参考に!WordPressで作られた魅力的なサイト50選

個人ブログから自社サイトまで、幅広くサイト作成に使われているWordPress。現在運営している方や、これから運営してみたいと考えている方は、どんなサイトにしたいかをイメージしたことはありますか?

すでに運用されているサイトの中には、WordPressを使って作り込まれたサイトがたくさんあり、サイトを作成する上で良い勉強になります。そこで、WordPressで作られたサイトを50個まとめてみました。

デザインや機能性に優れたWordPressは、作り方次第で、個性的で魅力のあるサイトに仕上がります。ぜひ参考にして、ご自身のサイト運用に活かしてみてください。 image

目次
  1. ニュースサイト・ウェブメディア・企業オウンドメディアなど
  2. WIRED.JP
  3. フットボールチャンネル
  4. AdverTimes
  5. ガジェット通信
  6. Greenz.jp
  7. roomie
  8. 日刊SPA!
  9. TechCrunch Japan
  10. ロケットニュース24
  11. 東スポWeb
  12. ダ・ヴィンチニュース
  13. nippon.com
  14. マイナビウーマン
  15. Find Job ! Startup
  16. 美的.com
  17. Menjoy!
  18. ねむりラボ
  19. 朝時間.jp
  20. @DIME
  21. ファミ通App
  22. さんち 〜工芸と探訪〜
  23. milieu
  24. 箱庭
  25. 企業・組織サイト
  26. 株式会社LIG
  27. freee株式会社
  28. 3COINS
  29. チームラボ株式会社
  30. 株式会社エニグモ
  31. 株式会社スタートトゥデイ
  32. 株式会社 主婦の友社
  33. 株式会社白泉社
  34. ケアプロ株式会社
  35. 株式会社3rd
  36. 日本農業経営大学校
  37. 昭和女子大学
  38. 神戸芸術工科大学
  39. 東京藝術大学
  40. 著名人などの公式サイト
  41. ぼくのりりっくのぼうよみ
  42. ホリエモンドットコム
  43. 米津玄師 official site「REISSUE RECORDS」
  44. 東京都議会議員 おときた駿 公式サイト
  45. 木村直人 公式メディア
  46. オチビサン 公式サイト
  47. FC東京
  48. 公共施設など
  49. さいたまスーパーアリーナ
  50. 佐賀大学美術館
  51. 名古屋国際センター
  52. 東京国立近代美術館
  53. その他
  54. ガクセン
  55. 焼肉 牛兵衛
  56. まとめ

ニュースサイト・ウェブメディア・企業オウンドメディアなど

WIRED.JP

image

画像出典:WIRED.JP

テクノロジーに関連した、生活やカルチャーなどに関する記事を発信しているウェブメディア。余計な情報が入っておらず、配信された記事タイトルに目が留まりやすい、シンプルでおしゃれなデザインです。

フットボールチャンネル

image

画像出典:フットボールチャンネル

株式会社カンゼンが運営する、サッカー専門のニュースサイト。

AdverTimes

image

画像出典:AdverTimes

マーケティングや広報・広告などのニュースを扱うメディアです。こちらもシンプルで、どこか外国の新聞紙を思わせるようなデザイン。読みたい情報を探すときの動線がわかりやすいのも特徴です。

ガジェット通信

image

画像出典:ガジェット通信

デジタルガジェットを中心とした情報を発信しているメディア。最新記事の更新情報を中心に置いた、3カラムのデザインになっています。

Greenz.jp

image

画像出典:Greenz.jp

NPO法人グリーンズが運営するウェブマガジン。サイトを開いたときに目につく情報は最小限で、配信された記事のみに注目が集まるようなデザインになっています。読者の好みで選べるように、表示方法が2パターン設定されているのも特徴的です。

roomie

image

画像出典:roomie

30代男性向けの、インテリアに関するウェブマガジン。

日刊SPA!

image

画像出典:日刊SPA!

週間SPA!が運営しているニュースサイト。サイト上部に注目トピックスやランキングの情報などを置いているところが、ちょっと珍しい構成になっています。

TechCrunch Japan

image

画像出典:TechCrunch Japan

最新テクノロジーやスタートアップなどに関する情報を発信しているウェブメディア。2カラムの構成ですが、右サイドの情報は少なめで見やすくなっています。

ロケットニュース24

image

画像出典:ロケットニュース24

ITやグルメ、芸能など、さまざまな記事を扱っているニュースサイト。ほかのサイトと比べて、更新記事のアイキャッチ画像が大きめで目を引きます。思わずシェアしたくなるネタ記事も多いサイトだからこその構成、とも言えそうです。

東スポWeb

image

画像出典:東スポWeb

東京スポーツ新聞者が運営するニュースサイト。

ダ・ヴィンチニュース

image

画像出典:ダ・ヴィンチニュース

月刊誌「ダ・ヴィンチ」のウェブ版。こちらもシンプルな3カラム構成で、読みたい記事が探しやすいサイトになっています。

nippon.com

image

画像出典:nippon.com

一般財団法人ニッポンドットコムが運営する、日本の政治や文化、経済などについて発信しているメディア。

マイナビウーマン

image

画像出典:マイナビウーマン

株式会社マイナビが運営する、働く女性向けのウェブメディア。過剰な装飾は避けつつも、ところどころに女性が好みそうなイラストを配置し、かわいらしさがさりげなく織り込まれています。

Find Job ! Startup

image

画像出典:Find Job ! Startup

転職サイト「Find Job!」の運営する、スタートアップ向けのウェブメディア。2カラムで更新記事を順に配置し、シンプルかつ見やすい、個人ブログなどにも多いパターンです。

美的.com

image

画像出典:美的.com

美容雑誌「美的」のウェブ版。

Menjoy!

image

画像出典:Menjoy!

株式会社小学館が運営する、女性向けのウェブメディア。最新記事が横に3つ並んでいるところが、ほかのサイトにはあまりない構成になっています。それでも情報量が多すぎるように感じないのは、サイトデザインの工夫によるものかもしれません。

ねむりラボ

image

画像出典:ねむりラボ

眠りに関するウェブメディアで、オムロン ヘルスケア株式会社が運営しています。

朝時間.jp

image

画像出典:朝時間.jp

朝のライフスタイルをテーマにしたウェブメディア。

@DIME

image

画像出典:@DIME

月刊誌「DIME」のウェブ版。新着記事のみ黒地に白でタイトルが入っており、目にとまりやすい仕様になっています。

ファミ通App

image

画像出典:ファミ通App

スマホゲームに関する情報を発信するウェブメディア。

さんち 〜工芸と探訪〜

image

画像出典:さんち 〜工芸と探訪〜

中川政七商店が運営する、日本の伝統興行を伝えるウェブメディア。右側に縦書きのタイトルを、左側に目次(メニュー)を配置するという、ちょっと変わったデザインです。文字が縦書きになるだけで、和の雰囲気を感じさせます。

milieu

image

画像出典:milieu

執筆業などを行う、塩谷舞さんが編集長を務めるウェブメディア。

箱庭

image

画像出典:箱庭

女子クリエイター向けのウェブマガジン。こちらもウェブメディアに多い3カラム構成。背景やバナーなどがシンプルで、おしゃれな写真が映えるような工夫がされています。

企業・組織サイト

株式会社LIG

image

画像出典:株式会社LIG

株式会社LIGのコーポレートサイト。ウェブ制作会社らしく、スムーズな動きや整理されたコンテンツ配置で、見やすく工夫されたサイトになっています。

freee株式会社

image

画像出典:freee株式会社

クラウド会計ソフト「freee」を運営している、freee株式会社のコーポレートサイト。会社の情報が、簡潔に分かりやすくまとめられた、とても見やすいサイトです。

3COINS

image

画像出典:3COINS

300円均一ショップ、3COINSのブランドサイト。

チームラボ株式会社

image

画像出典:チームラボ株式会社

テクノロジーを使った、アーティスティックな製品やイベントなどを手がける、チームラボ株式会社のコーポレートサイト。ポートフォリオサイトのように作品の写真が並ぶ、チームラボの特色が前面に出たサイトになっています。

株式会社エニグモ

image

画像出典:株式会社エニグモ

海外ファッション通販サイト「BUYMA」を運営する、株式会社エニグモのコーポレートサイト。

株式会社スタートトゥデイ

image

画像出典:株式会社スタートトゥデイ

ファッション通販サイト「ZOZOTOWN」や、ファッションアプリ「 WEAR」を運営している、株式会社スタートトゥデイのコーポレートサイト。トップ画面は、情報を必要最小限にまで抑えながらも、メイン事業や会社の最新情報は分かりやすくアピールできるようになっています。

株式会社 主婦の友社

image

画像出典:株式会社 主婦の友社

女性誌の「Ray」や「mina」などを出版している、株式会社 主婦の友社のコーポレートサイト。

株式会社白泉社

image

画像出典:株式会社白泉社

漫画誌「花とゆめ」などを出版している、株式会社白泉社のコーポレートサイト。雑誌や本の表紙をアイキャッチ画像に使用し、まるで電子書籍を販売するサイトのようなデザインです。

ケアプロ株式会社

image

画像出典:ケアプロ株式会社

訪問看護事業や予防医学事業を展開する、ケアプロ株式会社のコーポレートサイト。白をベースにしたサイトデザインで、ヘルスケアサービス事業を行う会社らしい清潔感が感じられます。

株式会社3rd

image

画像出典:株式会社3rd

オーダー家具の販売を行っている、株式会社3rdのコーポレートサイト。

日本農業経営大学校

image

画像出典:日本農業経営大学校

農業従事者になる人の教育を行う、日本農業経営大学校の公式サイト。大きな写真とキャッチコピーがすぐに目につく、印象的なデザインになっています。

昭和女子大学

image

画像出典:昭和女子大学

東京都世田谷区にある、昭和女子大学の公式サイト。

神戸芸術工科大学

image

画像出典:神戸芸術工科大学

兵庫県神戸市にある、神戸芸術工科大学の公式サイト。シンプルながらも、コンテンツの配置の仕方、バナーや背景のデザインなど、芸術関係を学べる大学らしい個性的なサイトです。

東京藝術大学

image

画像出典:東京藝術大学

上野や横浜にキャンパスを置く、東京藝術大学の公式サイト。

著名人などの公式サイト

ぼくのりりっくのぼうよみ

image

画像出典:ぼくのりりっくのぼうよみ

歌手である、ぼくのりりっくのぼうよみの公式サイト。アーティストとしてのイメージを損なわない、スタイリッシュなサイトデザインで、装飾もほとんどありません。

ホリエモンドットコム

image

画像出典:ホリエモンドットコム

本の執筆やロケット事業など、さまざまな活動をしている、堀江貴文さんの公式サイト。個人のサイトではありますが、堀江さんがピックアップした記事や、メールマガジンを抜粋した記事、対談記事などをメインとしており、キュレーションサイトのような作りになっています。

米津玄師 official site「REISSUE RECORDS」

image

画像出典:米津玄師 official site「REISSUE RECORDS」

歌手の米津玄師さんの公式サイト。米津さんが描いたイラストを使用したり、サイトの動きにも随所に工夫がされていたりと、こだわりが感じられるサイトです。

東京都議会議員 おときた駿 公式サイト

image

画像出典:東京都議会議員 おときた駿 公式サイト

政治家、音喜多駿さんの公式サイト。

木村直人 公式メディア

image

画像出典:木村直人 公式メディア

美容師である木村直人さんの公式メディア。

オチビサン 公式サイト

image

画像出典:オチビサン 公式サイト

漫画家、安野モヨコさんの作品「オチビサン」の公式サイト。漫画の世界観や安野さんが描く絵のテイストが再現されていて、カラー刷りされた新聞のようなデザインになっています。

FC東京

image

画像出典:FC東京

JリーグFC東京の公式サイト。選手や試合に関する情報、ニュースなど、豊富にある情報が非常に分かりやすく整理されています。

公共施設など

さいたまスーパーアリーナ

image

画像出典:さいたまスーパーアリーナ

スポーツの試合やライブ・イベントなどが行われる、さいたまスーパーアリーナの公式サイト。

佐賀大学美術館

image

画像出典:佐賀大学美術館

佐賀大学が運営する美術館の公式サイト。作りやデザインは非常にシンプルですが、使われているフォントや色などが統一された、きれいで落ち着いたサイトになっています。

名古屋国際センター

image

画像出典:名古屋国際センター

貸し会議室や、外国人向けの相談窓口などがある名古屋国際センターの公式サイト。

東京国立近代美術館

image

画像出典:東京国立近代美術館

皇居近くの北の丸公園内にある、東京国立近代美術館の公式サイト。関連施設の外装や内装の写真を大きく見せたり、ちょっと変わったカレンダーのデザインを使用したりと、おしゃれで分かりやすい作りになっています。

その他

ガクセン

image

画像出典:ガクセン 

ニューインデックス株式会社が運営する、登録された学生を検索して採用を行うための新卒逆求人サイト。WordPressで作るサイトというと、メディアやコーポレートサイトなどの情報を掲載するものを思い浮かべるかもしれませんが、工夫次第で、このようなウェブサービスを作ることも可能です。

焼肉 牛兵衛

image

画像出典:焼肉 牛兵衛 

名古屋市内にある焼肉店の公式ページ。

まとめ

アイディアや工夫次第で、さまざまな形のサイトが作れるWordPress。こういったサイトを参考にしながら、サイト作りのイメージをしてみてはいかがでしょうか。

image

関連記事

小松
この記事を書いた人
小松
\無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp