Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

All posts by Quattro

[Web Design] 19 Mind-Blowing CodePen Experiments – CodePenのぶっ飛んだ作例まとめ

  • Pocket
  • このエントリーをはてなブックマークに追加

CodePenに上がっているぶっ飛んだ作例をまとめた記事。全部で19の作例が紹介されてるけど、どれもスゴいです。よくこんなの作るなーと感心するものばかり。各作例はEmbededされた形で掲載されているので、動くものをこの1ページで全部見る事ができます。BB-8超かわいい。

[Web App] Taskade – オンラインで共有できるToDoリスト

  • Pocket
  • このエントリーをはてなブックマークに追加

タスクをToDoリスト化し、それを固有のURLを使って他者と共有できるWebサービス。タイトルを付けて本文エリアに入力すると、チェックボックス付きのリスト化されるので、あとはそれをToDoリストとして使えばオッケー。他者への共有リンクは、見るだけのものと編集まで行えるものの2種類生成されるので、都合の良い方を人に伝えればイイみたい。テーマ変更やキーボードショートカット、Chrome Extensionなども用意されていて地味に多機能です。チームで仕事する時とか、毎日の買い物メモなんかに使えそうです。

[Misc] Minimal Directory – ミニマルデザインの製品ギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

ミニマルなデザインのハードウェアを集めたギャラリーサイト。用途やメーカーに関係なく横断的に様々な製品が紹介されています。クリックする事で製品を大きく表示でき、写真クリックでオフィシャルサイトでより詳細な情報を見ることができます。良く言えばデザイナーが好みそうな感じ、悪く言えば意識高い系の人も好みそうな感じのもの、といった印象。ちなみにわたくし最近BRAUNの壁掛け時計買いました。意識はとっても低い系なんですけどね。

[CSS] Creating Non-Rectangular Headers – 長方形じゃないヘッダーの作り方色々

  • Pocket
  • このエントリーをはてなブックマークに追加

最近流行りの、長方形じゃないエッジを持つヘッダーの作り方が複数紹介されてます。斜めヘッダーだけでなく、ギザギザや円形なども用意されてます。imageを使う手法、SVGを使うもの、clip-pathを使うもの、border-radiusを使うもの、transform: skewを使うものが紹介されており、最後にそれぞれのメリットデメリットをまとめてある点がとってもナイス。border-radiusを使って円形にするってのは新しいなーと思いました。

[Web Design] WebGradients – CSSで行うグラデーション指定のギャラリー

  • Pocket
  • このエントリーをはてなブックマークに追加

かっちょいいグラデーション指定をサクっとコピペできるサイト。各パレットの右下にある「Copy CSS」をクリックすると、グラデーション描画のためのbackground-image指定をコピーできます。後は貼り付けるだけ。簡単! また各パレットで使われている2色のHEX指定と、PNGのダウンロード機能もあります。用意されているカラーパレットも、いかにも最近な感じでオシャレな作例が多いです。2色考えるのめんどくせぇよ、とかいう乱暴なあなたに是非。

[Web Design] Website Template Bar – 様々なWebテンプレートをまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

Webテンプレートを各種まとめたサイト。プレーンなHTML5ベースのものに加え、Bootstrapベースのテーマ、Wordpressのテーマ、eコマースに使えるものがそれぞれカテゴリ分けされて紹介されています。最近じゃフレームワークにBootstrap使って、その上にテーマ置いて、そこからデザインカスタム始める事もよくありますしね。ちなみに自分はBootstrap v3によく使うJSやら機能拡張のCSSぶち込んだものをテンプレートみたいに使ってます。テーマ的なものはあまり使った事ないんだけど、このサイト見ると結構いろんなテーマがあるので、テーマぶち込んで楽するのもアリだなーと思いました。

[Web Design] WebSlides – 縦方向のWebスライダー

  • Pocket
  • このエントリーをはてなブックマークに追加

縦方向にコンテンツをつなげるWebスライダー。スクロールを100vh(ウィンドウサイズの縦幅いっぱい)ごとに固定する、と言った方が伝わるかも。キーボードの十字キーの上下を使ってコンテンツを閲覧します。ちょっと残念なのが、スクロールホイールが効かないという点。スライドの1ページに当たるコンテンツは、sectionごとに区切って記述するようです。個人的にはスクロールの挙動を制御する系の見せ方ってあんまり好きではないんだけど、最近こういう見せ方流行ってますしね。LPやプレゼン資料作る時なんかに使えるかもしれません。

[Misc] OnlineBikeLight.com – 自転車ライト代わりになるサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

夜道で使える自転車ライトになってくれるサイト。要スマホホルダーです。サイトに行くと「Front」、「Rear」、「Flashing」の3つのボタンがあり、それぞれの目的に対応してサイトそのものが発光してくれます。Frontは白く明るく、Rearは赤に、Flashingは点滅します。よくあるチャリンコライトと同じですね。ホーム画面にブックマークしておけばすぐに使えて便利そうです。ライト忘れた日なんかに是非。