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

Browse By

[Sketch Plugin] Egmont plugin – SketchでiOS角丸を描けるようになるプラグイン

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

iOS 7から変わったアイコンの角丸のカーブを、Sketch内でも描画できるようになるプラグイン。サイト内では「Squircle shapes」と言われていますが、どうやらこれ「Square Circle」の事みたいです。ただ角がラウンドした四角形ではなく、カーブの始まりは緩やかで徐々にキツくなっていくという、独特のシェイプの事を指しているようです。実際このカーブって簡単に描けないので、数値指定するだけで描画できるようになるこのプラグインは、iOS AppのUI制作には便利に使えそうです。ちなみに通常の角丸とSquircle角丸の違いはこのGif見ると分かりやすいかも。

[Web Design] BigPicture – 軽快に動作するModal画像ビューアー

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

サクサク動くLightbox亜種。他のJSライブラリなどは必要とせず、これ単独で動くようです。クリック or タップで画像だけがフレームレスで開いて、再度クリックで収納。とってもシンプル。スマホページではわりと敬遠されるModal表示も、こういうシンプルなものなら使いやすそうです。ロードに時間かかる場合はローディングスピナーが出て、リンク切れしてる場合にはダイアログ出してくれるあたりが新設。また画像以外にビデオもイケます。構成がシンプルなだけに導入も簡単そうです。

[CSS] 18 CSS Tabs – CSSで作るタブ作例まとめ

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

HTMLとCSS、あと作例によっては簡単なJSも使って作られた、タブデザインの作例まとめ。クリックすると隠しdivがアクティブになって、ページ遷移なしでコンテンツを切り替えるアレです。このまとめ記事では各作例をアニメGif使って紹介しているので、それぞれの挙動も含めて一覧で見ることができるので便利です。「DEMO AND CODE」をクリックするとCodePenで見る事ができるので、タブデザインのコードスニペットまとめみたいな風にも使えそうです。紹介されている作例もかっこイイの多いです。

[Logo Design] Logobook – ロゴやシンボル、トレードマークのデザインギャラリー

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

既存の企業ロゴや、シンボル、トレードマークの類を集めたデザインギャラリー。各ロゴは、文字ロゴ、シェイプによる属性分け、オブジェクト、自然物、ビジネスといったカテゴリで分けて紹介されており、それぞれの詳細画面に入ると、そのロゴが何のロゴであるのか、業種、デザイナー、作られた年といった情報を見る事ができます。掲載点数はかなり多く、また60年代〜80年代にかけて制作された比較的古いロゴが多いです。伝統的なロゴデザインのデータベースとしても有用なサイトといった印象。古めのロゴ大好きな人や、伝統的な手法を愛すデザイナーにオススメです。

[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を使って円形にするってのは新しいなーと思いました。