自分がこのホームページの値段表を作るときに、いろいろなサイトで参考になったものだけまとめてみました。厳選基準としては、①レスポンシブ、②クール&ビューティーだけです。サイトによっては、画像まで用意されてるものや、要素を検証するしかないようなものまで混ざってますが、参考にはなると思います。画像をクリックか、タッチでリンク先に飛びます。
最後に、レスポンシブではないものの、参考にさせてもらったものも掲載しております。
Cool ResponsiveTable
見た目が黒を基本として、カラフルなデザインで構成されています。また、透明のホバーが設定されいるので、オンマウスで動きがあるようにプログラムされています。ボタンとこだけ、ホバーでチェックマークが出てくるのは可愛いですね！スマホだとカラム落ち設定となっており、LIVALESTの料金表もこれを参考にさせていただいております。コードは記載されていないので、要素の検証してコードを参考にしてください。
４タイプの内、１つだけデザインを変更することでユーザーを誘導しています。また、ボタンは明るめにデザインされており、黒っぽい背景でも生えるデザインです。特徴的なのは、スマホ時です。ボタン以下の情報が収納され、「INFO」ボタンを押すことで開示されるようコーディングされてます。これだと、縦長を防ぐことが可能です。（ユーザビリティー的には、ユーザー層を考慮する必要があるかとは思います。）
こちらは、青ベースです。ホバーで鮮やかなオレンジとなるのが印象的です。値段とボタンのみ、鮮やかなオレンジに変化することで、クライアントに訴えやすいデザインとなっています。LIVALESTのホームページでも取り入れています。こちらもスマホで、カラム落ちしたような設定になっています。レスポンシブテーブルとしては、この形が王道なのかなと思います。見やすいですしね。ただ、テーブル自体の縦の長さがあまりにも長すぎると、スマホではとても醜くなるかもしれないので要注意です。こちらも、コードは掲載されていないので、要素の検証で参考にしてください。
こちらは、上の２つと違い、Githubに掲載されており、コードはもちろんのこと素材まで揃っています。ダウンロードして使えるので完全再現できます。こちらのテーブルの特徴は、それぞれのテーブルの横にタイトルが付けれるようになっています。（Free,Basic,Pro,Business）。また、テーブルの列ごとに微妙に色分けされてるのが見やすですね。僕は、極力画像を使いたくなかったので、アイコンに関してはfont-awesomeを使用しています。
こちらのテーブルの特徴は、真ん中のテーブルだけ目立つような設定にされているところです。こういった料金表をテーブルで作る上では、必須の設定ではないでしょうか。（こちらからオススメをするのは普通と思うので。）スマホ対応時に、Premiumの色がなくなってしまっているのは気にかかりますが、ここは少し修正して使う方が良さそうですね。ボタンのとこが微妙にホバー設定されてるだけなので、自分で使うときは、ユーザビリティ的にも、もう少し目立たせるのがいいでしょう。
このテーブルの特徴は、何といっても値段の部分を丸くしているとこではないでしょうか。僕自身もこの値段の部分を丸くするといった手法は参考にさせてもらっています。また、列ごとの区切りを最小限のラインだけで構成しており、Coolさをデザインしています。残念なのは、配色でしょうか？この部分は、自分でグラデーションを設定したり、画像を差し込むなどで工夫のしどころでしょうか。
白ベースの４色ででデザインされており、見た目もわかりやすいデザインです。ボタンがホバーします。テーブルの先頭に値段が来ています。ここの部分は気に入らなければいくらでも変更できますが、値段を重要視していることが伝わります。フラットデザインが採用されています。
Cool Non-ResponsiveTable
ここからは、レスポンシブ対応ではないものの、Coolなデザインで参考になった３つを紹介したいと思います。これも、真ん中のテーブルだけ強調されています。何がカッコイイって、背景のグラデーションではないでしょうか？下に行くほど、色が濃いようにグラデーションされており、色使いとしては、一番クールなのではないでしょうか？また、値段部分も丸くボーダーが引かれています。列ごとの区分けがされていないのは、少し見にくいような気がします。背景色に関して、すごく参考にさせてもらったテーブルです。
こちらは、白をベースにシンプルに設計されています。メインの部分が浮き上がったようなデザインで、目立ちます。僕が気に入ったのは、値段の部分です。値段周りをより強調したデザインにされています。ボタンが、カラフルなグリーンで目立ちますね。
申し訳ないですが、表面的なデザインのみ参考にしてください。
こちらは、ホバーでグリグリと動きます。ホバーするのが楽しいですね。こちらも、鮮やかなグリーンが特徴的で、メインのテーブルは、他のテーブルと違った配色が設定されています。値段のテキスト部分は他よりも大きいですが、他のテーブルに比べると、目立ちにくくなっています。テーブルのトップが鮮やかなため、他の部分が強調しにくいという点がマイナスです。ここら辺は、バランスが難しいですね。
Summaryまとめ
レスポンシブ対応のテーブルは、カラム落ちみたいな設計になっているのが多いです。途中にも書きましたが、テーブル自体が縦に長すぎるとスマホで見にくくなるので要注意です。（そこまで気にする必要もないかもしれませんが、ユーザー目線を忘れずに。）あと、タイトルは「テーブル」となっているのですが、コードみるとただのリストが多かったり、＜div＞で構成されてたりします！！ごめんなさい。ただまあ、テーブルで書いても、リストで書いても、＜div＞で書いても、そこまで大きな違いはないです。ないはずです。あったらごめんなさい。（テーブルだと、細かなデザインがしにくいからかなと勝手な邪推をしております。）
今回紹介させていただいたのは、ほとんどコピペで実装可能です。僕自身も、料金表をCSSだけで実装したくて、いろいろ探した結果、参考にさせていただいたものだけ掲載させていただきました。ここまで多くのデザインを参考にすると、どれが良いか迷ってしまうかもしれないので、作成の上でのポイントは３つ挙げさせていただきます。１つ目は、強調部分を決めること。値段なのか、タイトルなのか、ボタンなのか。２つ目は、テーブルの色が背景と合ってるのか。（ベースは黒か白か）最後に、ホバーで、どういうアクションを起こさせるのかです。大きくはこの３つさえ頭に入れていれば、良いデザインの仕上がるのではないでしょうか。
いろんなテーブルがあって、何か１つをベースにして、いろいろいいところを真似してみるのが簡単でいいかなと思います。どんどん良いところを参考にさせていただきましょう！！あなたのWebデザインの一助のなれば。
