クールなデザインのボタンやテキストボックスというのは見ているだけでもテンションが上がってくる。
今回は良いデザインをCodePenで探す方法を備忘録として残すことにする。
CodePenとは
CodePenでできることは、
- 自分で作ったHTML/CSS/JSのコードを作成・公開することができる。
- コードをその場で動かすことができる。
- 人が作ったコードを見ることができる。
というサービスだ。
もちろん人が書いたものも見て、動かすことができる。
CodePenでかっこいいデザインを探してみる
まずは、トップページへいって Collections をクリック。
そうすると、誰かがストックしてある量デザイン集が一覧ででてくる。
今回はこのマウスオーバーとクリックエフェクト集を見ていくことにしよう。
かっこいいデザインがズラッとでてきた。適当なものをクリック。
クリックするとコードと、そのコードを実行した結果がでてくる。
もちろん動作（クリックしたときのエフェクトとか）も下部分の実行結果で動いているものが表示される。
先程選択したデザインはこちら。
RunPenをクリックすると動かすことができる。
検索して探してみる
先程の探し方は、誰かがストックしたコレクションから辿って行くというやり方だったが、それに対してこちらの検索方法は、自分でキーワードを指定して検索するいう方法だ。
まずは、画面右上の虫眼鏡アイコンをクリック。
検索したい文字を入力。
ボタン系のCSSを探したいときは「Button」と。チェックボックス系のCSSを探している時は「check box」という具合に検索していく。
日本語での検索もOKだが、英語表記で検索した方がヒット数が多い。
Buttonという文字で検索したので、ボタン系のデザインが続々ヒット。どれもよいデザインだ。
ボタン系のデザインのサンプルだ。とても良いデザインで気に入っている。
さいごに
クールなデザインというのを自分で一から作るのは大変だ。そんな時はCodePenを使えば参考となるものが必ず見つかる。
簡単なUIのモックを作る時にもお世話になっているサイトだ。世の中には素晴らしいものを作る人がいて、自身の業務の助けにもなっている。素晴らしいデザインを作って公開している人に感謝。
それでは今日はこのへんで。