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

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

by on 5月.28, 2015, under Material

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
  • このエントリーをはてなブックマークに追加
  • Check

by on 5月.27, 2015, under Material

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

コメントを書く :, , ,

[Prototyping] 24 Free Mockup and Wireframe Tools for Web Designers – Webのモック制作やワイヤーフレーム描きに使えるツールまとめ

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

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

Webのモックアップ制作やワイヤーフレームを描く際に使える、便利なオンラインツールをまとめた記事。ドロー系のグラフィックツール、パーツのテンプレートが揃ったモックアップ制作ツール、サイトマップ作るのに便利そうなツリー作成ツールなど色々あります。この手のオンラインツールはローカルアプリと比べても機能的に遜色が無い場合も多く、またオンラインでの共有もしやすいのが便利ですね。

コメントを書く :, ,

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

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

by on 5月.26, 2015, under Web Design

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

コメントを書く :, , ,

[Typography] Helvetica Neue vs. San Francisco: Can You Tell The Difference? – Helvetica NeueとSan Franciscoの見分けつく?

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

by on 5月.25, 2015, under Typography

Helvetica Neueというフォントと、San Franciscoというフォントを並べた時に、見分けがつくか?というクイズコンテンツ。YosemiteでシステムフォントがHelvetica Neueになって、その後Apple WatchでSan FranciscoというApple純正フォントが採用され、次のMacOSでは早速Helvetica Neueが用済みとなってSan Franciscoに統一されるんじゃねーか、という背景を知っていると楽しめますな。ちなみに自分がやってみたら75%正解でした。前半はまだ分かるものが多いけど、後半戦はさっぱり分かりません。もうどっちでもイイんじゃねーかって思うw 個人的にはHelvetica Neueの方が好きかなー。

コメントを書く :, ,

[Generator] Responsible Social Sharing Buttons – ソーシャルボタンの一括ジェネレーター

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

by on 5月.25, 2015, under Web Design

各種ソーシャルメディアへの投稿ボタンを、一括で生成してくれるジェネレーター。Facebook, Twitter, Google+, Tumblr, Pinterest, LinkedIn, Redditの7つのサービスに対応してます。基本的にShare用のボタンなので、ボタンを掲載するページのURLとその説明文を入れるだけでオッケー。ボタンのサイズも3つから選べます。統一されたデザインのボタンをまとめて作れるので便利です。

コメントを書く :,

[Web Application] waifu2x – 2次元画像の解像度を上げてくれるサイト

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

by on 5月.22, 2015, under WebApp, 未分類

解像度の低い画像をアップコンバートして、倍の大きさに拡大してくれるサイト。説明に「深層畳み込みニューラルネットワークによる二次元画像のための超解像システム」とあるように、用途としては主に2次元画像となるようです。aboutページを見ると、実際どのような結果が得られるかを見る事もできます。GIMPを使った拡大に比べて、格段に綺麗な状態なまま倍の解像度になってる様子が分かります(ボヤっとせずにカリっとした感じ)。試しに写真をぶっ込んでみましたが、細かい階調の変化が失われてイラストっぽい状態にアップコンバートされました。仕事とかで顧客から提供された画像素材が小さくて「もっと大きい画像ねぇのかよrftgyふじこ」状態な時に使えそうですねこれ。

コメントを書く :

[Web Design] Lowvision.support – 様々な視覚障害者から見たWebサイトのシミュレーター

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

by on 5月.21, 2015, under Web Design

様々な視覚障害の方がWebサイトを見た際に、どう見えるかを分かりやすくシミュレートできるサイト。対応しているのはCataracts(白内障)、Protanopia(赤色盲)、Deuteranopia(緑色盲)、Tritanopia(黄青色盲)、Monochromacy(全色覚異常)の5つ。プルダウンから簡単にシミュレートできます。ChromeやFirefoxでは動くんですが、Safariだとなぜか動作しませんでした。CSSフィルタがらみのサポートができてないのかも。バリアフリーサイトを制作する際に使えそうです。

コメントを書く :

[CSS] 20 Useful CSS Snippets for Responsive Menus – 使えるCSSスニペット

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

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

使えるCSSスニペットが20例紹介された記事。いくつかピックアップすると、ナビゲーション生成、レスポンシブレイアウトのポートフォリオ、ドロップダウンメニュー、マウスホバーアニメーション、アニメーションするハンバーガーメニュー、JSを使わないタブメニュー、パンクズ生成など。ナビゲーション類が多いですね。全てCodepenの埋め込みを使って紹介されているので、マークアップ、CSS、結果を簡単に確認できます。

コメントを書く :, , ,

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

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

by on 5月.19, 2015, under Web Design

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

コメントを書く :, , , ,

Web Services

My Profile by iddy

Twitter Status