• GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie
  • GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie

カメきちカメきち  - ,  06:00 PM

イケてるUIのデザインパターンを集めたサイト「Design Patterns on CodePen」

イケてるUIのデザインパターンを集めたサイト「Design Patterns on CodePen」

141001_co.jpg


Design Patterns on CodePen」はイケてるUIのデザインパターンを集めたサイトです。CodePenというHTML、CSS、JavaScriptのコードを共有することができるサイトがあります。その中から、特に優れたUIを集めたのがこのサイトになります。その場で実行され、動作の確認もできますし便利ですね。

以下に使ってみた様子を載せておきます。


まずDesign Patterns on CodePenへアクセスしましょう。「ボタン」「メールフォーム」「ページング」「タブ」などのUIパーツごとにカテゴライズされています。


141001_co2.jpg


詳細はこのように表示されます。コードが上部にあり、下部にそれを実行した結果が表示されます。コードを書き換えるとリアルタイムで結果も変わるので便利ですね。気に入ったUIを見つけたら、その作り方を参考にしてみましょう。ぜひUIを考える際にもご活用ください。


Design Patterns on CodePen

(カメきち)

MORE FROM LIFEHACKER

powered by

Kotaku

© mediagene Inc.