[Web Design] Best Practices for Accordion Interfaces in Web Design – アコーディオンメニューの作例まとめ

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

by on 2月.27, 2015, under Web Design

Webでよく使われるアコーディオンメニューの作例をまとめた記事。各作例をクリックすると、素材の配布先に行けます。ものによってPSDを配布してたりコードそのものを掲載してたり色々です。CodePenにリンクしているものもあるので、それ系だと導入がとっても楽ですね。開閉する仕組みも縦方向だったり横方向だったり、またサブメニューを用意しているものなど色々あるので、アコーディオン素材が欲しい時に便利そうです。

コメントを書く :, ,

[Freebie] StockSnap.io – オシャレな写真素材配布サイト

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

by on 2月.27, 2015, under Material

写真素材配布サイト。なんかやたらオシャレな感じの写真が多いです。検索して探す事もできますし、スクロールしてダラダラと閲覧する事もできます。雰囲気のある写真素材を探す時に使えそうです。

コメントを書く :,

[Misc] Chrome Experiments – Google Chrome向けコンテンツのギャラリーサイト

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

by on 2月.26, 2015, under Misc

Googleが運営してるChrome Experimentsという、Chrome向けコンテンツのギャラリーサイトへの投稿が1000件を超えたそうです。ユーザーコンテンツ投稿型のサイトなんですが、Chrome向けとは言っても実際にはモダンブラウザでならどれもそれなりに動いてくれます。自分の場合は普段使いがSafari、コーディングする時はFirefox Dev.なので、日常的にChromeには用事がありません。仕事柄一応Macに入れてはあるけど、Chrome重いしできれば立ち上げたくないというのが本音。なのでSafariで見てましたが、だいたい動いてくれますね。WebGL系はアカンけど。コンテンツとしてオモしろいというものはあまりないけど、技術的な参考にはなりそうです。

コメントを書く :,

[Science] Spaceprob.es – 宇宙探査機に関連したニュースの一覧サイト

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

by on 2月.25, 2015, under Technology & Science

宇宙探査機が今どこで何をしているか、また関連した最新のニュースや発見は何かを、探査機ごとに閲覧できるサイト。いやこれアツいですよ。何がアツいってまず絵がアツい。見せ方が超かっこいい。そしてこのセンスあるソート。地球からどれだけ離れて活動しているかを基準にソートしてあります。もちろん最初に来るのは太陽系を離脱済みのボイジャー1号。サイト名もspaceprob.es⇒Space Probes⇒宇宙探査機という感じでニヤっとできます(ちなみに.esはスペインのTLDらしいです)。科学好きや宇宙ネタ好きの人ならきっとハァハァできると思います。

コメントを書く :, ,

[Misc] Winka.link – 長ったらしいURLをシンプルな数字に置き換えてくれるリンクジェネレーター

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

by on 2月.24, 2015, under WebApp

長いURLをシンプルな3つの数字に置き換えてくれて、PCで見ているサイトをモバイル端末でもサクっと見れるようにしてくれるサイト。流れとしては簡単で、まずはPCからサイト内にある入力エリアにURLをぶち込みます。すると3つの数字を生成してくれます。次にスマホから同様にこのwinka.linkに行き、先ほど生成された3つの数字を入力するだけ。これだけでどれだけ長いURLだろうと3つの数字に短縮してくれます。ただしこれには条件があり、PCとスマホが同一ネットワークにいる必要があります。いわゆるLink Shortenerとは仕組みが若干違うので、あくまでも個人内で完結する用途にのみ使えます。これがどれだけ利便性があるのかは微妙ですが、なんか試みとしては興味深いなぁと思ったのであります。

コメントを書く :,

[Freebie] TheStocks.im – スタートアップ企業が使いやすそうな写真素材サイト

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

by on 2月.23, 2015, under Material

スタートアップ系企業が使いやすそうな写真素材の配布サイト。自由な服装、綺麗なオフィス、開放的な空気感、そして使うマシンはもちろんMac、といった感じの「いかにも」な写真がたくさん用意されています。Mac以外にもiPhoneの登場率も高く、Apple大好き感がジワジワと伝わってきます。ソフトウェアの使用シーンなんかの素材として使えそうです。

コメントを書く :,

[UI Design] Awesome UI – クールなUIのデザインギャラリー

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

by on 2月.20, 2015, under UI Design

クールなUIデザイン作例のギャラリーサイト。Web、MobileAppなどのUI作例がTumblrを使って紹介されています。UIそのもの以外に、作例の見せ方としても参考になるものが多いです。ただiOS前提のUIデザインにハンバーガーメニューがあるのって、なんか違和感あるんだよなぁ・・・。あれはAndroidの文化であってiOSには必要ないでしょ?とか思っちゃう。

コメントを書く :,

[Web Design] MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS – デバイスごとのブレイクポイントまとめ

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

by on 2月.20, 2015, under Web Design

メディアクエリーの、各デバイスごとのブレイクポイントをまとめた記事。レスポンシブレイアウト組む際、デバイスごとに微調整するのに使えそうです。紹介されているデバイスはiOS系では各種iPhoneとiPad、Android系ではGalaxy S3, S4, S5。まぁ一般的という意味でAppleとSamsungの各種デバイスが紹介されています。自分の場合は最近はブレイクポイント1箇所、ランドスケープでPCレイアウトで見せたい場合は767px以下、ランドスケープでもスマホレイアウトで見せたい場合は480px以下にしてます。ブレイクポイント何個も作ると作るのめんどいんですよね。

コメントを書く :,

[UI Design] AppreciateUI – クールなモバイルUIのデザインギャラリー

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

by on 2月.19, 2015, under UI Design

クールなモバイルUIのデザインギャラリーサイト。この手のサイトでは一般的な、場面ごとに分けて閲覧する事ができるタイプです。ただこのサイト場面の分け方がスゴく細かいので、求めてる場面の作例をわりと具体的に探す事ができそうです。UIデザインのネタ帳としてイイ感じです。

コメントを書く :, ,

[UI Design] 50+ Best Free PSD Flat UI Kits – フラットUIのPSD素材まとめ

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

by on 2月.19, 2015, under Material

フラットUIのPSD素材を50例以上まとめた記事。いやぁよくこれだけの量をまとめたな・・・と、まずはそこに感動です。UI素材と一言に言っても実際には色々な使用目的がありまして、ここではiPhoneやAndroidなどのモバイルApp向けのもの、PC向けのもの、Webサイトに使えそうなものなど色々と用意されています。UIデザインする時の素材探しに使えそうです。

コメントを書く :, ,

Web Services

My Profile by iddy

Twitter Status