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

Browse By

[CSS] Simple CSS Media Queries – デバイスごとのメディアクエリー生成サイト

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

デバイスごとにメディアクエリーを生成してくれる便利なサイト。例えばiPhone 6 Plusを選ぶと、max-width : 720px and max-height : 1280pxという形でCSSを出力してくれます。デバイスキメ打ちでメディアクエリー書きたい時に便利ですね。またサイト上部には一般的なスマホやタブレット向けのメディアクエリー生成ボタンも用意されており、またOSごとに抽出する事もできます。レスポンシブレイアウトでコーディングする時に役立ちそうです。

[CSS] 18 Simple Styles for Horizontal Rules (hr CSS Design) – 罫線デザインの作例

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

罫線のデザイン作例。hrタグに対してCSS適用するだけなので簡単に導入できます。自分の場合Webで罫線デザインするのって結構やりかた忘れるので(borderだっけheightだっけみたいな)、これ系のコードスニペット用意しておくとサクっと使えるのでわりと重宝してます。地味ですけどね。けど大事ですよねこういうネタ帳。

[Web App] Launchaco – 空きドメインや、SNSの空きアカウントを一括検索してくれるサイト

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

未登録の空きドメインや、SNSでの空きアカウントなどを一括で検索してくれる便利なサイト。新規サービスやWebサイト立ち上げる時にココで検索しておけば、後になって「サービス名のTwitterアカウント空いてなかったー!」的なギャース感を回避できそうです。ドメインについてはかなりマイナーなTLDまで確認してくれます(.ninjaなんてあるんだ・・・)。あとついでにロゴタイプもいくつか作ってくれます。こういうツールとってもナイスです。

[Mockup] iOS 10 GUI 2.0 – iOS 10のPSDとSketchテンプレート

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

iOS 10のGUIテンプレート。PSDとSketchのフォーマットで配布されています。昨日ちょうど正式版公開されましたしね。わたくし初期化厨でして、メジャーアップデートのタイミングで毎年iOSデバイスを初期化しております。昨日iPhone 6 Plusを初期化&iOSインストールしたんですが、これやると新品みたいにサクサクになるので超快適でございます。iPhone 7 Plus予約したけど、まだ6で戦えるんじゃないかって思うくらい。まぁ初期化した後のAppインストール大会とかスゲぇ面倒なんですけどね。

[Web Design] 75 of the Smartest Resources for Web Designers – Webデザイナーのためのリソースまとめ

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

Webデザイナーのためのリソースがカテゴリごとにまとめられた記事。イメージとビデオ(イメージビデオではない)、アイコン、フォント、カラー、ネタ帳、モックアップとプロトタイピング素材、Webサイトビルダー、コミュニケーションツール、ラーニングコンテンツなどの内容が紹介されています。こういう記事ってちょいちょいありますが、リソースって時期によってホットなものが移り変わるので、自分の情報リソースをアップデートしたい時なんかに便利ですね。

[iPhone 7] MVNO回線移行のための試算表作りました

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

さぁ発表されましたiPhone 7。今回はどちらかというとビッグマイナーチェンジって感じですけど、基本的に偶数年にあいぽん買い換える自分は買うつもりです。で、このタイミングでMVNO回線に移行しようとしてる人って結構多いと思うので、Googleスプレッドシートで試算表を作りました。1ヶ月あたりの通信費に今使ってる回線費用とMVNOのプランを入力して、欲しいiPhoneの値段を選べば、2年を通して支払う総額が出るようになっています。あと必要に応じて下取り金額は調整してください。自分はmineo回線使おうと思ってるのですが、今のままau回線+機種変ナシの状態と、AppleからSIMフリー機買ってMVNOで2年運用するのとであまり変わらない金額になりました。
表内にはすでにいくつか数値が入っていますが、今持ってる機種やMVNOの会社やプラン、今のキャリアなどの条件によって色々変わると思うので、そこは各々調整してください。スプレッドシート内のメニュー、「ファイル>コピーを作成」から自分のGoogle Driveにコピーしてお使いください。

[Typography] Typography Cheatsheet – あの文字どうやって出すの?って時に便利なチートシート

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

文字入力してる時に「あの文字どうやって入力するの?」ってなる事、たまにありますよね。記号とかちょっと変わった文字とか、ウムラウト付きのアレとか。そんな時に便利なチートシートです。入力したいだけならコピペして使えますし、何度も入力するならキーストロークも知る事ができます。マルCとかマルR、あとTMマークとか通貨記号なんか頻度高そうです。ちなみにMacユーザーなら好んで使いたい「」アップルマークは、「Shift + Option + k」で入力できます。これ豆な。

[Game] GraphicGraphics – ゲームのUIやコンセプトアートを紹介するブログ

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

ゲームのUIやオープニングムービー、コンセプトアート、ロゴデザインなどを紹介するTumblrブログ。デザイナーの目線でビデオゲームを見てるので、ゲームデザインやグラフィックデザインの参考になります。好きなゲームのコンセプトアートにハァハァできるタイプの人なんかにもオススメ。The Last of Usのこのアートワークとか、鼻血5リットル噴射するくらいかっこいいです。ちなみに俺はフロントミッションのヴァンツァーデザインとか見てるだけで超ハァハァします。Evolvedで大コケして以来音沙汰無いですけどね・・・。