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

Browse By

Tag Archives: 素材

[Web Design] Simple Sharing Buttons Generator – シェアボタンジェネレーター

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

シンプルなシェアボタンのジェネレーター。Facebook, Twitter, Google+, Tumblr, Pinterest, Pocket, Reddit, LinkedIn, WordPress, PinboradといったメジャーどころのSNSに対応しています。それに加え「友達にメールする」的なボタンも生成できるようです。ベースデザインの指定、SNSの選択、ボタンを貼り付けるサイトの情報を一通り入力すると、ライブプレビューとソースコードが出力されるので、あとはそれを貼り付けるだけ。デザインがシンプルで、複数のSNSボタンをまとめて出力できるので使い勝手が良さそうです。

[Font] 101 BEST FREE LOGO FONTS – ロゴデザインに使えるフォントまとめ

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

ロゴデザインに使えるクールなフォントをまとめた記事。101のフォントが紹介されてますが、どれも趣味が良くなかなかの良記事です。個人的にいくつもツボったので、ダウンロードして欧文フォントフォルダに突っ込んでおきました。いくつかロゴとして見た事のあるものがありますな。ロゴやタイポ組みする際のベースフォント選びにも使えそうです。

[Freebie] 50+ INCREDIBLE FREEBIES FOR WEB DESIGNERS, MAY 2015 – Webデザイナーのための便利な素材まとめ

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

Webデザイナーのための便利な素材をまとめた記事。50オーバーの素材が紹介されています。アイコン、印刷用テンプレート、Webテンプレート、iPhoneなどのデバイスモックアップ、ワイヤーフレームキット、UIキット、フォント、写真素材、Wordpressテーマ、HTML/CSSスニペット、jQueryプラグインなどがその内容。素材集める際に使えそうです。

[Freebie] iOS 8 App Icon Template – iOS8のApp Icon制作に役立つPSDテンプレート

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

iOS 8のアプリアイコンを作るのに役立つPSDテンプレート。iPhone向けの角丸アイコンだけでなく、Apple Watch向けの円形アイコンも一緒に作れるという点がこのテンプレートの特徴です。また、Apple Watch Appの申請時にアプリアイコン内にアルファチャンネルが含まれているとリジェクトされるようで(参考記事)、それを回避するためのアルファチャンネルリムーバーがドロップレットとして付属しています。PSDファイル見てみましたが、角丸アイコンと円形アイコンは別のスマートオブジェクト(=psb)として配置されているので、それぞれデザインする必要があります。別個にデザインできるので、同一pubよりも使いやすそうです。Apple Watchのケースも、プレビュー用に3種類用意されている点もナイス。

[Freebie] 20 Free PSDs to Mockup Your App Interface Designs – UIデザインに関するフリーのPSDモックアップまとめ

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

UIデザインをする上で役立つモックアップPSDをまとめた記事。20の作例が紹介されています。記事内ではUIデザインのためのモックアップ、iPhoneデバイスモックアップ、iPadデバイスモックアップに分けて紹介されています。メインとなるのは最初の項目だけど、どちらかというとUIパーツ類が揃ったテンプレートというよりは、製品のUIをより魅力的にユーザーに見せるためのデザイン作例という印象です。こんな感じの見せ方ってクールでしょ?的な。iOSユーザーは特にそうだけど、ダサい見た目のアプリって使いたいと思われないですからね。こういう工夫も大事ですよね。

[Web Design] Use Apple’s New San Francisco Font on Your Website! – Appleの新フォントSan FranciscoをWebで使う方法

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

Appleの新しいTypeface、San FranciscoをWebで使う方法が紹介されています。サイト内ではWebフォントがダウンロードでき、CSSでのfont-family指定方についても記述されています。また白地に黒字黒地に白字のサンプルページも用意されています。ダウンロードファイルにはWOFFやSVG以外にTTF形式も同梱されているので、ローカル環境で使いたいという用途もイケます。San Francisco、「O」や「C」などに結構特徴がありますな。細身書体で可読性が高そうなので、今後使う機会も増えそうです。

[Web Design] 50 CSS and JavaScript Tools, Frameworks and Libraries from 2015 – CSS, JSに関するツールやフレームワークをまとめた記事

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

CSSやJSに関するツールやフレームワーク、ライブラリなどを50個まとめた記事。2015年の、とあるので、比較的最近のものばかりが集められているようです。記事内でカテゴリ分けされていて、上からCSSツール、レスポンシブレイアウトのためのWebフレームワーク、マテリアルデザインのフレームワーク、ちょっとしたCSSツール、JSライブラリ・フレームワーク、Webアプリとなっています。こういう記事って、ダラダラ見てるだけでも新しい発見があったりしますね。

[Javascript] Lightcase – シンプルなModal表示JS

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

シンプルな動きと装飾のModal表示用の、jQueryプラグイン。いわゆるLightbox亜種ですね。レスポンシブレイアウトにも対応しているようです。クリックで表示され、✕ボタン押下やescキーで消えます。個人的にはescキーが効くのが好印象。複数画像のスライドショーにも対応しています。作りがシンプルで挙動も品が良いので、使い勝手が良さそうです。