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

Browse By

Monthly Archives: 2月 2015

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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