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

Browse By

Monthly Archives: 5月 2015

[UI Design] Device Metrics – モバイル端末のディスプレイ仕様一覧

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

様々なモバイルデバイスのディスプレイスペックをまとめたサイト。Google DesignというGoogleオフィシャルサイト内にあるコンテンツですが、なぜかiOS系のデバイス情報もまとめられてます。興味深いのは、スマホやタブレット端末に加えてApple WatchやAndroid Wareといったウォッチ系端末の情報もあるという点。またそれぞれディスプレイの物理サイズやピクセル数に加え、dpiや縦横比などの情報もそろっており、コレ系のまとめページとしては情報量が多い方だと思います。Mobile Appやレスポンシブレイアウトのサイト制作時にとっても役に立ちそうです。

[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ユーザーは特にそうだけど、ダサい見た目のアプリって使いたいと思われないですからね。こういう工夫も大事ですよね。

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

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

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

[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」などに結構特徴がありますな。細身書体で可読性が高そうなので、今後使う機会も増えそうです。

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

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

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

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

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

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

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